溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
實現了頭，產品列表，模向鏈接，縱向鏈接，DIV嵌套，直接上代碼。。
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>DIV標簽制作自適應混合布局</title>
<style>
body?{margin:0?auto;padding:0;}
#top_logo{
????margin:0?auto:
????width:100%;
????min-width:960px;
????line-height:50px;
????height:50px;
????text-align:center;
????background:lightblue;
}
#header{
????width:100%;
????height:30px;
????min-width:960px;
????margin:0?auto;
????padding:0;
????margin-bottom:10px;
????background:purple;
}
#header1{
????width:960px;
????margin:0?auto;
????padding:0;
}
#header?ul{
????list-style:none;
????background:purple;
????overflow:hidden;??
????/*?特別重要，不加overflow，ul跑偏*/
????margin:0?auto;
????text-align:center;
}
#header?li?{
????float:left;
????/*控制橫向*/
}
#header?li?a{
????display:block;
????color:white;
????width:104px;
????height:30px;
????line-height:30px;
????text-decoration:none;
????text-align:center;
????border-radius:5px;
}
#header?li?a:hover{
????background:red;
????color:white;
}
.main{
????width:100%;
????min-width:960px;
????margin:0?auto;
}
.main-left{
????float:left;
????margin-left:0;
????width:35%;
????height:850px;
????background:yellow;
}
.left-menu{
????margin:20px?auto;
}
.left-menu?ul{
????list-style:none;
????padding:0;
}
.left-menu?ul?a{
????display:block;
????padding:5px?0;
????/*padding要謹慎使用，父元素縱橫有很大余量的時候可以用*/
????margin:?5px?auto;
????width:100%;
????color:black;
????text-align:center;
????text-decoration:none
}
.left-menu?ul?a:hover{
????background:orange;
????
}
.main-right{
????float:right;
????margin-left:0;
????width:65%;
????height:850px;
????background:green;
}
.product-list{
????width:560px;
????margin:20px?auto;???/*上下留出20px，左右居中*/
}
.product{
????margin-top:20px;
????margin-left:25px;
????width:240px;
????height:350px;
????background:white;
????float:left;
}
.product-page{
????margin:0?auto;
????margin-top:800px;???????
????/*DIV嵌套，使用margin定義位置，否則會堆在一起*/
????width:600px;
????height:30px;
????background:lightblue;
????text-align:center
}
</style>
</head>
<body>
<div?id='top_logo'>
????This?is?banner?picture?╕╖╗╘╙╚?╛╜╝╞╟╠?╡╢╣╤?╥
</div>
<div?id='header'>
????<div?id='header1'>
????????<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>
????
<div?class='main'>
????<div?class='main-left'>
????????<div?class='left-menu'>
????????????<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>
????
????<div?class='main-right'>
????????<div?class='product-list'>??????<!--控制產品區大小，防止串行-->
????????????<div?class='product'>
????????????????1111111111
????????????</div>
????????????<div?class='product'>
????????????????2222222222
????????????
????????????</div>
????????????<div?class='product'>
????????????????3333333333??????
????????????</div>?????????
????????</div>
????????<div?class='product-page'>
????????????pages:1、2、3、4、5、6、7、8
????????
????????</div>
????</div>
????
???
</div>
???
????
</body>
</html>?
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
