天涯html&css基础框架

html申明

对ie6-8在html中添加no-css3这个class和各个版本的class,对ie7以下添加lte7这个class,然后根据我们目前使用浏览器的比例,把第一的ie6放在判断第一位。

判断浏览器,添加所需文件

常规布局

这个布局的特点是border,margin,padding由里面的inner部分来完成,所以左中右三个加起来就是总的宽度,而不用考虑左中右的margin,border,padding之类的,当然之所有选择这个布局,还有其他的一些变化,详细请参看布局。这里列出左右边栏布局的代码以供参考。

关于H1

在首页的时候,网站的h1标题为站点名字,当网站在内页的时候,内页标题为h1。所以对站点名字输出进行判断,以jsp为例:

当然大多数时候其实我们一般是显示logo,而网站名称我们也许是需要隐藏的,那样我们添加了个ele-invisible的class,这个class的样式为:

边栏区块

边栏一般加有aside-block这个class,然后每个区块有一个属于自己的id,以方便协作查阅及日后修改。内容由block-content这个class包括起来,如果标题右侧有更多等信息,使用head-title结构。当然如果边栏区块足够简单如就一张图片,那就根本就不需要这个结构了。

tabs选项卡

对所有的选项卡提供一个相同的class结构以方便js操作,标题用tabs-nav包裹起来,tabs-content里面放切换的内容,所有的内容用tabs-content-wrap包裹。如果项目本来就一种tabs,那么可以直接在这三个class上面定义样式,如果有多种tabs样式,建议样式由其他class来控制。

多列

这里的多列指的是二等分,三等分或四等分的情况,二等分的时候class为col-two,三等分的class为col-three,四等分的class为col-four,当然因为子元素并列排行所以一般也得配合clearfix用,然后子元素有一个共同的class为col。对于最后一栏margin的处理,可以采用加个class为last,或者使用父元素的负margin来撑大容器。

You Might Also Like
1 Comment
发表评论