固定宽度布局

最新推荐文章于 2025-08-23 11:23:17 发布

转载最新推荐文章于 2025-08-23 11:23:17 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/93wei/archive/2011/10/28/2227561.html

文章标签：

#xhtml #人工智能

本文演示如何在网页设计中使用1-2-1布局，通过将内容和侧边栏放入另一个div中，并使用浮动方法使它们水平排列。还展示了如何使图片响应屏幕大小变化。

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

现在我们来制作最经常用到的1-2-1布局。是在之前的例子中添加了一个side栏。但是通常情况下，两个div只能竖直排列。为了让content和side能够水平排列，必须把他们放到另一个div中，然后使用浮动或绝对定位的方法，使content和side并列起来。本例是用浮动效果做的。如果想要图像跟着屏幕的大小而进行改变的话就把宽度设置为百分比，那么它就可以跟着屏幕的大小而改变了。

效果如图：

下面是制作的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.nav{

margin:0px;
padding:0xp;
font:16px "宋体";
background:url(img/images/lt.gif) no-repeat;
color:red;
}
.nav h3{
margin:0px;
padding:20px 0 0 30px;
background: url(img/images/rt.gif) no-repeat right top;
}
.q{
background: url(img/images/right.gif) repeat-y right top;
}
.nav p{
text-indent:2em;
margin:0px;
padding:10px 20px 10px 20px;
}
.e{background: url(img/images/lb.gif) no-repeat left bottom;
height:40px;
}
.e span{
height:40px;
padding:0 30px 0 20px;
display:block;
background:url(img/images/rb.gif) no-repeat right bottom;
text-align:right;
}
#top,#content,#bottom,#side,#hb{
width:90%;
margin:0 auto;
}
#content{
width:70%;
float:left;
}
#side{
width:30%;
margin-left:70%;
}
#bottom{
clear:left;
}

</style>
</head>

<body>
<div id="top">
<div class="nav">
<h3>head</h3>
<div class="q">
<p>垃圾卡时间弗拉多介绍了福建阿里的方式近拉客的是案件数量的福建阿积分dsl卡积分了卡时。</p>
</div>
<div class="e"><span><a href="#">查看明细</a></span></div>
</div>
</div>
<div id="hb">
<div id="content">
<div class="nav">
<h3>content</h3>
<div class="q">
<p>垃圾卡时间弗拉多介绍了福建阿里的方式近拉客的是案件数量的福建阿积分dsl卡积分了卡时间地方了看见爱上的路口附近拉sdk及福利卡萨的家乐福科技阿斯利康房间里爱的就是浪费空间按历史课件福利卡技术的法律框架adsl开发杰拉德是会计法家里开始打飞机了喀什的减肥了看见爱上的离开福建爱上的离开房间里上飞机las
将拉动是解放了喀什的解放路口见dsl福建阿里的房间了的撒开飞机拉德斯基弗拉当时警方立即打上了飞机las记得发垃圾分类jad历史积分阿警方的龙卡及福利的jad了十分恐惧阿里的罚款及阿里是科技发达了卡机分离拉的skf吉拉时间弗拉是觉得烦了阿里山的附近拉。</p>
</div>
<div class="e"><span><a href="#">查看明细</a></span></div>
</div>
</div>
<div id="side">
<div class="nav">
<h3>side</h3>
<div class="q">
<p>垃圾卡时间弗拉多介绍了福建阿里的方式近拉客的是案件数量的福建阿积分dsl卡积分了卡时间地方了看见爱上的路口附近拉sdk及福利卡萨的家乐福科技阿斯利康房间里爱的就是浪费空的萨法是否间按历大师傅放大师傅史课件福。</p>
</div>
<div class="e"><span><a href="#">查看明细</a></span></div>
</div>
</div>
</div>
<div id="bottom">
<div class="nav">
<h3>bottom</h3>
<div class="q">
<p>垃圾卡时间弗拉多介绍了福建阿里的方式近拉客的是案件数量的福建阿积分dsl卡积分了卡。</p>
</div>
<div class="e"><span><a href="#">查看明细</a></span></div>
</div>
</div>
</body>
</html>