HTML+CSS实现页面

使用HTML和CSS实现以下页面:

  • 抽屉首页
  • 个人博客首页
  • 小米官网首页
  • 登录注册页面

 

 

一、抽屉首页

1.实现目标https://dig.chouti.com/

 

2.代码:

HTML:

  1 <!--__author__ = "wyb"-->
  2 <!DOCTYPE html>
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>抽屉首页</title>
  7     <link rel="stylesheet" href="chouti.css">
  8 </head>
  9 <body>
 10 
 11 <a name="start"></a>
 12 
 13 <div class="head-box">
 14     <div class="head-content">
 15         <a href="#" class="logo"></a>
 16 
 17         <div class="action-menu">
 18             <a href="#" class="tb active">全部</a><a href="#" class="tb">42区</a>
 19             <a href="#" class="tb">段子</a>
 20             <a href="#" class="tb">图片</a>
 21             <a href="#" class="tb">挨踢1024</a>
 22             <a href="#" class="tb">你问我答</a>
 23             <a href="#" class="tb">视频</a>
 24         </div>
 25 
 26         <div class="key-search">
 27             <form action="">
 28                 <input type="text" class="search-text">
 29                 <a href="" class="i">
 30                         <span class="icon">
 31 
 32                         </span>
 33                 </a>
 34             </form>
 35         </div>
 36 
 37         <div class="action-nav">
 38             <a href="#" class="register">注册</a>
 39             <a href="#" class="login">登录</a>
 40         </div>
 41     </div>
 42 </div>
 43 
 44 <div class="main-content-box">
 45     <div class="main-content">
 46         <div class="content-L">
 47             <!-- 置顶区域 -->
 48             <div class="top-area" style="margin-bottom: 0;">
 49                 <div class="child-nav">
 50                     <a href="#" class="active">最热</a>
 51                     <a href="#" class="newbtn">发现</a>
 52                     <a href="#" class="personbtn">人类发布</a>
 53                 </div>
 54 
 55                 <div class="sort-nav">
 56                     <a href="#" class="active hotbtn" id="sort-nav-btn">即时排序</a>
 57                     <a href="#" class="newbtn" id="sort24-nav-btn">24小时</a>
 58                     <a href="#" class="newbtn" id="sort3-nav-btn">3天</a>
 59                 </div>
 60 
 61                 <a href="#" class="publish-btn">
 62                     <span class="n2">+&nbsp;&nbsp;发布</span>
 63                 </a>
 64             </div>
 65 
 66             <!-- 内容区域 -->
 67             <div class="content-list">
 68                 <div class="item">
 69                     <!--新闻图片-->
 70                     <div class="news-pic">
 71                         <img src="img/news_img.jpg" alt="新闻图片">
 72                     </div>
 73                     <!--新闻内容-->
 74                     <div class="news-content">
 75                         <!--part1: 标题-->
 76                         <div class="part1">
 77                             <a href="#" class="show-content">
 78                                 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句
 79                                 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话
 80                             </a>
 81                             <span class="content-source">-www.guancha.cn</span>
 82                             <a href="#" class="n2">
 83                                 <span class="content-kind">42区</span>
 84                             </a>
 85                         </div>
 86                         <!--part2: 图标-->
 87                         <div class="part2">
 88                             <a href="#" class="recommend a-icon" title="推荐">
 89                                 <span class="hand-icon icon-recommend"></span>
 90                                 <b>4</b>
 91                             </a>
 92                             <a href="#" class="discuss a-icon" title="讨论">
 93                                 <span class="hand-icon icon-discuss"></span>
 94                                 <b>5</b>
 95                             </a>
 96                             <a href="#" class="collect a-icon" title="加入私藏">
 97                                 <span class="hand-icon icon-collect"></span>
 98                                 <b>私藏</b>
 99                             </a>
