一个自适应的宽度的两列网页布局
2015-04-11 13:58
204 查看
<!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">
<!--
* {
margin:0;
padding:0;
}
body {
background:#fff;
font:12px normal Arial #444;
line-height:18px;
text-align:center;
}
#box {
width:100%;
height:500px;
margin:0 auto;
background:#f2f2f2;
}
.header {
width:100%;
height:30px;
background:#39c;
}
.right {
width:240px;
height:400px;
background:#fff;
position:absolute;
right:20px;
top:50px;
}
.left {
margin-right:280px;
margin-top:20px;
background:#fff;
margin-left:40PX;
height:400px;
}
.content {
width:96%;
height:300px;
margin:0 auto;
background:#444;
}
.footer {
width:100%;
height:100px;
background:#f2f2f2;
}
p {
padding:10px 10px;
font-size:16px;
font-weight:bold;
color:#39C;
line-height:22px;
}
//
-->
</style>
</head>
<body>
<div id="box">
<div class="header"><span style="color:#fff; font-size:14px;font-weight:bold; line-height:28px;">头部自适Div</span></div>
<div class="left">
<p>左则自适应缩放</p>
<div class="content">
<p>内容区块,相对父元素按百分比适应</p>
</div>
</div>
<div class="right">
<p>绝对固宽定位的右侧栏>
</div>
<div class="footer">
<p>底部自适应</p>
</div>
</div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>
<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">
<!--
* {
margin:0;
padding:0;
}
body {
background:#fff;
font:12px normal Arial #444;
line-height:18px;
text-align:center;
}
#box {
width:100%;
height:500px;
margin:0 auto;
background:#f2f2f2;
}
.header {
width:100%;
height:30px;
background:#39c;
}
.right {
width:240px;
height:400px;
background:#fff;
position:absolute;
right:20px;
top:50px;
}
.left {
margin-right:280px;
margin-top:20px;
background:#fff;
margin-left:40PX;
height:400px;
}
.content {
width:96%;
height:300px;
margin:0 auto;
background:#444;
}
.footer {
width:100%;
height:100px;
background:#f2f2f2;
}
p {
padding:10px 10px;
font-size:16px;
font-weight:bold;
color:#39C;
line-height:22px;
}
//
-->
</style>
</head>
<body>
<div id="box">
<div class="header"><span style="color:#fff; font-size:14px;font-weight:bold; line-height:28px;">头部自适Div</span></div>
<div class="left">
<p>左则自适应缩放</p>
<div class="content">
<p>内容区块,相对父元素按百分比适应</p>
</div>
</div>
<div class="right">
<p>绝对固宽定位的右侧栏>
</div>
<div class="footer">
<p>底部自适应</p>
</div>
</div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用css、html编写一个两列布局的网页，名称为css.html ，要求左侧宽度为200px ，右侧自动扩展
- 用CSS、HTML编写一个两列布局的网页，右侧宽度为200px，左侧自动扩展。
- CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- html css编写一个两列布局的网页，左侧宽度为200px，右侧自动扩展
- 通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- 用CSS、HTML编写一个两列布局的网页，右侧宽度为200px，左侧自动扩展。
- CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
- 两列布局——左侧宽度固定，右侧宽度自适应的两种方法
- 用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化
- [CSS布局]3列布局：左右两列固定宽度、中间列自适应满宽
- 两列布局——左侧宽度固定，右侧宽度自适应的两种方法
- 两列布局——左侧宽度固定，右侧宽度自适应的两种方法
- 两列布局——左侧宽度固定，右侧宽度自适应的两种方法
- 实现左边宽度固定，右边宽度自适应的两列布局
- 怎么给网页写一个侧栏（横向两列布局-使用绝对定位和相对定位的方法）
- 两列布局宽度自适应
- HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
- HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
- 手机网页宽度自动适应屏幕宽度的方…