下载掌阅APP，畅读海量书库
立即打开
“四书五经”是中国儒家的经典，对中国的政治、思想、学术、文化等方面都产生了重大而深远的影响。本实战将以“四书五经”为主题制作一个简单的图书销售页面，页面主要由头部导航栏、主体部分的商品卡片构成。使用无序列表制作导航栏，导航栏包括网站logo、6个导航菜单以及“登录”超链接。商品卡片主要由商品图片、商品信息以及功能按钮等组成。图书销售页面结构如图1.8所示。
图1.8 图书销售页面结构
（1）主体结构代码
首先，新建一个HTML文件，在其<body>标签中定义一个<div>父容器块，并设置父容器块类名为box。
其次，在父容器块中分别添加<header>和<main>这2个子容器块。<header>子容器块由菜单折叠按钮、网站logo、导航菜单以及“登录”超链接组成。<main>子容器块由多个类名为product-grid的卡片组成，卡片内容包括商品图片、商品信息及功能按钮。具体代码如例1.2所示。
1. <!DOCTYPE html> 2. <head> 3. <meta charset="UTF-8"> 4. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5. <meta name="viewport" content="width=device-width" ,initial-scale=1, maxinum-scale=1.0,user-scalable="no"> 6. <link rel="stylesheet" href="./fontawesome/css/font-awesome.min.css"> 7. <title>图书销售页面</title> 8. </head> 9. <body> 10. <!--父容器块 --> 11. <div class="box"> 12. <!-- 子容器块--> 13. <header> 14. <div class="top"> 15. <!-- 菜单折叠按钮 --> 16. <span>menu</span> 17. <!-- 网站logo--> 18. <img src="./img/qf.png" alt="" /> 19. <!-- 导航菜单--> 20. <ul> 21. <li><a href="">首页</a></li> 22. 以下省略“热销”“四书”“五经”“售后服务”“关于我们”菜单构建代码<li> 23. </ul> 24. <!-- “登录”超链接--> 25. <a href="">登录</a> 26. </div> 27. </header> 28. <!-- 子容器块--> 29. <main> 30. <!-- 卡片--> 31. <div class="product-grid"> 32. <!-- 商品图片--> 33. <div class="product-image"> 34. <a href="#"> 35. <img class="pic-1" src="./img/book1.jpg"> 36. </a> 37. </div> 38. <!-- 商品信息--> 39. <div class="product-content"> 40. <h3 class="title"> 41. <a href="#"> 《论语》</a> 42. </h3> 43. <div class="price"> ￥69.00<span>￥144.00</span></div> 44. </div> 45. <!-- 功能按钮--> 46. <ul class="social"> 47. <li><a href=""><i class="fa fa-search"></i></a></li> 48. 以下省略“收藏”“加购”按钮的构建代码<li> 49. </ul> 50. </div> 51. 以下省略“大学”“中庸”“春秋”“周易”“诗经”“尚书”“孟子”“礼记”卡片的构建代码<div class="product-grid"> 52. </main> 53. </div> 54. </body>
（2）CSS代码
以内部样式表的方式在<style>标签中加入CSS代码，设置页面样式，具体代码如下。
1. <style type="text/css">
2. * {/* 清除默认样式 */
3. margin: 0;
4. padding: 0;}
5. header { /* 设置导航栏高度和背景图片 */
6. height: 120px;
7. background: url("images/top-bg.png")no-repeat top center/cover;}
8. .top { /* 设置导航栏布局样式 */
9. width: 100%;
10. height: 60px;
11. background: rgba(42, 151, 229, 0.5);
12. box-sizing: border-box;
13. display: flex; /*设置为弹性盒子*/
14. justify-content: space-between; /*两端平分*/
15. align-items: center; /*在侧轴上居中*/
16. font-size: 14px;
17. color: #fff;
18. padding: 0px 20px;
19. position: fixed;
20. top: 0px;
21. z-index: 10;
22. }
23. .top a {/* 设置导航栏内标签文字颜色 */
24. color: #fff;}
25. .top img {/* 设置网站logo的高度，圆角样式 */
26. height: 60px;
27. border-radius: 50%;}
28. .top span { display: none; }/* 默认情况下隐藏菜单折叠按钮 */
29. @media screen and (max-width:760px) {
30. .top ul {
31. display: none;}/* 设置导航栏隐藏 */
32. .top span { display: inline; }/* 设置菜单折叠按钮显示 */
33. }
34. .top ul li {/* 设置导航菜单的边距、文字样式等 */
35. padding: 0px 20px;
36. float: left;
37. list-style:none;}
38. .top ul li a{
39. text-decoration: none;
40. color: gray;
41. font-size: 18px;}
42. main {/* 设置主体元素布局 */
43. display: flex;
44. flex-wrap: wrap;/*换行*/
45. padding: 10px 10px 0px;
46. justify-content: space-between;}
47. main .product-grid {/* 设置单个商品卡片的样式 */
48. margin-bottom: 20px;
49. width: 48%;/*默认情况下卡片按两列进行布局*/
50. border: 1px solid #ccc;
51. box-shadow: 0px 0px 3px 3px #ccc;
52. }
53. main .product-grid img {width: 100%;}/* 设置商品图片100%展示 */
54. /* 设置商品卡片在屏幕宽度小于等于375px时，卡片占满屏幕 */
55. @media screen and (max-width: 375px) {
56. main .product-grid { width: 100%; }
57. }
58. /* 设置商品卡片在屏幕宽度为760px～1100px时，卡片占屏幕的1/3 */
59. @media screen and (min-width:760px) and (max-width: 1100px){
60. .top ul { display: flex; /*设置为弹性盒子*/}
61. main .product-grid { width: 32%;}
62. }
63. /* 设置商品卡片在屏幕宽度大于等于1101px时，卡片占屏幕的1/4 */
64. @media screen and (min-width: 1101px) {
65. main .product-grid { width: 24%; }
66. }
67. .product-grid {/* 定义商品卡片样式 */
68. text-align: center;
69. overflow: hidden;
70. position: relative;
71. transition: all 0.4s ease 0s;}
72. .product-grid .product-image {/* 设置商品的图片样式 */
73. overflow: hidden;}
74. .product-grid .product-image img {
75. width: 100%;
76. height: auto;
77. transition: all 0.4s ease 0s;
78. }
79. /* 鼠标指针悬浮在商品卡片上时，商品图片放大1.5倍 */
80. .product-grid:hover .product-image img {
81. transform: scale(1.5);
82. }
83. .product-grid .product-content {/* 设置商品信息样式 */
84. padding: 12px 12px 15px 12px;
85. transition: all 0.2s ease 0s;
86. }
87. .product-grid:hover .product-content {opacity:0;}/*设置鼠标指针悬浮时的商品信息隐藏*/
88. .product-grid .title {/*定义商品名称的样式*/
89. font-size: 20px;
90. margin: 0 0 10px;}
91. .product-grid .title a {/*定义商品名称的样式*/
92. color: #000;
93. font-weight: normal;
94. text-decoration: none; }
95. .product-grid .price {/* 定义现价文字样式 */
96. font-size: 18px;
97. font-weight: 600;
98. color: red;
99. }
100. .product-grid .price span {/* 定义原价文字样式 */
101. color: #999;/*定义字体颜色*/
102. font-size: 15px;/*定义字体大小*/
103. font-weight: 400;/*定义字体粗细*/
104. text-decoration: line-through;/*定义穿过原价的中画线*/
105. margin-left: 7px;
106. display: inline-block;
107. }
108. .product-grid .social {/* 设置商品功能按钮默认隐藏 */
109. background-color: #fff;
110. width: 100%;
111. padding: 0;
112. margin: 0;
113. position: absolute;
114. bottom: -50%;
115. transition: all 0.2s ease 0s;
116. }
117. .product-grid:hover .social /{*定义鼠标指针悬浮时，功能按钮的过渡动画*/
118. opacity: 1;
119. bottom: 20px;
120. }
121. .product-grid .social li {
122. display: inline-block;
123. }
124. .product-grid .social li a {
125. color: #909090;
126. font-size: 16px;
127. line-height: 45px;
128. text-align: center;
129. height: 45px;
130. width: 45px;
131. margin: 0 7px;
132. border: 1px solid #909090;
133. border-radius: 50px;
134. display: block;
135. position: relative;
136. transition: all 0.4s ease-in-out;
137. }
138. .product-grid .social li a:hover {/*定义功能按钮悬浮变色*/
139. color: #fff;
140. background-color:rgba(4,48,68,0.9);}
141. </style>
上述CSS代码主要用于设置导航栏和商品卡片的CSS样式。当屏幕宽度大于等于760px时，导航栏的菜单正常显示；当屏幕宽度小于760px时，使用display属性隐藏导航栏的菜单并显示菜单折叠按钮。当屏幕宽度小于等于375px时，页面内的卡片保持单列布局，显示效果如图1.9所示。
图1.9 单列布局
当屏幕宽度在375px～760px时，页面内的卡片匹配默认样式，保持双列布局，显示效果如图1.10所示。
图1.10 双列布局
当屏幕宽度在760px～1100px时，页面内的卡片保持三列布局，显示效果如图1.11所示。
图1.11 三列布局
当屏幕宽度大于等于1101px时，页面内的卡片保持四列布局，显示效果如图1.12所示。
图1.12 四列布局