css第六天

一、a标签

1、a标签的伪类

a：link 鼠标未点击时的状态
a：visited 鼠标点击之后的状态
a：hover 鼠标悬停时的状态
a：active 鼠标激活时的状态（鼠标点击不松手）

div.box表div 标签有一个box类，这个box类的属性之间渲染在页面。而我们现在a标签的伪类a:hover，
样式不会直接渲染在页面上。只有当用户有某种行为时才会触发这的状态。这就是“伪类”。
伪类的权重和类的权重一样。

2、a标签的伪类顺序不能颠倒

我们正确的顺序：

1 a:link

2 a:visited

3 a:hover

4 a:active

爱恨准则：love hate

二、背景

1、background-color（背景色）

2、background-image（背景图）

1 background-image:url("images/hai.jpg");

3、background-repeat（重复模式）

属性值：

repeat：重复（默认值）

no-repeat：不重复

repeat-x:在水平方向（X轴）重复

repeat-y:在垂直方向（Y轴重复）

4、background-position（背景图片在整个背景图的位置）

l 像素表示法：

background-position：X方向的偏移 Y方向的偏移；

第一个参数：100px 表示背景图的左上角相对于整个背景图的水平方向的偏移量；

第二个参数：150px 表示背景图的左上角相对于整个背景图的垂直方西的偏移量；

精灵图技术：css sprite技术。

我们知道任何一张图片都会发起一次http请求，我们页面有很多小图片或者小图标，都会发起一次http请求，就降低网页的加载速度。这时我们可以把这些小图片或者是小图标放在一张图片，利用宽度和高度以及背景位置得到任意的小图片。这就是我们精灵图技术。

l 单词表示法：

background-postion:X轴 Y轴；

X轴：left right center;

Y轴：top bottom center;

l 百分比表示法

居中：

1 background-position:50% 50%;

5、background-attechment（背景是否固定）

属性值：

scroll：背景跟随页面滚动（默认值）

fixed:背景固定（背景不跟随页面滚动）

复合写法：

1 background:lightblue url(images/bg3.jpg) no-repeat center top fixed;

6、背景的应用

l 文字换图片

h1标签书写logo为了提高SEO，需要在h1内部书写文字，同时不能让用户看到。所以需要使用背景图。

1 <style type="text/css">

2 *{

3 margin: 0;

4 padding: 0;

5 }

6 div{

7 width: 1200px;

8 height: 70px;

9 background-color: #5B16BC;

10 margin: 50px auto;

11 }

12 div h1{

13 width: 230px;

14 height: 70px;

15 float: left;

16 background-image: url(images/huawei.png);

17 }

18 div h1 a{

19 display: block;

20 width: 230px;

21 height: 70px;

22 /* 常用的方法*/

23 text-indent: -9999em;

24 /* 这个不常用*/

25 /*

26 line-height:200px;

27 overflow: hidden;

28 */

29 }

30 </style>

31 </head>

33 <body>

34 <div>

35 <h1>

36 <a href="http://www.yuanbaojr.com/f/site/index">元保金融</a>

37 </h1>

38 </div>

39 </body>

l 用padding挤出背景图的位置

一般列表项都有先导符号。做法：用padding撑出先到符号的宽度，然后给添加到背景。

1 <style type="text/css">

2 *{

3 margin: 0;

4 padding: 0;

5 }

6 ul{

7 list-style: none;

8 }

9 div{

10 margin: 50px auto;

11 border: 1px solid #333;

12 width: 400px;

13 height: 200px;

14 }

15 div ul{

16 font-size: 18px;

17 line-height: 34px;

18 font-family: "Microsoft Yahei";

19 padding-top: 14px;

20 }

21 div ul li{

22 background-image: url(images/wujiaox.png);

23 background-repeat: no-repeat;

24 padding-left: 30px;

25 background-position: left center;

26 /* 也可简写*/

27 /* background: url(images/wujiaox.png) no-repeat left center;*/

28 }

29 </style>

30 </head>

32 <body>

33 <div>

34 <ul>

35 <li>新闻新闻新闻新闻</li>

36 <li>新闻新闻新闻新闻</li>

37 <li>新闻新闻新闻新闻</li>

38 <li>新闻新闻新闻新闻</li>

39 <li>新闻新闻新闻新闻</li>

40 </ul>

41 </div>

三、定位

定位：相对定位，绝对定位，固定定位。

脱标：浮动，绝对定位，固定定位。

position:定位

属性值：relative(相对定位) absolute(绝对定位) fixed(固定定位)

3.1 相对定位

position：relative；

相对定位是相对于元素原位置进行的偏移

相对定位没有脱离标准流，原位置保留，新盒子是相对于原位置进行的偏移。

相对定位有4个方向的值可以偏移：

水平：left,right

垂直：top,bottom

3.2 绝对定位

绝对定位脱离标准流，原来的位置让给其他标准流的元素。

