python全栈学习--day49(超链接导航栏案例,background,定位,z-index,iconfont使用)

上节问题：

浮动：是CSS中布局最多的一个属性

有浮动，一定要清楚浮动
浮动不是一个元素单独浮动，要浮动一起浮动

清楚浮动四种方式：
1.给符合子添加高度，一般导航栏
2.给浮动元素后面加一个空的块标签
	并且设置cleanr:both
3.伪元素清除法
	给元素设置
	.clearfix:affter{
		content:'.',
		display:block;
		clear:both;
		height:0;
		visibiable:hidden
	}
4.给父元素overflow:hidden

块元素与行内元素的转换

块---->行内 display:inline
行内---->display:block

行内----->行内块 display：inline-block; input


标准下的盒子居中：
	1.一定要有明确的width
	2.margin：0 auto
	3.文本居中  text-align:center;

如果盒子浮动了,不浮动的盒子，一定要善于使用父padding，而不是margin


margin塌陷问题：
	标准的盒，垂直方向会出现塌陷问题，这个问题没法解决，这种叫‘奇技淫巧’
	盒子浮动了，垂直方向上不出现任何问题
    水平方向，不管是标准流下的盒子还是浮动的盒子，都不会出现任何问题
    文本属性：
    text-align:设置文本的对齐方式
    text-decoration: 设置文本的装饰
    text-indent: 设置首字母缩进  em
 
    line-height: 一行的高度 
 
    font-size字体大小一定不要大于行高
 
    font-size:16px;
    line-height:60px;
 
    如果让单行文本垂直水平居中：
 
    line-height=盒子的height,text-align:center;

文本属性和字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
             20em;
            height: 5em;
            border: 1px solid green;
            color: red;
            /*文本首行缩进*/
            text-indent: 1em;
            /*字体属性*/
            font-size: 20px;
            font-weight: bolder;
            /*字体要加多个，用逗号隔开。防止别人的电脑上，没有对应的字体。
            首先加载的字体为微软雅黑，如果没有，就从后面找。*/
            font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
        }
    </style>
</head>
<body>
    <div>韩雪，赵丽颖，宋茜</div>
</body>
<html>

网页效果：

多行文本垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
             350px;
            height: 200px;
            background-color: pink;
            margin: 100 auto;
            color: red;
            line-height: 40px;
            font-weight: bolder;
            font-size: 20px;
            /*先计算字体大小，再调整padding的参数*/
            padding-top: 40px;
        }
    </style>
</head>
<body>
    <div>赵丽颖，1987年10月16日出生于河北省廊坊市，中国内地影视女演员。2006年，因获得雅虎搜星比赛冯小刚组冠军而进入演艺圈</div>
</body>
<html>

网页效果：

分析，由于总高度为200。文本有4行，每行高度为40。那么4行的高度为160，所以padding-top的40。

正好等于200。实现了多行居中效果！

一、超链接导航栏案例

直接上代码了

