2015第53篇:搜狐前端规范文档

分享一份搜狐的前端规范文档
下载链接

1 WEB标准是什么?

“WEB 标准”是一系列标准的总称,包括 HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、 DOM1.0 等等。一般的误区经常把 WEB 标准说成 DIV+CSS。准确的说法应该是:采用 W3C 推荐的 WEB 标准中的 XHTML1.1 结合 CSS2.0 样式表制作页面的方法,DIV 应该指的是 XHTML 标签,而 CSS 指的是样式表了。

2 采用WEB标准开发的好处 2.1 节约运营成本

采用 WEB 标准制作,我们可以做到表现和形式及内容的分离,我们采用 XHTML 语言来表现(数据),用 CSS 来控制(页 面元素呈现的)形式。写的好的页面,XHTML 代码中基本上都是用户要看的数据,而其他修饰性的东西,全部由 CSS 来控制。 这样一来(XHTML)页面的体积就大大减小了,这样带宽上的费用就会大家降低了,这个是怎么降低的?

带宽成本:

页面总 K 数*pv/天=流量/天 *页面总 K 数=总下载量之和

通过公式可以看出,页面总 K 数越小,流量越小;

举个例子:搜狐首页如果每减少 1K,按每天 1000 万 pv 计算,那么每天将会节约 10G 的带宽流量。

通过公式反推,如果带宽一定的情况下,页面总 K 数越小,可容纳同时访问的用户就越多。

带宽/页面总 K 数=pv *当前 pv 为同时访问量

人工成本:

通过样式表控制所有的页面元素的表现,假如修改网站的整体风格,你只需要修改一下样式表文件,就可以轻松搞定了。 大可不必对页面进行重新编写代码和内容填充。

2.2 用户友好性 第一类:普通用户(每个访问我们网站的人);

第二类:搜索引擎;

第三类:更多的设备(手机、PDA、媒体机等)

采用 WEB 标准开发的页面,结构清晰,页面体积小,浏览器兼容性好。普通用户访问的时候,页面打开速度快,而且 不管用户使用那种浏览器,都能够正常访问(显示)页面,且页面的结构清晰,要找的数据可以很方便的浏览到。

而对搜索引擎来说,一个好的采用 WEB 标准开发的页面,都是做过 SEO 优化的,访问起来很友好,很容易理解页面中 哪里是标题(H1~H6 标签),哪里是段落(p 标签),哪里是段落里要强调的内容(strong 标签) 等,它可以很容易的分析出来。 而一个 SEO 好的站点,被搜索引擎收录的机会更多,这个也意味着会被更多的普通用户访问到,搜索引擎会带来更多的用户。

2008‐12‐02 8 / 49

SOHU‐WEB 前端代码标准化文档
随着智能手机的大量普通及 Wifi 配置渐渐成为主流,手机上网需求变得越来越迫切,以使我们也不得不考虑到页面在手

机上的显示,对于当前标准化形式下,基于标准,将是可行之道!

2.3 内容跨平台的可用性 通过将内容与设计进行分离的方法,可以使信息以较低的成本实现跨平台的转换。

2.4 加快页面解析速度 通过实际测试证明,采用内容与设计分离的结构进行页面设计,可使浏览器对网页的解析速度大幅提高,相对于老

     式的内容与设计混编的方法,浏览器在解析中可以更好的解析结构、内容和设计。

2.5 更良好的用户体验 采用表现与内容分离技术使我们在建设网站时,能够充分的对网站的内容、设计统一性、可用性进行思考与设计,

从而提高网站的可用性,改善用户体验及印象。同时更加适用于在 web 2.0 浪潮中不断变化的互联网形态。

3 名词解释

  1. 1、  横切
    页面中 950px 宽并且对高度没有限制的容器称为一个标准横切
  2. 2、  留白 两个容器或碎片之间的上、下、左、右的空白距离
  3. 3、  继承 元素可以从其父级元素中获得一些可为自己使用的属性或值。
  4. 4、  图片定位
    把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中,利用 CSS 中对图片进行遮罩属性,多用于页 面中的修饰图
  1. 5、  底图 页面中在标签中使用的背景图
  2. 6、  齐底(图)线 用于区分横切或碎片结束的线或图
  3. 7、  页面结构 页面的基础框架,由横切、布局元素组成
  4. 8、  焦点区(图) 最易注意的区域
  5. 9、  导航 在页面中具有导向性的链接集合

10、头图 页面主题图片

2008‐12‐02

9 / 49

SOHU‐WEB 前端代码标准化文档

11、间距 碎片或文字间的距离

12、行高 文字段落中行与行之间的距离

13、首行缩进 文字段落首行缩进

14、浮动 使被定义的区域脱离正常的页面文档流

15、碎片 由文字、图片组合成的内容区域

16、通栏广告 与页面内容区同宽的广告区域

17、功能按钮 具有交互属性的按钮

18、私有样式 当前页面独立使用的样式,不具备公用性

19、水平(垂直)居中 在页面中的某个元素处于父级的上下或左右的相同距离

20、标准头(尾) 定义相同的页面头或尾元素集合

4 常用技术术语

1、 浮动:float
2、 宽:width
3、 高:height
4、 块元素:block
5、 背景:Background 6、 无序列表:ul

7、 链接 :a
8、 表单:form
9、 图片:img 10、段落:p 11、文档类型定义:DTD 12、字体:font-family 13、字号:font-size 14、边框:border 15、文字对齐:text-align;

2008‐12‐02

10 / 49

SOHU‐WEB 前端代码标准化文档

16、行高:line-height 17、字色:color 18、背景不循环:no-repeat 19、内边距:padidng 20、外间距:margin 21、显示方式:display 22、悬停:hover 23、文字修饰:text-decoration 24、上:up

25、底:bottom 26、左:left 27、右:right 28、自动:auto 29、粗体:bold 30、正常:normal

5 一些约定
虽然 CSS 算不上是程序语言,但是程序语言的命名规则却为 CSS 所用。良好的命名习惯,对一个 WEB 标准网

