第六第七次css作业企业站

来源：互联网发布：淘宝运动服童装编辑：程序博客网时间：2024/06/02 14:47

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="description" content="扫描" />
   <meta name="keywords" content="html" />
   <title>Document</title>
   <style>
   *{
       margin:0;
       padding:0;
   }
   body{
       background:#fff;
   }
   .all{
       width:100%;
       height:70px;
       /*border-bottom:2px solid #000;*/
       background:#fff;
   }
       .a{

       margin:10px auto;
       width:1100px;
   /*   background:#ccc;*/
       height:60px;

   }

   img{
       float:left;
   }
   .a ul li{

       float:right;
       padding:20px 20px 15px 25px;

   }
   .a ul li:last-child{
       padding-right: 0;
   }
   li{
       list-style:none;
   }
   .a ul li a:hover{
       color:#CF4545;
   }
   a{
       text-decoration:none;
       color:#000;
   }
   .a ul li .on{
             color:#CF4545;
             border-bottom:2px solid #CF4545;
             padding-bottom:5px;
   }

      .q0{
               width:100%;
               margin-top:200px;
               height:200px;
               background:#F2F2F2;
            }
            .q1{
                  margin:100px auto;

                  width:1200px;
                  height:180px;
            }
            .q0 .q1 ul{
               float:left;
            }
            .q0 .q1 ul .q2 {
               width: 130px;
               height: auto;
                float:left;
                padding:20px 20px 0 20px;
                background:url(line.png) no-repeat;
                 margin:20px 20px 0 20px;
                 color:#000;
                 font-size:20px;
            }
            .q0 .q1 ul .q2:first-child{
               background:none;
            }
        .q0 .q1 ul .q3{
           background:url(line.png) no-repeat;
           height: auto;
           width:200px;
           float:left;
           margin:20px 20px 20px 20px;
           padding:20px 20px 0 20px;
           font-size:20px;
           color:#000;
        }
         .q0 .q1 ul .q6{
            background:url(line.png) no-repeat;
           height: auto;
           width:300px;
           float:left;
           margin:20px 20px 20px 20px;
           padding:20px 20px 0 20px;
           font-size:20px;
           color:#000;
         }
         .q0 .q1 ul .q4{
                 background:url(icon4.png) no-repeat 80px 0px;
         }
        .q2 li{
           padding:2px;
           padding-top:10px; font-size:15px;
        }
        .q2 ul{
            margin-top:10px;
         }
         .q3 ul{
            margin-top:10px;
         }
         .q3 li{
           padding:3px;
           font-size:15px;

        }
        .q3 li img{
           float:right;
        }
         .q3 li .q5{
            float:right;
         }
         .w{

            width:100%;
            height:50px;
            background: #F2F2F2;
         }
         input[type="text"]{
            margin-left:855px;
            border-radius:7px 0px 0px 7px;
            height:30px;
            width: 280px;
            border:none;

         }
         input[type="button"]{
            color:#fff;
            background:red;
            border-radius:0 7px 7px 0;
            width:60px;
            height: 30px;
         }
         .e{
              width: 100%;
              height:25px;
              background:#333;
         }
         .e1{
            margin:0 auto;
            width:900px;
            height:25px;

         }
         .e2 a{
            float:left;
            color:#fff;
         }
          .e3{
            float:right;
            color:#fff;
         }
   </style>
</head>
<body>
       <div class="all">
       <div class="a">
           <a href=""><img src="logo.jpg" height="55" width="355"></a>
       <ul>
           <li ><a href="" >联系我们</a></li>
           <li><a href="">渠道招商</a></li>
           <li><a href="">项目案例</a></li>
           <li><a href="">产品与案例</a></li>
           <li><a href="" class="on">>关于安行</a></li>
           <li><a href="" 首页</a></li>
       </ul>
        </div>


        <div class="q0">
           <div class="q1">
               <ul>
                   <li class="q2">技术支持
                       <ul>
                           <a href=""><li>常见问题</li></a>
                           <a href=""><li>售后&维修</li></a>
                           <a href=""><li>下载</li></a>
                       </ul>
                   </li>
                           <li class="q2">关于安行飞控
                       <ul>
                           <a href=""><li>了解安行飞控</li></a>
                           <a href=""><li>联系我们</li></a>
                           <a href=""><li>加入我们</li></a>
                       </ul>
                   </li>
                           <li class="q3 q4">联系方式
                       <ul>
                           <li>邮箱：361467347@qq.com</li>
                           <li>电话0755-88008512</li>
                           <a href=""><li><img src="f1.png">
                               <img src="f2.png"><img src="f3.png"><img src="f4.png"></li></a>
                       </ul></li>
                               <li class="q3 q6">我们的地址
                       <ul>
                           <li>深圳市安行飞控科技有限公司aaaaaaaaaaaa</li>
                           <li>shenzhen.angyo````````</li>
                           <li>深圳市南山区西丽``````</li>
                           <li>TEL:0755-88008512<span class="q5"><img src="icon7.png">网站地址</span></li>
                       </ul></li>
               </ul>
           </div>
        </div>
        <div class="w">
           <input type="text" value=""size="30"><input type="button" value="搜索" >
        </div>
        <div class="e">
           <div class="e1">
               <span class="e2"><a href="">法律申明 </a></span>
               <span class="e2"><a href="">隐私保护 </a></span>
               <span class="e2"><a href="">联系我们</a></span>
               <span class="e3">@版权所有INF······</span>
           </div>
        </div>
</body>
</html>

0 0

第六第七次css作业 企业站

第六第七次css作业企业站