1119 网页布局,css写下拉列表

时间:2023-03-10 02:07:33
1119 网页布局,css写下拉列表
<style type="text/css">
*{ margin:0px; padding:0px;}
#body{ width:1000px; height:2000px; margin:auto; position:relative;}
#top_1{ width:1000px; height:115px; border:1px solid #999; position:relative; box-shadow:1px 1px 1px #999999}
#top_2{ width:1000px; height:70px; border:1px solid #CCC; margin-top:10px; position:relative; box-shadow:2px 2px 2px #999999}
#top_3{ width:240px; height:240px; border:1px solid #ccc; margin-top:10px; position:relative; float:left; box-shadow:2px 2px 2px #999999}
#top_4{ width:750px; height:270px; border:1px solid #ccc; position: relative; float:right; left:2px; margin-top:10px; box-shadow:2px 2px 2px #999999}
#top_5{ width:240px; height:120px; border:1px solid #ccc; position:relative; margin-top:10px; float:left; box-shadow:2px 2px 2px #999999}
#top_6{ width:750px; height:40px; border:1px solid #ccc; position:relative; float:right; left:2px; margin-top:10px; box-shadow:2px 2px 2px #999999}
#top_7{ width:750px; height:215px; border:1px solid #ccc; position:relative; float:right; left:2px; margin-top:10px; box-shadow:2px 2px 2px #999999}
#top_8{ width:240px; height:1000px; border:1px solid #ccc; position:relative; float:left; margin-top:10px; box-shadow:2px 2px 2px #999999}
#top_9{ width:750px; height:780px; border:1px solid #ccc; position:relative; float:right; left:2px; margin-top:10px; box-shadow:2px 2px 2px #999999}
#top_10{ width:750px; height:30px; border:1px solid #ccc; position:relative; float:right; left:2px; margin-top:10px; box-shadow:2px 2px 2px #999999}
#top_11{ width:1000px; height:200px; border:1px solid #ccc; position:relative; float:left; margin-top:10px; box-shadow:2px 2px 2px #999999}
#nei_1{ width:333px; height:200px; border-right:1px solid #ccc; float:left; box-shadow:2px 2px 2px #999999}
#nei_2{ width:332px; height:200px; border-right:1px solid #ccc; float:left; box-shadow:2px 2px 2px #999999}
#nei_3{ width:333px; height:200px; float:left; box-shadow:2px 2px 2px #999999}
.daohang{ width:100px; height:40px; float:left; background-color:#F00; position:relative; overflow:hidden; margin-left:10px; margin-top:10px;}
.daohang:hover{ overflow:visible; cursor:pointer}
.xiala{ width:100px; height:40px; background-color:#00F; position:relative; margin-top:40px; overflow:hidden;}
.xiala2{ width:100px; height:40px; background-color:#FF0; position:relative; margin-left:100px;}
.xiala:hover{ overflow:visible; cursor:pointer}
.xiala3{ width:100px; height:40px; background-color:#0F0; position:relative; overflow:hidden;}
.xiala2:hover{ overflow:visible}
.xiala4{ width:100px; height:40px; background-color:#999; position:relative; overflow:hidden; margin-left:100px;}
.xiala3:hover{ overflow:visible}
.xiala5{ width:100px; height:40px; background-color:#000; position:relative; overflow:hidden;}
.xiala5:hover{ overflow:visible}
.xiala6{ width:100px; height:40px; background-color:#300; position:relative; overflow:hidden; margin-left:100px;}
</style>
</head> <body>
<div id="body">
<div id="top_1"></div>
<div id="top_2"></div>
<div id="top_3"></div>
<div id="top_4"></div>
<div id="top_5"></div>
<div id="top_6"></div>
<div id="top_7"></div>
<div id="top_8"></div>
<div id="top_9"></div>
<div id="top_10"></div>
<div id="top_11">
<div id="nei_1"></div>
<div id="nei_2"></div>
<div id="nei_3"></div>
</div>
<div class="daohang">
<div class="xiala">
<div class="xiala2"></div>
</div>
<div class="xiala3">
<div class="xiala4"></div>
</div>
<div class="xiala5">
<div class="xiala6"></div>
</div>
</div>
<div class="daohang">
<div class="xiala">
<div class="xiala2"></div>
</div>
<div class="xiala3">
<div class="xiala4"></div>
</div>
<div class="xiala5">
<div class="xiala6"></div>
</div>
</div>
<div class="daohang">
<div class="xiala">
<div class="xiala2"></div>
</div>
<div class="xiala3">
<div class="xiala4"></div>
</div>
<div class="xiala5">
<div class="xiala6"></div>
</div>
</div>
</div>
</body>
</html>

1119 网页布局,css写下拉列表

1119 网页布局,css写下拉列表