首页 > 代码库 > DIV+css

DIV+css

2024-08-22 02:44:27   225人阅读

<!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{margin:0px;padding:0px;background:#EBDDDD;}span{border:1px solid red;}
    ul li th{margin:0px;padding:0px;}
    .box{width:980px;height:1413px;border:1px solid red; margin:0px auto;}
    /*上面头部*/

    .top{width:980px;height:150px;border:1px solid red;font-size:18px; }
    .top-wen{float:left; line-height:150px;}
    .top-sou{float:right;}

    /*上面导航栏*/
    .top-xia{width:980px;height:50px;border:1px solid red; background-color:#000000;text-align:center;font-size:24px;line-height:11px;}
    .top-xia  ul li{list-style-type:none;display:inline;border:1px solid red;}
    .top-xia ul li a{text-decoration:none;color:#ffffff;}

    /*上面图片*/
    .top-tu{width:980px;height:300px;border:1px solid red;}

    /*shang的全部*/
    .shang-quan{width:980px;height:296px;border:1px solid red;}
    /*shang的左边小块*/
    .shang{ float:left;width:230px;height:276px;border:1px solid red;margin-top:20px;margin-left:16px;}
    .shang ul{border:1px solid red;margin-top:0px;}
    .shang-xiao{text-align:center;background-color:#B1AFB0;display:block;border:1px solid red;}
    .shang ul li{ border:1px solid red;border-bottom-style:solid;border-color:#B1AFB0; height:40px;}
    .shang ul li a{text-decoration:none;line-height:40px; }
    /*shang的中间小块*/
    .shang-zhong{ float:left;width:480px;height:276px;border:1px solid red;margin-top:20px;margin-left:6px;}
    .shang-zhong img{margin-top:50px;margin-left:20px;}
    .shz{width:480px;height:40px;border:1px solid red;}



    </style>
    <script type="text/javascript"></script>
</head>
<body>
<div class=‘box‘>
    <div class=‘top‘>
        <img src=‘logo.png‘ width=‘190‘height=‘150‘border=‘1‘align=‘left‘>
        <div class=‘top-wen‘><font size=‘7‘align=‘center‘>Auto Blue</font></div>
        <div class=‘top-sou‘><table>
            <tr>
            <td style=‘border-right-style:solid;border-color:red‘>中文简体</td>
            <td style=‘border-right-style:solid;border-color:red‘>中文繁体</td>
            <td>英文</td>
            <td><input type=‘text‘size=‘10‘></td>
            <td ><input type=‘submit‘ name=‘tj‘ value=‘搜索‘ ></td>
            </tr></table>
        </div>
    </div>
    <div class=‘top-xia‘>
        <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>
    <div class=‘top-tu‘>
    <img src=‘6.jpg‘ width=‘980‘height=‘300‘border=‘1‘>
    </div>
    <div class=‘shang-quan‘>
            <div class=‘shang‘>
    
            <div class=‘shang-xiao‘><h3>产品类别</h3></div>
             <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>
        
            <ul>
    
            </div>
            <div class=‘shang-zhong‘>
                <div class=‘shz‘><h3>ABOUT US</h3></div>
                <img src=‘1.jpg‘ width=‘280‘height=‘150‘border=‘1‘>

            </div>
    </div>
</div>

</body>
</html>

 

DIV+css


联系
我们