站的开发来说,必将事半功倍。
我们结合常用的一些命名习惯,再结合 CSS 的实际应用,整理出一些较好的命名习惯。
1、 样式名称首字母统一为小写字母,不能为数字,下划线及特殊字符;
2、 样式名尽量语义化或简写;
3、 样式名需要组合拼写时,采用驼峰式拼写,即:keyWord;
4、 使用px(像素)为基本计量单位;
5、 页面中空格的使用:全角:中文空格 半角; 
6、 项目完成包中,文件夹及文件名称全部采用小写字母,不使用中文文件名;
7、 减少DIV的嵌套层数;
8、 给重要图片加上alt属性;给重要的元素和截断的元素加上title;
9、 使用正确的注释方法(详见“注释”章节); 10、非特殊情况下要求表现和内容分离,代码中不要涉及任何表现的元素,例如:style、font 等; 11、双标记签都要有开始和结束标签,单标记标签的后面一定要加“ /”,例如:<br />等,并且有正确的层次;

2008‐12‐02 11 / 49

SOHU‐WEB 前端代码标准化文档

12、其它特殊符号: 1) <(&lt;)

2) >(&gt;)

6 命名空间
6.1 外挂样式名称

全局:global.css
全局样式为 SOHU 全站公用,为页面样式基础,页面中必须包含。

结构:layout.css 页面结构类型复杂,并且公用类型较多时使用。多用在首页级页面和产品类页面中。

私有:style.css 独立页面所使用的样式文件,页面中必须包含。

模块 module.css 产品类页面应用,将可复用类模块进行剥离后,可与其它样式配合使用。

主题 themes.css 实现换肤功能时应用。

补丁 mend.css 基于以上样式进行的私有化修补。

6.2 常用名称

名称

定义

名称

定义

名称

定义

名称

定义

头:

header

尾:

footer

Logo:

logo

版权:

copyright

内容块:

content(A)

栏目块:

column

结构左:

left

结构中:

center

结构右:

right

矩阵导航:

matrixNav

首页导航:

indexNav

频道二级:

channelNav

导航文字:

navText

内容导航:

nav

内容主导航:

mainNav

子内容导航:

subNav

边导航:

sidebar

左导航:

leftsidebar

右导航:

rightsidebar

广告:

ad

搜索:

search

关键字:

keyWord

标签:

tag

菜单:

menu

滚动:

scroll

列表:

list

下拉:

drop

按钮:

btn

登陆:

login

登录条:

loginbar

注册:

reg

提示信息:

msg

打印:

print

地图:

map

功能区:

shop

Flash:

flash

标题:

title

更多:

more

博客:

blog

视频:

video

媒体:

media

新闻:

news

热点:

hot

评论:

review

合作:

cooperate

联系:

contact

加入我们:

joinUs

合作伙伴:

partner

友情链接:

link

论坛社区:

club

投票:

vote

摘要:

summary

服务:

service

指南:

guild

描述:

description

信息:

info

2008‐12‐02

12 / 49

SOHU‐WEB 前端代码标准化文档

状态:

status

注释:

note

下载:

download

价格:

price

地址:

address

产品:

products

跳转:

jump

条:

bar

线:

line

小技巧:

Tips

*

7 基本设置-global.css

7.1 全局设置
文字(text-align):align(居中)
上下边距(margin、padding):0(px)
左右边距(margin):auto(自动)
底色(background):#FFF(白色) 字体(font-family)、字号(font-szie)、字色(color):”宋体” 12px #666 body 内容整体居中:body>div

代码:

/* 全局CSS定义 */
body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋体';text-align:center;} body > div{margin-right:auto;margin-left:auto;text-align:center; } div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;} ul,ol,li{list-style:none}
table,td,input,textarea{font-size:12px}

*在文本框里用 ctrl+A 全选代码

7.2 页面标签初始化设置
1、 常用基本标签div,form,ul,ol,li,span,p,dl,dt,dd,img

设置基本标签的间距、边框默认值为 0。 2、 h1~h6标题

默认标题内字号 12px,内外间距为 0px,文字不加粗。 3、 ul,ol,li 列表

默认不显示项目符号。 4、 h2 栏目标题

2008‐12‐02

13 / 49

SOHU‐WEB 前端代码标准化文档
说明:h2 标签被定义为栏目标题特殊使用,在标签中非标题文字默认居右显示,主标题文字使用 span 标签包

含,居左显示。 5、 默认链接颜色

