div布局

最新推荐文章于 2025-12-13 12:07:42 发布

原创最新推荐文章于 2025-12-13 12:07:42 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #border #stylesheet #float #server #html

本文介绍了一个具体的网页布局案例，通过HTML和CSS实现了复杂且精确的页面结构划分。从整体布局到各个区块的具体样式设置，详细展示了如何利用不同的定位方式和边界设置来达到预期的设计效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</center>

</form>

</body>

</html>

//---------------------------------------------------------------------//

body

{

}

#body

{

width:960px;

height:1412px;

}

#bodyLeft

{

width:582px;

float:left;

height:100%;

}

#left1

{

width:100%;

position:relative;

top:10px;

left:0px;

height:302px;

border:1px solid #3e93d3;

}

#left2

{

width:100%;

position:relative;

top:20px;

left:0px;

height:82px;

border:1px solid red;

}

#left3

{

width:100%;

height:380px;

position:relative;

top:30px;

left:0px;

border:1px solid #3e93d3;

}

#left4

{

width:100%;

height:568px;

position:relative;

top:40px;

left:0px;

}

#left4l

{

width:412px;

height:100%;

position:relative;

float:left;

}

#left4l1

{

width:100%;

height:190px;

border:1px solid #3e93d3;

}

#left4l2

{

width:100%;

height:390px;

position:relative;

top:10px;

left:0px;

border:1px solid #3e93d3;

}

#left4r

{

width:157px;

height:100%;

position:relative;

float:right;

}

#left4r1

{

width:100%;

height:124px;

border:1px solid #3e93d3;

}

#left4r2

{

width:100%;

height:280px;

border:1px solid #3e93d3;

}

#left4r3

{

width:100%;

height:72px;

position:relative;

top:18px;

left:0px;

border:1px solid #3e93d3;

}

#left4r4

{

width:100%;

height:72px;

position:relative;

top:35px;

left:0px;

border:1px solid #3e93d3;

}

#bodyRight

{

width:367px;

float:right;

height:100%;

}

#bodyRight1

{

width:100%;

height:76px;

position:relative;

top:10px;

left:0px;

border:1px solid red;

}

#bodyRight2

{

width:100%;

height:440px;

position:relative;

top:25px;

left:0px;

border:1px solid #ff9501;

}

#bodyRight3

{

width:100%;

height:74px;

position:relative;

top:40px;

left:0px;

border:1px solid red;

}

#bodyRight4

{

width:100%;

height:314px;

position:relative;

top:55px;

left:0px;

border:1px solid #ff9501;

}

#bodyRight5

{

width:100%;

height:74px;

position:relative;

top:65px;

left:0px;

border:1px solid green;

}

#bodyRight5

{

width:100%;

height:412px;

position:relative;

top:75px;

left:0px;

border:1px solid #ff9501;

}