100                             <a href="#" class="user-a a-icon">
101                                 <span>
102                                     <img src="img/user.jpg" alt="">
103                                 </span>
104                                 <b>张三</b>
105                             </a>
106                             <span class="left time-into">
107                                 <a href="#" class="time-a">
108                                     <b>十分钟前</b>
109                                 </a>
110                                 <i>入热榜</i>
111                             </span>
112                             <span class="share-site-to">
113                                 <i>分享到</i>
114                                 <span class="share-icon">
115                                     <a class="icon-sina" href="#" title="分享到新浪微博"></a>
116                                     <a class="icon-douban" href="#" title="分享到豆瓣"></a>
117                                     <a class="icon-qqzone" href="#" title="分享到QQ空间"></a>
118                                     <a class="icon-renren" href="#" title="分享到人人网"></a>
119                                 </span>
120                             </span>
121                         </div>
122                     </div>
123 
124 
125                 </div>
126                 <div class="item">
127                     <!--新闻图片-->
128                     <div class="news-pic">
129                         <img src="img/news_img.jpg" alt="新闻图片">
130                     </div>
131                     <!--新闻内容-->
132                     <div class="news-content">
133                         <!--part1: 标题-->
134                         <div class="part1">
135                             <a href="#" class="show-content">
136                                 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句
137                                 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话
138                             </a>
139                             <span class="content-source">-www.guancha.cn</span>
140                             <a href="#" class="n2">
141                                 <span class="content-kind">42区</span>
142                             </a>
143                         </div>
144                         <!--part2: 图标-->
145                         <div class="part2">
146                             <a href="#" class="recommend a-icon" title="推荐">
147                                 <span class="hand-icon icon-recommend"></span>
148                                 <b>4</b>
149                             </a>
150                             <a href="#" class="discuss a-icon" title="讨论">
151                                 <span class="hand-icon icon-discuss"></span>
152                                 <b>5</b>
153                             </a>
154                             <a href="#" class="collect a-icon" title="加入私藏">
155                                 <span class="hand-icon icon-collect"></span>
156                                 <b>私藏</b>
157                             </a>
158                             <a href="#" class="user-a a-icon">
159                                 <span>
160                                     <img src="img/user.jpg" alt="">
161                                 </span>
162                                 <b>张三</b>
163                             </a>
164                             <span class="left time-into">
165                                 <a href="#" class="time-a">
166                                     <b>十分钟前</b>
167                                 </a>
168                                 <i>入热榜</i>
169                             </span>
170                             <span class="share-site-to">
171                                 <i>分享到</i>
172                                 <span class="share-icon">
173                                     <a class="icon-sina" href="#" title="分享到新浪微博"></a>
174                                     <a class="icon-douban" href="#" title="分享到豆瓣"></a>
175                                     <a class="icon-qqzone" href="#" title="分享到QQ空间"></a>
176                                     <a class="icon-renren" href="#" title="分享到人人网"></a>
177                                 </span>
178                             </span>
179                         </div>
180                     </div>
181 
182 
183                 </div>
184                 <div class="item">
185                     <!--新闻图片-->
186                     <div class="news-pic">
187                         <img src="img/news_img.jpg" alt="新闻图片">
188                     </div>
189                     <!--新闻内容-->
190                     <div class="news-content">
191                         <!--part1: 标题-->
192                         <div class="part1">
193                             <a href="#" class="show-content">
194                                 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句
195                                 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话
196                             </a>
197                             <span class="content-source">-www.guancha.cn</span>
198                             <a href="#" class="n2">
199                                 <span class="content-kind">42区</span>
200                             </a>
201                         </div>
202                         <!--part2: 图标-->
203                         <div class="part2">
204                             <a href="#" class="recommend a-icon" title="推荐">
205                                 <span class="hand-icon icon-recommend"></span>
206                                 <b>4</b>
207                             </a>
208                             <a href="#" class="discuss a-icon" title="讨论">
209                                 <span class="hand-icon icon-discuss"></span>
210                                 <b>5</b>
211                             </a>
212                             <a href="#" class="collect a-icon" title="加入私藏">
213                                 <span class="hand-icon icon-collect"></span>
214                                 <b>私藏</b>
215                             </a>
216                             <a href="#" class="user-a a-icon">
217                                 <span>
218                                     <img src="img/user.jpg" alt="">
219                                 </span>
220                                 <b>张三</b>
221                             </a>
222                             <span class="left time-into">
223                                 <a href="#" class="time-a">
224                                     <b>十分钟前</b>
225                                 </a>
226                                 <i>入热榜</i>
227                             </span>
228                             <span class="share-site-to">
229                                 <i>分享到</i>
230                                 <span class="share-icon">
231                                     <a class="icon-sina" href="#" title="分享到新浪微博"></a>
232                                     <a class="icon-douban" href="#" title="分享到豆瓣"></a>
233                                     <a class="icon-qqzone" href="#" title="分享到QQ空间"></a>
234                                     <a class="icon-renren" href="#" title="分享到人人网"></a>
235                                 </span>
236                             </span>
237                         </div>
238                     </div>
239 
240 
241                 </div>
242                 <div class="item">
243                     <!--新闻图片-->
244                     <div class="news-pic">
245                         <img src="img/news_img.jpg" alt="新闻图片">
246                     </div>
247                     <!--新闻内容-->
248                     <div class="news-content">
249                         <!--part1: 标题-->
250                         <div class="part1">
251                             <a href="#" class="show-content">
252                                 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句
253                                 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话
254                             </a>
255                             <span class="content-source">-www.guancha.cn</span>
256                             <a href="#" class="n2">
257                                 <span class="content-kind">42区</span>
258                             </a>
259                         </div>
260                         <!--part2: 图标-->
261                         <div class="part2">
262                             <a href="#" class="recommend a-icon" title="推荐">
263                                 <span class="hand-icon icon-recommend"></span>
264                                 <b>4</b>
265                             </a>
266                             <a href="#" class="discuss a-icon" title="讨论">
267                                 <span class="hand-icon icon-discuss"></span>
268                                 <b>5</b>
269                             </a>
270                             <a href="#" class="collect a-icon" title="加入私藏">
271                                 <span class="hand-icon icon-collect"></span>
272                                 <b>私藏</b>
273                             </a>
274                             <a href="#" class="user-a a-icon">
275                                 <span>
276                                     <img src="img/user.jpg" alt="">
277                                 </span>
278                                 <b>张三</b>
279                             </a>
280                             <span class="left time-into">
281                                 <a href="#" class="time-a">
282                                     <b>十分钟前</b>
283                                 </a>
284                                 <i>入热榜</i>
285                             </span>
286                             <span class="share-site-to">
287                                 <i>分享到</i>
288                                 <span class="share-icon">
289                                     <a class="icon-sina" href="#" title="分享到新浪微博"></a>
290                                     <a class="icon-douban" href="#" title="分享到豆瓣"></a>
291                                     <a class="icon-qqzone" href="#" title="分享到QQ空间"></a>
292                                     <a class="icon-renren" href="#" title="分享到人人网"></a>
293                                 </span>
294                             </span>
295                         </div>
296                     </div>
297 
298 
299                 </div>
300                 <div class="item">
301                     <!--新闻图片-->
302                     <div class="news-pic">
303                         <img src="img/news_img.jpg" alt="新闻图片">
304                     </div>
305                     <!--新闻内容-->
306                     <div class="news-content">
307                         <!--part1: 标题-->
308                         <div class="part1">
309                             <a href="#" class="show-content">
310                                 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句
311                                 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话
312                             </a>
313                             <span class="content-source">-www.guancha.cn</span>
314                             <a href="#" class="n2">
315                                 <span class="content-kind">42区</span>
316                             </a>
317                         </div>
318                         <!--part2: 图标-->
319                         <div class="part2">
320                             <a href="#" class="recommend a-icon" title="推荐">
321                                 <span class="hand-icon icon-recommend"></span>
322                                 <b>4</b>
323                             </a>
324                             <a href="#" class="discuss a-icon" title="讨论">
325                                 <span class="hand-icon icon-discuss"></span>
326                                 <b>5</b>
327                             </a>
328                             <a href="#" class="collect a-icon" title="加入私藏">
329                                 <span class="hand-icon icon-collect"></span>
330                                 <b>私藏</b>
331                             </a>
332                             <a href="#" class="user-a a-icon">
333                                 <span>
334                                     <img src="img/user.jpg" alt="">
335                                 </span>
336                                 <b>张三</b>
337                             </a>
338                             <span class="left time-into">
339                                 <a href="#" class="time-a">
340                                     <b>十分钟前</b>
341                                 </a>
342                                 <i>入热榜</i>
343                             </span>
344                             <span class="share-site-to">
345                                 <i>分享到</i>
346                                 <span class="share-icon">
347                                     <a class="icon-sina" href="#" title="分享到新浪微博"></a>
348                                     <a class="icon-douban" href="#" title="分享到豆瓣"></a>
349                                     <a class="icon-qqzone" href="#" title="分享到QQ空间"></a>
350                                     <a class="icon-renren" href="#" title="分享到人人网"></a>
351                                 </span>
352                             </span>
353                         </div>
354                     </div>
355 
356 
357                 </div>
358                 <div class="item">
359                     <!--新闻图片-->
360                     <div class="news-pic">
361                         <img src="img/news_img.jpg" alt="新闻图片">
362                     </div>
363                     <!--新闻内容-->
364                     <div class="news-content">
365                         <!--part1: 标题-->
366                         <div class="part1">
367                             <a href="#" class="show-content">
368                                 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句
369                                 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话
370                             </a>
371                             <span class="content-source">-www.guancha.cn</span>
372                             <a href="#" class="n2">
373                                 <span class="content-kind">42区</span>
374                             </a>
375                         </div>
376                         <!--part2: 图标-->
377                         <div class="part2">
378                             <a href="#" class="recommend a-icon" title="推荐">
379                                 <span class="hand-icon icon-recommend"></span>
380                                 <b>4</b>
381                             </a>
382                             <a href="#" class="discuss a-icon" title="讨论">
383                                 <span class="hand-icon icon-discuss"></span>
384                                 <b>5</b>
385                             </a>
386                             <a href="#" class="collect a-icon" title="加入私藏">
387                                 <span class="hand-icon icon-collect"></span>
388                                 <b>私藏</b>
389                             </a>
390                             <a href="#" class="user-a a-icon">
391                                 <span>
392                                     <img src="img/user.jpg" alt="">
393                                 </span>
394                                 <b>张三</b>
395                             </a>
396                             <span class="left time-into">
397                                 <a href="#" class="time-a">
398                                     <b>十分钟前</b>
399                                 </a>
400                                 <i>入热榜</i>
401                             </span>
402                             <span class="share-site-to">
403                                 <i>分享到</i>
404                                 <span class="share-icon">
405                                     <a class="icon-sina" href="#" title="分享到新浪微博"></a>
406                                     <a class="icon-douban" href="#" title="分享到豆瓣"></a>
407                                     <a class="icon-qqzone" href="#" title="分享到QQ空间"></a>
408                                     <a class="icon-renren" href="#" title="分享到人人网"></a>
409                                 </span>
410                             </span>
411                         </div>
412                     </div>
413 
414 
415                 </div>
416                 <div class="item">
417                     <!--新闻图片-->
418                     <div class="news-pic">
419                         <img src="img/news_img.jpg" alt="新闻图片">
420                     </div>
421                     <!--新闻内容-->
422                     <div class="news-content">
423                         <!--part1: 标题-->
424                         <div class="part1">
425                             <a href="#" class="show-content">
426                                 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句
427                                 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话
428                             </a>
429                             <span class="content-source">-www.guancha.cn</span>
430                             <a href="#" class="n2">
431                                 <span class="content-kind">42区</span>
432                             </a>
433                         </div>
434                         <!--part2: 图标-->
435                         <div class="part2">
436                             <a href="#" class="recommend a-icon" title="推荐">
437                                 <span class="hand-icon icon-recommend"></span>
438                                 <b>4</b>
439                             </a>
440                             <a href="#" class="discuss a-icon" title="讨论">
441                                 <span class="hand-icon icon-discuss"></span>
442                                 <b>5</b>
443                             </a>
444                             <a href="#" class="collect a-icon" title="加入私藏">
445                                 <span class="hand-icon icon-collect"></span>
446                                 <b>私藏</b>
447                             </a>
448                             <a href="#" class="user-a a-icon">
449                                 <span>
450                                     <img src="img/user.jpg" alt="">
451                                 </span>
452                                 <b>张三</b>
453                             </a>
454                             <span class="left time-into">
455                                 <a href="#" class="time-a">
456                                     <b>十分钟前</b>
457                                 </a>
458                                 <i>入热榜</i>
459                             </span>
460                             <span class="share-site-to">
461                                 <i>分享到</i>
462                                 <span class="share-icon">
463                                     <a class="icon-sina" href="#" title="分享到新浪微博"></a>
464                                     <a class="icon-douban" href="#" title="分享到豆瓣"></a>
465                                     <a class="icon-qqzone" href="#" title="分享到QQ空间"></a>
466                                     <a class="icon-renren" href="#" title="分享到人人网"></a>
467                                 </span>
468                             </span>
469                         </div>
470                     </div>
471 
472 
473                 </div>
474                 <div class="item">
475                     <!--新闻图片-->
476                     <div class="news-pic">
477                         <img src="img/news_img.jpg" alt="新闻图片">
478                     </div>
479                     <!--新闻内容-->
480                     <div class="news-content">
481                         <!--part1: 标题-->
482                         <div class="part1">
483                             <a href="#" class="show-content">
484                                 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句
485                                 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话
486                             </a>
487                             <span class="content-source">-www.guancha.cn</span>
488                             <a href="#" class="n2">
489                                 <span class="content-kind">42区</span>
490                             </a>
491                         </div>
492                         <!--part2: 图标-->
493                         <div class="part2">
494                             <a href="#" class="recommend a-icon" title="推荐">
495                                 <span class="hand-icon icon-recommend"></span>
496                                 <b>4</b>
497                             </a>
498                             <a href="#" class="discuss a-icon" title="讨论">
499                                 <span class="hand-icon icon-discuss"></span>
500                                 <b>5</b>
501                             </a>
502                             <a href="#" class="collect a-icon" title="加入私藏">
503                                 <span class="hand-icon icon-collect"></span>
504                                 <b>私藏</b>
505                             </a>
506                             <a href="#" class="user-a a-icon">
507                                 <span>
508                                     <img src="img/user.jpg" alt="">
509                                 </span>
510                                 <b>张三</b>
511                             </a>
512                             <span class="left time-into">
513                                 <a href="#" class="time-a">
514                                     <b>十分钟前</b>
515                                 </a>
516                                 <i>入热榜</i>
517                             </span>
518                             <span class="share-site-to">
519                                 <i>分享到</i>
520                                 <span class="share-icon">
521                                     <a class="icon-sina" href="#" title="分享到新浪微博"></a>
522                                     <a class="icon-douban" href="#" title="分享到豆瓣"></a>
523                                     <a class="icon-qqzone" href="#" title="分享到QQ空间"></a>
524                                     <a class="icon-renren" href="#" title="分享到人人网"></a>
525                                 </span>
526                             </span>
527                         </div>
528                     </div>
529 
530 
531                 </div>
532                 <div class="item">
533                     <!--新闻图片-->
534                     <div class="news-pic">
535                         <img src="img/news_img.jpg" alt="新闻图片">
536                     </div>
537                     <!--新闻内容-->
538                     <div class="news-content">
539                         <!--part1: 标题-->
540                         <div class="part1">
541                             <a href="#" class="show-content">
542                                 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句
543                                 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话
544                             </a>
545                             <span class="content-source">-www.guancha.cn</span>
546                             <a href="#" class="n2">
547                                 <span class="content-kind">42区</span>
548                             </a>
549                         </div>
550                         <!--part2: 图标-->
551                         <div class="part2">
552                             <a href="#" class="recommend a-icon" title="推荐">
553                                 <span class="hand-icon icon-recommend"></span>
554                                 <b>4</b>
555                             </a>
556                             <a href="#" class="discuss a-icon" title="讨论">
557                                 <span class="hand-icon icon-discuss"></span>
558                                 <b>5</b>
559                             </a>
560                             <a href="#" class="collect a-icon" title="加入私藏">
561                                 <span class="hand-icon icon-collect"></span>
562                                 <b>私藏</b>
563                             </a>
564                             <a href="#" class="user-a a-icon">
565                                 <span>
566                                     <img src="img/user.jpg" alt="">
567                                 </span>
568                                 <b>张三</b>
569                             </a>
570                             <span class="left time-into">
571                                 <a href="#" class="time-a">
572                                     <b>十分钟前</b>
573                                 </a>
574                                 <i>入热榜</i>
575                             </span>
576                             <span class="share-site-to">
577                                 <i>分享到</i>
578                                 <span class="share-icon">
579                                     <a class="icon-sina" href="#" title="分享到新浪微博"></a>
580                                     <a class="icon-douban" href="#" title="分享到豆瓣"></a>
581                                     <a class="icon-qqzone" href="#" title="分享到QQ空间"></a>
582                                     <a class="icon-renren" href="#" title="分享到人人网"></a>
583                                 </span>
584                             </span>
585                         </div>
586                     </div>
587 
588 
589                 </div>
590             </div>
591 
592             <!-- 页码区域 -->
593             <div id="page-area" class="page-area">
594                 <div id="pages">
595                     <ul>
596                         <li><span class="current_page">1</span></li>
597                         <li><a href="#" class="page-a">2</a></li>
598                         <li><a href="#" class="page-a">3</a></li>
599                         <li><a href="#" class="page-a">4</a></li>
600                         <li><a href="#" class="page-a">5</a></li>
601                         <li><a href="#" class="page-a">6</a></li>
602                         <li><a href="#" class="page-a">7</a></li>
603                         <li><a href="#" class="page-a">8</a></li>
604                         <li><a href="#" class="page-a">9</a></li>
605                         <li><a href="#" class="page-a">10</a></li>
606                         <li><a href="#" class="page-a page-next">下一页</a></li>
607                     </ul>
608                 </div>
609             </div>
610 
611         </div>
612 
613         <div class="content-R"></div>
614 
615         <div class="footer-box">
616             <div class="foot-nav">
617                 <a href="">关于我们</a><span>|</span>
618                 <a href="">联系我们</a><span>|</span>
619                 <a href="">服务条款</a><span>|</span>
620                 <a href="">隐私政策</a><span>|</span>
621                 <a href="">抽屉新热榜工具</a><span>|</span>
622                 <a href="">下载客户端</a><span>|</span>
623                 <a href="">意见与反馈</a><span>|</span>
624                 <a href="">友情链接</a><span>|</span>
625                 <a href="">公告</a>
626             </div>
627             <div class="foot-nav2">
628                 <span class="foot_d">旗下站点</span>
629                 <span class="foot_a">©2018chouti.com</span>
630                 <a target="_blank" href="http://www.miibeian.gov.cn/" class="foot_b">京ICP备09053974号-3 京公网安备
631                     110102004562</a>
632                 <div style="margin-top:6px;">
633                     <span class="foot_d">违法和不良信息举报:</span>
634                     <span class="foot_a">电话:010-58302039  </span>
635                     <span class="foot_a" style="margin-left: 15px;">邮箱:<a style="color: #369;margin-right: 10px;"
636                                                                           href="mailto:jubao@chouti.com">jubao@chouti.com</a> </span>
637                 </div>
638                 <div style="margin-top:6px;">版权所有:北京格致璞科技有限公司</div>
639             </div>
640         </div>
641     </div>
642 </div>
643 
644 <a href="#start" title="回到顶部" class="icon-main" style="display: block;"></a>
645 
646 </body>
647 </html>
View Code

 

