昨天完成了一个小练习，将之前学习的内容都整合到一起了。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>学成在线</title> 8 <!-- 必须保证顺序要求 --> 9 <link rel="stylesheet" href="./css/base.css"> 10 <link rel="stylesheet" href="./css/index.css"> 11 </head> 12 13 <body> 14 <!-- 头部区域 --> 15 <div class="header"> 16 <div class="wrapper"> 17 <!-- logo --> 18 <div class="logo"> 19 <h1><a href="#"> 学成在线</a></h1> 20 </div> 21 <!-- 导航 --> 22 <div class="nav"> 23 <ul> 24 <li><a href="#" class="active">首页</a></li> 25 <li><a href="#">课程</a></li> 26 <li><a href="#">职业规划</a></li> 27 </ul> 28 </div> 29 <!-- 搜素 --> 30 <div class="search"> 31 <input type="text" placeholder="请输入关键字"> 32 <a href="#"></a> 33 </div> 34 <!-- 用户 --> 35 <div class="user"> 36 <a href=""> 37 <img src="./uploads/user.png" alt=""> 38 <span>学前端</span> 39 </a> 40 </div> 41 </div> 42 </div> 43 44 <!-- banner区域 --> 45 <div class="banner"> 46 <div class="wrapper"> 47 <div class="left"> 48 <ul> 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 <li><a href="#">商业预测</a></li> 54 <li><a href="#">云计算&大数据</a></li> 55 <li><a href="#">运维&测试</a></li> 56 <li><a href="#">UI设计</a></li> 57 <li><a href="#">产品</a></li> 58 </ul> 59 </div> 60 <div class="right"> 61 <h3>我的课程表</h3> 62 <div class="content"> 63 <dl> 64 <dt>数据可视化课程</dt> 65 <dd><span>正在学习</span>- <strong>css教学</strong></dd> 66 </dl> 67 <dl> 68 <dt>数据可视化课程</dt> 69 <dd><span>正在学习</span>- <strong>css教学</strong></dd> 70 </dl> 71 <dl> 72 <dt>数据可视化课程</dt> 73 <dd><span>正在学习</span>- <strong>css教学</strong></dd> 74 </dl> 75 <a href="#">全部课程</a> 76 </div> 77 </div> 78 </div> 79 </div> 80 81 <!-- 精品推荐 --> 82 <div class="recommend wrapper"> 83 <h3>精品推荐</h3> 84 <ul> 85 <li><a href="#">HTML</a></li> 86 <li><a href="#">HTML</a></li> 87 <li><a href="#">HTML</a></li> 88 <li><a href="#">HTML</a></li> 89 <li><a href="#">HTML</a></li> 90 <li><a href="#">HTML</a></li> 91 <li><a href="#">HTML</a></li> 92 <li><a href="#">HTML</a></li> 93 <li><a href="#">HTML</a></li> 94 </ul> 95 <a href="#" class="modify">修改兴趣</a> 96 </div> 97 98 <!-- 精品推荐课程 --> 99 <div class="course wrapper"> 100 <!-- 标题 --> 101 <div class="hd"> 102 <h3>精品推荐</h3> 103 <a href="#" class="more">查看全部</a> 104 </div> 105 <!-- 内容 --> 106 <div class="bd"> 107 <ul> 108 <li> 109 <a href="#"> 110 <div class="pic"><img src="./uploads/course01.png" alt=""></div> 111 <div class="text"> 112 <h4>JavaScript数据看板项目实战</h4> 113 <p><span>高级</span> · <i>1125</i>人在学习</p> 114 </div> 115 </a> 116 </li> 117 <li></li> 118 <li></li> 119 <li></li> 120 <li></li> 121 <li></li> 122 <li></li> 123 <li></li> 124 <li></li> 125 <li></li> 126 </ul> 127 </div> 128 </div> 129 130 <!-- 前端 --> 131 <div class="wrapper"> 132 <!-- 标题 --> 133 <div class="hd"> 134 <h3>前端开发工程师</h3> 135 <ul> 136 <li><a href="" class="active">热门</a></li> 137 <li><a href="">初级</a></li> 138 <li><a href="">中级</a></li> 139 <li><a href="">高级</a></li> 140 </ul> 141 <a href="#" class="more">查看全部</a> 142 </div> 143 <div class="bd"> 144 <div class="left"> 145 <img src="./uploads/web_left.png" alt=""> 146 </div> 147 <div class="right"> 148 <div class="top"> 149 <img src="./uploads/web_top.png" alt=""> 150 </div> 151 <div class="buttom"> 152 <ul> 153 <li> 154 <a href="#"> 155 <div class="pic"><img src="./uploads/course01.png" alt=""></div> 156 <div class="text"> 157 <h4>JavaScript数据看板项目实战</h4> 158 <p><span>高级</span> · <i>1125</i>人在学习</p> 159 </div> 160 </a> 161 </li> 162 <li> 163 <a href="#"> 164 <div class="pic"><img src="./uploads/course01.png" alt=""></div> 165 <div class="text"> 166 <h4>JavaScript数据看板项目实战</h4> 167 <p><span>高级</span> · <i>1125</i>人在学习</p> 168 </div> 169 </a> 170 </li> 171 <li> 172 <a href="#"> 173 <div class="pic"><img src="./uploads/course01.png" alt=""></div> 174 <div class="text"> 175 <h4>JavaScript数据看板项目实战</h4> 176 <p><span>高级</span> · <i>1125</i>人在学习</p> 177 </div> 178 </a> 179 </li> 180 <li> 181 <a href="#"> 182 <div class="pic"><img src="./uploads/course01.png" alt=""></div> 183 <div class="text"> 184 <h4>JavaScript数据看板项目实战</h4> 185 <p><span>高级</span> · <i>1125</i>人在学习</p> 186 </div> 187 </a> 188 </li> 189 </ul> 190 </div> 191 </div> 192 </div> 193 </div> 194 <!-- 版权 --> 195 <div class="footer"> 196 <div class="wrapper"> 197 <div class="left"> 198 <a href="#"><img src="./images/logo.png" alt=""></a> 199 <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构 200 合作提供在线课程。 © 2017年XTCG Inc.保留所有权利。-沪ICP备 201 15025210号</p> 202 <a href="#" class="download">下载app</a> 203 </div> 204 <div class="right"> 205 <dl> 206 <dt>合作伙伴</dt> 207 <dd><a href="#">合作机构</a></dd> 208 <dd><a href="#">合作导师</a></dd> 209 </dl> 210 <dl> 211 <dt>合作伙伴</dt> 212 <dd><a href="#">合作机构</a></dd> 213 <dd><a href="#">合作导师</a></dd> 214 </dl> 215 <dl> 216 <dt>合作伙伴</dt> 217 <dd><a href="#">合作机构</a></dd> 218 <dd><a href="#">合作导师</a></dd> 219 </dl> 220 </div> 221 </div> 222 </div> 223 </body> 224 225 </html>
CSS样式
1 /* 首页CSS样式 */
2 /* 版心 */
3 .wrapper {
4 margin: 0 auto;
5 width: 1200px;
6 }
7
8 body {
9 background-color: #f3f5f7;
10 }
11
12 /* 头部区域 */
13 .header {
14 height: 100px;
15 background-color: #fff;
16 }
17
18 .header .wrapper {
19 padding-top: 29px;
20 display: flex;
21 }
22
23 /* logo区域 */
24 .logo a {
25 display: block;
26 width: 195px;
27 height: 41px;
28 background-image: url(../images/logo.png);
29
30 font-size: 0;
31 }
32
33 .nav {
34 margin-left: 102px;
35 }
36
37 .nav ul {
38 display: flex;
39 }
40
41 .nav li {
42 margin-right: 24px;
43 }
44
45 .nav li a {
46 display: block;
47 padding: 6px 8px;
48 line-height: 27px;
49 font-size: 19px;
50 }
51
52 /* active 类选择器，表示默认选中的a */
53 .nav li .active,
54 .nav li a:hover {
55 border-bottom: 2px solid #00a4ff;
56 }
57
58 /* 搜素区域 */
59 .search {
60 display: flex;
61 margin-left: 64px;
62 padding-left: 19px;
63 padding-right: 12px;
64
65 width: 412px;
66 height: 40px;
67 background-color: #f3f5f7;
68 border-radius: 20px;
69 }
70
71 .search input {
72 flex: 1;
73 border: 0;
74 background-color: transparent;
75 /* 去掉表单控件的焦点框 */
76 outline: none;
77 }
78
79 .search input::placeholder{
80 font-size: 14px;
81 color: #999;
82 }
83
84 /* 此时父级是flex布局，子级变弹性盒子 */
85 .search a{
86 align-self: center;
87
88 width: 16px;
89 height: 16px;
90 background-image: url(../images/search.png);
91 }
92
93 /* 用户区域 */
94 .user {
95 margin-left: 32px;
96 margin-top: 4px;
97 }
98
99 .user img {
100 vertical-align: middle;
101 margin-right: 7px;
102 }
103
104 .user span {
105 font-size: 16px;
106 color: #666;
107 }
108
109 /* banner区域 */
110 .banner {
111 height: 420px;
112 background-color: #0092cb;
113 }
114
115 .banner .wrapper {
116 display: flex;
117 justify-content: space-between;
118 height: 420px;
119 background-image: url(../uploads/banner.png);
120 }
121
122 /* left导航 */
123 .banner .left {
124 width: 191px;
125 height: 420px;
126 background-color: rgba(0, 0, 0, 0.42);
127 padding: 3px 20px;
128 }
129
130 .banner .left a {
131 display: block;
132 height: 46px;
133 background: url(../images/right.png) no-repeat right center ;
134
135 line-height: 46px;
136 font-size: 16px;
137 color: #fff;
138 }
139
140 .banner .left a:hover {
141 background-image: url(../images/right-hover.png);
142 color: #00a4ff;
143 }
144
145 /* right导航 */
146 .banner .right {
147 margin-top: 60px;
148 width: 218px;
149 height: 305px;
150 background-color: #209dd5;
151 border-radius: 10px;
152 }
153
154 .banner .right h3 {
155 margin-left: 14px;
156 height: 48px;
157 line-height: 48px;
158 font-size: 15px;
159 color: #fff;
160 font-weight: 400;
161 }
162
163 .banner .right .content {
164 padding: 14px;
165 height: 257px;
166 background-color: #fff;
167 border-radius: 10px;
168 }
169
170 .banner .right dl {
171 margin-bottom: 12px;
172 border-bottom: 1px solid #e0e0e0;
173 }
174
175 .banner .right dt {
176 margin-bottom: 8px;
177 font-size: 14px;
178 line-height: 20px;
179 font-weight: 700;
180 }
181
182 .banner .right dd {
183 margin-bottom: 8px;
184 font-size: 12px;
185 line-height: 16px;
186 }
187
188 .banner .right dd span {
189 color: #00a4ff;
190 }
191
192 .banner .right dd strong{
193 color: #7d7d7d;
194 font-weight: 400;
195 }
196
197 .banner .right a {
198 display: block;
199 height: 32px;
200 background-color: #00a4ff;
201 border-radius: 15px;
202 text-align: center;
203 line-height: 32px;
204
205 font-size: 14px;
206 color: #fff;
207 }
208
209 /* 精品推荐 */
210 .recommend {
211 display: flex;
212 margin-top: 11px;
213 padding: 0 20px;
214 height: 60px;
215 background-color: #fff;
216 box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
217 line-height: 60px;
218 }
219
220 .recommend ul{
221 display: flex;
222 flex: 1;
223 }
224
225 .recommend h3 {
226 font-size: 18px;
227 color: #00a4ff;
228 font-weight: 400;
229 }
230
231 .recommend ul li a {
232 font-size: 18px;
233 padding: 0 24px;
234 border-right: 1px solid #e0e0e0;
235 }
236
237 .recommend ul li:last-child a{
238 border-right: 0;
239 }
240
241 .recommend .modify {
242 font-size: 16px;
243 color: #00a4ff;
244 }
245
246 /* 推荐课程 */
247 .course {
248 margin-top: 15px;
249 }
250
251 .hd {
252 justify-content: space-between;
253 display: flex;
254 height: 60px;
255 line-height: 60px;
256 }
257
258 .hd h3 {
259 font-weight: 400;
260 font-size: 21px;
261 }
262
263 .hd .more {
264 font-size: 14px;
265 color: #999;
266 background: url(../images/more.png) no-repeat right center;
267 padding-right: 20px;
268 }
269
270 .bd ul{
271 display: flex;
272 flex-wrap: wrap;
273 justify-content: space-between;
274 }
275
276 /* 课程内容 */
277 .bd li {
278 margin-bottom: 14px;
279 width: 228px;
280 height: 271px;
281 background-color: pink;
282 }
283
284 .bd li .pic {
285 height: 156px;
286
287 }
288
289 .bd li .text {
290 padding: 20px;
291 height: 115px;
292 background-color: #fff;
293 }
294
295 .bd li .text h4 {
296 margin-bottom: 13px;
297 height: 40px;
298 font-size: 14px;
299 line-height: 20px;
300 font-weight: 400;
301 }
302
303 .bd li .text p{
304 font-size: 14px;
305 line-height: 20px;
306 color: #999;
307 }
308
309 .bd li .text p span {
310 color: #fa6400;
311 }
312
313 .bd li .text p i{
314 font-style: normal;
315 }
316
317 /* 前端 */
318 .hd ul {
319 display: flex;
320 }
321
322 .hd li {
323 margin-right: 60px;
324 font-size: 16px;
325 }
326
327 .hd li .active{
328 color: #00a4ff;
329 }
330
331 .bd{
332 display: flex;
333 justify-content: space-between;
334 }
335
336 .bd .left {
337 width: 228px;
338 /* background-color: pink; */
339 }
340
341 .bd .right{
342 width: 957px;
343 /* background-color: pink; */
344 }
345
346 .bd .right .top {
347 margin-bottom: 15px;
348 height: 100px;
349 }
350
351 /* 版权 */
352 .footer {
353 margin-top: 60px;
354 padding: 60px;
355 height: 273px;
356 background-color: #fff;
357 }
358
359 .footer .wrapper {
360 display: flex;
361 justify-content: space-between;
362 }
363
364 .footer .left{
365 width: 440px;
366 /* background-color: pink; */
367 }
368
369 .footer .left p {
370 margin-top: 24px;
371 margin-bottom: 14px;
372 font-size: 12px;
373 line-height: 17px;
374 color: #666;
375 }
376
377 .footer .left .download {
378 display: block;
379 width: 120px;
380 height: 36px;
381 border: 1px solid #00a4ff;
382 font-size: 16px;
383 text-align: center;
384 line-height: 34px;
385 color: #00a4ff;
386 }
387
388 .footer .right{
389 display: flex;
390 }
391
392 .footer .right dl{
393 margin-left: 130px;
394 }
395
396 .footer .right dt {
397 margin-bottom: 12px;
398 font-size: 16px;
399 line-height: 23px;
400 }
401
402 .footer .right a{
403 font-size: 14px;
404 color: #666;
405 line-height: 24px;
406 }
1 /* 基础公共样式：清除默认样式 + 设置通用样式 */
2 * {
3 margin: 0;
4 padding: 0;
5 box-sizing: border-box;
6 }
7
8 li {
9 list-style: none;
10 }
11
12 body {
13 font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
14 color: #333;
15 }
16
17 a {
18 color: #333;
19 text-decorat
标签：right,color,08HTML,height,background,font,margin,CSS From： https://www.cnblogs.com/Lyh3012648079/p/18338288