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

最新推荐文章于 2025-02-08 16:10:41 发布

转载最新推荐文章于 2025-02-08 16:10:41 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/claricre/p/6085564.html

本文详细介绍了如何使用HTML和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>