search

博客列表 >2019年12月20日的作业

2019年12月20日的作业

飘飘
飘飘原创
2019年12月23日 15:03:42687浏览

  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>​
上一条：12月19日_jQuery选择器（基本选择器和层级选择器）下一条：PHP MySQL 插入多条数据
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多