亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 11
粉絲 0
評論 0
訪問量 30418
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
第二節(jié)課堂作業(yè)，利用現(xiàn)有知識防網(wǎng)頁頭部
飲雪煮茶
原創(chuàng)
873人瀏覽過

利用剛學(xué)習(xí)的html，css知識防網(wǎng)頁頭部。

下邊是html代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>php中文網(wǎng)</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>學(xué)習(xí)</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>學(xué)習(xí)</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>學(xué)習(xí)</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>學(xué)習(xí)</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. /*導(dǎo)航開始*/
  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. }

效果圖

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：寫真規(guī)范, 代碼看上去真舒服
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)