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

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

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

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>
  125. </header>
  126. <div class="banner">
  127. <div class="banner_left">
  128. <img src="static/images/4.jpg" alt="相机AD"/>
  129. </div>
  130. <div class="banner_right">
  131. <img src="static/images/banner-right.jpg" alt="这个是妹子">
  132. </div>
  133. <div class="clear"></div>
  134. </div>
  135. </body>
  136. </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、基本的结构布局我都在图示标出来,希望能给不知道从哪下手的同学一个参考。
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
江川林2019-12-23 10:13:451楼
赞!感谢提示!