简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >12-20作业 网页头部实战_学号：527128

12-20作业 网页头部实战_学号：527128

十年一梦
十年一梦原创
2019年12月23日 09:14:39789浏览

2019年12月20号作业

1、小结

在写代码的过程中有好多记不住，在听课的过程中感觉自己记住了，但还是眼高手低，还是得多动手，不管这些重不重要，都要自己写一遍。

2、上个完成图

3、上HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>2019年12月20日作业</title>
  6.     <link rel="stylesheet" href="static/font/font-awesome-4.7.0/css/font-awesome.min.css">
  7.     <link rel="stylesheet" href="static/css/style.css">
  8. </head>
  9. <body>
  10.     <header>
  11.          <div class="he_top">
  12.              <div class="logo"><img src="static/images/logo.png" alt="PHP中文网LOGO" title="PHP中文网"/></div>
  13.              <div class="search">
  14. <!--                 <form action="demo.html" method="post" name="search">-->
  15.                      <input type="text" name="key" id="key"><i class="fa fa-search"></i>
  16. <!--                 </form>-->
  17.              </div>
  18.              <div class="login">
  19.                  <ul>
  20.                      <li><i class="fa fa-address-book"></i></li>
  21.                      <li><i class="fa fa-commenting"></i></li>
  22.                      <li><i class="fa fa-cloud-upload"></i></li>
  23.                      <li><i class="fa fa-search-plus"></i></li>
  24.                      <li><i class="fa fa-user-o"></i></li>
  25.                      <li><i class="fa fa-thumbs-o-up"></i></li>
  26.                  </ul>
  27.              </div>
  28.              <div class="clear"></div>
  29.          </div>
  30.         <nav>
  31.             <div class="nav_wk">
  32.                 <div class="nav_left">
  33.                     <div class="nav_ico"><i class="fa fa-file-text-o"></i></div>
  34.                     <div class="nav_text">
  35.                         <li><a href="#">咨询</a></li>
  36.                         <li><a href="#">学习</a></li>
  37.                     </div>
  38.                 </div>
  39.                 <div class="nav_right">
  40.                     <li class="nav_top">
  41.                         <a href="#"> <span>器材</span></a>
  42.                         <a href="#"><span>学员</span></a>
  43.                         <a href="#"><span>大师</span></a>
  44.                         <a href="#"> <span>实战</span></a>
  45.                     </li>
  46.                     <li class="nav_top">
  47.                         <a href="#"> <span>大赛</span></a>
  48.                         <a href="#"><span>影视</span></a>
  49.                         <a href="#"><span>裤子</span></a>
  50.                         <a href="#"><span>其他</span></a>
  51.                     </li>
  52.                 </div>
  53.             </div>
  54.             <div class="nav_wk">
  55.                 <div class="nav_left">
  56.                     <div class="nav_ico"><i class="fa fa-file-text-o"></i></div>
  57.                     <div class="nav_text">
  58.                         <li><a href="#">咨询</a></li>
  59.                         <li><a href="#">学习</a></li>
  60.                     </div>
  61.                 </div>
  62.                 <div class="nav_right">
  63.                     <li class="nav_top">
  64.                         <a href="#"> <span>器材</span></a>
  65.                         <a href="#"><span>学员</span></a>
  66.                         <a href="#"><span>大师</span></a>
  67.                         <a href="#"> <span>实战</span></a>
  68.                     </li>
  69.                     <li class="nav_top">
  70.                         <a href="#"> <span>大赛</span></a>
  71.                         <a href="#"><span>影视</span></a>
  72.                         <a href="#"><span>裤子</span></a>
  73.                         <a href="#"><span>其他</span></a>
  74.                     </li>
  75.                 </div>
  76.             </div>
  77.             <div class="nav_wk">
  78.                 <div class="nav_left">
  79.                     <div class="nav_ico"><i class="fa fa-file-text-o"></i></div>
  80.                     <div class="nav_text">
  81.                         <li><a href="#">咨询</a></li>
  82.                         <li><a href="#">学习</a></li>
  83.                     </div>
  84.                 </div>
  85.                 <div class="nav_right">
  86.                     <li class="nav_top">
  87.                         <a href="#"> <span>器材</span></a>
  88.                         <a href="#"><span>学员</span></a>
  89.                         <a href="#"><span>大师</span></a>
  90.                         <a href="#"> <span>实战</span></a>
  91.                     </li>
  92.                     <li class="nav_top">
  93.                         <a href="#"> <span>大赛</span></a>
  94.                         <a href="#"><span>影视</span></a>
  95.                         <a href="#"><span>裤子</span></a>
  96.                         <a href="#"><span>其他</span></a>
  97.                     </li>
  98.                 </div>
  99.             </div>
  100.             <div class="nav_wk">
  101.                 <div class="nav_left">
  102.                     <div class="nav_ico"><i class="fa fa-file-text-o"></i></div>
  103.                     <div class="nav_text">
  104.                         <li><a href="#">咨询</a></li>
  105.                         <li><a href="#">学习</a></li>
  106.                     </div>
  107.                 </div>
  108.                 <div class="nav_right">
  109.                     <li class="nav_top">
  110.                         <a href="#"> <span>器材</span></a>
  111.                         <a href="#"><span>学员</span></a>
  112.                         <a href="#"><span>大师</span></a>
  113.                         <a href="#"> <span>实战</span></a>
  114.                     </li>
  115.                     <li class="nav_top">
  116.                         <a href="#"> <span>大赛</span></a>
  117.                         <a href="#"><span>影视</span></a>
  118.                         <a href="#"><span>裤子</span></a>
  119.                         <a href="#"><span>其他</span></a>
  120.                     </li>
  121.                 </div>
  122.             </div>
  123.         </nav>
  124.         <div class="clear"></div>
  126.     </header>
  127.     <div class="banner">
  128.         <div class="banner_left">
  129.             <img src="static/images/4.jpg" alt="相机AD"/>
  130.         </div>
  131.         <div class="banner_right">
  132.             <img src="static/images/banner-right.jpg" alt="这个是妹子">
  133.         </div>
  134.         <div class="clear"></div>
  135.     </div>
  136. </body>
  137. </html>

