Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2019年12月20日的作业
Blogger Information
Blog 4
fans 0
comment 0
visits 2922
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
2019年12月20日的作业
飘飘
Original
688 people have browsed it

  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.     <style>
  8.         /*清除自带的间距*/
  9.         *{
  10.             margin: 0 ;
  11.             padding: 0;
  12.         }
  13.         /*清除a标签下划线*/
  14.         a{
  15.             text-decoration: none;
  16.             color: #333333;
  17.         }
  18.         /*清除浮动*/
  19.         clear{
  20.             clear:both;
  21.         }
  23.         .header{
  24.             width: 1200px;
  25.             height: 150px;
  26.             margin: 0 auto;
  27.         }
  29.         .logo{
  30.             float: left;
  31.             width: 160px;
  32.             height: 80px;
  33.             margin-right: 295px;
  34.             margin-top: 45px;
  35.             position: relative;
  36.             background:url("./static/images/logo.png");
  37.         }
  39.         .sousuo{
  40.             float: left;
  41.             width: 200px;
  42.             height: 50px;
  43.             margin-left: 100px;
  44.             margin-top: 65px;
  45.             position: relative;
  46.         }
  48.         .sousuo input{
  49.             width: 300px;
  50.             height: 40px;
  51.             margin-top: 5px;
  52.             border: solid 1px #404040;
  53.             border-radius:10px;
  54.             position: absolute;
  56.         }
  58.         .sousuo label{
  59.             position: absolute;
  60.             margin-left: 280px;
  61.             margin-top: 15px;
  62.         }
  64.         .denglu{
  65.             float: left;
  66.             width: 300px;
  67.             height: 80px;
  68.             margin-left: 145px;
  69.             margin-top: 70px;
  70.             position: relative;
  71.         }
  73.         .denglu span{
  74.             font-size: 35px;
  75.             margin-left: 10px;
  76.         }
  78.         .content{
  79.             width: 1200px;
  80.             margin: 0 auto;
  81.         }
  83.         .content span{
  84.             float: left;
  85.             font-size: 35px;
  86.             color: red;
  87.             margin-right: 5px;
  88.         }
  90.         .nav-daohang1{
  91.             float: left;
  92.             padding-right: 5px;
  93.             box-sizing: border-box;
  95.         }
  97.         .nav-daohang2{
  98.             float: left;
  99.             margin-right: 70px;
  100.             padding-left: 5px;
  101.             border-left: solid 1px #404040;
  102.             box-sizing: border-box;
  104.         }
  107.         .footer{
  108.             width: 1200px;
  109.             margin: 0 auto;
  110.             margin-top: 70px;
  111.         }
  113.         .tupian-left{
  114.             float: left;
  115.             width:898px ;
  116.             height: 320px;
  117.             margin-right: 7px;
  118.             background:url("./static/images/2.jpg");
  120.         }
  122.         .tupian-right{
  123.             float: left;
  124.             width: 295px;
  125.             height: 320px;
  126.             background:url("./static/images/banner-right.jpg");
  127.         }
  132.     </style>
  133. </head>
  134. <body>
  135. <div class="box">
  136.     <div class="header">
  137.         <div class="logo">
  139.         </div>
  141.         <div class="sousuo">
  142.             <input type="search" name="search" id="search">
  143.             <label for="search" class="iconfont icon-jinduchaxun"></label>
  145.         </div>
  147.         <div class="denglu">
  148.             <a href=""><span class="iconfont icon-tianshenpi"></span></a>
  149.             <a href=""><span class="iconfont icon-danmu1"></span></a>
  150.             <a href=""><span class="iconfont icon-shujukanban"></span></a>
  151.             <a href=""><span class="iconfont icon-fangda"></span></a>
  152.             <a href=""><span class="iconfont icon-huiyuan2"></span></a>
  153.             <a href=""><span class="iconfont icon-dianzan"></span></a>
  154.         </div>
  155.     </div>
  157.     <div class="content">
  158.         <ul>
  160.             <div class="nav-span">
  161.                 <span class="iconfont icon-gongdan"></span>
  162.             </div>
  164.             <div class="nav-daohang1">
  165.                 <p>
  166.                     <a href="#">建材</a>
  167.                 </p>
  168.                 <p>
  169.                     <a href="#">建材</a>
  170.                 </p>
  171.             </div>
  173.             <div class="nav-daohang2">
  174.                 <p>
  175.                     <a href="#">建材</a>
  176.                     <a href="#">瓷砖</a>
  177.                     <a href="#">瓦片</a>
  178.                     <a href="#">水泥</a>
  179.                 </p>
  180.                 <p>
  181.                     <a href="#">钢筋</a>
  182.                     <a href="#">扳手</a>
  183.                     <a href="#">螺丝</a>
  184.                     <a href="#">卡口</a>
  185.                 </p>
  186.             </div>
  188.             <div class="nav-span">
  189.                 <span class="iconfont icon-gongdan"></span>
  190.             </div>
  192.             <div class="nav-daohang1">
  193.                 <p>
  194.                     <a href="#">建材</a>
  195.                 </p>
  196.                 <p>
  197.                     <a href="#">建材</a>
  198.                 </p>
  199.             </div>
  201.             <div class="nav-daohang2">
  202.                 <p>
  203.                     <a href="#">建材</a>
  204.                     <a href="#">瓷砖</a>
  205.                     <a href="#">瓦片</a>
  206.                     <a href="#">水泥</a>
  207.                 </p>
  208.                 <p>
  209.                     <a href="#">钢筋</a>
  210.                     <a href="#">扳手</a>
  211.                     <a href="#">螺丝</a>
  212.                     <a href="#">卡口</a>
  213.                 </p>
  214.             </div>
  216.             <div class="nav-span">
  217.                 <span class="iconfont icon-gongdan"></span>
  218.             </div>
  220.             <div class="nav-daohang1">
  221.                 <p>
  222.                     <a href="#">建材</a>
  223.                 </p>
  224.                 <p>
  225.                     <a href="#">建材</a>
  226.                 </p>
  227.             </div>
  229.             <div class="nav-daohang2">
  230.                 <p>
  231.                     <a href="#">建材</a>
  232.                     <a href="#">瓷砖</a>
  233.                     <a href="#">瓦片</a>
  234.                     <a href="#">水泥</a>
  235.                 </p>
  236.                 <p>
  237.                     <a href="#">钢筋</a>
  238.                     <a href="#">扳手</a>
  239.                     <a href="#">螺丝</a>
  240.                     <a href="#">卡口</a>
  241.                 </p>
  242.             </div>
  244.             <div class="nav-span">
  245.                 <span class="iconfont icon-gongdan"></span>
  246.             </div>
  248.             <div class="nav-daohang1">
  249.                 <p>
  250.                     <a href="#">建材</a>
  251.                 </p>
  252.                 <p>
  253.                     <a href="#">建材</a>
  254.                 </p>
  255.             </div>
  257.             <div class="nav-daohang2">
  258.                 <p>
  259.                     <a href="#">建材</a>
  260.                     <a href="#">瓷砖</a>
  261.                     <a href="#">瓦片</a>
  262.                     <a href="#">水泥</a>
  263.                 </p>
  264.                 <p>
  265.                     <a href="#">钢筋</a>
  266.                     <a href="#">扳手</a>
  267.                     <a href="#">螺丝</a>
  268.                     <a href="#">卡口</a>
  269.                 </p>
  270.             </div>
  271.         </ul>
  273.     </div>
  275.     <div class="footer">
  276.         <div class="tupian-left">
  278.         </div>
  279.         <div class="tupian-right">
  281.         </div>
  282.     </div>
  285. </div>
  287. </body>
  288. </html>​
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