绝对定位也是四个方向偏移：left，right/top,bottom

3.3 不针对祖先元素的参考点

有top参与时，相对于页面的左上角（右上角）偏移。

有bottom参与时相对于首屏的左下角（右下角）

3.4 针对祖先元素的参考元素

参考元素：距离最近且有定位的元素。

3.5 参考顶点

绝对定位的参考顶点是border以内的四个顶点（背景的四个顶点，无视父盒子的padding）

3.6 压盖效果

压盖效果用绝对定位书写（不用浮动）

1 <style type="text/css">

2 *{

3 margin: 0;

4 padding: 0;

5 }

6 ul,ol{

7 list-style: none;

8 }

9 a{

10 text-decoration: none;

11 color: #444444;

12 }

13 .box{

14 width:400px;

15 height: 400px;

16 padding: 50px;

17 border: 5px solid #7E7E7E;

18 margin: 50px auto;

19 position: relative;

20 }

21 .box .son1{

22 width: 400px;

23 height: 400px;

24 background-color: orange;

25 }

26 .box .son2{

27 width: 200px;

28 height: 60px;

29 background-color:purple;

30 position: absolute;

31 top: 100px;

32 left: 50px;

33 color: #FDFDFD;

34 }

35 </style>

36 </head>

38 <body>

39 <div class="box">

40 <div class="son1"></div>

41 <div class="son2">压盖效果，位置可随便调整</div>

42 </div>

43 </body>

3.7 绝对定位的元素的水平居中

绝对定位的元素margin:0 auto;失效

1 <!doctype html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>无标题文档</title>

6 <style type="text/css">

7 *{

8 margin: 0;

9 padding: 0;

10 }

11 ul,ol{

12 list-style: none;

13 }

14 a{

15 text-decoration: none;

16 color: #444444;

17 }

18 .box{

19 width:400px;

20 height: 400px;

21 padding: 50px;

22 border: 5px solid #7E7E7E;

23 margin: 50px auto;

24 position: relative;

25 }

26 .box .son1{

27 width: 400px;

28 height: 400px;

29 background-color: orange;

30 }

31 .box .son2{

32 width: 200px;

33 height: 60px;

34 background-color:purple;

35 position: absolute;

36 top: 100px;

37 /* 水平居中就是在压盖效果上把水平方向设置成50%，然后拉回该盒子自身宽度的一半（盒子占有宽度）*/

38 left: 50%;

39 margin-left: -100px;

40 color: #FDFDFD;

41 }

42 </style>

43 </head>

45 <body>

46 <div class="box">

47 <div class="son1"></div>

48 <div class="son2"></div>

49 </div>

50 </body>

51 </html>

3.8 应用

“子绝父相”：子盒子设置绝对定位，父盒子设置为相对定位。（也有子绝父绝，子绝父固）

因为相对定位结构比较固定。作为绝对定位的参考盒子。

1 <style type="text/css">

2 *{

3 margin: 0;

4 padding: 0;

5 }

6 ul,ol{

7 list-style: none;

8 }

9 a{

10 text-decoration: none;

11 color: #444444;

12 }

13 .nav{

14 width: 960px;

15 height: 40px;

16 margin: 50px auto;

17 }

18 .nav ul li{

19 float: left;

20 width: 120px;

21 height: 40px;

22 position: relative;

23 }

24 .nav ul li a{

25 display: block;

26 width: 120px;

27 height: 40px;

28 background-color: green;

29 line-height: 40px;

30 text-align: center;

31 color: #FFFFFF;

32 }

33 .nav ul li a:hover{

34 border-top: 5px solid #E59600;

35 position: absolute;

36 top:-5px;

37 left: 0px;

38 }

39 </style>

40 </head>

42 <body>

43 <div class="nav">

44 <ul>

45 <li><a href="#">首页</a></li>

46 <li><a href="#">首页</a></li>

47 <li><a href="#">首页</a></li>

48 <li><a href="#">首页</a></li>

49 <li><a href="#">首页</a></li>

50 <li><a href="#">首页</a></li>

51 <li><a href="#">首页</a></li>

52 <li><a href="#">首页</a></li>

53 </ul>

54 </div>

posted @ 2018-06-30 13:53 红尘多可笑阅读(106) 评论(0) 收藏举报

刷新页面返回顶部

红尘多可笑

css第六天

一、a标签

1、a标签的伪类

2、a标签的伪类顺序不能颠倒

二、背景

1、background-color（背景色）

2、background-image（背景图）

3、background-repeat（重复模式）

4、background-position（背景图片在整个背景图的位置）

5、background-attechment（背景是否固定）

6、背景的应用

三、定位

3.1 相对定位

3.2 绝对定位

3.3 不针对祖先元素的参考点

3.4 针对祖先元素的参考元素

3.5 参考顶点

3.6 压盖效果

3.7 绝对定位的元素的水平居中

3.8 应用

公告