• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css页面左中右分栏布局示例

css页面左中右分栏布局示例

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css页面,左中右分栏等相关知识,佚名 希望在学习及工作中可以帮助到您
<!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></title>
<meta charset="gb2312" />
<style type="text/css">
body{
background-color:silver;
}
.page_center {
width:600px;
margin:20px auto;
}
#nav {
background-color:yellow;
height:120px;
}
#left {
width:120px;
background-color:pink;
position:absolute;

}
#middle {
width:360px;
background-color:gray;
margin-left:120px;

}
#right {
width:120px;
background-color:green;
position:absolute;
top:0;
right:0;
}
#foot {
background-color:blue;
}
#main {
position:relative;
background-color:green;
background-image:url(5.gif);
background-repeat:repeat-y;
background-position:left;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="nav" class="page_center">
000</div>
<div id="main" class="page_center">
<div id="left">
111<br /><br /><br /><br /><br /><br />
</div>
<div id="middle">
222<br /><br />主<br /><br />
<br /><br />要<br /><br />内<br /><br /><br /><br /><br />容<br /><br /><br /><br /><br />主<br /><br /><br /><br />要<br /><br />
</div>
<div id="right">
333<br /><br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="foot" class="page_center">
444<br /><br /><br /><br /><br /><br />
</div>
</body>
</html>

您可能想查找下面的文章:

  • css页面左中右分栏布局示例

相关文章

  • 2017-08-06CSS教程 彻底掌握Z-index属性
  • 2017-08-06css3 2D图片转动样式可以扩充到Js当中
  • 2017-08-06html5+css3气泡组件的实现
  • 2017-08-06当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同
  • 2017-08-06CSS3 制作绽放的莲花采用效果叠加实现
  • 2017-08-06纯CSS结合DIV实现的右侧底部简洁悬浮效果
  • 2017-08-06chrom浏览器设置不了小于12px的文字大小的解决方法
  • 2017-08-06一波CSS+Div实用技巧小结
  • 2017-08-06详解CSS中@supports的用法
  • 2017-08-06font-size:100%的目的和作用是什么

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS伪元素 :before, :after, box-shadow应用
    • 浅谈CSS编程中的怪异模式
    • 纯css3实现走马灯效果
    • 纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
    • CSS之float在IE浏览器下换行问题解决方法
    • 对行内元素和块级元素的一些认识
    • DIV+CSS中让布局、背景图片、文字内容居中的方法
    • Css3新特性应用之视觉效果实例
    • ie8下不解析background属性与书写格式有关
    • css样式的特点与优先选择权(优先级)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有