本文通过一个实际案例展示了如何使用HTML和CSS进行网页布局设计。该案例包括顶部导航栏、头部区域、中间主要内容区域以及底部区域的设计实现。文章重点介绍了不同区块的定位方式、浮动属性的使用以及背景颜色设置等细节。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>100度</title>
<style>
.father{
width:914px;
margin: 0 auto;
}
.top{
width:914px;
height: 30px;
background-color: #E9E9E9;
margin: -10px;
}
.head{
margin-top: 30px;
}
.head_left{
float:left;
}
.head_right{
float:right;
}
.content_left{
float:left;
}
.content_right{
float:right;
}
.bottom_left{
float:left;
}
.bottom_right{
float:right;
}
</style>
</head>
<body>
<div class="father">
<div class="top"></div>
<div class="head">
<div class="head_left">
<img src="img/logo1.gif" alt="网络错误">
</div>
<div class="head_right">
<img src="img/logo2.gif" alt="网络错误">
</div>
</div>
<div class="middle">
<img src="img/logo3.jpg" alt="网络错误">
</div>
<div class="content">
<div class="content_left">
<div class="left_top">
<img src="img/logo4.png" alt="网络错误">
</div>
<div class="left_center">
<img src="img/logo5.png" alt="网络错误">
</div>
<div class="left_bottom">
<img src="img/logo6.png" alt="网络错误">
</div>
</div>
<div class="content_right">
<div class="right_top">
<img src="img/logo7.png" alt="网络错误">
</div>
<div class="right_bottom">
<div class="bottom_left">
<img src="img/logo8.png" alt="网络错误">
</div>
<div class="bottom_right">
<img src="img/logo9.png" alt="网络错误">
</div>
</div>
</div>
</div>
<div class="bottom">
<img src="img/logo10.png" alt="网络错误">
</div>
</div>
</body>
</html>
扫一扫
3637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