4、上CSS

  1. @charset "utf-8";
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. ul, li, a{
  7.     list-style: none;
  8. }
  9. .clear{
  10.     clear: both;
  11. }
  12. .he_top{
  13.     width: 1200px;
  14.     margin: 20px auto;
  15. }
  16. .logo{
  17.     float: left;
  18.     width: 500px;
  19.     height: 60px;
  20. }
  21. .logo img{
  22.     height: 60px;
  23. }
  24. .search{
  25.     float: left;
  26.     width: 400px;
  27.     height: 60px;
  28.     position: relative;
  29. }
  30. .search input{
  31.     width: 350px;
  32.     height: 30px;
  33.     border-radius: 10px;
  34.     position: absolute;
  35.     top: 0;
  36.     left: 0;
  37.     bottom: 0;
  38.     right: 0;
  39.     margin: auto;
  40. }
  41. .search i{
  42.     width:50px;
  43.     height:50px;
  44.     font-size: 25px;
  45.     color: #999999;
  46.     position: relative;
  47.     top:15px;
  48.     bottom: 0;
  49.     margin: auto;
  50.     right:10px;
  51.     float: right;
  52. }
  53. .login{
  54.     float: left;
  55.     width: 300px;
  56.     height: 60px;
  57. }
  58. .login li{
  59.     width: 50px;
  60.     height:50px;
  61.     float: left;
  62.     font-size: 30px;
  63.     color: #666666;
  64.     padding-top: 10px;
  65.     box-sizing: border-box;
  66. }
  67. nav{
  68.     width:1200px;
  69.     margin: 0 auto;
  70.     font-size: 14px;
  71. }
  72. .nav_wk{
  73.     float: left;
  74.     width:300px;
  75.     height:40px;
  76. }
  77. .nav_wk a{
  78.     color: #666666;
  79. }
  80. .nav_left,.nav_right{
  81.     float: left;
  82.     height: 40px;
  83.     width: 80px;
  84. }
  85. .nav_ico {
  86.     width: 40px;
  87.     height: 40px;
  88.     color: #ff0000;
  89.     font-size: 30px;
  90.     float: left;
  91. }
  92. .nav_text{
  93.     width: 38px;
  94.     height: 40px;
  95.     float: left;
  96.     border-right: 2px solid #d3d3d3;
  97. }
  98. .nav_text li{
  99.     list-style: none;
  100.     text-decoration:none;
  101. }
  102. .nav_text li a{
  103.     list-style: none;
  104.     text-decoration:none;
  105. }
  106. .nav_right{
  107.     width: 160px;
  108.     height: 40px;
  109. }
  110. .nav_top{
  111.     width: 160px;
  112.     height: 20px;
  113.     text-align: center;
  114. }
  115. .nav_top span{
  116.     display: block;
  117.     float: left;
  118.     width: 40px;
  119.     height: 20px;
  120. }
  121. .banner{
  122.     width: 1200px;
  123.     height: 320px;
  124.     margin: 20px auto;
  125. }
  126. .banner_left{
  127.     width: 898px;
  128.     height: 320px;
  129.     float: left;
  130. }
  131. .banner_right{
  132.     width: 295px;
  133.     height: 320px;
  134.     float: right;
  135. }

6、写过一遍之后就会知道自己在哪方面没有记住，在去刷一遍视频！！！

PS 分享一下自己作业完成的方法,如果容易误导别人，请老师退回我删除！

1、首先是拆分这个HTML 无论多么复杂的HTML 拆开一个一个的小标签就可以完成了。
我先画一个分拆结构图

2、等分拆结构图出来之后，我是按从上往下，从外到内的方法。
3、像这次的作业，最外边就是三个div组成的，然后顶部LOGO、搜索框、图标部分也是有3个div并排组成。
4、基本的结构布局我都在图示标出来，希望能给不知道从哪下手的同学一个参考。
上一条：前端第十七课：javascript基础6-PHP培训九期线上班下一条：前端学习12:20大作业 header部分原生
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
江川林2019-12-23 10:13:451楼
赞！感谢提示！

相关文章

查看更多