一、超链接导航栏案例

html结构

<div class="nav">
        <ul>
            <li>
                <a href="">路飞学城</a>
            </li>
            <li>
                <a href="">老男孩</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
        </ul>
    </div>

写好上面的结构代码之后,也就是将我们页面展示的内容显示了,但是我们此时要利用我们学过的知识点来布局页面

首先我们要做导航栏,并排显示元素,第一想 浮动,想到使用浮动之后,一定记得清除浮动元素。

css代码如下:

*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .nav{
            width: 960px;
            /*height: 40px;*/
            overflow: hidden;
            margin: 100px auto ;
            background-color: purple;
            /*设置圆角*/
            border-radius: 5px;
        }
        .nav ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .nav ul li a{
            display: block;
            width: 160px;
            height: 40px;
            color: white;
            font-size: 20px;
            text-decoration: none;
            font-family: 'Hanzipen SC';
        }
        /*a标签除外,不继承父元素的color*/

        .nav ul li a:hover{
            background-color: red;
            font-size: 22px;
        }

二、background

先来讲讲颜色表示法

一共有三种:单词、rgb表示法、十六进制表示法

rgb:红色 绿色 蓝色 三原色
光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。
用逗号隔开,r、g、b的值,每个值的取值范围0~255,一共256个值。
如果此项的值,是255,那么就说明是纯色:

黑色:

光学显示器,每个元件都不发光,黑色的。

白色:

颜色可以叠加,比如黄色就是红色和绿色的叠加:

再比如:

就是红、绿、蓝三种颜色的不同比例叠加。

16进制表示法
红色:

所有用#开头的值,都是16进制的。
#ff0000:红色
16进制表示法,也是两位两位看,看r、g、b,但是没有逗号隔开。
ff就是10进制的255 ,00 就是10进制的0,00就是10进制的0。所以等价于rgb(255,0,0);
怎么换算的?我们介绍一下
我们现在看一下10进制中的基本数字(一共10个):
0、1、2、3、4、5、6、7、8、9

16进制中的基本数字(一共16个):
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

16进制对应表:
十进制数 十六进制数
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f

16 10
17 11
18 12
19 13
……
43 2b
……
255 ff

十六进制中,13 这个数字表示什么?
表示1个16和3个1。 那就是19。 这就是位权的概念,开头这位表示多少个16,末尾这位表示多少个1。
小练习:
16进制中28等于10进制多少?
答:2*16+8 = 40。

16进制中的2b等于10进制多少?
答:2*16+11 = 43。

16进制中的af等于10进制多少?
答:10 * 16 + 15 = 175

16进制中的ff等于10进制多少?
答:15*16 + 15 = 255

所以,#ff0000就等于rgb(255,0,0)

等价于:

所以,任何一种十六进制表示法,都能够换算成为rgb表示法。也就是说,两个表示法的颜色数量,一样。

十六进制可以简化为3位,所有#aabbcc的形式,能够简化为#abc;
比如:

等价于

比如:

等价于

只能上面的方法简化,比如

无法简化!
再比如

无法简化!

要记住:
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰

background-color属性表示背景颜色

background-img:表示设置该元素的背景图片

那么发现默认的背景图片,水平方向和垂直方向都平铺

background-repeat:表示设置该元素平铺的方式

属性值:

描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit

规定应该从父元素继承 background-repeat 属性的设置。

给元素设置padding之后,发现padding的区域也会平铺背景图片。

repeat应用案例

还是上面那个超链接导航栏的案例,我们给body设置平铺的图片,注意:一定找左右对称的平铺图片,才能实现我们要的效果

background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像(由 background-image 定义)的位置

属性值:

描述
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

如果您仅规定了一个关键词,那么第二个值将是"center"。

默认值:0 0;

这两个值必须挨在一起。

雪碧图技术(精灵图技术)

CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理:
只有一张大的合并图, 每个小图标节点如何显示单独的小图标呢?

其实就是 截取 大图一部分显示,而这部分就是一个小图标。

使用雪碧图的好处:

1、利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因; 
2、CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 
3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。 
4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便

不足:

1)CSS雪碧的最大问题是内存使用
2)拼图维护比较麻烦
3)使CSS的编写变得困难
4)CSS 雪碧调用的图片不能被打印

我们可以使用background综合属性制作通天banner,什么是通天banner呢,就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大,

那么我们可以此属性来制作通天banner。

background:  red  url('./images/banner.jpg')  no-repeat   center top;

background-attach

设置fixed之后,该属性固定背景图片不随浏览器的滚动而滚动

三、定位

定位有三种:

1.相对定位 2.绝对定位 3.固定定位

这三种定位,每一种都暗藏玄机,所以我们要一一单讲。

相对定位

相对定位:相对于自己原来的位置定位

现象和使用:

1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别。

2.设置相对定位之后,我们才可以使用四个方向的属性: top、bottom、left、right

特性:

1.不脱标

2.形影分离

3.老家留坑(占着茅房不拉屎,恶心人)

所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

用途:

1.微调元素位置

