DIV+CSS页面布局示例 遮罩层
2016-12-29 00:00
399 查看
<!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=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7"/> <title>DIV+CSS布局示例</title> <style type="text/css"> /* 遮罩层 <div id="maskdiv" style="position: fixed;top: 10px;left: 160px;z-index: 999;width: 550px;height: 310px;background: #cac8c8; filter: alpha(opacity=70); opacity: 0.7;"> </div> */ #body { font-size:12px; width:1000px; margin:auto; } #top { background-color: #933; float: left; width: 1000px; height:60px; margin-bottom:5px; } #main { width: 1000px; } #left { background-color: #3C9; float: left; width: 200px; height:400px; } #mid { background-color:#F66; float:left; width:600px; height:400px; } #mid_left { background-color: #F90; float:left; width:200px; height:400px; } #mid_left_top { background-color: #F11; float:left; width:200px; height:100px; } #mid_left_bottom { background-color: #FC6; float:left; width:200px; height:300px; } #right { background-color: #9C9; float:left; width:200px; height:400px; } #bottom { margin-top:5px; width: 1000px; height:60px; background-color:#F0F } .mid_right { background-color: #CCC; float:left; width:400px; height:400px; } .mid_right ul { list-style: none; } .mid_right ul li { color:#000000; } .br { clear:both; } .spannum { padding:0px 20px 0px 5px; } .spantitle { padding:0px 20px 0px 20px; } a { color:#333; text-decoration:none; } a:link { color:#dd3409; text-decoration:none; } a:visited { color:#9f301d; text-decoration:none; } a:visited:hover { color:#9f301d; text-decoration:none; } a:hover { color:#dd3409; text-decoration:none; } a:active { color:#ff3300; text-decoration:none; } </style> </head> <body> <div id="body"> <div id="top"> 页面顶部</div> <div class="br"> </div> <div id="main"> <div id="left"> 页面主体左侧</div> <div id="mid"> <div id="mid_left"> <div id="mid_left_top">页面中部左侧top</div> <div id="mid_left_bottom">页面中部左侧bottom</div> </div> <div class="mid_right"> <ul> <li><span class="spannum">1.</span><span class="spantitle"><a href="#" >人民日报批民政部:打15个采访电话无果</a></span></li> <li><span class="spannum">2.</span><span class="spantitle"><a href="#" >人民日报批民政部:打15个采访电话无果</a></span></li> <li><span class="spannum">3.</span><span class="spantitle"><a href="#" >人民日报批民政部:打15个采访电话无果</a></span></li> <li><span class="spannum">4.</span><span class="spantitle"><a href="#" >人民日报批民政部:打15个采访电话无果</a></span></li> <li><span class="spannum">5.</span><span class="spantitle"><a href="#" >人民日报批民政部:打15个采访电话无果</a></span></li> <li><span class="spannum">6.</span><span class="spantitle"><a href="#" >人民日报批民政部:打15个采访电话无果</a></span></li> <li><span class="spannum">7.</span><span class="spantitle"><a href="#" >人民日报批民政部:打15个采访电话无果</a></span></li> <li><span class="spannum">8.</span><span class="spantitle"><a href="#" >人民日报批民政部:打15个采访电话无果</a></span></li> <li><span class="spannum">9.</span><span class="spantitle"><a href="#" >人民日报批民政部:打15个采访电话无果</a></span></li> </ul> </div> </div> <div id="right"> 页面主体右侧</div> </div> <div class="br"> </div> <div id="bottom"> 页面底部</div> </div> </body> </html>
相关文章推荐
- 全屏滚动插件fullpage.js的回调函数,css3动画
- css3新添加的过渡、动画和变换
- 博客园 CodingLife 模板 翻页样式美化方法
- css3 box-sizing属性
- css3-渐变,动画过度,2d基础
- CSS学习笔记:text-shadow
- 【转】QSS独门秘籍:subcontrol
- [转]-CSS 元素垂直居中的6种方法
- CSS学习笔记:box-shadow
- CSS浮动(float,clear)通俗讲解
- CSS 3学习——transition 过渡
- css实现商城商品导航栏
- CSS3笔记之第一天
- 关于CSS3的小知识点之2D变换
- CSS学习笔记:渐变
- CSS3写折纸
- 用CSS3写一个立方体
- CSS3之3d变换与关键帧
- 纯CSS实现文字一行居中,多行左对齐的方法
- css样式表