html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .nav{
             960px;
            overflow: hidden;
            margin: 50px auto;
            background-color: purple;
            /*设置圆角*/
            border-radius: 5px;
        }
        .nav ul li{
            float: left;
             160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .nav ul li a{
             160px;
            height: 40px;
            display: block;
            color: white;
            font-size: 14px;
            text-decoration: none;
        }
        /*a标签除外，不继承父元素的color*/
        .nav ul li a:hover{
            background: yellow;
            color: green;
            /*添加下划线效果*/
            text-decoration: underline;
        }

    </style>
</head>
<body>
<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>


</body>
</html>

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

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

网页效果：

二、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属性表示背景颜色

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
             200px;
            height: 200px;
            font-weight: bolder;
            /*单词  十六进制 rgb*/
            background-color: rgb(255,0,0);
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

网页效果：

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

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
             600px;
            height: 300px;
            /*背景图片*/
            background-image: url("images/zly.jpg");
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

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

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

属性值：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

背景图片仅显示一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
             600px;
            height: 300px;
            /*边框*/
            border: 1px solid red;
            /*背景图片*/
            background-image: url("images/zly.jpg");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

网页效果：

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

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
             600px;
            height: 300px;
            /*边框*/
            border: 1px solid red;
            /*背景图片*/
            background-image: url("images/zly.jpg");
            padding: 100px;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

网页效果：

repeat应用案例

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
             600px;
            height: 300px;
            /*边框*/
            border: 1px solid red;
            /*背景图片*/
            background-image: url("images/zly.jpg");
            background-repeat: no-repeat;
            /*表示x坐标为100，y坐标为0*/
            background-position: 200px 0px;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

网页效果：

雪碧图技术（精灵图技术）

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 雪碧调用的图片不能被打印

切图

必须使用谷歌浏览器打开淘宝主页，搜索华为P20，鼠标放到搜索框位置，右键检查

滑动精度条，找到右边的图片，右键Open new in tab

就会打开图片连接

https://img.alicdn.com/tps/i2/TB1Z4WGMpXXXXbyaXXX6sGuHVXX-458-458.png

下面开始演示如何切一个搜索，如下图红包边框的搜索

先下载完整的图片，使用ps打开，获取搜索图片的坐标(注意，是下图箭头的坐标)

从坐标中可以看出x和y的坐标为6，124。图片的宽度和高度分别为80，34

注意：css中的background 设置的坐标必须为负数

因为background的坐标和平常见到的坐标不一样，如下图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
             80px;
            height: 34px;
            /*坐标必须为负数*/
            background: url("images/taobao.png") no-repeat -5px -124px;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

网页效果：

通天banner

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

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

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

举例-小米金融：

打开小米金融页面

https://jr.mi.com/index.html

下载首页最大的图片，链接为：

https://fundres.mipay.com/res/pc/images/index_banner-744e8a4eb7.jpg

发现它的尺寸为2560x640，但是一般笔记本的分辨率，最大为1366。

那么如何保证图片居中，而不失真呢？

使用background，关键性参数center top，表示水平顶部居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
             100%;
            height: 640px;
            /*center top表示 水平顶部居中*/
            background: url("images/banne.jpg") no-repeat center top;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

网页效果：

background-attachment

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

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
             1000px;
            height: 1000px;
            background-image: url("images/taobao_logo.png");
            border: 1px solid red;
            background-repeat: no-repeat;
            background-position: right left;
            /*固定背景图片*/
            background-attachment: fixed;
        }
    </style>
</head>
<body>

<div></div>
</body>
</html>

网页效果：

拖动右边的进度条，logo始终展示。就好像右边烦人的小广告一样。

三、定位

定位有三种：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            border: 1px solid green;
        }
        div{
             200px;
            height: 200px;
            background-color: red;
            /*margin-top: 50px;*/
        }
    </style>
</head>
<body>
<div class="wrap">

</div>

</body>
</html>

网页效果：

如果想让红色方块下移50px，我们首先想到的是使用margin-top 50px

打开代码注释的部分，刷新页面。会发现，body被撑开了。这不是我们想要的，这个时候，需要用到相对定位。

它不会撑开body

相对定位

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

现象和使用：

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

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

特性：

1.不脱标

2.形影分离

3.老家留坑（占着茅房不拉屎，恶心人）

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

用途：

1.微调元素位置

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

参考点：

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

使用相对定位，移动红色方块50像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            border: 1px solid green;
        }
        div{
             200px;
            height: 200px;
            background-color: red;
            /*相对定位，相对自己原来的位置，跟父级没有任何关系*/
            position: relative;
            /*移动50px*/
            top: 50px;
        }
    </style>
</head>
<body>
<div class="wrap">

</div>

</body>
</html>

网页效果：

它没有撑开body，只是超出范围了。

老家留坑现象：

先看3个方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
             100px;
            height: 100px;
            background-color: red;
        }
        .box2{
             100px;
            height: 100px;
            background-color: green;
        }
        .box3{
             100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
</body>
</html>

网页效果：

移动绿色方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
             100px;
            height: 100px;
            background-color: red;
        }
        .box2{
             100px;
            height: 100px;
            background-color: green;
            position: relative;
            left: 100px;
        }
        .box3{
             100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
</body>
</html>

网页效果：

可以看到，原来的位置占用着，黄色方块挤不上去。这就是老家留坑现象，它影响我们页面的布局

不要用相对定位做遮盖现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
             100px;
            height: 100px;
            background-color: red;
        }
        .box2{
             100px;
            height: 100px;
            background-color: green;
            position: relative;
            left: 50px;
            top: 50px;
        }
        .box3{
             100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
</body>
</html>

网页效果：

相对定位的用途：

让搜索框和提交按钮在一条水平线显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .where{
            font-size: 30px;
        }
        .search{
             100px;
            height: 40px;
            position: relative;
            top: -4px;
        }
    </style>
</head>
<body>

<div>
    <form action="" method="post">
        <input type="text" class="where">
        <input type="submit" class="search" value="搜索">
    </form>
</div>

</body>
</html>

网页效果：

绝对定位

特性：

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

参考点(重点)：

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

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

举例，使用top

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
             400px;
            height: 400px;
            padding: 100px;
            background-color: yellow;
            /*绝对定位*/
            position: relative;
        }
        .container{
             500px;
            height: 500px;
            background-color: green;
            position: relative;
            padding: 20px;
        }
        .box1{
             200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 100px;
        }
    </style>
