资源描述
前端CSS和XHTML
CSS命名规则
页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用骆驼式命名法。
骆驼式命名法： 正如它的名称所表示的那样，是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记.骆驼式命名法近年来越来越流行了。例如：mianNav footNav
1.通用命名规则：
1) 所有ID或者class字母和数字之间用“_”连接，如: #col_1、#col_2
2) 所有ID或者class两个单词之间的链接采用骆驼式命名法，如: mianNav、footNav
3) 页面主体框架布局命名：Lay_1、Lay_2 、Lay_3
4) 栏目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N
5) 栏目标题块命名一律采用title。元素标签采用:<h4> 如：
<div class="tit"><h4>标题</h4></div>
6) 页面所有图片区域全部采用：pic_1、pic_2、pic_3、pic_N
7) 页面文本列表区域全部采用： Lst_1、Lst_2、Lst_3、Lst_N
8) 页面上按钮采用：btn_1、btn_2、btn_3、btn_N
9) 广告区域：ad_1,ad_2,ad_3,ad_N
2.主框架命名规则：
1) #header (页面头部)
2) #main (页面主体)
3) #footer (页面尾部)
3.通用命名规则：
主 体：main
外 层：wrap
功能条：funcBar
主导航：mainNav
子导航：subNav
友情链接：friendLink
版 权：copyright
页 眉：header
页 脚：footer
标 题：title
主导航：mainNav
子菜单：subMenu
注 释：note
面包屑：breadcrumb
容 器：container
内 容：content
搜 索：search
登 陆：Login
当前状态：current
页头：header
标志：logo
侧栏：sidebar
广告：banner
导航：nav
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
信息：msg
提示技巧：tips
栏目标题：title
指南：guide
服务：service
热点：hot
新闻：news
下载：download
注册：reg（register）
状态：status
按钮：btn
投票：vote
4.常用简写命名规则：
bd：Body
hd：Header
fnt：字体
nav：导航
tb：表格
lnk：链接
ml/mr：margin-left/margin-right
lst：列表
pl / pr / pd：padding-left/-right/padding
col：栏目
frm：表单
con：内容
inf：信息
lg：Logo
inp：Input
ft：Footer
btn：Button
more：更多
fl /fr float:left/float:right
tit 标题栏
spr 空行
t / d / mid / l / r：上 / 下 / 中 / 左 / 右
bdr：边
w：宽
h：高
网站布局和样式文件命名
1. 网站样式文件命名和样式从属关系
1) 全局CSS文件：global.css ，其中global.css包括cssreset（用来清除默认值）、全局性的一些属性值的定义
2) 全局布局共用CSS文件：layout （网站布局容器的共用的CSS部分：页眉、页脚、搜索共用CSS）
3) 频道私有CSS文件：home.css （当前频道或者页面的CSS独有属性值以及为了兼容不同的浏览器的所采用的hack）
2. 网站布局：
网站采用目前最流行的960宽度布局；布局类型分为3栏和2栏两种方式。
两栏布局：主容器宽度为700px 副容器宽度为240px
三栏布局：依次为190px、510px、240px；
3. 网站栏目：
web页面上不同内容的组合方式：图片展示、图文组合、文字列表、标题段落、按钮等几种。所以common样式文件中按照如下规则定义：
1) 全局框架通用样式
2) 页眉
3) 导航
4) 搜索
5) 页脚
6) 内容列表通用样式
7) 图片通用样式
8) 表单通用样式
4. 频道私有CSS文件：针对网站频道不同风格所以各部分需要独自私有定义，但是通用布局不需要再重新设置，只需要设置私有部分。
XHTML文档结构
1.Xhtml基本框架结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/home.css" />
<title>图书门户</title>
</head>
<body>
<div id="header">
<!--start-->
……
<!--end-->
</div>
<div id="main">
<!--start-->
……
<!--end-->
</div>
<div id="footer">
<!--start-->
……
<!--end-->
</div>
</body>
</html>
2.Xhtml标准的Doctype声明。
图书门户采用XHTML1.0 Transitional标准
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. 编码声明。默认使用UTF-8编码。
4. meta，title等处填写相应的关键词和描述。
<meta name="keywords" content="关键词" />
<meta name="description" content="页面描述" />
<title>标题</title>
5.基本结构:
#header
#globalNav
#logo
#loginBar
#mainNav
#search
#main
#lay_1: (布局容器1)
#col_1 (内容块1)
#col_2 (内容块2)
#lay_2: (布局容器2)
#col_3 (内容块3)
#col_4 (内容块4)
#footer:
#link
#copyright
Web页面切图和CSS注意事项
1. Web页面切图
1) Web页面的切图类型可以归纳为背景（bg）、列表项目的符号（li）、内容中插入的图片（pic）、按钮（btn）、图标等几种形式（ico）。
2) 建议把用CSS背景加载的图片拼合成一张图片。这样可减少对服务器的请求。从而提升页面加载速度。
3) 除页面头部大图保存格式为JPG外，其他图片一律采用gif格式
2. CSS相关事项：
1) 所有的xhtml代码小写
2) 每个标签都要有开始和结束，且要有正确的层次,没有结束标签的，标签后加上"/"。 如：<img />、<br />
3) 所有的属性必须用引号""括起来
4) 文档类型必须声明，禁止文档类型乱用
5) 所有<和&特殊符号用编码表示
6) 必须正确使用代码缩进，缩进时使用tab(键盘中的TAB键)，禁止无缩进、乱缩进，禁止使用空格缩进
7) CSS加载的背景图片要预定义宽度和高度，路径采用绝对路径可以直接从访问者计算机缓存中加载，提高页面加载速度。
8) 要尽可能做到表现与结构完全分离，代码中不涉及到表现元素，如style、font、bgColor、border、b。
9) <h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。采用继承方式，否则个性定义就会失效。
10) Font的缩写为：样式 粗细 大小 行高 字体 （font:italic bold 12px/30px “simsun”）
11) class和id选择器，id只能在同一页面中不能重复适用
12) 给页面的布局和重要的区块加上注释,如：<!—header -->
13) 给图片加上alt标签，利于搜索引擎的查询。
14) 所有的标签必须进行合理的嵌套。
15) 页面的实现过程中出现的问题是有规律的几种：3个像素的bug、双倍浮动空白边距、文字溢出bug。尽可能采用合理布局可以避免不同浏览器下所产生的问题。css的hack应该尽量避免采用。
16) 尽可能的合理的去用继承，好处是代码结构清晰，方便其他修改人员辨认页面结构、减少css的代码的重复定义。
17) 网站上经常会出现用户输入一大段字符和字母以至于文字无法正常折行，把版式破坏，这样我们就要参考以下样式：word-wrap:break-word; overflow:hidden; 当然必须得有宽度属性值。
18) 文字过长要出现省略号样式如下：
white-space: nowrap; text-overflow:ellipsis; overflow:hidden;
19) 一个完整的表单应该包括：
<fieldset>
<legend></legend>
<label></label>
<input />
</fieldset>
20) 页面上的列表元素除了ul ol外，我们还可以采用dl dt dd组合。
21) 合理采用多重样式定义可以有效的增加样式的重用性。
22) 我们要清楚那些标签是块状元素和内联元素。一般我们可以把css元素分为block（块状）和inline（内联）。熟悉这些元素属性有利于我们深入理解css。
23) 按照推荐Css属性书写顺序：
显示属性：
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float
自身属性：
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position
文本属性：
color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
