DOM与CSS参考文档

动作

出自建站大师开放平台wiki

跳转到: 导航, 搜索

目录

页面结构

如下图所示:互联网上的绝大多数网页布局,都可以从上到下划分为三个部分。

Buju.jpg

这三个部分在页面中的地位具有唯一性,因此建站大师的模板使用如下HTML结构来描述这一布局:

<html>
<head></head>
<body>
<div id=”doc”>
<div id=”hd”>头部</div>
<div id=”bd”>中间部分</div>
<div id=”ft”>底部</div>
</div>
</body>
</html>

头部(#hd)中的元素

HTML范例:

<a href="" title=""><img id="sitelogo" class="ifixpng" src="img/logo.png" alt="" /></a>

说明:

I. 网站的LOGO图片在HTML文档中也是唯一的,我们使用sitelogo作为id加以标识,这个id的作用是作为在“在线编辑”模式下获取和操作这一元素的hook。

II. 如果你使用我们的公用js文件库,那么class=” ifixpng”属性将使ie6支持png图片的alpha透明通道。

导航菜单

HTML范例:

<ul id="menuSitenav" class="clearfix">
<li><a href="#"><span>网站首页</span></a></li>
<li>
<a href="#"><span>08秋冬新品画册</span></a>
<div class="menu-child">
<a href="">流行趋势</a>
<a href="">设计师理念</a>
</div>
</li>
<li class="last-item"><a href="#"><span>意见反馈</span></a></li>
</ul>

说明:

I.导航菜单同样需要在“在线编辑”模式下进行读取和操作,我们必需使用id="menuSitenav"作为hook。同时,如果你引用了我们的公用js文件库,并且严格按照这一格式来编写你的导航菜单,将直接实现弹出子菜单的效果。

II. 欲重新定义id="menuSitenav"以内的元素,请参阅《模板制作规范》。

中间部分(#bd)中的元素

网站的banner

单张图片的HTML范例:

<div id="banner-main" class=”banner-main”>
<div class="banner-inner">
<a href="#"><img src="img/banner.jpg" alt="" /></a>
</div>
</div>

Flash形式的HTML范例:

<div id="banner-main" class="banner-main">

<div class="banner-inner">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" height="200" width="100%">

<param name="movie" value="">

<param name="quality" value="high">

<param name="wmode" value="opaque">

<embed wmode="opaque" src="" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="200" width="100%">

</object>

</div>

</div>

JS幻灯片形式的HTML范例:

(这是系统内置的JS幻灯片效果,要使其生效,你需要使用公用的js文件库)

本文档的HTML范例均来自系统公共组件,如果你需要创建自定义的HTML结构,均需参阅《模板制作规范》。

<div id="banner-main" class=”banner-main”>
<div class="banner-inner">
<div id="sys-banner-1" class="sys-banner-1" style="height:306px;">
<div class="sys-banner-1-list" style="height:306px;">
<div id="sys-banner-1-list" class="clearfix">
<a href="#"><img src="img/banner.jpg" alt="" /></a>
<a href="#"><img src="img/banner.jpg" alt="" /></a>
<a href="#"><img src="img/banner.jpg" alt="" /></a>
</div>
</div>
<div id="sys-banner-1-mask" class="sys-banner-1-mask"></div>
<div id="sys-banner-1-ctrl" class="clearfix sys-banner-1-ctrl">
<a class="current" href="#" rel="0"><img src="img/banner.jpg" alt="" /></a>
<a href="#" rel="1"><img src="img/banner.jpg" alt="" /></a>
<a href="#" rel="2"><img src="img/banner.jpg" alt="" /></a>
</div>
</div>
</div>
</div>

说明:

I. 网站的banner通常放置在页面的中间部分(<div id=”bd” />)以内,所以我们把这一元素的介绍放在这一部分,但是你也可以根据需要将其移动到头部(<div id=”hd” />)或者其他适当的位置。

II. 和网站LOGO、导航菜单一个,Banner也必需提供一个hook,即id="banner-main"属性来供“在线编辑”模式使用。

III. 如果你要重新定义<div id=” banner-main” />以内的元素,你必须注意:banner的形式既可能是图片,亦可能是flash,还有可能是flash或者HTML+JS形式的幻灯片,你必须保证它们都可以正常使用。

内页内容布局(Layout)

HTML范例:

<div class=”clearfix layout-innerpg”>
<div class=”col-main”>
<div class=”main-wrap”>栏目内容HTML</div>
</div>
<div class=”col-sub”>侧边栏HTML</div>
</div>

说明: 这是系统公共组件定义的内页内容布局的HTML结构,通常情况下,我们不建议你对齐修改。如果你需要修改这一结构,你需要重新制作各栏目内页的模板文件(请参阅《模板制作规范》)。

首页内容布局(Layout)

HTML范例:

<div class=”clearfix layout-xxx”>
<div class=”col-main”>
<div class=”main-wrap”> HTML内容</div>
</div>
<div class=”col-sub”>HTML内容</div>
<div class=”col-extra”>HTML内容</div>
</div>

说明:

I. 这是一个三栏布局的范例,<div class=”col-main”><div class=”main-wrap”> </div></div>中放置较为主要的内容(常常是页面中最宽的那一部分),而<div class=”col-sub”> </div>与<div class=”col- extra”> </div>中放置较为次要的内容(比如侧边栏)。

II. 当然,你可以根据需要删除其中的一个或者两个,使其变成两栏或者一栏的布局。

III. 你可以在页面中放置多个这样的layout,也可以将其进行自由的嵌套与组合,创造出丰富自由的页面布局。

IV. 各区域的位置、范围及其他外观样式,均是由父级div中由“layout-”开头的classname所决定的。

内容模块(Widget)

完整的HTML范例:

<div class="block first-block last-block block-xxx">
<div class=”block-head”>
<div class=”head-inner”>
<h2 class=”title”>模块标题</h2>
<div class=”links”>更多 or 返回 or 其他</div>
</div>
</div>
<div class ="block-content clearfix">
模块内容
</div>
</div>

没有头部标题与链接的HTML范例:

<div class="block-nohead first-block last-block block-xxx">
模块内容
</div>

说明:

I. 在layout布局下,每一个区域均是由各种模块组合而成的。

II. first-block与last-block分别是用来表示每个栏位内的第一个与最后一个模块。它们通常是由系统自动生成的,你可以使用它们来创建不同的样式。

III. block-xxx是将这个模块与其他模块区分开的classname。

IV. 关于系统公共组件中的模块内容HTML结构,你可以下载并参考我们的示例模板。了解如何更改模块的结构,你需要参阅《模板制作规范文档》。

底部(#ft)中的元素

底部菜单

HTML范例:

<div id="ft-menu" class="ft-menu">
<a href="#">回到首页</a> | 
<a href="#">关于我们</a> | 
<a href="#">版权声明</a> | 
<a href="#">联系站长</a> | 
<a href="#">English</a>
</div>

说明:

底部菜单需提供一个属性值为“ft-menu”的id属性作为hook供“在线编辑”模式进行读取和操作。

底部版权及其他信息

HTML范例:

<div id="ft-siteinfo" class="clearfix siteinfo">
版权信息、联系方式等内容
</div>

说明:

I. 底部信息需提供一个属性值为“ft-menu”的id属性作为hook供“在线编辑”模式进行读取和操作。

II. 这些信息的内容将由网站用户自己输入。

ID命名规范

以下ID值为建站大师官方保留使用的ID,未避免冲突,请勿在文档的其他位置重复使用.

sitelogo:用于LOGO图片
menuSitenav:网站导航菜单
banner-main:banner图片
homepg/innerpg:用于区分首页和内页,方便定义样式
ft-menu:底部菜单
ft-siteinfo:底部版权信息

以下ID为建站大师预设的一些js脚本所用到的ID,按照方法在适当位置使用,即可实现相关效果,但是无论如何,这些ID必须确保在页面中仅出现一次:

以“slide-gallery-”开头的id:滑动图片展示;
以“sys-banner-”开头的id:共用组件中预设的js幻灯片;
以“sys-layer-”开头的id:在线客服插件使用的id。
为避免冲突,所有以“sys-”开头的ID均不可使用。

关于basic.css

建站大师提供了一个底层css文件,调用的方法是在style.css的顶部加入如下语句:

@import url(http://tp.open.313.com/tp-open/common/css/basic.css);

CSS Reset

basic.css重设了一些浏览器的默认样式,以避免不同浏览器对样式的表现差异:

清除了所有元素的内边距(填充)与外边距(间距);
清除了table表格的间距,并将border-collapse设为collapse;
将caption与th的文字设为左对齐;
去除了ol与li列表的项目符号,它们更适合用背景图实现;
清除了一些元素的边框;
重设了一些元素的字号;
将背景色设置为纯白;
一些其他的样式设置和bug修复……

共用样式

basic.css还预设了一些样式,只要使用了相应的classname即可应用相关效果,它们包含如下几种:

浮动

.f1:左浮动;
.f2:右浮动。

清除浮动

basic.css提供了3种清除浮动的方式供您使用,. Clearfix与. Overflow可以清除元素内部的浮动,.clear用来清除元素本身的浮动。

显示与隐藏

.hide:将元素隐藏;
.show:将元素显示并设为块元素。

文本样式

.grey:灰色;
.darkgrey:深灰色;
.red:红色
.blue:蓝色;
.green:绿色;
.yellow:黄色;
.orange:橙色;
.purple:紫色;
.darkred:暗红色;
.brown:棕褐色;
.pink:粉色;
.large:中号字;
.larger:大号字;
.linethrough:删除线;
.align-center:居中。

宽度

从.w1至.w20,对应的宽度值为数值乘以25px。


附录

使用符合语义规范与w3c标准的HTML标签与CSS样式将有助于你编写出清晰、高效、兼容性好的高质量代码。要全面了解HTML标签及其支持的属性与属性值、CSS属性及其属性值,你可以参考中文w3school或英文w3schools网站。