2.做绝对定位的参考(父相子绝)绝对定位会说到此内容。

参考点:

自己原来的位置做参考点。

绝对定位

特性:

1.脱标 2.做遮盖效果,提成了层级。设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高。

参考点(重点):

一、单独一个绝对定位的盒子

1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

二、以父辈盒子作为参考点

1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。

2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点

3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点

注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。

还要注意,绝对定位的盒子无视父辈的padding

作用:页面布局常见的“父相子绝”,一定要会!!!!

绝对定位的盒子居中

当做公式记下来吧!

*{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 69px;
            background: #000;
        }
        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

            /*设置绝对定位之后,margin:0 auto;不起任何作用,如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中*/
        }

固定定位

固定当前的元素不会随着页面滚动而滚动

特性:

1.脱标 2.遮盖,提升层级 3.固定不变

参考点:

设置固定定位,用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述,那么是以浏览器的左下角为参考点

作用: 1.返回顶部栏 2.固定导航栏 3.小广告

四、z-index

z-index

这个东西非常简单,它有四大特性,每个特性你记住了,页面布局就不会出现找不到盒子的情况。

    • z-index 值表示谁压着谁,数值大的压盖住数值小的,
    • 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
    • z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
    • 从父现象:父亲怂了,儿子再牛逼也没用

day42-43 绝对定位 相对定位的更多相关文章

  1. HTML基础--position 绝对定位 相对定位 锚点链接

    position 定位属性,检索对象的定位方式 一.语法:position:static /absolute/relative/fixed 取值: 1.static:默认值,无特殊定位,对象遵循HTM ...

  2. 前端HTML 定位position 绝对定位 相对定位

    >>>position:absolute;绝对定位 当前元素相对于父级元素位置[该父级元素必须也设定了position,不然会继续往上找祖先元素,直到body为止]的定位 >& ...

  3. ie6 ie7 绝对定位 相对定位 层被遮住

    relative 上加上z-index有多个,则z-index递减, absolute层显示则不会被其它标签挡住.

  4. css之position相对定位和绝对定位

    一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...

  5. 微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径

    微信小程序 - 相对定位和绝对定位 相对定位relative,绝对定位absolute 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个父级元素进行定位. 相对定位 ...

  6. CSS相对定位|绝对定位(五)之z-index篇——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1855 补充于2016 ...

  7. CSS的相对定位和绝对定位(position)

    什么是定位呢? 定位(position),故名思议,就是确定元素在页面中的位置. CSS的常用定位有两种,一种是相对定位,一种是绝对定位. 下面我们看例子 <html> <head& ...

  8. css 垂直水平居中总结

    一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...

  9. css基础2

    标准流(normalflow) ◆元素默认的显示方式都是按照标准流的方式显示 ◆块级元素默认独占一行显示===>标准流显示方式 ◆行内元素在一行上显示===>    标准流的显示方式 浮动 ...

随机推荐

  1. Vue:(五)axios

    Axios是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.axios主要是用于向后台发起请求的,还有在请求中做更多可控功能.官方不再维护vue-resource,推 ...

  2. [数据结构]P1.1 链表结构

    * 注: 本文/本系列谢绝转载,如有转载,本人有权利追究相应责任. 2019年4月8日 Stan Zhang 2019年4月8日  格物致知,经世致用. [面试题]1.为什么要用链表? 数组具有的缺陷 ...

  3. ionic 解决APP安装到android上 状态栏显示黑色

    首先移除原本的 cordova-plugin-statusbar 运行命令: cordova plugin rm cordova-plugin-statusbar 最后需要重新安装: cordova ...

  4. java poi excel操作 下拉菜单 及数据有效性

    1 private InputStream updateTemplateStyleHSSF(InputStream inputStream,CsCustCon csCustCon) throws IO ...

  5. Http头:Expires,Cache-Control,Last-Modified,ETag

    Expires:过期时间          el:Expirse:Fri,30 Oct 1998 14:19:41 Cache-Control:缓存控制         el:Cache-Contro ...

  6. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  7. jvm回收器回收过程一:CMS和 G1的初认知(持续更新中)

    CMS:介绍: 1.CMS(Concurrent Mark-Sweep)是以牺牲吞吐量为代价来获得最短回收停顿时间的垃圾回收器.对于要求服务器响应速度的应用上,这种垃圾回收器非常适合. 在启动JVM参 ...

  8. less的基本语法

    参考:http://old.zhufengpeixun.cn/qianduanjishuziliao/mobileDevelopment/2016-07-22/528.html

  9. spoj mgame

    题解: f[i][j]表示先后手最大差 g[i][j]表示在最大差的时候是否有后手没得走 代码: #include<bits/stdc++.h> using namespace std; ...

  10. tensorFlow(六)应用-基于CNN破解验证码

    TensorFlow基础见前博客 简介 传统的验证码识别算法一般需要把验证码分割为单个字符,然后逐个识别.本教程将验证码识别问题转化为分类的问题,实现对验证码进行整体识别. 步骤简介 本教程一共分为四 ...