DIV+CSS 制作自適應(yīng)混合布?局

發(fā)布時(shí)間：2020-08-10 08:06:03 來源：網(wǎng)絡(luò) 閱讀：196 作者：等你的破船欄目：web開發(fā)

實(shí)現(xiàn)了頭，產(chǎn)品列表，模向鏈接，縱向鏈接，DIV嵌套，直接上代碼。。

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>DIV標(biāo)簽制作自適應(yīng)混合布局</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要謹(jǐn)慎使用，父元素縱橫有很大余量的時(shí)候可以用*/
????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定義位置，否則會(huì)堆在一起*/
????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="#">熱點(diǎn)</a></li>
????????????<li><a?href="#">動(dòng)態(tài)</a></li>
????????????<li><a?href="#">直播</a></li>
????????????<li><a?href="#">地圖</a></li>
????????????<li><a?href="#">服務(wù)</a></li>
????????????<li><a?href="#">社區(qū)</a></li>
????????????<li><a?href="#">關(guān)于我們</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="#">熱點(diǎn)</a></li>
????????????????<li><a?href="#">動(dòng)態(tài)</a></li>
????????????????<li><a?href="#">直播</a></li>
????????????????<li><a?href="#">地圖</a></li>
????????????????<li><a?href="#">服務(wù)</a></li>
????????????????<li><a?href="#">社區(qū)</a></li>
????????????????<li><a?href="#">關(guān)于我們</a></li>
????????????</ul>??
????????
????????</div>
????
????
????</div>
????
????<div?class='main-right'>
????????<div?class='product-list'>??????<!--控制產(chǎn)品區(qū)大小，防止串行-->
????????????<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>

向AI問一下細(xì)節(jié)

DIV+CSS 制作自適應(yīng)混合布?局

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