常态下不显示文字下划线,颜色为灰(#333),鼠标悬浮时:显示文字下划线,颜色变为暗红(#ccc)。 7.3 页面宽度

默认页面宽(area):950px 7.4 .clear

  结束容器内各元素的浮动属性,使相邻容器或元素节点正常显示。

7.5 自定义属性

  1. 1、  文字列表 :.list12、.list14 用于文字列表,区分为两种字体(12px/14px),默认行内间距上下 3px。
  2. 2、  图片列表 :.pp
    用于组图型碎片,默认具有 claar 属性,容器内 img、span 标签为块级元素,并清除图片上下外间距
  1. 3、  图文混排:.pt 碎片内使用<div>、<p>区分图片及文字,默认形态为左图右文,且图片与文字间距为 10px。
  2. 4、  文字类:加粗(b)、arial 字体(.fontArial) 处理局部应用
  3. 5、  浮动:左(.left,.l)、右(.right,.r) 用于构建页面框架
  4. 6、  留白:5px(.blank5)、8px(.blank8) 设定页面中留白高度为 5px、8px 两种

7.6 完整代码

*在文本框里中使用ctrl+A全选代码 公用样式文件链接:http://css.sohu.com/upload/global1.3.css

8 框架设置 2008‐12‐02

14 / 49

/* 全局CSS定义 */
body{text-align:center;margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋体';} body > div{text-align:center; margin-right:auto;margin-left:auto;} div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;}

8.1 约定

  1. 横切结构样式为 area,所有横要带有 id,名称:contentA,contentB
  2. 结构元素使用 div 标签,标签嵌套注意层级关系,如:

8.2 说明 8.2.1 栏间留白

三栏时定义中间栏,多栏定义时从第二栏开始定义。 8.2.2 横切留白

横切间留白,在下一个横切中定义,如:margin‐top:10px 8.3 一栏结构

一栏定义时 class 为 area,多用于组图横切。

SOHU‐WEB 前端代码标准化文档

<div id=”contentA” class=”area”> <div class=”left”><div/> <div class=”right”><div/>

<div/>

head

nav

area

…………..

代码:

<div id=”contentA” class=”area”></div>

2008‐12‐02

15 / 49

foot

8.4 两栏结构
两栏结构定义两个 DIV 元素,样式名称分别为 left、right

SOHU‐WEB 前端代码标准化文档

head

nav

left

right

…………..

代码:

8.5 三栏结构
三栏结构定义三个 DIV 元素,样式名称分别为 left、center、right

foot

<div id=”contentA” class=”area”> <div class=”left”><div/> <div class=”right”><div/>

<div/>

head

nav

left

center

right

…………..

代码:

2008‐12‐02

16 / 49

foot

…………..

代码:

SOHU‐WEB 前端代码标准化文档

<div id=”contentA” class=”area”> <div class=”left”><div/> <div class=”center”><div/> <div class=”right”><div/>

<div/>

8.6 多栏
多栏定义多个 DIV 元素,样式名称分别为 left、left、left……right,特殊定义复写样式。

head

nav

left

left

left

right

……n

foot

<div id=”contentA” class=”area”> <div class=”left”><div/> <div class=”left”><div/> <div class=”left”><div/> <div class=”left”><div/>

….

<div class=”right”><div/> <div/>

9 私有样式及继承 9.1 约定

当前页独立使用样式名称:style.css,样式使用外链方式,并包含在 head 中,如:

2008‐12‐02

17 / 49

SOHU‐WEB 前端代码标准化文档

<head>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″ /> <title>搜狐网站</title>
<link rel=stylesheet href=”style.css” type=”text/css” />
</head>

  1. 9.2  推荐样式拼写顺序

    1、 显示与定位: display、position、float、list-style
    2、 元素自身:width、height、margin、padding、border、background
    3、 文本外观 :color、font、line-height、text-align、text-decoration、other 例:

    .test{float:left;width:950px;margin:10px;background:#fff;color:#000;}

  2. 9.3  样式编写原则
  1. 1、  遵循 w3c XHTML 代码编写规范。
  2. 2、  优先公用样式,其次结构、再碎片,合并相关元素属性,按从大到小排列。
  3. 3、  样式中使用修饰图遮罩方法,将公用图片的样式名称复写定义。
  4. 4、  继承样式定义,多级关系可省略多级父元素名称,至少包含最外层父元素名称,独立碎片除外。
  5. 5、  横切以#contentA, #contentB….定义,且公用样式和横切加注释说明
  6. 6、  样式定义简写,替除多余空格字符。

9.4 样式结构 9.4.1 原则

公用的样式合并以类方法定义。 9.4.2 class 定义公用结构及内容

公用结构:公用 layout 定义 广告:公用广告定义

9.4.3 公用碎片 公用图片定义,修饰图采用定位方式,定义标题、组图、图混

1、导航及特殊碎片:ID 定义

导航 当前页导航 工具条

2、主要内容:contentA 定义 2008‐12‐02

18 / 49

SOHU‐WEB 前端代码标准化文档

内容公用

内容部分横切 A 如图:

10

搜狐公用导航及 logo 使用 10.1 logo文件说明

1、Logo 文件格式统一为:gif 2、文件扩展名小写如:sohu_logo.gif 3、文件颜色数:64 色

10.2 Sohu公用logo 图片地址:http://images.sohu.com/uiue/sohu_logo/sohu_logo.gif 代码:

2008‐12‐02

19 / 49

SOHU‐WEB 前端代码标准化文档

<a href=”http://www.sohu.com/” target=”_blank”><img src=”http://images.sohu.com/uiue/sohu_logo/sohu_logo.gif” width=”145″ height=”21″ alt=”sohu_logo” border=”0″ class=”left” /></a>

10.3 频道logo

10.4 图片地 http://images.sohu.com/uiue/sohu_logo/2006/

频道图片地址命名方式:频道域名+”_logo”+级别.gif
如娱乐(yule)频道 logo 地址为: 首页:http://images.sohu.com/uiue/sohu_logo/2006/yule_logo.gif 二级:http://images.sohu.com/uiue/sohu_logo/2006/yule_logo2.gif 文章:http://images.sohu.com/uiue/sohu_logo/2006/yule_logo3.gif

如新闻(news)频道 logo 地址为: 首页:http://images.sohu.com/uiue/sohu_logo/2006/news_logo.gif 二级:http://images.sohu.com/uiue/sohu_logo/2006/news _logo2.gif 文章:http://images.sohu.com/uiue/sohu_logo/2006/news _logo3.gif


频道 logo 代码 频道首页:

二级栏目:

2008‐12‐02

20 / 49

<a href=”http://news.sohu.com/” target=_blank><img height=95 alt=”搜狐新闻” src=” http://images.sohu.com/uiue/sohu_logo/2006/news_logo.gif ” width=145></a>

<a href=”http://www.sohu.com/”><img src=”http://images.sohu.com/uiue/sohu_logo/2005/sohu_logo2.gif” height=”22″ border=”0″ alt=”搜狐新闻” class=”left” /></a><a href=”http://news.sohu.com”><img

文章页:

10.5 Sohu公用导航

10.5.1 命名 频道首页:indexNav 频道二级:channelNav 频道文章:articleNav

10.5.2 代码

*以上导航碎片公适用于 XHTML 代码的 950px 宽页面。 10.5.3 导航完整代码

SOHU‐WEB 前端代码标准化文档

1、
<a href=”http://news.sohu.com/”><img

src=”http://images.sohu.com/uiue/sohu_logo/2006/news_logo3.gif” alt=”搜狐新闻-搜狐网站 ” height=”22″ border=”0″ class=”left” /></a>

<ul class=”right”>
<li><a href=”http://www.sohu.com/”>搜狐首页</a></li><li>-</li> ……

</ul>

<!– 标准头开始 –>
<div class=”area” id=”indexNav”>

<a href=”http://www.sohu.com/” target=”_blank”><img src=”http://images.sohu.com/uiue/sohu_logo/sohu_logo.gif” width=”145″ height=”21″ alt=”sohu_logo” border=”0″ class=”left” /></a>

<ul class=”right”>
<li><a href “http://www sohu com/”>搜狐首页</a></li><li> </li>

*以上导航碎片公适用于 XHTML 代码的 950px 宽页面。 10.6 频道用导航入口标准尺寸及 标准代码

10.6.1 标准尺寸

2008‐12‐02

21 / 49

SOHU‐WEB 前端代码标准化文档

1、 首页、栏目页导航入口数量及内容统一 2、 代码按新标准执行(代码见附件)
3、 二级导航底色统一使用:#EFEBEF

10.6.2 标准代码
h X

/ D

e n 3 ”

*在文本框里中使用 ctrl+A 全选代码

11 SOHU 基本碎片形式
基本碎片(纯文本、组图、图文)样式采用 global.css 样式文件中已定义的样式名称; 文字链列表“·”前缀采用图片背景定位方式;
文字链后小尾巴一律用 span 标签括起,紧跟在文字链后面。

11.1 纯文字 2008‐12‐02

22 / 49

<!DOCTYPE “http:/

<html xmlns <head> <meta http- <it

tml PUBLIC “-//W3C//DTD www.w3.org/TR/xhtml1/DT

=”http://www.w3.org/1999/

quiv=”Content-Type” conte htt// h /hf

HTML 1.0 Transitional//EN” /xhtml1-transitional.dtd”>

xhtml” xml:lang=”zh-CN” l

t=”text/html; charset=gb2 l h1j”t “t t/j

ang=”zh-CN”>

12″ />
i t”></ i t

>

11.1.1 文字链12号字 形式一:普通列表

代码:

SOHU‐WEB 前端代码标准化文档

<div class=”list12″> <ul>

<li><a href=”#” target=”_blank”>普通文字链普通文字链普通文字链</a></li>

…… </ul>

</div>

   形式二:列表后跟随小尾巴(小尾巴:文字、时间)

代码:

注意:列表文字与小尾巴之间的间隙 6px,不能用空格表示,要在样式里用“margin‐left:6px;“定义。

    形式三:列表后小尾巴右对齐(小尾巴:时间、文字、排行的数字)

代码:

2008‐12‐02 23 / 49

<div class=”list12″> <ul>

<li><a href=”#” target=”_blank”>普通文字链普通文字链</a><span>(07/12 10:08)</span></li> ……

</ul> </div>

<div class=”list12″> <ul>

<li><a href=”#” target=”_blank”>普通文字链普通文字链</a><span>(07/12 10:08)</span></li> </ul>

注意:span 样式中用右浮动实现右对齐。 形式四:列表后小尾巴左对齐

代码:

注意:span 的样式右浮动的同时加上宽度。 形式五:列表带排序前缀(排序前缀:图标或者数字)

代码:

   注意:图标前缀采用背景形式,数字前缀在列表文字前直接加上。
   形式六:列表带视频图标前缀

代码:

2008‐12‐02

24 / 49

SOHU‐WEB 前端代码标准化文档

<div class=”list12″> <ul>

<li><a href=”#” target=”_blank”>普通文字链普通文字链</a><span>56789</span></li>

…… </ul>

</div>

<div class=”list12″> <ul>

<li><a href=”#” target=”_blank”>普通文字链普通文字链普通文字链</a></li> <li>1 <a href=”#” target=”_blank”>普通文字链普通文字链普通文字链</a></li> ……
</ul>

<div class=”list12″> <ul>

<li><a href=”#” target=”_blank”><img src=”images/vd.gif” width=”16″ height=”10″ alt=”” /></a><a href=”#” target=”_blank”>普通文字链普通文字链普通文字链</a></li>
……

注意:视频图标采用搜狐公司标准图标,单独链接形式。

11.1.2 文字链14号字 形式一:普通列表

代码:

SOHU‐WEB 前端代码标准化文档

<div class=”list14″> <ul>

<li><a href=”#” target=”_blank”>十四号字文字链十四号字文字链十四号字文字链链</a></li> ……
</ul>

</div>

   形式二:列表后跟随小尾巴(小尾巴:文字、时间)

代码:

注意:跟随文字为 12 号字,列表文字与小尾巴之间的间隙 6px,不能用空格表示,要在样式里用“margin‐left:6px; “定义。

   形式三:列表后小尾巴右对齐

代码:

2008‐12‐02 25 / 49

<div class=”list14″> <ul>

<li><a href=”#” target=”_blank”>十四号字文字链十四号字链字字链</a><span>(07/12 10:08)</span></li> ……

</ul> </div>

SOHU‐WEB 前端代码标准化文档

<div class=”list14″> <ul>

<li><a href=”#” target=”_blank”>十四号字文字链十四号字文字链</a><span><a href=”#” target=”_blank”>勇敢的心</a></span></li>
……
</ul>

</div>

注意:span 右对齐,文字可以是 12 号或者 14 号字体 形式四:列表带视频图标前缀

代码:

<div class=”list14″> <ul>

<li><a href=”#” target=”_blank”><img src=”images/vd.gif” width=”16″ height=”10″ alt=”” /></a><a href=”#” target=”_blank”>十四号字文字链十四号字文字链十四号字文字链链</a></li>
……

</ul> </div>

   注意:视频图标采用搜狐公司标准图标,单独链接形式。
   形式五:列表前带着重文字,后跟小尾巴

代码:

注意:前缀文字用 em 括起。

11.2 图片组图
文字用 span 标签括起,标签内不使用样式名称。

2008‐12‐02

26 / 49

<div class=”list14″> <ul>

<li><em>[<a href=”#” target=”_blank”>前缀文字</a>]</em><a href=”#” target=”_blank”>十四 号字文字文字链</a><span><a href=”#” target=”_blank”>勇敢的心</a></span></li>

…… </ul>

11.2.1 普通组图

SOHU‐WEB 前端代码标准化文档

代码:

<div class=”pp”> <ul>

<li><a href=”#” target=”_blank”><img src=”images/pic85x65.gif” width=”85″ height=”65″ alt=”” /></a><span><a href=”#” target=”_blank”>文字说明</a></span></li>

…… </ul>

11.2.2 带时间组图

代码:

<div class=”pp”> <ul>

<li><a href=”#” target=”_blank”><img src=”images/pic85x65.gif” width=”85″ height=”65″ alt=”” /></a><span><a href=”#” target=”_blank”>文字说明</a><br />(07/12 10:08)</span></li>
……

</ul> </div>

注意:时间与文字之间用<br />回行。 11.2.3 垂直居中组图

2008‐12‐02

27 / 49

SOHU‐WEB 前端代码标准化文档

代码:

<div class=”pp”> <ul>

<li><a href=”#” target=”_blank”><span class=”middle”></span><img src=”images/pic85x65.gif” width=”85″ height=”65″ alt=”” /></a><span><a href=”#” target=”_blank”>文字说明</a></span></li> ……

</ul> </div>

注意:图片前面的<span class=”middle”></span>实现垂直居中。

11.3 图文混排 11.3.1 普通形式

代码:

<div class=”pt”>
<div><a href=”#” target=”_blank”><img src=”images/pic100x75.jpg” width=”100″ height=”75″ alt=”” /></a></div>
<p>文字说明文字说明文字说明文字说明文字说明文字说明文字说明…<a href=”#” target=”_blank”>更多 &gt;&gt;</a></p>
</div>

11.3.2 右侧带文字标题形式

2008‐12‐02

28 / 49

SOHU‐WEB 前端代码标准化文档

代码:

注意:标题用标签 h4 括起,放在 p 的上面。

11.3.3 右侧列表形式

代码:

<div class=”pt”>
<div><a href=”#” target=”_blank”><img src=”images/pic100x75.jpg” width=”100″ height=”75″ alt=”” /></a></div>

<h4><a href=”#” target=”_blank”>标题标题标题标题</a></h4> <p>文字说明文字说明文字说明文字说明文字说明…<a href=”#” target=”_blank”>更多&gt;&gt;</a></p> </div>

<div class=”pt”>
<div><a href=”#” target=”_blank”><img src=”images/pic100x75.jpg” width=”100″ height=”75″ alt=”” /></a></div>

<ul>
<li><a href=”#” target=”_blank”>文字链文字链文字链文字</a></li> ……

</ul> </div>

注意:列表采用 li 的形式。

11.3.4 图片下带文字说明形式

2008‐12‐02

29 / 49

SOHU‐WEB 前端代码标准化文档

代码:

<div class=”pt”>
<div><a href=”#” target=”_blank”><img src=”images/pic100x75.jpg” width=”100″ height=”75″ alt=”” /></a><a href=”#” target=”_blank”>图片文字说明</a></div>

<ul>
<li><a href=”#” target=”_blank”>文字链文字链文字链文字</a></li> ……

</ul> </div>

注意:div 左浮动时,要在样式里边定义宽度。 11.4 固定碎片

11.4.1 频道首页logo横切

代码:

注意:频道 logo 和通行证区域代码形式和样式名称固定,自由区域样式名称固定。 通行证固定样式链接:http://css.sohu.com/upload/indexpp.css

11.4.2 通行证标准代码 样式代码:

2008‐12‐02

30 / 49

<div class=”area” id=”channelLOGO”>
<div class=”left”><a href=”http://women.sohu.com/”><img height=”95″ alt=”女人频道-搜狐网站” src=”http://images.sohu.com/uiue/sohu_logo/2006/women_logo.gif” border=”0″></a></div>

<div class=”right”>
<div class=”pass”>

<div class=”l”>

/* 通行证开始 */
.sspp{float:left;font-size: 12px;width:420px;height:20px;margin:2px;position: relative;}

SOHU‐WEB 前端代码标准化文档

代码:

<!– 通行证:START –>
<script type=”text/javascript” src=”http://www.sohu.com/passport/pp18030_5.js”></script> <script type=”text/javascript” src=”http://news.sohu.com/upload/pi18030_1.js”></script> <script type=”text/javascript”>

11.4.3 其他碎片 11.4.3.1 关键字

代码:

<div class=” keyWord”>
<p><span class=”fnA”><a href=”#” target=”_blank”>十二号字普通</a></span><span class=”fnB”><a href=”#” target=”_blank”>十二号字加粗</a></span><span class=”fnC”><a href=”#” target=”_blank”>十四号 字普通</a></span></p>
<p><span class=”fnD”><a href=”#” target=”_blank”>十四号字加粗</a></span><span class=”fnE”><a href=”#” target=”_blank”>十二号字红</a></span><span class=”fnF”><a href=”#” target=”_blank”>十二号字 红粗</a></span><span class=”fnG”><a href=”#” target=”_blank”>十六号字</a></span></p>
</div>

注意:每一行用标签 p 括起,每个关键字用 span 加 class 样式的形式。 11.4.3.2 跳转

代码:

注意:跳转按钮采用 input 的 button 加 class 样式形式。

11.4.3.3 当前位置

代码:

<div class=”dir”><a href=”#” target=”_blank”>首页</a> &gt; <a href=”#” target=”_blank”>二级</a> &gt; 最

终页</div>
2008‐12‐02 31 / 49

<div class=”jump”><a href=”#” target=”_blank”>首页</a> <a href=”#” target=”_blank”>上一页</a> <a href=”#” target=”_blank”>下一页</a> <a href=”#” target=”_blank”>末页</a> <span class=”fb”>1/50</span> 转到<input type=”text” class=”txA” />页<input type=”button” class=”btn” /></div>

11.4.3.4 搜索

代码:

注意:搜索按钮采用 input 的 button 加 class 样式形式

12 浏览器兼容
12.1 兼容浏览器及兼容要求

  1. IE 浏览器:IE6.0、IE7.0
  2. FireFox 浏览器:Mozilla FireFox1.5、Mozilla FireFox2.X、Mozilla FireFox3.X、
  3. Opera 浏览器:Opera9.X
  4. Safari 浏览器:Safari2.0
     所定义样式语法定义在常用浏览器中显示无结构、颜色、效果差异。

12.2 主流浏览器用户所用版本比例表

SOHU‐WEB 前端代码标准化文档

品牌

比例

版本

百分比

内核代号

IE

93.96%

6

77.41%

Trident

7

22.21%

8

0.35%

5.5

0.01%

5.01

0.01%

Maxthon

3.60%

1.x

57.74%

2

42.26%

MyIE

0.29%

2

98.82%

x

1.18%

FireFox

2%

3.0 以上

90.29%

Gecko

2.0 以上

5.45%

2.0 以下

4.26%

Opera

0.14%

9以上

99.87%

Presto

8

0.13%

其它

0.01%

Mozilla、Netscape

2008‐12‐02

32 / 49

<div class=”search”><span>搜索:</span><input type=”text” class=”txA” /><select class=”seleA”><option></option></select><input type=”button” class=”btn” /></div>

12.3 各版本浏览器HACK 区别各版本浏览器的样式方法,注意样式定义顺序。

SOHU‐WEB 前端代码标准化文档

<style>
.test{border:10px solid #f00;*border:10px solid #f00;_border:10px solid #f00;_border

/**/:10px solid #f00;}

<div class=”test”> FF:IE7;IE6;IE5.5

</div>

正确样式顺序为:FF(opera,safari),IE7,IE6 12.4 常见浏览器兼容问题及解决办法

12.4.1 浏览器兼容的一般写法 当需要解决浏览器兼容问题时,一般采用下面写法可以解决,如 margin 问题:

.test{margin:8px;_margin:10px;*margin:9px}

说明:
margin:8px:正常语法,所有浏览器都能够正常解析 _margin:10px:针对 IE6.0 的特殊写法,只针对 IE6.0 以上浏览器有效 *margin:9px:针对 IE7.0 特殊写法,只针对 IE7.0 以上的浏览器有效

12.4.2 样式盒宽度不同
由于 IE 浏览器版本的不同,对样式盒解释上宽度也不同。

问题浏览器: IE5.5
定义一个基础层:div.content{ border:20px; padding: 30px; width : 300px;}

标准情况下,这个盒的宽度是:20+30+300+30+20=400px。但是在 IE5.5 浏览器中,对盒模型的宽度 解释有个 bug,它认为 300 px 是整个盒的总宽度,内容的宽度变成:300-20-30-20-30=200px。

解决办法:
1、 !important 空格注释的组合

div. content t{ border:20px; padding: 30px; width:300px; width /**/: 400px;}

width:300px !important;

2008‐12‐02

33 / 49

SOHU‐WEB 前端代码标准化文档
这个是正确的 width,支持!important 标记的浏览器使用这里的数值,IE6.0 虽然不支持优先级的方法,但

可以正确执行这句代码。

width(空格)/**/:400px;
IE6 以上的浏览器不解析这句,所以仍然认为 width 的值是 300px;而 IE5.5 读到这句,新的数值(400px)

覆盖掉了旧的,因为!important 标记对 IE5.X 不起作用。
注意:IE7.0 支持了!important 方法和 width(空格)/**/:400px;写方法,但由于优先级的原因,IE7.0 执

行了 width:300px !important;。

12.4.3 Firefox 浮动层背景图不能自动平铺
嵌套 DIV,当子 div 为浮动(float)时,父 div 的高度在 Firefox 不能根据子 DIV 自动变化

问题浏览器:Firefox、Opera 如下:

度不能自动计算。导致的结果是当父层 div 有背景色和背景图时不能自动平铺。 解决办法:

添加样式 clear 清除浮动,这样父 div 就会随子 div 高度自动计算。 12.4.4 FireFox 和 IE 中的 BOX 模型解释不一致

在 Mozilla Firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px

问题浏览器:FireFox、IE

解决办法:

div{margin:30px!important;margin:28px;}

!important 优先级,Firefox 优先执行 margin:30px,而 IE 执行 margin:28px 12.4.5 IE 6.0 双倍浮动边界 Bug

当一个盒元素浮动且相同方向上有 margin 值时,margin 值为两倍。 问题浏览器:IE
描述如下:

2008‐12‐02

浏览器里高

<div id=”parent”>
<div id=”content”> </div>

</div>

当 content 为浮动层时,在 IE 浏览器中 parent 的高度是自动计算的,在 FireFox 和 Opera

<div id=”parent” class=”clear”> <div id=”content”> </div>

</div>

.clear:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}

34 / 49

SOHU‐WEB 前端代码标准化文档 div {float: left;margin-left: 100px;}

  浮动元素相同浮动方向上的边界是所设置值的两倍。
  解决办法:

div {float:left;margin-left:100px;display:inline}

为浮动元素设置 display: inline;
注意:根据 W3C 的建议,除非值是 none,否则不应该在浮动元素上使用 display。

12.4.6 Margin-top 与 Padding-top 问题 同一方向上嵌套盒元素,Margin-top 与 Padding-top 下会相加。

问题浏览器:IE5.X、IE6.0 描述如下:

一个有 padding 的盒子内嵌套一个有 margin 的盒子,外围盒子的 padding-top 和里面盒子的 margin-top 不会相加。

解决办法:

Firefox、Opera 和 IE7.0 没有这个问题,通过!important 优先级控制 margin- top,margin-top:50px IE5.X、IE6.0 解析这句。

<div style=”width:500px;padding-top:20px;”>
<div style=”width:150px;margin-top:30px;”>内容</div>

</div>

<div style=”border:1px solid #f00;width:500px;padding-top:20px;”> <div style=”border:1px solid

blue;width:150px;margin-top:30px!important;margin-top:50px”>内容</div>

12.4.7 ul 标签在 Mozilla 与 IE 浏览器默认值的区别
ul 标签在 FireFox 与 IE 浏览器默认值的区别
描述如下:ul 标签在 FireFox 中默认是有 padding 值的,而在 IE 中只有 margin 有值所以先定义 解决办法:ul{margin:0;padding:0;}定义基础 ul 值。

12.4.8 div 标签居中问题
div 标签居中在 FireFox 与 IE 下不同。
描述如下:text-align:center;在 IE 下内容可以居中而 firefox 下内容居左

2008‐12‐02

35 / 49

SOHU‐WEB 前端代码标准化文档

解决办法:

<div style=”width:500px;text-align:center;margin:0px auto;”> <div style=”width:150px;”>内容</div>

</div>

添加样式 text-align:center;margin:0px auto;在 IE 和 Firefox 下解决问题。

12.4.9 img 对象 alt 和 title 的解析
img 对象 alt 和 title 的解析在 IE 和 FireFox 下是不同的。
描述如下:
alt:当照片不存在或者 load 错误时的提示;
title:照片的 tip 说明;
在 IE 中如果没有定义 title,alt 也可以作为 img 的 tip 使用,但是在 Firefox 中,两者完全按照标准中的定

义使用; 解决办法:

定义 img 对象时,最后将 alt 和 title 对象都写全,在各种浏览器中都能正常使用。

12.4.10 显示游标手指
显示游标手指的样式在 IE 和 FireFox 下是不同的。
描述如下:cursor:hand 仅在 IE 下可以显示游标手指状,但在 FireFox 下不能。 解决办法:
cursor: pointer 可以同时在 IE 和 Firefox 中显示游标手指状, hand 仅 IE 可以

13 图片类 13.1 内容图片

2008‐12‐02

36 / 49

SOHU‐WEB 前端代码标准化文档
内容图片使用 GIF、JPG 格式,以 pic+图片尺寸方式命名,如:pic100x75.gif,图片边框由 CSS 样式定义。文件

   名称字母全部为小写。
   代码:

13.2 背景图片

13.2.1 图片命名 1、icon 图标类

图标类背景图片命名以 icon+数字方式,如:icon01,数字:01 开始 2、背景类(横向)

横向背景图片命名以 bgx+数字方式,如:bgx01,数字:01 开始 3、背景类(纵向)

横向背景图片命名以 bgy+数字方式,如:bgy01,数字:01 开始 4、其它

特殊图片命名以 bg+数字方式,如:bg01,数字:01 开始 13.2.2 普通背景图

背景图片使用 GIF、JPG、PNG 格式,以 bg+序号命名,如:bgx01.gif。文件名称字母全部为小写。

代码:

.box{background:url(images/bg02.gif);width:358px;height:66px;}

2008‐12‐02

37 / 49

img{padding:2px;background:#FFF;border:1px #A5BFE0 solid;}

<img src=”images/pic100x75.gif” width=”100″ height=”75″ alt=”图片说明” title=”图片说明” />

代码:

SOHU‐WEB 前端代码标准化文档

<div class=”box”>
<input type=”text” /><select></select><select></select>……

</div>

13.2.3 定位背景图 用定位的方法做背景,可以减少链接数,提高页面下载速度。

用定位方法制作好的背景图

Sogou 碎片使用定位方法背景图的效果

.sogou{width:542px;}
.sogou span,.sogou input{float:left}
.sogou span{width:104px;height:30px;background:url(images/bg01.gif) 0 -54px;}

<div class=” sogou”>
<span></span><input type=”text” /><input type=”button” value=”搜索” /> </div>

13.3 文字链接前缀
文字链接的前缀可以用背景图的方式实现,利用 CSS 样式控制修饰图,可以方便维护。

13.3.1 数字图片前缀

2008‐12‐02

38 / 49

代码:

SOHU‐WEB 前端代码标准化文档

数字图片前缀

ul{background:url(images/number.gif) no-repeat left;} li{line-height:28px;text-align:left;text-indent:28px;color:#333}

<ul>
<li><a href=”#” target=”_blank”>常吃微波食品可能导致严重生理变化</a></li> <li><a href=”#” target=”_blank”>房地产的暴利时代已经终结</a></li>
<li><a href=”#” target=”_blank”>知名主持全家福 警惕!靴子搭配雷区</a></li> </ul>

13.3.2 其它修饰

其它修饰前缀

2008‐12‐02

39 / 49

14 广告类
14.1 通栏广告(以ID形式)

14.1.1 广告形式A

代码

SOHU‐WEB 前端代码标准化文档

代码:

li{background:url(images/decorate.gif) no-repeat left;line-height:22px;text-align:left;text-indent:26px;color:#333}

<ul>
<li><a href=”#” target=”_blank”>常吃微波食品可能导致严重生理变化</a></li> <li><a href=”#” target=”_blank”>房地产的暴利时代已经终结</a></li>
<li><a href=”#” target=”_blank”>知名主持全家福 警惕!靴子搭配雷区</a></li>

</ul>

<div class=”adA”>
<div class=”left”>广告</div>

</div>

<div class=”right”>
<div class=”list12″>

文字内容

代码说明 “adA”:为通栏广告样式名称,下面的通栏广告会按照“adB”,“adC”….向下排列

left:左侧广告向左浮动,并定好宽和高 right:右侧文字向右浮动,里面的文字列表(list12)居中显示,并在 list12 里定上行高,字色等细节部分

14.1.2 广告形式B

2008‐12‐02 40 / 49

SOHU‐WEB 前端代码标准化文档

代码:

<div class=”adB>
<div class=”left”>广告</div> <div class=”center”>广告</div> <div class=”right”>广告</div>

</div>

     代码说明:
     左边翻牌广告左浮动,中间广告左浮动,右侧翻牌广告右浮动,定好宽高后,插入广

告图片

14.2 碎片广告(以碎片形式划分) 14.2.1 图片广告

代码:

代码说明
碎片广告以 ad+广告宽度方式取名,在广告外面单独包一层 div,并在 class 里定义该层

div 距上下的距离。

14.3 广告图片及样式命名规则 图片:pic+广告尺寸.gif

样式:ad+广告宽度

15 多媒体类
15.1 Flash焦点图

2008‐12‐02

41 / 49

<div class=”ad160″> <div>广告</div>

</div>

SOHU‐WEB 前端代码标准化文档

代码分三部分组成:

1、外链“sohuflash_1.js”JS 文件,此文件用来保证 Flash 焦点图点击链接时不受干扰,代码写在页面的 Head 标签 中。

2、页面 Flash 焦点图位置,放置具有固定 ID 名称的空 DIV 标签,如:<div id=”focus_01″></div>
3、加入特定 Flash 焦点图 JS 代码,此代码可通过修改变量的方式,对 Flash 焦点图的宽、高、字色、图片路径、链

接地址等参数做维护调整与设置。
代码:

<div id=”focus_01″></div>
<script type=”text/javascript”>
<!–
//可编辑内容开始(可放置特版中)
var pic_width=318; //图片宽度
var pic_height=169; //图片高度
var button_pos=2; //按扭位置 1 左 2 右 3 上 4 下 var stop_time=5000; //图片停留时间(1000 为 1 秒钟) var show_text=0; //是否显示文字标签 1 显示 0 不显示 var txtcolor=”0000ff”; //文字色

var bgcolor=”DDDDDD”; //背景色 //可编辑内容结束

*在文本框里中使用 ctrl+A 全选代码 15.2 视频

2008‐12‐02 42 / 49

SOHU‐WEB 前端代码标准化文档

视频部分代码为公司统一标准代码。可通过调整 CSS 样式,达到对视频播放器外观调整的目地。此部分代码 目前不支持 Firefox 浏览器。

代码:

/* 视频播放器_框架 */
.players {width:460px}
.players .v h2 {height:25px;padding:15px 32px 0 39px;background:url(http://s.sohu.com/upload/20070424_s/images/ebg1.gif);text-align:left;color:#fff} .players .v h2 span {float:right;color:#3ED8FF}
.players .v h2 span a {color:#3ED8FF}
.players .pv

<div class=”players”> <div class=”v”>

<!–视频标题–>

<h2><span><a href=”http://play.sports.sohu.com/calendar/tv_live.php” target=”_blank”>今日 节目单</a></span>视频:05 苏迪曼杯经典战 中国首战 5-0 狂扫瑞典</h2>

<!–视频播放画面–> <div class=”pv”>

2008‐12‐02 43 / 49

16 交互类 16.1 鼠标响应

16.1.1 图片

SOHU‐WEB 前端代码标准化文档

在用户鼠标划过带链接的内容图片时,其图片的边框变换颜色,达到用户操作与页面表现变化的交互目地,是 浏览 Web 页面的人性化体现。

代码:

<img src=”images/pic100x75.gif” width=”100″ height=”75″ alt=”图片说明” title=”图片说明” />

16.1.2 链接

img{padding:2px;background:#FFF;border:1px #A5BFE0 solid;} a:hover img{border:1px #FF3C00 solid;}

通过用户鼠标在文字链上划过及点击后的链接文字变换色彩,达到用户操作与页面表现变化的交互目地,是 浏览 Web 页面的人性化体现。

2008‐12‐02 44 / 49

代码:

SOHU‐WEB 前端代码标准化文档

a{color:#003399;text-decoration:underline;} a:hover{color:#CC0000} a:visited{color:#00BC87}

<a href=”#” target=”_blank”>“微软黑屏”是否危害中国国家安全</a> <a href=”#” target=”_blank”>话题|房价暴跌 百姓就能买起房?</a>
<a href=”#” target=”_blank”>汪永晨:映秀震后灾区生活实录(图)</a>

16.2 功能按钮

通过用户鼠标在功能按钮上划过变换按钮背景,达到用户操作与页面表现变化的交互目地,是浏览 Web 页面的 人性化体现。

代码:

17 代码书写规范 17.1 注释

17.1.1 HTML 注释

正确的注释规范:<!‐‐这里是注释‐‐>感叹号后面 2 个横线,结束时 2 个横线; 2008‐12‐02

45 / 49

input{background:url(images/buttonBg01.gif)} .float{background:url(images/buttonBg02.gif)}

<input type=”button” value=”发个留言” onmouseover=”this.className=’float'” onmouseout=”this.className=”” />

SOHU‐WEB 前端代码标准化文档

不要在注释内容中使“‐‐”
“‐‐”只能发生在 XHTML 注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是错误的: <!‐‐这里是注释‐‐‐‐‐‐‐‐‐‐‐这里是注释‐‐>
<!‐‐‐‐‐‐‐‐‐‐‐这里是注释‐‐‐‐‐‐‐‐‐‐‐这里是注释‐‐‐‐‐‐‐‐‐‐‐>
用等号或者空格替换内部的虚线,这样是正确的:
<!‐‐这里是注释============这里是注释‐‐>

17.1.2 CSS 样式注释
由于 CSS+DIV 制作页面,样式代码多,布局比较复杂,更便于页面后期的维护,更改,所以有必要在样式上加上注 释。注释规则如下:

1.注释规范
/*这里是注释*/
例如:. news {…}/* 这里是高度自动撑 */

17.2 缩进 根据页面代码结构进行包含缩进,这样代码层次结构清晰;

17.3 回行 同级间结构或碎片代码块之间添加换行

18 经验分享
18.1 PNG图片使用

18.1.1 PNG 透明图片用作普通图片

然后在代码里随便的地方加上一段 JS 代码即可; 此段代码可以给所有的 PNG 透明图片使用。 代码:

2008‐12‐02

46 / 49

SOHU‐WEB 前端代码标准化文档

<script type=”text/javascript”> function correctPNG(){

for (var i = 0; i < document.images.length; i++) {
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length – 3, imgName.length) == “PNG”) {

var imgID = (img.id) ? “id='” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class='” + img.className + “‘ ” : “”

i Titl (i titl )?”titl ‘” i titl “‘” “titl ‘” i lt “‘”

18.1.2 PNG 透明图片用作背景
当把 PNG 图用作背景时,尤其是有透明渐变效果的时候,是很好用的。

首先切一张透明的 PNG 背景图片,要注意的是,切图的时候要选 PNG‐24 的形式:

然后在样式里写上

下面是完成后的图片效果:

{FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/tt1.png’,sizi ngMethod=’sca le’);height:270px;width:161px;margin:0 auto;background:url(images/tt1.png) no-repeat top!important;background:none;}

2008‐12‐02

47 / 49

SOHU‐WEB 前端代码标准化文档

18.1.3

18.2 “·”图片应用 用图片定位的方法解决列表前缀在各浏览器的显示兼容性问题,具有以下优点:

1. 把“•”改为图片,在所有浏览器表现完全一致。
2. 当首次下载过 dot 图片后,图片存入缓存,在浏览其他涉及到 dot 图片的时候就可以不用在重新下载。 3. 直接读取缓存里的图片,能达到减少浏览下载量的目的。

图片存储格式为 GIF, 图片名称为 dot.gif 公用路径:http://images.sohu.com/uiue/dot.gif

通过 css 的控制 li 的背景定位和 li 左侧缩进来完成无序列表的前“•”

2008‐12‐02 48 / 49

.list ul{margin:5px auto;text-align:left; font-size:12px;} .list li a{color:#003399;}
.list li{background:url(http://images.sohu.com/uiue/dot.gif) no-repeat;padding-left:14px;line-height:22px;color:#039}

SOHU‐WEB 前端代码标准化文档

<div class=”list”> <ul>

<li><a href=”#” target=”blank”>银行副行长借款 7000 万炒股巨亏 无力偿还自首<br /> 折行 群体而非个人反对借奥运炒作</a> </li>

<li><a href=”#” target=”blank”>武汉男子宾馆内中数刀坠楼 赤裸女子房内身亡 </a></li>

<li class=”nodot”>·<a href=”#” target=”blank”>过家家,吃果果,你一个,我一个 </a> nodot!!!</li>

<li><a href “#” target “blank”>湖南上演现实版“睡美人” 长睡 年醒后更美

注意:代码和大部分样式为常规写法,请注意红色标记即为图片定位方法,在 dot.gif(上面所提到的图片)做为 li 的背景,背景不重复。

当需要自定义前缀时,可以使用 nodot 样式,nodot 样式在 global 中定义,默认属性为:清除底图,还原缩进。 18.3 span右浮动

span 标签在跟随文字链使用时,当具有右浮动属性时,会产生折行现象,需要使用 margin‐top 使折行的文字 跟列表文字对齐。

18.4 em 前缀
em 带有强调的意思,而且是斜体文字,所以用到的时候要给他定义成普通体文字。 em{font‐style:normal;}

2008‐12‐02

49 / 49

―――――――――――――― 全文完 ――――――――――――――――

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址