小记：让页面自适应屏幕分辨率

最新推荐文章于 2024-06-18 11:28:14 发布

原创最新推荐文章于 2024-06-18 11:28:14 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS相关专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用DIV和CSS实现两边固定宽度、中间自适应宽度的布局方法。通过简单的CSS样式设置，如浮动和负边距等技术，实现了响应式网页设计中常见的三栏布局。这种布局方式适用于多种屏幕尺寸，有助于提升用户体验。

[code="java"]

DIV+CSS实现两边固定宽度,中间自适应宽度-天魅设计博客
body{
margin:0;
padding:10px;
}

#head{
margin-bottom:10px;
height:50px;
background-color:#999999
}

#main{}

#left{
width:200px;
float:left;
margin-right:-200px;
background-color:#FF9900
}

#mid{
width:auto;/*这里是关键*/
background:#00FF00;
margin:0 220px;
border:1px solid #000;
}
#right{
width:200px;
margin-left:-200px;
float:right;
background-color:#CCCC00
}
#foot{
margin-top:10px;
clear:both;
height:50px;
background-color:#CCCCCC
}

我是头部

我是左边,宽:200px
我是右边,宽:200px
我是中间,宽自适应

我是底部

[/code]