盖世汽车网英文新版样式布局及规范标准

盖世汽车网英文新版样式布局及规范标准

盖世汽车网英文新版样式布局及规范标准 篇1

盖世汽车网英文新版CSS布局及规范 标准（初案）

为了规范新版样式及CSS编写规则，需对其编写方法进行统一规划，现提出初步标准，以备讨论之用，具体详尽写法及标准需在需求确定后经大家讨论而定。该文档仅供参考。CSS规范化标准受页面布局方式及频道个性化影响，受子父级别页面排布方式影响。不受模块摆放位置及色彩调整影响。（非局部）

新版样式希望达到效果是：各大小栏目，同级，子级页面，同类 不同名栏目等各同一元素不重复定义，同时希望相同部分样式可得到程序支持调用，其它局部样式做局部调整。(目前我还不知道用什么方法来实现这种结果，需大家支持！)

一．通用模块

以下模块为通用样式。并在今后其它同级页面调用即可。[Common]

1.Title

2.Head

3.Search

4.You are here

5.Page content

A.left

B.right

C.down left

D.down center

E.down right

6.Footer

二．栏目模块

以下栏目可与通用模块共享同一样式，另加栏目个性样式。

1.Home page [Common]+[Home]

2.For buyer [Common]+[Buy]

3.For seller [Common]+[Sell]

三．频道模块

以下两个栏目可与通用模块共享同一样式，但需加左右布局width定义，另加栏目个性样式。

4.Events[Common]+[Events]

a)Title

b)Head

c)Page content(Left Right)

d)Footer

5.Auto Biz [Common]+[Events]

a)Title

b)Head

c)Page content(Left Right)

d)Footer

四.小频道模块

以下栏目可与通用模块共享同一样式

6.About Gasgoo [Common]

7.Advertising [Common]

8.Partners & Useful Links [Common]

9.Terms and Policies [Common]

10.Site Map [Common]

11.Contact Us [Common]

12.Help [Common]

四.BBS模块

需单独为该频道定义样式。

五.PSI模块

需单独为该频道定义样式。

六.My gasgoo模块

需单独为该频道定义样式。

附.以下为拟定义通用模块样式示例，即Common样式内容。

全局属性

body {margin: 0px;padding:0px;background:#fff;font-family: Geneva, Arial, Helvetica, sans-serif,“宋体”;font-size:12px;color:#000;line-height:18px;}

div,form,img,ul,ol,li,dl,dt,dd {margin: 0;padding: 0;border:0;}

h1,h2,h3,h4,h5,h6 {margin:0;padding:0;font-size:12px;font-weight:normal;}

table,td,tr,th{font-size:12px;}

li{list-style-image:url(images/index_030.gif);margin:0px 0px 0px 15px;}

img{vertical-align:top;}

height{height:auto;}

链接属性

a:link{color:#000;text-decoration:none;}

a:vistied{color:#666600;text-decoration:none;}

a:hover{color:#006600;text-decoration:underline;}

a:active{color:006600;}

颜色属性 [定义规则，小写c加颜色名称]

.cRed,a.cRed:link,a.cRed:visited{color:Red;}

.cGray,a.cGray:link,a.cGray:visited{color:#ccc;}

.cDGray,a.cDGray:link,a.cDGray:visited{color:#666;}

.cWhite,a.cWhite:link,a.cWhite:visited{color:#fff;}

.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}

.cGreen,a.cGreen:link,a.cGreen:visited{color:#006600;}

字体属性 [定义规则，小写f加属性名称]

.fB {font-weight: bold;}

.fI {font-style: italic;}

字体大小[定义夫则，小写f+字号+单位]

.f12px{font-size:12px;}

.f14px{font-size:14px;}

.f15px{font-size:15px;}

.f16px{font-size:16px;}

.f18px{font-size:18px;}

.f20px{font-size:20px;}

背景属性

[B(buy)C(company)S(search)M(menu)T(title)Ts(titelshort)]

.bgimgB{background-image:url(images/buyer_03.gif);}

.bgimgC{background-image:url(images/company_left_bg.gif);}

.bgimgS{background-image:url(images/index_04_17.gif);}

.bgimgSl{background-image:url(images/index_04_15.gif);}

.bgimgSr{background-image:url(images/index_04_19.gif);}

.bgimgSp{background-image:url(images/index_04_08.gif);}

其他属性

.left{ float: left;}

.right{ float: right;}

.center{text-align:center;}

.clear{ clear: both;font-size:1px;width:1px;height:0;visibility: hidden;}

.hidden {display: none;}

.unLine,.unLine a{text-decoration: none;}

.noBorder{border:none;}

.lH{line-height:22px;}

.clearit{clear:both;font-size:0;line-height:0;height:0}

通用栏定义

.common,.common1{width:950px;height:inherit;margin-left:auto;margin-right:auto;}/*ie*/.common_autopageL{width:680px;}/*main left*/

.common_autopageR{width:270px;}/*main right*/

.common_autopageDL{width:148px;}/*Dmain left*/

.common_autopageDM{width:600px;}/*Dmain middle*/

.common_autopageDR{width:200px;}/*Dmain right*/

.common_TitleBar{height:25px;}

.common_TitleBar_L{width:64px;}

.common_TitleBar_R{width:auto;}

通用导行栏定义

.common_Navigation_title{width:265px;}

.common_Navigation_title_tx{width:600px;padding:16px 0px 0px 0px;text-align:right;}.common_Navigation_title_ri{width:75px;}

.common_Navigation{height:31px;}

.common_Navigation_le,.common_YouAreHere_le{width:8px;}

.common_Navigation_me{width:86px;}

.common_Navigation_hoAre{width:118px;}

.common_Navigation_sp{width:1px;}

通用当前位置定义

.common_YouAreHere_le{height:20px;}

.common_YouAreHere{height:20px;width:934px;}

通用底部定义

.common_footer{height:auto;text-align:center;clear:both;}