首页 > 代码库 > 第四天

第四天

2024-08-22 02:04:54   223人阅读

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>网页标题</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css">
        body,ul,li{
                margin:0px;
                padding:0px;
                }
        .zong{
                width:980px;
                height:900px;
                margin:0 auto;
                }
        .top{
                height:80px;
                background-color:#EBDDDD;
                }
        .top img{
                height:80px;
                float:left;
                }
        .top span{
                font-size:18;
                line-height:80px;
                display:block;
                height:80px;
                float:left;
                font-weight:blod;
                }
        .top ul{
                float:left;
                margin-left:435px;
                margin-top:5px;
                }
        .top ul li{
                border-right:1px solid #000000;
                list-style:none;
                height:30px;
                float:right;
                line-height:30px;
                }
        .top ul li a{
                text-decoration:none
                }
        .top input{
                margin-top:10px;
                float:right;
                margin-right:12px;
                }
        
        .zhong{
                height:1000px;
                background-color:#EBDDDD;
                }
        .zhong-shang{
                height:332px;
                }
        .zhong-shang-shang{
                height:30px;
                background-color:#201E1F;
                }
        .zhong-shang-shang ul{
                float:left;
                }
        .zhong-shang-shang ul li{
                float:left;
                list-style:none;
                width:95px;
                margin-left:20px;
                height:30px;
                line-height:30px;
                text-align:center;
                }
        .zhong-shang-shang ul li a{
                text-decoration:none;
                color:#ffffff;
                display:block;
                height:30px;
                width:90px;
                margin:0 auto;
                line-height:30px;
                }
        .zhong-shang-shang ul li a:hover{
                background-color:#ffffff;
                color:#cc0000;
                }
        .zhong-xia{
                height:400px;
                margin-top:10px;
                }
        .zhong-xia-zuo{
                height:300px;
                width:130px;
                margin-left:5px;
                background-color:#FFFFFF;
                }
        .zhong-xia-zuo ul{
                float:left;
                margin-top:10px;
                }
        .zhong-xia-zuo ul li{
                border-bottom:1px solid #cc0000;
                margin-left:20px;
                height:45px;
                }
        .zhong-xia-zuo ul li a{
                text-decoration:none;
                color:#000000;
                display:block;
                height:50px;
                width:90px;
                margin:0 auto;
                line-height:45px;
                }
        .zhong-xia-zuo ul li a:hover{
                background-color:#ffffcc;
                color:#cc0000;
                }
        .zhong-xia-zhong{
                width:600px;
                height:300px;
                margin-left:150px;
                background-color:#FFFFFF;
                }
        .zhong-xia-zhong-shang{
                border-bottom:1px solid #A1A1A1;
                height:40px;
                }
        .zhong-xia-zhong-shang span{
                line-height:40px;
                }
        .zhong-xia-zhong-shang span sub{
                color:red;
                }
        .ict{
                line-height:40px;
                float:right;
                margin-right:10px;
                }
        .ict a{
                text-decoration:none;
                }
        .ict a:hover{
                color:red;
                }
        .zhong-xia-zhong-xia{
                height:258px;
                }
        .zhong-xia-zhong-xia img{
                float:left;
                height:238px;
                margin-left:10px;
                width:300px;
                margin-top:10px;
                margin-bottom:10px;
                }
        .ica{
                float:left;
                margin-left:10px;
                }
        .zhong-xia-you{
                height:300px;
                width:200px;
                margin-left:610px;
                margin-top:-300px;
                }
        .zhong-xia-you-zong{
                background-color:#FFFFFF;
                height:180px;
                }
        .zhong-xia-you-zong-shang{
                border-bottom:1px solid #A1A1A1;
                height:40px;
                }
        .zhong-xia-you-zong-shang span{
                line-height:40px;
                margin-left:10px;
                font-size:18px;
                font-weight:bold;
                }
        .zhong-xia-you-zong-shang-xia{
                height:40px;
                width:100px;
                margin-top:20px;
                margin-left:10px;
                }
        .zhong-xia-you-zong-shang-xia img{
                float:left;
                width:40px;
                height:40px;
                }
        .zhong-xia-you-zong-shang-xia span{
                margin-left:-5px;
                }
        .zhong-xia-you-zong-shang-mo{
                background-color:#CBE0FA;
                height:40px;
                width:100px;
                margin-top:20px;
                margin-left:10px;
                }
        .zhong-xia-you-zong-shang-mo img{
                float:left;
                width:40px;
                height:40px;
                }
        .zhong-xia-you-zong-shang-mo span{
                margin-left:-5px;
                }
        .zhong-xia-you-xia{
                background-color:#FFFFFF;
                height:100px;
                border:1px solid #00ff00;
                margin-top:18px;
                }
        .xia{
                height:150px;
                border:1px solid #cc0000;
            }
    </style>
    <script type="text/javascript"></script>