CSS:

  1         /*清除浏览器默认的margin和padding*/
  2         * {
  3             margin: 0;
  4             padding: 0;
  5         }
  6 
  7         /*清除a标签的下划线*/
  8         a {
  9             text-decoration: none;
 10         }
 11 
 12         body {
 13             font-family: "Times New Roman";
 14             font-size: 12px;
 15         }
 16         /*回到顶部*/
 17         .icon-main{
 18             background: url("img/Back-to-the-top_38_78.png") no-repeat 0 0;
 19             height: 38px;
 20             width: 38px;
 21             position: fixed;
 22             right: 30px;
 23             bottom: 30px;
 24         }
 25         /*---head部分开始-------------------------------------------------------------------*/
 26         .head-box {
 27             background-color: #2459a2;
 28             height: 44px;
 29             width: 100%;
 30             position: fixed;
 31             top: 0;
 32             left: 0;
 33             right: 0;
 34         }
 35 
 36         .head-content {
 37             width: 1000px;
 38             height: 44px;
 39             line-height: 44px;
 40             /*background-color: #006666;*/
 41             margin: 0 auto;
 42             position: relative;
 43         }
 44 
 45         .head-content .logo {
 46             display: inline-block;
 47             background: url("img/logo.png") no-repeat;
 48             width: 121px;
 49             height: 23px;
 50             float: left;
 51             margin-top: 11px;
 52         }
 53 
 54         .head-content .action-menu {
 55             float: left;
 56             margin-left: 5px;
 57         }
 58 
 59         .head-content .action-menu .tb {
 60             display: inline-block;
 61             padding: 0 15px 0 15px;
 62             color: darkgrey;
 63         }
 64 
 65         .head-content .action-menu .tb:hover {
 66             color: white;
 67             background-color: #204982;
 68         }
 69 
 70         .head-content .action-menu .active {
 71             display: inline-block;
 72             background-color: #204982;
 73             margin-left: 15px;
 74             color: white;
 75         }
 76 
 77         .head-content .key-search {
 78             float: right;
 79             margin-top: 7px;
 80         }
 81 
 82         .head-content .key-search .search-text {
 83             border: 1px solid #e0e0e0;
 84             height: 27px;
 85             width: 93px;
 86             float: left;
 87         }
 88 
 89         .head-content .key-search a {
 90             border: 1px solid #e0e0e0;
 91             background-color: white;
 92             height: 27px;
 93             width: 25px;
 94             float: right;
 95         }
 96 
 97         .head-content .key-search a span {
 98             display: inline-block;
 99             width: 17px;
100             height: 15px;
101             background: url("img/icon.png") no-repeat 0 -196px;
102             margin-bottom: 4px;
103             margin-left: 7px;
104         }
105 
106         .head-content .action-nav {
107             position: absolute;
108             right: 140px;
109         }
110 
111         /*设置了position为absolute或relative的内联元素不用设置display即可设置长度和宽度*/
112         .head-content .action-nav a {
113             color: white;
114             display: inline-block;
115             margin: 0 5px;
116             padding: 0 20px;
117         }
118 
119         .head-content .action-nav a:hover {
120             background-color: #396bb3;
121         }
122 
123         /*---head部分结束-------------------------------------------------------------------*/
124 
125         /*---content部分开始-------------------------------------------------------------------*/
126         .main-content-box {
127             background-color: lightgray;
128             padding-top: 44px;
129         }
130 
131         .main-content {
132             background-color: white;
133             margin: 0 auto;
134             width: 1000px;
135             height: auto !important; /*高度不能定死!!!应该自适应!!!*/
136             min-width: 700px;
137             overflow: hidden;
138         }
139 
140         .main-content .content-L {
141             float: left;
142             width: 630px;
143             margin-top: 5px;
144             margin-left: 5px;
145         }
146         /*置顶区域*/
147         .content-L .top-area{
148             border-bottom: 1px solid #b4b4b4;
149             padding-bottom: 40px;
150         }
151         /*类别导航*/
152         .top-area .child-nav{
153             float: left;
154         }
155         .child-nav a{
156             display: inline-block;
157             width: 60px;
158             height: 30px;
159             color: #369;
160             /*居中显示:*/
161             line-height: 30px; text-align: center;
162         }
163         .child-nav .active{
164             background: url("/8.前端技术(HTML,CSS,JavaScript,jQuery)/HTML+CSS实现页面/index_chouti/img/tip.png") no-repeat 0 -290px;
165             color: black;
166             font-weight: bolder;
167         }
168         .child-nav .newbtn:hover, .child-nav .personbtn:hover{
169             text-decoration: underline;
170         }
171         /*排序导航*/
172         .top-area .sort-nav{
173             float: left;
174             margin-left: 160px;
175         }
176         .top-area .sort-nav .newbtn:hover{
177             text-decoration: underline;
178         }
179         .sort-nav a{
180             display: inline-block;
181             margin-left: 10px;
182             color: seagreen;
183             /*居中显示:*/
184             line-height: 30px; text-align: center;
185         }
186         .sort-nav .active{
187             color: #b4b4b4;
188         }
189         /*发布按钮*/
190         .top-area .publish-btn{
191             float: right;
192             color: whitesmoke;
193             font-size: 15px;
194             display: inline-block;
195             width: 136px;
196             height: 32px;
197             /*居中显示:*/
198             line-height: 32px; text-align: center;
199             background-color: #84a42b;
200         }
201         .top-area .publish-btn:hover{
202             opacity: 0.9;
203         }
204 
205         /*文章列表开始*/
206         .content-list .item{
207             border-bottom: 1px solid #b4b4b4;
208             padding-top: 10px;
209         }
210         .content-list .item .news-pic{
211             float: right;
212         }
213         /*文章图片*/
214         .content-list .item .news-pic img{
215             width: 60px;
216             height: 60px;
217             border: 1px solid darkgrey;
218         }
219         .content-list .item .part1{
220             line-height: 18px;
221         }
222         .part1 .content-source, .part1 .content-kind{
223             color: #b4b4b4;
224             margin-left: 6px;
225         }
226         .part1:hover a.show-content{
227             text-decoration: underline;
228         }
229         .part1 a.n2{
230             text-decoration: underline;
231         }
232 
233         .content-list .item .part2{
234             padding-top: 8px;
235             padding-bottom: 12px;
236             color: #ccc;
237         }
238         /*一系列图标(点赞讨论收藏)*/
239         .part2 .hand-icon{
240             background: url("img/icon_18_118.png") no-repeat 0 0;
241             display: inline-block;
242             width: 18px;
243             height: 18px;
244         }
245         .part2 .icon-recommend{
246             background-position: 0 -40px;
247         }
248         .part2 .icon-recommend:hover{
249             background-position: 0 0;
250         }
251         .part2 .icon-discuss{
252             background-position: 0 -100px;
253         }
254         .part2 .icon-discuss:hover{
255             background-position: 0 -60px;
256         }
257         .part2 .icon-collect{
258             background-position: 0 -160px;
259         }
260         .part2 .icon-collect:hover{
261             background-position: 0 -120px;
262         }
263         /*用户头像*/
264         .part2 .user-a img{
265             width: 15px;
266             height: 15px;
267             padding: 1px;
268             border: 1px solid #ccc;
269             background-color: #ffffff;
270         }
271         .part2 .a-icon{
272             margin-right: 15px;
273         }
274         /*设置对齐*/
275         .part2 a b, .part2 span i{
276             vertical-align: 4px;
277             font-size: 14px;
278         }
279         /*入热榜两端间距*/
280         .part2 .time-into{
281             margin-right: 10px;
282             margin-left: 10px;
283         }
284         /*一系列分享图标*/
285         .part2 .share-icon a{
286             display: inline-block;
287             background: url("img/share_icon.png") no-repeat 0 0;
288             margin: 0 3px;
289             opacity: 0.6;
290         }
291         .part2 .share-icon a:hover{
292             opacity: 1;
293         }
294         .part2 .share-icon .icon-sina{
295             width: 17px;
296             height: 14px;
297             background-position: 0 -90px;
298         }
299         .part2 .share-icon .icon-douban{
300             width: 13px;
301             height: 13px;
302             background-position: 0 -105px;
303         }
304         .part2 .share-icon .icon-qqzone{
305             width: 16px;
306             height: 16px;
307             background-position: 0 -118px;
308         }
309         .part2 .share-icon .icon-renren{
310             width: 13px;
311             height: 13px;
312             background-position: 0 -150px;
313         }
314         /*默认不显示当鼠标移到item上时才显示*/
315         .share-site-to{
316             display: none;
317         }
318         .item:hover .share-site-to{
319             display: inline-block;
320         }
321         /*图标后的文字*/
322         .part2 .a-icon b{
323             color: #99aecb;
324         }
325         .part2 .a-icon b:hover{
326             color: dodgerblue;
327             text-decoration: underline;
328         }
329         .part2 .time-into b{
330             color: #e59373;
331         }
332         .part2 .time-into b:hover{
333             text-decoration: underline;
334         }
335         /*页码区*/
336         .page-area{
337             margin-left: 20px;
338             margin-top: 15px;
339             margin-bottom: 40px;
340         }
341         .page-area ul li{
342             display: inline-block;
343         }
344         .page-area ul li span{
345             display: inline-block;
346             color: #336699;
347             float: left;
348             height: 34px;
349             line-height: 34px;
350             width: 34px;
351             text-align: center;
352             margin-left: 5px;
353         }
354         .page-area ul li a{
355             display: inline-block;
356             color: #336699;
357             float: left;
358             height: 34px;
359             line-height: 34px;
360             width: 34px;
361             text-align: center;
362             border: 1px solid dimgrey;
363             border-radius: 15%;
364             margin-left: 5px;
365         }
366         .page-area ul li a.page-next{
367             width: 78px;
368         }
369         .page-area ul li a:hover{
370             background-color: #336699;
371             color: white;
372         }
373 
374         .main-content .content-R {
375             float: left;
376         }
377         /*页脚区*/
378         .main-content .footer-box {
379             clear: both;
380             width: 960px;
381             margin: 0 auto;
382             border-top: 1px solid mediumvioletred;
383         }
384         .footer-box .foot-nav{
385             padding-top: 15px;
386             text-align: center;
387         }
388         .footer-box .foot-nav a{
389             display: inline-block;
390             margin: 0 10px;
391         }
392         .footer-box .foot-nav a:hover{
393             text-decoration: underline;
394         }
395         .footer-box .foot-nav2{
396             margin-top: 6px;
397             margin-bottom: 15px;
398             text-align: center;
399         }
View Code

 

 

 

