第七篇（2） CSS（二）

本篇主要包含两部分内容：小米商城讲解和 CSS样式补充。

第七章 CSS（二）

3.1 讲解：小米商城头部页面
3.2 CSS样式
- 3.2.1 border 边框
  - 练习：实现小米商城闪购
- 3.2.2 background 背景
  - 练习：实现小米商城logo
- 3.2.3 cursor 光标
- 3.2.5 position 定位
  - 扩展应用：后台管理布局
  - 练习：小米商城扫码&返回顶部
- 3.2.4 opacity 透明度
  - 案例：对话框示例代码
- 3.2.6 hover 伪类
- 3.2.7 after 伪元素
3.3 今日作业

3.1 讲解：小米商城头部页面

练习题参考源代码提取地址：

链接: https://pan.baidu.com/s/11IX2NAxdo2yvBYdhy-ME-Q
提取码: yqeq

注意：由还没有讲 background属性，所以 logo 部分可暂用图片实现。

3.2 CSS样式

本节继续学习CSS常见样式。

3.2.1 border 边框

用于给标签设置边框。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
div{
height:40px;
width:400px;
margin-top:10px;
}
</style>
</head>
<body>
<divstyle="border:1px solid #333333;"></div>
<divstyle="border:1px solid #333333;"></div>
<divstyle="border:2px solid #333333;"></div>
<divstyle="border:1px dotted red;"></div>
<divstyle="border:1px dotted goldenrod;"></div>
<divstyle="border:3px dotted goldenrod;border-right:0"></div>
</body>
</html>

扩展：border-radius也可以设置圆角边框。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
div {
height:40px;
width:400px;
margin-top:10px;
}
</style>
</head>
<body>
<divstyle="border:2px solid #333333;border-radius: 10px;"></div>
<divstyle="border:1px solid #333333;border-bottom-right-radius: 20px;"></div>
<divstyle="border:1px solid #333333;border-bottom-right-radius: 20px;border-top-left-radius: 20px;"></div>
<divstyle="border:1px solid #333333;width: 100px;height: 100px;border-radius: 30px;"></div>
<divstyle="border:2px solid red;width:80px;height:80px;border-radius:50%;"></div>
</body>
</html>

练习：实现小米商城闪购

仅需要实现布局及顶部变宽即可，内部细节不需要实现。

3.2.2 background 背景

background用于设置标签背景，关于background的常用功能有：

background-color，设置背景颜色
backgroud-imgage，设置背景图片
background-repeat，背景图片如何重复
background-postion，背景图片位置

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
.search {
display:inline-block;width:40px;height:40px;
border:1px solid #9d9d9d;
background-image: url("https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_sousuo1.adc352a.png");
background-size:16px16px;
background-repeat:no-repeat;
background-position:50%50%;
}
.car {
display:inline-block;width:32px;height:32px;
border:1px solid #9d9d9d;
background-image: url("https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_5.png");
background-repeat:no-repeat;
background-position:-105px-110px;
}
.phone {
display:inline-block;width:24px;height:24px;
border:1px solid #9d9d9d;
background-image: url("https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_5.png");
background-repeat:no-repeat;
background-position:-154px-176px;
}
</style>
</head>
<body>
<aclass="search"></a>
<aclass="car"></a>
<aclass="phone"></a>
</body>
</html>

练习：实现小米商城logo

小米商城中的logo是基于背景图片实现。

3.2.3 cursor 光标

cursor指鼠标放在标签上之后显示的形状。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
</head>
<body>
<ahref="#">你是谁？</a>
<div>我是你永远的得不到的爸爸。</div>
<divstyle='cursor: pointer;'>我去你麻辣个鸡。</div>
<divstyle='cursor: help;'>你是个傻吊吗？。</div>
<divstyle='cursor: move;'>不，我是个傻爹？。</div>
</body>
</html>

3.2.5 position 定位

position用于对屏幕上的标签进行定位，定位相关知识点可以分为两种：

