web标准Word格式.docx
《web标准Word格式.docx》由会员分享，可在线阅读，更多相关《web标准Word格式.docx（14页珍藏版）》请在冰豆网上搜索。
5.底图
页面中在标签中使用的背景图
6.齐底（图）线
用于区分横切或碎片结束的线或图
7.页面结构
页面的基础框架，由横切、布局元素组成
8.焦点区（图）
最易注意的区域
9.导航
在页面中具有导向性的链接集合
10.头图
页面主题图片
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
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
31.对象的定位方式position
5一些约定
虽然CSS算不上是程序语言，但是程序语言的命名规则却为CSS所用。
良好的命名习惯，对一个WEB标准网站的开发来说，必将事半功倍。
我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。
1.样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；
2.样式名尽量语义化或简写；
3.样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：
all_keyword；
4.使用px（像素）为基本计量单位；
5.页面中空格的使用：
全角：
中文空格半角；
&
nbsp;
6.项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名；
7.减少DIV的嵌套层数；
8.给重要图片加上alt属性；
给重要的元素和截断的元素加上title；
9.使用正确的注释方法（详见“注释”章节）；
10.特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：
style、font等；
11.双标记签都要有开始和结束标签，单标记标签的后面一定要加“/”,例如：
<
br/>
等，并且有正确的层次；
12.其它特殊符号：
1）<
（&
lt;
）
2）>
gt;
）
6命名空间
6.1外挂样式名称
全局：
public.css
全局样式为全站公用，为页面样式基础，页面中必须包含。
结构：
layout.css
页面结构类型复杂，并且公用类型较多时使用。
多用在首页级页面和产品类页面中。
私有：
style.css
独立页面所使用的样式文件，页面中必须包含。
模块module.css
产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。
默认default.css
文章article.css
图片photo.css
下载soft.css
……
主题themes.css
实现换肤功能时应用。
补丁mend.css
基于以上样式进行的私有化修补。
6.2常用名称
（1）页面结构
容器:
container
页头：
header
内容：
content/container/content（A）
页面主体：
main
页尾：
footer
导航：
nav
侧栏：
sidebar
栏目：
column
页面外围控制整体布局宽度：
wrapper
左右中：
leftrightcenter
浮左浮右：
flfr
清除浮动clear
（2）导航
主导航：
mainbav
子导航：
subnav
顶导航：
topnav
边导航：
左导航：
leftsidebar
右导航：
rightsidebar
菜单：
menu
子菜单：
submenu
标题：
title
摘要：
summary
路径：
path
（3）模块化命名
模块头部：
hd
模块内容部分：
bd
模块底部：
ft
（4）各内容页对应
副标题：
subtitle
属性：
properties
简介：
infor
content
分页：
page
插入广告：
insert_ad
表情：
expression
功能选项：
options
上下篇：
up_down
评论：
comments
相关内容：
related
下载地址：
download
播放地址：
play_add
（5）功能
标志：
logo
广告：
banner
登陆：
login
登录条：
loginbar
注册：
regsiter
搜索：
search
日期：
date
功能区：
shop
加入：
joinus
状态：
status
按钮：
btn
滚动：
scroll
标签页：
tab
文章列表：
list
提示信息：
msg
当前的：
current
小技巧：
tips
图标：
icon
注释：
note
指南：
guild
服务：
service
热点：
hot
新闻：
news
下载：
投票：
vote
合作伙伴：
partner
友情链接：
link
版权：
copyright
7基本设置-public.css
7.1全局设置
上下边距（margin、padding）：
0（px）
左右边距（margin）：
auto（自动）
底色（background）:
#FFF（白色）
字体（font-family）、字号（font-szie）、字色（color）：
”宋体”12px#666
代码：
/*全局CSS定义*/
body{margin:
0auto;
padding:
0;
background:
#FFF;
color:
#666;
font:
12px‘宋体'
;
}
div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:
border:
}
h1,h2,h3,h4,h5,h6{margin:
font-size:
12px;
font-weight:
normal;
ul,ol,li{list-style:
none}
table,td,input,textarea{font-size:
12px}
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栏目标题
说明：
h2标签被定义为栏目标题特殊使用，在标签中非标题文字默认居右显示，主标题文字使用span标签包含，居左显示。
5.默认链接颜色
常态下不显示文字下划线，颜色为灰（#333），鼠标悬浮时：
显示文字下划线，颜色变为暗红（#ccc）。
7.3页面宽度
默认页面宽（命名规范）：
按栅格化进行
7.4.clear
结束容器内各元素的浮动属性，使相邻容器或元素节点正常显示。
以下是清除浮动的几种方法
方法一
.clear{
clear:
both;
height:
line-height:
或
.clear{
border-top:
1pxsolidtransparent!
important;
margin-top:
-1px!
0px;
both;
none;
visibility:
hidden;
.clear{
1px;
width:
hidden;
0px!
*margin-top:
-1px;
使用方法:
<
divclass="
clear"
>
/div>
方法二
.clear{zoom:
1;
.clear:
after{
overflow:
display:
block;
content:
"
."
.claer
{
auto;
_height:
200px;
min-height:
verflow:
zoom:
_overflow:
visible;
ulclass="
li>
ahref="
#"
送水送气<
/a>
/li>
送花服务<
宾馆住宿<
家电维修<
餐饮电话<
电脑网络<
/ul>
7.5自定义属性
1.文字列表：
（样式名）
用于文字列表，区分为两种字体（12px/14px），默认行内间距上下3px。
2.图片列表：
（样式名）
用于组图型碎片，默认具有claar属性，容器内img、span标签为块级元素,并清除图片上下外间距
3.图文混排：
碎片内使用<
div>
、<
p>
区分图片及文字，默认形态为左图右文，且图片与文字间距为10px。
4.文字类：
加粗（b）、arial字体（.fontArial）
处理局部应用
5.浮动：
（fl/fr）
用于构建页面框架
6.留白:
（blank5/blank8）
设定页面中留白高度为5px、8px两种
7.6完整代码
body{text-align:
center;
margin:
12px'
宋体'
}
……
需要举例说明
8框架设置
8.1约定
1.横切结构样式为area，所有横要带有id，名称：
contentA,contentB
2.结构元素使用div标签，标签嵌套注意层级关系，如：
8.2说明
8.2.1栏间留白
三栏时定义中间栏，多栏定义时从第二栏开始定义。
8.2.2横切留白
横切间留白，在下一个横切中定义，如：
margin‐top:
10px
基本碎片形式
升级会员 