亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

DIV+CSS 制作自適應混合布?局

發布時間:2020-08-10 08:06:03 來源:網絡 閱讀:198 作者:等你的破船 欄目:web開發

實現了頭,產品列表,模向鏈接,縱向鏈接,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>

?

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

富源县| 云霄县| 容城县| 麻阳| 陈巴尔虎旗| 花莲县| 赞皇县| 诸暨市| 呼玛县| 潜江市| 阳谷县| 卢湾区| 娱乐| 即墨市| 乾安县| 滦南县| 浮梁县| 信阳市| 苍溪县| 鄂尔多斯市| 灵台县| 乌苏市| 汾阳市| 托克托县| 沁阳市| 保康县| 阳新县| 沅陵县| 黄冈市| 新巴尔虎右旗| 垦利县| 顺昌县| 航空| 玛纳斯县| 辰溪县| 明溪县| 寿阳县| 黔南| 香格里拉县| 汕尾市| 久治县|