position:fixed，生成绝对定位的元素，相对于浏览器窗口进行定位。例如最常见的广告位和返回顶部，都是基于它来实现。
1. <!DOCTYPE html>
2. <htmllang="en">
3. <head>
4. <metacharset="UTF-8">
5. <title>CSS学习</title>
6. <style>
7. body{
8. margin:0;
9. }
10. .back-top{
11. width:45px;
12. height:45px;
13. border:1px solid #dddddd;
14. background-color: white;
15. position:fixed;
16. right:2px;
17. bottom:100px;
18. font-size:12px;
19. text-align: center;
20. color:#757575;
21. }
22. .back-top img{
23. display: block;
24. width:20px;
25. margin:3pxauto;
26. }
27. </style>
28. </head>
29. <body>
30. <divstyle="height:48px;background-color: black"></div>
31. <divstyle="height:500px;background-color:#f5f5f5;"></div>
32. <divstyle="height:500px;background-color: white;"></div>
33. <divstyle="height:500px;background-color:#f5f5f5;"></div>
35. <divclass="back-top">
36. <imgsrc="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_backtop.png"alt="">
37. 回顶部
38. </div>
39. </body>
40. </html>
position:absolute ，生成绝对定位的元素，相对于特定第一个父元素进行定位，常与position:relative结课使用。例如：想要让某标签相对某指定标签位置显示。
1. <!DOCTYPE html>
2. <htmllang="en">
3. <head>
4. <metacharset="UTF-8">
5. <title>小米商城</title>
6. <linkrel="shortcut icon"href="img/favicon.ico">
7. <style>
9. body {
10. margin:0;
11. font:14px/1.5HelveticaNeue,Helvetica,Arial,MicrosoftYahei,HiraginoSans GB,Heiti SC,WenQuanYiMicroHei, sans-serif;
12. }
14. .container {
15. width:1190px;
16. margin:0auto;
17. }
19. .left {
20. float: left;
21. }
23. .right {
24. float: right;
25. }
27. .header {
28. height:40px;
29. line-height:40px;
30. background-color:#333;
31. color:#b0b0b0;
32. font-size:12px;
33. }
35. .header .menus ul {
36. list-style: none;
37. padding:0;
38. margin:0;
39. }
41. .header .menus ul li {
42. float: left;
43. }
45. .header .menus a,.header .account a,.header .car a {
46. text-decoration: none;
47. display:inline-block;
48. padding:05px;
49. }
51. .header .menus .app {
52. position: relative;
53. }
55. .header .menus .app .download {
56. padding:10px;
57. background-color: white;
58. border:1px solid #dddddd;
59. position: absolute;
60. left:5px;
61. top:40px;
62. }
64. .header .menus .app .download img {
65. display: block;
66. width:80px;
67. height:80px;
68. }
70. .header .menus .app .download div {
71. margin-top:5px;
72. line-height:20px;
73. text-align: center;
74. }
76. .header .car a {
77. display:inline-block;
78. height:40px;
79. padding:015px;
80. margin-left:20px;
81. background-color:#424242;
82. }
83. </style>
84. </head>
85. <body>
86. <divclass="header">
87. <divclass="container">
88. <divclass="menus">
89. <ul>
90. <li><a>小米商城</a></li>
91. <li><a>MIUI</a></li>
92. <li><a>IoT</a></li>
93. <li><a>云服务</a></li>
94. <liclass="app">
95. <a>下载app</a>
96. <divclass="download">
97. <imgsrc="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_20130809170025.png"alt="">
98. <div>快来扫码下载</div>
99. </div>
100. </li>
101. <li><a>规则协议</a></li>
102. </ul>
103. </div>
104. <divclass="car right"><a>购物车（0）</a></div>
106. <divclass="account right">
107. <a>登录</a>
108. <a>注册</a>
109. <a>消息通知</a>
110. </div>
111. <divstyle="clear: both;"></div>
112. </div>
113. </div>
115. </body>
116. </html>

总结：如果在使用absolute定位时，找不到特定的父级标签，absolute根据整个页面大小的进行定位。

fixed，只能根据浏览器窗口进行定位，将标签固定在浏览器窗口的某个位置。
absolute，可结合relative实现相对定位；也可单独使用，将标签固定页面的某个位置。

扩展应用：后台管理布局

