简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 第二节课堂作业，利用现有知识防网页头部
Blogger Information
Blog 11
fans 0
comment 0
visits 27316
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第二节课堂作业，利用现有知识防网页头部
饮雪煮茶
Original
675 people have browsed it

利用刚学习的html，css知识防网页头部。

下边是html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>php中文网</title>
  6.     <link rel="stylesheet" href="./static/font/iconfont.css">
  7.     <link rel="stylesheet" href="./static/css/index.css">
  8. </head>
  9. <body>
  10.     <header id="header">
  11.             <div class="logo">
  12.                 <img src="./static/images/logo.png" alt="">
  13.             </div>
  14.             <div class="header-right">
  15.                 <div class="searcher">
  16.                     <input type="text" id="searcher">
  17.                     <span class="icon iconfont icon-sousuo2"></span>
  18.                 </div>
  19.                 <div class="list">
  20.                     <span class="icon iconfont icon-huiyuan1"></span>
  21.                     <span class="icon iconfont icon-danmu1"></span>
  22.                     <span class="icon iconfont icon-fabu"></span>
  23.                     <span class="icon iconfont icon-fangda"></span>
  24.                     <span class="icon iconfont icon-huiyuan2"></span>
  25.                     <span class="icon iconfont icon-dianzan"></span>
  26.                 </div>
  27.             </div>
  28.     </header>
  29.     <nav id="nav">
  30.         <div class="nav-item">
  31.             <div class="nav-ico">
  32.                 <span class="icon iconfont icon-gongdan"></span>
  33.                 <p nav-title>资讯<br>学习</p>
  34.             </div>
  35.             <div class="nav-list">
  36.                 <ul>
  37.                     <li><a href="#">器材</a></li>
  38.                     <li><a href="#">器材</a></li>
  39.                     <li><a href="#">器材</a></li>
  40.                     <li><a href="#">器材</a></li>
  41.                     <li><a href="#">器材</a></li>
  42.                     <li><a href="#">器材</a></li>
  43.                     <li><a href="#">器材</a></li>
  44.                     <li><a href="#">器材</a></li>
  45.                 </ul>
  46.             </div>
  47.         </div>
  48.         <div class="nav-item">
  49.             <div class="nav-ico">
  50.                 <span class="icon iconfont icon-gongdan"></span>
  51.                 <p nav-title>资讯<br>学习</p>
  52.             </div>
  53.             <div class="nav-list">
  54.                 <ul>
  55.                     <li><a href="#">器材</a></li>
  56.                     <li><a href="#">器材</a></li>
  57.                     <li><a href="#">器材</a></li>
  58.                     <li><a href="#">器材</a></li>
  59.                     <li><a href="#">器材</a></li>
  60.                     <li><a href="#">器材</a></li>
  61.                     <li><a href="#">器材</a></li>
  62.                     <li><a href="#">器材</a></li>
  63.                 </ul>
  64.             </div>
  65.         </div>
  66.         <div class="nav-item">
  67.         <div class="nav-ico">
  68.             <span class="icon iconfont icon-gongdan"></span>
  69.             <p nav-title>资讯<br>学习</p>
  70.         </div>
  71.         <div class="nav-list">
  72.             <ul>
  73.                 <li><a href="#">器材</a></li>
  74.                 <li><a href="#">器材</a></li>
  75.                 <li><a href="#">器材</a></li>
  76.                 <li><a href="#">器材</a></li>
  77.                 <li><a href="#">器材</a></li>
  78.                 <li><a href="#">器材</a></li>
  79.                 <li><a href="#">器材</a></li>
  80.                 <li><a href="#">器材</a></li>
  81.             </ul>
  82.         </div>
  83.     </div>
  84.         <div class="nav-item">
  85.         <div class="nav-ico">
  86.             <span class="icon iconfont icon-gongdan"></span>
  87.             <p nav-title>资讯<br>学习</p>
  88.         </div>
  89.         <div class="nav-list">
  90.             <ul>
  91.                 <li><a href="#">器材</a></li>
  92.                 <li><a href="#">器材</a></li>
  93.                 <li><a href="#">器材</a></li>
  94.                 <li><a href="#">器材</a></li>
  95.                 <li><a href="#">器材</a></li>
  96.                 <li><a href="#">器材</a></li>
  97.                 <li><a href="#">器材</a></li>
  98.                 <li><a href="#">器材</a></li>
  99.             </ul>
  100.         </div>
  101.     </div>
  102.     </nav>
  103. <div id="banner">
  104.     <img src="./static/images/2.jpg" alt="" width="1200px" height="430">
  105.     <img src="./static/images/banner-right.jpg" alt="" width="390" height="430">
  106. </div>
  107. </body>
  108. </html>

下边是css代码：

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     font-family: "Microsoft YaHei UI";
  6. }
  7. #header{
  8.     width: 1600px;
  9.     margin: 0 auto;
  10.     height: 160px;
  11. }
  12. #header .logo{
  13.     height:160px;
  14.     float: left;
  15. }
  16. #header .logo img{
  17.     height: 70px;
  18.     width: 200px;
  19.     margin-top: 40px;
  20. }
  21. #header .header-right{
  22.     width:850px;
  23.     height:160px;
  24.     line-height: 160px;
  25.     float:right;
  26. }
  27. #header .header-right .searcher{
  28.     float:left;
  29.     position: relative;
  30. }
  31. #header .header-right span{
  32.     width: 30px;
  33. }
  34. #header .header-right #searcher{
  35.     width: 440px;
  36.     height:50px;
  37.     border-radius: 10px;
  38.     box-shadow: none;
  39.     border: 1px solid #ccc;
  40. }
  41. #header .header-right .searcher .iconfont{
  42.     font-size: 35px;
  43.     position: absolute;
  44.     left: 390px;
  45.     color: #ccc;
  46. }
  47. #header .header-right .list{
  48.     float:right;
  49. }
  50. #header .list .iconfont{
  51.     font-size:40px;
  52.     margin-left: 15px;
  53. }
  54. /*导航开始*/
  55. #nav{
  56.     width: 1600px;
  57.     height: 100px;
  58.     margin: 0 auto;
  59.     color: #333;
  60.     font-size: 16px;
  61.     font-weight: bold;
  62. }
  64. #nav .nav-ico{
  65.     width: 120px;
  66.     border-right: 1px solid #ccc;
  67.     float: left;
  68. }
  69. #nav .nav-ico .iconfont{
  70.     font-size: 50px;
  71.     color: red;
  72.     display: inline-block;
  73.     float: left;
  74.     margin-right: 10px;
  75. }
  76. #nav .nav-ico p{
  77.     line-height: 30px;
  78.     margin-left: 15px;
  79. }
  80. #nav .nav-list{
  81.     width: 220px;
  82.     float: left;
  83.     margin-right: 40px;
  84. }
  85. #nav ul li{
  86.     list-style: none;
  87.     display: block;
  88.     float: left;
  89.     margin: 5px 10px;
  90.     white-space: nowrap;
  91. }
  92. #nav ul li a{
  93.     color: #555;
  94.     text-decoration: none;
  95. }
  97. /*banner开始*/
  98. #banner{
  99.     width: 1600px;
  100.     margin: 0 auto;
  101. }

效果图

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：写真规范, 代码看上去真舒服
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！