XHTML+css弹性+固宽布局网页代码示例

最新推荐文章于 2023-08-14 22:02:51 发布

原创最新推荐文章于 2023-08-14 22:02:51 发布 · 823 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #css #stylesheet #html #div #wrapper

WEB前端开发专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一种适用于宽屏和大背景布局的设计方案，通过HTML和CSS实现页面元素的弹性及固定宽度布局，确保不同分辨率下页面内容居中显示。

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

html部分

<!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=gb2312" />
<title>XHTML+css</title>
<link href="css/css.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="wrapper">
<div id="main" class="clearfix">
   <div id="header">
     <div id="inheader">
         <h3>弹性+固宽布局设计（适合宽屏和大背景布局）</h3>
         <p>页头背景可平铺整个浏览器宽度，而正文内容则始终居中显示，不管分辩率是多大。</p>
        </div>
    </div>
    <div id="content">
        <p> </p>
        <p>正文内容背景可平铺整个浏览器宽度，你可以在body中加入一张超大的背景图片，并设置图片为居中。而正文内容则始终居中显示，不管分辩率是多大。当你分辩率超过1024时，在正文内容的两侧会出现图片，使宽屏的内容区两侧不显得空洞。</p>
    </div>
</div>
</div>
<div id="footer">
    <div id="infoot">
        <p>我是浮动的始终固定在底部的DIV,无论中间的文字内容高度是否不够一屏，我还是能居底显示，</p>
        <p>当中间内容超过一屏时，我又可以向下浮动哟</p>
    </div>
</div>
</body>
</html>

css部分

*{margin:0;padding:0;}
html, body, #wrapper {height: 100%;font-size:12px;}
#wrapper{width:100%;background:#777;}
body > #wrapper {height:auto; min-height:100%;}
#main {padding-bottom: 54px;min-width:960px;}
#header{text-align:center;color:#fff;background:#333;}
#inheader{width:960px;height:110px;line-height:110px;margin:0 auto;background:#CC9933;}
h3{font-size:14px;line-height:50px;}
#inheader p{font-size:12px;line-height:30px;}
#footer {
position: relative;
margin-top: -54px;
height: 54px;
width:100%;
min-width:960px;
clear:both;
background:#666;
text-align:center;
color:#fff;
}
#infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;}
#footer p{line-height:26px;}
#content{background:#999;width:960px;margin:0 auto;height:692px;}
#content p{line-height:30px;padding:0 30px;color:#fff;}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}

* html .clearfix { height: 1%;}
.clearfix {display: block;}