两侧列固定中间列变宽Div布局示例
来源: 阅读:762 次 日期:2014-07-23 14:19:56
温馨提示: 小编为您整理了“两侧列固定中间列变宽Div布局示例”,方便广大网友查阅!

代码如下:

<!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>

<title>两侧列固定中间列变宽2</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

body{

font:12px/18px Arial;

margin:0;

}

#header,#footer {

background:#CCCCFF;

width:85%;

margin:0 auto;

}

#Nav {

background:#dfC0FF;

width:85%;

margin:0 auto;

}

h2{

margin:0;

padding:20px;

}

p{

padding:15px 20px;

text-indent:2em;

margin:0;

}

#container {

width:85%;

margin:0 auto;

background:url(images/background-right.gif) repeat-y top right;

position: relative;

}

#innerContainer {

background:url(images/background-left.gif) repeat-y top left;

}

#navi {

width: 200px;

position: absolute;

left: 0px;

top: 0px;

}

#content {

right: 0px;

top: 0px;

margin-right: 200px;

margin-left: 200px;

}

#side {

width: 200px;

position: absolute;

right: 0px;

top: 0px;

}

</style>

</head>

<body>

<div id="header">

<h2>Page Header</h2>

</div>

<div id="container">

<div id="innerContainer">

<div id="navi">

<h2>Navi Bar</h2>

<ul>

<li>Home</li>

<li>Web Design</li>

<li>Web Dev</li>

<li>Map</li>

<li>Contact Us</li>

<li>Home</li>

<li>Web Design</li>

</ul>

</div>

<div id="content">

<h2>Page Content</h2>

<p>

生活中到处都存在着缘分,缘聚缘散好像都是命中注定的事情;有些缘分也许从一开始就注定要失去,有些缘分也许是永远都不会有结果;</p>

<p>

可是我却偏偏渴望创造一种奇迹。也许不是不曾心动,不是没有可能,只是有缘无份,情深缘浅,如果彼此出现早一点,也许就会有美好的结局,又或者相遇的时间再晚一点,晚到两个人在各自的爱情故事中经历了包容与体谅,善待和妥协,悲痛与快乐,到了那时也许走到一起就会有可能。</p>

</div>

<div id="side">

<h2>Side Bar</h2>

<ul>

<li>Web Dev</li>

<li>Map</li>

<li>Contact Us</li>

</ul>

</div>

</div>

</div>

<div id="footer">

<h2>Page Footer</h2>

</div>

</body>

</html>

更多信息请查看IT技术专栏

更多信息请查看网页制作
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map