position中的定位也常用于后台管理布局。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
body {
margin:0;
}
.header {
height:48px;
background-color:#499ef3;
}
.body .menu{
position:fixed;
top:48px;
left:0;
bottom:0;
width:220px;
border-right:1px solid #dddddd;
overflow: scroll;
}
.body .content{
position:fixed;
top:48px;
right:0;
bottom:0;
left:225px;
/* 超出范围的话，出现滚轮 */
overflow: scroll;
}
</style>
</head>
<body>
<divclass="header"></div>
<divclass="body">
<divclass="menu"></div>
<divclass="content"></div>
</div>
</body>
</html>

练习：小米商城扫码&返回顶部

3.2.4 opacity 透明度

给标签设置透明度，例如：常见的加载、登录框等显示都是基于它实现。

实现思路：

基于z-index属性把页面分为三层：最底层是文章、中间层是黑色遮罩、最上层是登录框。
为中间的黑色遮罩设置透明度，否则无法看到最底层，透明度值范围：0~1，越大越不透明，例如：
1. filter:alpha(opacity=50);/* IE */
2. -moz-opacity:0.5;/* 老版Mozilla */
3. -khtml-opacity:0.5;/* 老版Safari */
4. opacity:0.5;/* 支持opacity的浏览器*/

案例：对话框示例代码

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.container{
width:980px;
margin:0auto;
}
.header{
height:48px;
background-color:#499ef3;
}
.shade{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color: black;
opacity:0.7;
}
.login{
width:400px;
height:300px;
background-color: white;
border:1px solid #dddddd;
position:fixed;
top:60px;
left:50%;
margin-left:-200px;
}
</style>
</head>
<body>
<divclass="header"></div>
<divclass="body">
<divclass="container"style="text-align: center">
<imgsrc="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_big_girl.png"alt="">
</div>
</div>

<divclass="shade"></div>

<divclass="login">
<h2style="text-align: center">用户登录</h2>
</div>
</body>
</html>

3.2.6 hover 伪类

hover伪类作用：当鼠标放在标签上时，可以能够设置一些样式。