</head>
<body>
    <div class="zong">
        <div class="top">
            <img src="img/2logo.png">
            <span>AUTO Club</span>
            <ul>
                <li><a href="#">中文简体</a></li>
                <li><a href="#">中文繁体</a></li>
                <li><a href="#">英文</a></li>
            </ul>
            <input type="text"value="站内搜索">
        </div>
        <div class="zhong">
            <div class="zhong-shang">
                <div class="zhong-shang-shang">
                    <ul>
                        <li ><a href="#">关于</a></li>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">新闻动态</a></li>
                        <li><a href="#">产品展示</a></li>
                        <li><a href="#">品质认证</a></li>
                        <li><a href="#">客户留言</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">企业俱乐部</a></li>
                    </ul>
                </div>
                <img src="img/7.jpg">
            </div>
            <div class="zhong-xia">
                <div class="zhong-xia-zuo">
                    
                    <ul type="circle">
                        <li style="list-style:none;"><a href="#">产品类别</a></li>
                        <li><a href="#">汽车制造业</a></li>
                        <li><a href="#">汽车零件</a></li>
                        <li><a href="#">汽车塑料</a></li>
                        <li><a href="#">汽车机械</a></li>
                        <li><a href="#">汽车电子</a></li>
                    </ul>
                    <div class="zhong-xia-zhong">
                    
                        <div class="zhong-xia-zhong-shang">
                            <span><b>ABOUT&nbsp;US</b><sub>/公司简介</sub></span>
                            <div class="ict"><a href="#">更多&gt;&gt;</a></div>

                        </div>
                        <div class="zhong-xia-zhong-xia">
                            <img src="img/8.jpg">
                            <div class="ica">
                                <p>&nbsp;&nbsp;名车俱乐部（AC）hjhjhj是一家中</p><p>公司于1984fssdfjfkjkfjsfkfj年10月</p><p>&nbsp;&nbsp;签约惦记看见看见快递劫匪科加斯</p><p>加拿大房交会的使肌肤恢复sjnjdjsgfj</p><p>集合集合时间发挥积极发挥及时反馈让</p><p>金凤凰司法局发挥积极发挥及时反馈让</p><p>急急急合时间发挥积极发。</p>
                            </div>
                        
                        </div>
                        <div class="zhong-xia-you">
                            <div class="zhong-xia-you-zong">
                                <div class="zhong-xia-you-zong-shang">
                                    <span>在线客服</span>
                                    <div class="zhong-xia-you-zong-shang-xia">
                                        <img src="img/QQ.png">
                                        <span>QQ在线</span>
                                    </div>
                                    <div class="zhong-xia-you-zong-shang-mo">
                                        <img src="img/wechat.png">
                                        <span>WeChat</span>
                                    </div>
                                </div>
                            </div>
                            <div class="zhong-xia-you-xia"></div>
                        </div>
                    </div>
                    
                </div>
                
            </div>
        </div>
        <div class="xia"></div>
    </div>
</body>
</html>

  

 

实例图：技术分享

 

第四天


联系
我们