您的位置:首页 > 网页模板 > 【 返回上一页

html宽度固定并居中 上 中 下结构网页模板布局框架代码

html宽度固定并居中 上 中 下结构,上中下结构并且整体布局居中宽度固定的html模板框架代码资源。

模板效果
模板效果

完整代码(可直接拷贝使用):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定宽度 居中,头部 内容 页脚布局模板 在线演示 thinkcss</title>
<style type="text/css">
body {font: 14px/24px 宋体;background: #666666;margin: 0;padding: 0;text-align: center;color: #000000}
#container {width: 780px;background: #FFFFFF;margin: 0 auto;border: 1px solid #000000;text-align: left}
#header {background: #DDDDDD; padding: 0 10px 0 20px; }
#header h1 {margin: 0;padding: 10px 0; }
#mainContent {padding: 0 20px;background: #FFFFFF;}
#footer {padding: 0 10px;background:#DDDDDD;}
#footer p {margin: 0;padding: 10px 0;}
</style>
</head>
<body>

<div id="container">
<div id="header">
<h1>头部</h1>
</div>
<div id="mainContent">
<h1> 主要内容 </h1>
<p>首先设置固定宽度并布局居中id=container盒子,里面包括上中下结构布局,这里主要是实现宽度固定布局居中,盒子内分别设置3个DIV上中下盒子,根据需求修改使用即可!</p>
<h2>标题 </h2>
<p>内容</p>
</div>
<div id="footer">
<p>脚注</p>
</div>
</div>
</body>
</html>

在线演示:

运行代码试试

打包免费下载地址:

此为标准网页内容固定宽度,并水平居中,上中下结构的div css布局的模板代码。

相关标签: 居中 布局 框架
如需转载,请注明文章出处和来源网址:www.thinkcss.com/muban/1480.shtml

日期:2018-01-12 15:00:27 来源:www.thinkcss.com 作者:ThinkCSS

热门点击