html&css基础框架
2013-03-05 15:27
956 查看
html申明
对ie6-8在html中添加no-css3这个class和各个版本的class,对ie7以下添加lte7这个class,然后根据我们目前使用浏览器的比例,把第一的ie6放在判断第一位。<!DOCTYPE HTML> <!--[if IE 6]><html class="ie6 lte9 lte7 no-css3" lang="zh-cn"><![endif]--> <!--[if IE 8]><html class="ie8 lte9 no-css3" lang="zh-cn"><![endif]--> <!--[if IE 9]><html class="ie9 lte9 no-css3" lang="zh-cn"><![endif]--> <!--[if IE 7]><html class="ie7 lte9 lte7 no-css3" lang="zh-cn"><![endif]--> <!--[if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9) ]><!--><html lang="zh-cn"><!--<![endif]--> <head> <meta charset="UTF-8"> <title>无标题文档</title> </head> <body> </body> </html>
判断浏览器,添加所需文件
//为ie6-8添加一个ie.css文件 <!--[if lte IE 8]><link href="css/ie.css" type="text/css" rel="stylesheet" media="all"><![endif]--> //为ie6添加处理png的js文件 <!--[if IE 6]> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js?_v=<%=JS_VERSION%>"></script> <script type="text/javascript"> //给所有需要处理的png图片加上dd-pngifx这个class,就可以处理了 DD_belatedPNG.fix(".dd-pngfix"); </script> <![endif]-->
常规布局
这个布局的特点是border,margin,padding由里面的inner部分来完成,所以左中右三个加起来就是总的宽度,而不用考虑左中右的margin,border,padding之类的,当然之所有选择这个布局,还有其他的一些变化,详细请参看布局。这里列出左右边栏布局的代码以供参考。<div class="page asides-two"> <div class="wrap-header"> <div id="header"> <div class="inner clearfix"></div> </div> </div><!--wrap-header--> <div class="wrap-container"> <div id="container" class="clearfix"> <div id="aside_left" class="aside"> <div class="inner"></div> </div><!--aside_left--> <div id="main"> <div class="inner clearfix"></div> </div><!--main--> <div id="aside_right" class="aside"> <div class="inner"></div> </div><!--aside_right--> </div> </div><!--wrap-container--> <div class="wrap-footer"> <div id="footer"> <div class="inner clearfix"></div> </div> </div><!--wrap-footer--> </div>
关于H1
在首页的时候,网站的h1标题为站点名字,当网站在内页的时候,内页标题为h1。所以对站点名字输出进行判断,以jsp为例:<% if(isFront) { %> <h1 class="ele-invisible">天涯游戏</h1> <% }else { %> <strong class="ele-invisible">天涯游戏</strong> <% } %>当然大多数时候其实我们一般是显示logo,而网站名称我们也许是需要隐藏的,那样我们添加了个ele-invisible的class,这个class的样式为:
/*ele-invisible */ .ele-invisible{ position: absolute; clip:rect(1px 1px 1px 1px);/* ie6,7*/ clip: rect(1px, 1px, 1px, 1px); }
边栏区块
边栏一般加有aside-block这个class,然后每个区块有一个属于自己的id,以方便协作查阅及日后修改。内容由block-content这个class包括起来,如果标题右侧有更多等信息,使用head-title结构。当然如果边栏区块足够简单如就一张图片,那就根本就不需要这个结构了。<div id="" class="aside-block"> <h2></h2> <div class="block-content"></div> </div> <!-- 标题右侧有更多等文字信息 --> <div id="" class="aside-block"> <div class="head-title clearfix"> <h2></h2> <a href="#" class="more"></a> </div> <div class="block-content"></div> </div>
tabs选项卡
对所有的选项卡提供一个相同的class结构以方便js操作,标题用tabs-nav包裹起来,tabs-content里面放切换的内容,所有的内容用tabs-content-wrap包裹。如果项目本来就一种tabs,那么可以直接在这三个class上面定义样式,如果有多种tabs样式,建议样式由其他class来控制。<h2 class="tabs-nav"><a class="active" href="#">title1</a><a href="#">title2</a></h2> <div class="tabs-content-wrap"> <div class="tabs-content">content1</div> <div class="tabs-content">content2</div> </div>
多列
这里的多列指的是二等分,三等分或四等分的情况,二等分的时候class为col-two,三等分的class为col-three,四等分的class为col-four,当然因为子元素并列排行所以一般也得配合clearfix用,然后子元素有一个共同的class为col。对于最后一栏margin的处理,可以采用加个class为last,或者使用父元素的负margin来撑大容器。<!-- 两列 --> <div class="col-two clearfix"> <div class="col"> <h2></h2> <div class="col-content"></div> </div> <div class="col"> <h2></h2> <div class="col-content"></div> </div> </div> <!-- 三列 --> <div class="col-three clearfix"> <div class="col"> <h2></h2> <div class="col-content"></div> </div> ... </div> <!-- 四列 --> <div class="col-four clearfix"> <div class="col"> <h2></h2> <div class="col-content"></div> </div> ... </div>
转载:http://www.w3cplus.com/framework/index.php
相关文章推荐
- HTML&&CSS基础框架
- html&css基础框架
- HTML&CSS基础学习笔记1.17-表格的头部与尾部
- HTML&CSS基础篇之十六:表单
- HTML&CSS基础学习笔记1.15-合并单元格
- HTML & CSS 基础知识
- HTML&CSS基础篇之十三:div&span
- HTML&CSS基础篇之四:HTML基础架构之HT篇
- HTML&CSS基础
- 黑马程序员_java基础加强—HTML&CSS
- HTML基础知识四( 内嵌入式框架、 滑动字幕、多媒体元素、CSS)
- HTML&CSS基础学习笔记1.28-给网页添加一个css样式
- HTML&CSS基础学习笔记1.31-像素和相对长度
- HTML&CSS基础学习笔记1.26-input标签重置表单
- HTML&CSS基础学习笔记1.30-颜色的表达
- HTML&CSS基础篇之十四:布局与排版
- HTML&CSS基础学习笔记1.24-input标签的单选与多选
- HTML&CSS基础学习笔记1.29-灵活地使用样式
- HTML&CSS基础篇之九:图像
- HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素