</head>
<body style='height: 2000px;'>
<div class="wrap">
    <div class="container">
        <div class="box1">
        </div>
    </div>
</div>
</body>
</html>

网页效果：

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

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

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

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

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

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

作用：页面布局常见的“父相子绝”，一定要会！！！！

绝对定位的盒子居中

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

当做公式记下来吧！

    *{
            padding: 0;
            margin: 0;
        }
        .box{
             100%;
            height: 69px;
            background: #000;
        }
        .box .c{
             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.小广告

使用简单的js完成回到顶部功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
             140px;
            height: 100px;
            background-color: pink;
            position: fixed;
            bottom: 0;
            right: 50px;
            line-height: 100px;
            text-align: center;
            color: white;
            border-radius: 10px;
            font-weight: bolder;
            font-size: 25px;
        }
        p a {
          text-decoration: none;
        }
        .wrap img {
            display: block;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div class="wrap">
    <p>
        <a href="#">回到顶部</a>
    </p>
    <img src="images/zly.jpg" alt="">
    <img src="images/zly.jpg" alt="">
    <img src="images/zly.jpg" alt="">
</div>

<script>
    $(function(){
        $('p').click(function(){
            $('html').animate({
                "scrollTop":0
            },1000)
            // scrollTop表示回到顶部
            // 1000表示1秒,单位为毫秒
        })
    })
</script>
</body>
</html>

网页效果：

z-link 应用--固定导航栏

要求网页的图片和文字内容，不能覆盖导航栏。

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        body {
            padding-top: 40px;
        }

        .nav {
             100%;
            height: 40px;
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99999;
        }

        .wrap {
             960px;
            overflow: hidden;
            margin: 0px auto;
            background-color: purple;
            border-radius: 5px;

        }

        .wrap ul li {
            float: left;
             160px;
            height: 40px;
            line-height: 40px;
            text-align: center;

        }

        .wrap ul li a {
             160px;
            height: 40px;
            display: block;
            color: white;
            font-size: 14px;
            text-decoration: none;

        }

        .wrap ul li a:hover {
            background: yellow;
            color: green;
            text-decoration: underline;
        }

        p {
            position: relative;
        }

    </style>
</head>
<body style="height: 3000px">
<div class="nav">
    <div class="wrap">
        <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>
</div>

<!-- <div class="wrap">内容</div> -->
<img src="images/zly.jpg" alt="">
<img src="images/zly.jpg" alt="">
<img src="images/zly.jpg" alt="">
<img src="images/zly.jpg" alt="">
<p>哈哈哈哈哈哈哈哈</p>
<img src="images/zly.jpg" alt="">
<img src="images/zly.jpg" alt="">
<img src="images/zly.jpg" alt="">


</body>
</html>

网页效果：

相关阅读:
SQL 查询两个时间段是否有交集的情况三种写法
 c# 时间区间求并集
 uniapp 身份证识别微信百度图片前端压缩图片后端压缩
 Git命令大全
 构建android studio项目
 如何查tomcat进程和杀死进程
 mysql 备份还原不了
 解决git extensions每次要输入用户名和密码
 JS string 转 Byte64[]
Git cmd
原文地址：https://www.cnblogs.com/haowen980/p/9101900.html

python全栈学习--day49(超链接导航栏案例,background,定位,z-index,iconfont使用)

一、超链接导航栏案例

二、background

先来讲讲颜色表示法

background-color属性表示背景颜色

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

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

背景图片仅显示一次

repeat应用案例

雪碧图技术（精灵图技术）

使用雪碧图的好处：

不足 ：

切图

通天banner

举例-小米金融：

background-attachment

三、定位

相对定位

现象和使用：

特性：

用途：

参考点：

老家留坑现象：

不要用相对定位做遮盖现象

相对定位的用途：

绝对定位

特性：

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

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

绝对定位的盒子居中

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

固定定位

特性:

参考点：

使用简单的js完成回到顶部功能

z-link 应用--固定导航栏

不足：

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