网页布局实战-优快云博客

本文链接：https://blog.youkuaiyun.com/linan126/article/details/1748633

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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;

}

div布局