二、个人博客首页

1.实现效果

 

 

2.代码:

HTML:

  1 <!--__author__ = "wyb"-->
  2 <!DOCTYPE html>
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>博客首页</title>
  7     <link rel="stylesheet" href="blog.css">
  8 </head>
  9 <body>
 10 
 11 <!--左侧边栏开始-->
 12 <div class="left left-section">
 13     <!--头像开始-->
 14     <div class="header-img">
 15         <img src="tx.jpg" alt="头像">
 16     </div>
 17     <!--头像结束-->
 18 
 19     <!--名字、介绍开始-->
 20     <div class="blog-name">wyb的博客</div>
 21     <div class="blog-info">wyb的个人博客,记录学习笔记以及感悟</div>
 22     <!--名字、介绍结束-->
 23 
 24     <!--链接区开始-->
 25     <div class="blog-links">
 26         <ul>
 27             <li><a href="">关于</a></li>
 28             <li><a href="">联系</a></li>
 29             <li><a href="">百度</a></li>
 30         </ul>
 31     </div>
 32     <!--链接区结束-->
 33 
 34     <!--文章分类开始-->
 35     <div class="blog-tags">
 36         <ul>
 37             <li><a href="">python</a></li>
 38             <li><a href="">javascript</a></li>
 39             <li><a href="">Go</a></li>
 40         </ul>
 41     </div>
 42     <!--文章分类结束-->
 43 </div>
 44 <!--左侧边栏结束-->
 45 
 46 <!--右侧边栏开始-->
 47 <div class="right right-section">
 48     <!--文章列表开始-->
 49     <div class="article-list">
 50         <!--一篇文章开始-->
 51         <div class="article">
 52             <!--文章标题开始-->
 53             <div class="article-title">
 54                 <h1 class="article-name">
 55                     <a href="">python入门</a>
 56                 </h1>
 57                 <span class="article-date right">2018-5-22</span>
 58             </div>
 59             <!--文章标题结束-->
 60             <!--文章信息开始-->
 61             <div class="article-info">
 62                 python牛逼啊  666
 63             </div>
 64             <!--文章信息结束-->
 65             <!--文章标签开始-->
 66             <div class="article-tag">
 67                 <span>python</span>
 68             </div>
 69             <!--文章标签结束-->
 70         </div>
 71         <!--一篇文章结束-->
 72         <!--一篇文章开始-->
 73         <div class="article">
 74             <!--文章标题开始-->
 75             <div class="article-title">
 76                 <h1 class="article-name">
 77                     <a href="">python入门</a>
 78                 </h1>
 79                 <span class="article-date right">2018-5-22</span>
 80             </div>
 81             <!--文章标题结束-->
 82             <!--文章信息开始-->
 83             <div class="article-info">
 84                 python牛逼啊  666
 85             </div>
 86             <!--文章信息结束-->
 87             <!--文章标签开始-->
 88             <div class="article-tag">
 89                 <span>python</span>
 90             </div>
 91             <!--文章标签结束-->
 92         </div>
 93         <!--一篇文章结束-->
 94         <!--一篇文章开始-->
 95         <div class="article">
 96             <!--文章标题开始-->
 97             <div class="article-title">
 98                 <h1 class="article-name">
 99                     <a href="">python入门</a>