示例1：鼠标放在标签上方，标签特殊显示。
1. <!DOCTYPE html>
2. <htmllang="en">
3. <head>
4. <metacharset="UTF-8">
5. <title>小米商城</title>
6. <linkrel="shortcut icon"href="img/favicon.ico">
7. <style>
9. body {
10. margin:0;
11. font:14px/1.5HelveticaNeue,Helvetica,Arial,MicrosoftYahei,HiraginoSans GB,Heiti SC,WenQuanYiMicroHei, sans-serif;
12. }
13. .left {
14. float: left;
15. }
16. .container {
17. width:980px;
18. margin:0auto;
19. }
20. .header {
21. height:40px;
22. line-height:40px;
23. background-color:#333;
24. color:#b0b0b0;
25. font-size:12px;
26. }
28. .header .menus ul {
29. list-style: none;
30. padding:0;
31. margin:0;
32. }
34. .header .menus ul li {
35. float: left;
36. }
38. .header .menus a{
39. text-decoration: none;
40. display:inline-block;
41. padding:05px;
42. color:#b0b0b0;
43. }
45. .header .menus a:hover{
46. color: white;
47. background-color:#424242;
48. }
50. </style>
51. </head>
52. <body>
53. <divclass="header">
54. <divclass="container">
55. <divclass="menus left">
56. <ul>
57. <li><ahref="#">小米商城</a></li>
58. <li><ahref="#">MIUI</a></li>
59. <li><ahref="#">IoT</a></li>
60. <li><ahref="#">云服务</a></li>
61. </ul>
62. </div>
63. <divstyle="clear: both;"></div>
64. </div>
65. </div>
66. </body>
67. </html>
示例2：鼠标放在标签上方，显示额外菜单。
1. <!DOCTYPE html>
2. <htmllang="en">
3. <head>
4. <metacharset="UTF-8">
5. <title>小米商城</title>
6. <linkrel="shortcut icon"href="img/favicon.ico">
7. <style>
9. body {
10. margin:0;
11. font:14px/1.5HelveticaNeue,Helvetica,Arial,MicrosoftYahei,HiraginoSans GB,Heiti SC,WenQuanYiMicroHei, sans-serif;
12. }
14. .container {
15. width:1190px;
16. margin:0auto;
17. }
19. .left {
20. float: left;
21. }
23. .right {
24. float: right;
25. }
27. .header {
28. height:40px;
29. line-height:40px;
30. background-color:#333;
31. color:#b0b0b0;
32. font-size:12px;
33. }
35. .header .menus ul {
36. list-style: none;
37. padding:0;
38. margin:0;
39. }
41. .header .menus ul li {
42. float: left;
43. }
45. .header .menus a,.header .account a,.header .car a {
46. text-decoration: none;
47. display:inline-block;
48. padding:05px;
49. }
51. .header .menus .app {
52. position: relative;
53. }
55. .header .menus .app .download {
56. padding:10px;
57. background-color: white;
58. border:1px solid #dddddd;
59. position: absolute;
60. left:5px;
61. top:40px;
62. display: none;
63. }
65. .header .menus .app .download img {
66. display: block;
67. width:80px;
68. height:80px;
69. }
71. .header .menus .app .download div {
72. margin-top:5px;
73. line-height:20px;
74. text-align: center;
75. }
77. .header .car a {
78. display:inline-block;
79. height:40px;
80. padding:015px;
81. margin-left:20px;
82. background-color:#424242;
83. }
85. .header .menus .app:hover .download{
86. display: block;
87. }
89. </style>
90. </head>
91. <body>
92. <divclass="header">
93. <divclass="container">
94. <divclass="menus">
95. <ul>
96. <li><a>小米商城</a></li>
97. <li><a>MIUI</a></li>
98. <li><a>IoT</a></li>
99. <li><a>云服务</a></li>
100. <liclass="app">
101. <a>下载app</a>
102. <divclass="download">
103. <imgsrc="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_20130809170025.png"alt="">
104. <div>快来扫码下载</div>
105. </div>
106. </li>
107. <li><a>规则协议</a></li>
108. </ul>
109. </div>
110. <divclass="car right"><a>购物车（0）</a></div>
112. <divclass="account right">
113. <a>登录</a>
114. <a>注册</a>
115. <a>消息通知</a>
116. </div>
117. <divstyle="clear: both;"></div>
118. </div>
119. </div>
121. </body>
122. </html>

3.2.7 after 伪元素

after伪元素作用：在自己内部标签底部设置元素。

示例1：在标签后面设置文字。
1. <!DOCTYPE html>
2. <htmllang="en">
3. <head>
4. <metacharset="UTF-8">
5. <title>CSS学习</title>
6. <linkrel="shortcut icon"href="img/favicon.ico">
7. <style>
8. li:after{
9. content:'戴帽子';
10. color: green;
11. font-weight:500;
12. }
13. </style>
14. </head>
15. <body>
16. <ul>
17. <li>王宝强</li>
18. <li>陈羽凡</li>
19. <li>贾乃亮</li>
20. </ul>
21. </body>
22. </html>
示例2：在标签后添加标签，解决float脱离文档流的问题，不用再额外手动添加标签了。
学习after伪元素之后，再处理脱离文档流的问题时候，只需要为父标签应用 clearfix样式即可（严重推荐）。
1. <!DOCTYPE html>
2. <htmllang="en">
3. <head>
4. <metacharset="UTF-8">
5. <title>CSS学习</title>
6. <style>
7. .clearfix:after{
8. content:'';
9. display: block;
10. clear: both;
11. }
13. .row{
14. background-color: pink;
15. }
16. .item{
17. float: left;
18. width:100px;
19. height:50px;
20. border:1px solid red;
21. }
23. </style>
24. </head>
25. <body>
26. <divclass="row clearfix">
27. <divclass="item"></div>
28. <divclass="item"></div>
29. </div>
31. <divstyle="background-color: goldenrod;"class="clearfix">
32. <divstyle="float: left;">向左走</div>
33. <divstyle="float: right;">向右走</div>
34. </div>
36. </body>
37. </html>

3.3 今日作业

实现小米商城首页所有功能（无需实现最底部功能）。

http://www.mi.com