100                 </h1>
101                 <span class="article-date right">2018-5-22</span>
102             </div>
103             <!--文章标题结束-->
104             <!--文章信息开始-->
105             <div class="article-info">
106                 python牛逼啊  666
107             </div>
108             <!--文章信息结束-->
109             <!--文章标签开始-->
110             <div class="article-tag">
111                 <span>python</span>
112             </div>
113             <!--文章标签结束-->
114         </div>
115         <!--一篇文章结束-->
116         <!--一篇文章开始-->
117         <div class="article">
118             <!--文章标题开始-->
119             <div class="article-title">
120                 <h1 class="article-name">
121                     <a href="">python入门</a>
122                 </h1>
123                 <span class="article-date right">2018-5-22</span>
124             </div>
125             <!--文章标题结束-->
126             <!--文章信息开始-->
127             <div class="article-info">
128                 python牛逼啊  666
129             </div>
130             <!--文章信息结束-->
131             <!--文章标签开始-->
132             <div class="article-tag">
133                 <span>python</span>
134             </div>
135             <!--文章标签结束-->
136         </div>
137         <!--一篇文章结束-->
138         <!--一篇文章开始-->
139         <div class="article">
140             <!--文章标题开始-->
141             <div class="article-title">
142                 <h1 class="article-name">
143                     <a href="">python入门</a>
144                 </h1>
145                 <span class="article-date right">2018-5-22</span>
146             </div>
147             <!--文章标题结束-->
148             <!--文章信息开始-->
149             <div class="article-info">
150                 python牛逼啊  666
151             </div>
152             <!--文章信息结束-->
153             <!--文章标签开始-->
154             <div class="article-tag">
155                 <span>python</span>
156             </div>
157             <!--文章标签结束-->
158         </div>
159         <!--一篇文章结束-->
160         <!--一篇文章开始-->
161         <div class="article">
162             <!--文章标题开始-->
163             <div class="article-title">
164                 <h1 class="article-name">
165                     <a href="">python入门</a>
166                 </h1>
167                 <span class="article-date right">2018-5-22</span>
168             </div>
169             <!--文章标题结束-->
170             <!--文章信息开始-->
171             <div class="article-info">
172                 python牛逼啊  666
173             </div>
174             <!--文章信息结束-->
175             <!--文章标签开始-->
176             <div class="article-tag">
177                 <span>python</span>
178             </div>
179             <!--文章标签结束-->
180         </div>
181         <!--一篇文章结束-->
182 
183     </div>
184     <!--文章列表结束-->
185 </div>
186 <!--右边栏结束-->
187 
188 </body>
189 </html>
View Code

 

CSS:

  1 /*blog页面相关样式*/
  2 
  3 
  4 /*共用样式区*/
  5 *{
  6     font-family: 微软雅黑;
  7     font-size: 14px;
  8     margin: 0;
  9     padding: 0;
 10 }
 11 a{
 12     color: #eee;
 13     text-decoration: none;
 14 }
 15 a:hover{
 16     color: red;
 17 }
 18 .left{
 19     float: left;
 20 }
 21 .right{
 22     float: right;
 23 }
 24 
 25 
 26 /*左边栏样式*/
 27 .left-section{
 28     width: 20%;
 29     height: 100%;
 30     background-color: rgb(76, 77, 76);
 31     position: fixed;
 32     left: 0;
 33     top: 0;
 34     bottom: 0;
 35 }
 36 /*头像样式*/
 37 .header-img{
 38     width: 120px;
 39     height: 120px;
 40     border: 5px solid white;
 41     border-radius: 50%;
 42     overflow: hidden;
 43     margin: 0 auto;
 44     margin-top: 20px;
 45 }
 46 .header-img img{
 47     max-width: 100%;
 48 }
 49 /*博客名称*/
 50 .blog-name{
 51     color: white;
 52     font-size: 24px;
 53     font-weight: bold;
 54     text-align: center;
 55     margin-top: 15px;
 56 }
 57 /*博客介绍信息*/
 58 .blog-info{
 59     color: white;
 60     text-align: center;
 61     border: 2px solid white;
 62     margin: 5px 10px;
 63 }
 64 /*博客链接组和分类组*/
 65 .blog-links{
 66     text-align: center;
 67     margin-top: 20px;
 68 }
 69 .blog-links li{
 70     margin-top: 5px;
 71 }
 72 .blog-tags{
 73     text-align: center;
 74     margin-top: 20px;
 75 }
 76 .blog-tags li{
 77     margin-top: 5px;
 78 }
 79 .blog-tags a:before{
 80     content: '#';
 81 }
 82 
 83 
 84 /*右边栏样式*/
 85 .right-section{
 86     width: 80%;
 87     background-color: rgb(238, 237, 237);
 88     min-height: 800px;
 89 }
 90 /*文章列表*/
 91 .article-list{
 92     margin-top: 30px;
 93     margin-left: 5%;
 94     margin-right: 10%;
 95 }
 96 /*每一篇文章*/
 97 .article{
 98     margin-bottom: 15px;
 99     background-color: white;
100 }
101 /*文章标题*/
102 .article-title{
103     padding: 15px;
104     border-left: 3px solid red;
105 }
106 .article-name{
107     display: inline-block;
108 }
109 .article-name a{
110     color: #000;
111 }
112 .article-name a:hover{
113     color: red;
114 }
115 /*文章信息*/
116 .article-info{
117     padding: 15px;
118 }
119 /*文章分类*/
120 .article-tag{
121     padding: 10px 0;
122     margin: 0 15px;
123     border-top: 1px solid gray;
124 }
125 .article-tag span:before{
126     content: "#";
127 }
View Code

 

 

 

三、小米官网首页

1.实现目标:https://www.mi.com/

 

 

2.代码:

HTML:

 

 

CSS:

 

 

 

四、登陆注册页面

1.实现效果

 

 

2.代码:

HTML代码:

 

 

CSS代码:

 

posted @ 2018-05-24 12:41  woz333333  阅读(479)  评论(0编辑  收藏  举报