网页设计知识点总结

网页设计的基本内容

1 文本颜色
2 字与字的间距
3 英文单词与单词的间距
4 字体的行高
5 对齐方式（默认左对齐 居中 右对齐）
6 是用于英文的大小写（全部大写 全部小写 首字母大写）
7 是否有线通过文本（可能是上划线 下划线 穿过文本）
8 首行缩进
9 空白符处理
10 阴影效果
11 表示对象内溢出文本
12 word-wrap属性

•  使用CSS技术美化网页

css复合选择器
标签指定式选择器   后代选择器   并集选择器{id权重最高100，class权重10，标签权重1}（#id）

css层叠性和继承性{不是所有css属性都可以继承:边框属性、外边距属性、内边距属性、背景属性、定位属性、布局属性、元素宽高属性}

css优先级（权重相同，就近原则；！important权重最高，行内样式第二，计算权重   id 100  class 10 标签为1，计算哪个大就是哪个）

• 运用盒子模型划分网页模块

1〈div〉标签

2 边框属性（border）

边框样式（border-style）：（none没有边框）（solid边框为单实线）（dashed边框为虚线）（dotted边框为点线）（double边框为双实线）

边框宽度（border-width）

设置边框颜色（border-color）：颜色的英文单词、十六进制颜色值或RGB模式rgb（r，g，b括号里是颜色色值或百分比）

内边距属性（padding）

外边距属性（margin）

*代表所有标签（通配符选择器）

让我的宽度包含边框和内边距和内容（box-sizing：border-box；）

3 背景颜色（background-color）（三种方式：直接写英文单词，rgb，十六进制颜色值）
4 背景图片（background-image）设置宽高
5 设置背景图像平铺（repeat沿水平和竖直两个方向平铺，no-repeat不平铺，repeat-x沿水平方向平铺，repeat-y沿竖直方向平铺）
6 设置背景图像位置（直接设置background-position：20px 20px，预定义关键字：水平方向值left center right，垂直方向值top center bottom，使用百分比）
7 设置背景图固定（background-attachment）俩属性（scroll图像随页面滚动，fixed图像固定在屏幕上不随页面滚动）
8 综合设置元素背景background：背景色 url（“图像”） 平铺 定位 固定

9 元素类型（块元素〈h1〉～〈h6〉、〈p〉、〈div〉、〈ul〉、〈ol〉、〈li〉）
（行内元素〈strong〉、〈b〉、〈em〉、〈i〉、〈del〉、〈s〉、〈ins〉、〈u〉、〈a〉、〈span〉）
10 〈span〉标签 配合class属性使用
11 元素类型转换（display）
inline行内元素   block块元素   inline-block行内块元素   none此元素将被隐藏不存在

12 颜色透明度
两种设置方法：rgba模式（r，g，b，alpha）  opacity属性 opacity：参数
13 边框属性
14 阴影box-shadow属性共6个参数（h-shadow、v-shadow、blur、spread、color、outset/inset）

15 渐变（线性渐变和径向渐变）
线性渐变background-image：linear-gradient（渐变角度，颜色值1，颜色值2，...,颜色值n）

渐变角度：以deg为单位的角度数值或“to”加关键词  

颜色值：颜色1为起始颜色，颜色n为结束颜色

径向渐变background-image：radial-gradient（渐变形状 圆心位置，颜色值1，颜色值2，...,颜色值n）

渐变形状：circle圆形径向渐变和ellipse椭圆形径向渐变   圆心位置：left和center和right和top和bottom  颜色值：颜色值1为起始颜色，颜色值n为结束颜色
 

重复渐变包括重复线性渐变和重复径向渐变
重复线性渐变background-image：repeating-linear-gradient（渐变角度，颜色值1，颜色值2，...，颜色值n）
重复径向渐变background-image：repeating-radial-gradient（渐变形状圆心位置，颜色值1，颜色值2，...，颜色值n）

• 为网页添加列表和超链接

1无序列表ul    type属性值disc  circle   square
〈ul〉
〈li〉列表项1〈/li〉
〈li〉列表项2〈/li〉
〈li〉列表项3〈/li〉
......                             
〈/ul〉

2有序列表ol     type属性（1，a或A，i或l）start（数字） value（数字）
〈ol〉
〈li〉列表项1〈/li〉
〈li〉列表项2〈/li〉
〈li〉列表项3〈/li〉
......
〈/ol〉

3定义列表dl（3个标签：dl，dt，dd）
〈dl〉
〈dt〉名词1〈/dt〉
〈dd〉是名词1的描述信息1〈/dd〉
〈dd〉是名词1的描述信息2〈/dd〉
......
〈dt〉名词2〈/dt〉
〈dd〉是名词2的描述信息1〈/dd〉
〈dd〉是名词2的描述信息2〈/dd〉
......
〈/dl〉

4定义列表实现图文混排

5列表嵌套的应用
〈ul〉
〈li〉列表项1〈/li〉
〈li〉列表项2〈/li〉
〈li〉
       〈ol〉
                〈li〉列表项1〈/li〉
                〈li〉列表项2〈/li〉
        〈/ol〉
〈/li〉
〈/ul〉

6  list-style-type属性（属性值disc,none,circle,cjk-ideographic,square,georgian,decimal,decimal-leading-zero,lower-roman,upper-roman,lower-alpha,upper-alpha,lower-latin,upper-latin,hebrew,armenian）
7  list-style-image属性
8  list-style-position属性（两种取值：inside和outside）
9  list-style属性
list-style：列表项目符号 列表项目符号的位置 列表项目图像；
10  背景图像定义列表项目符号

1创建超链接[属性：href和target（_self和_blank）]
〈a href=“跳转目标” target=“目标窗口的弹出方式”〉文本或图像〈/a〉
2锚点链接
3链接伪类控制超链接
4种状态：a：link,a：visited,a：hover,a：active

•  运用浮动和定位布局网页

1认识浮动（选择器｛float：属性值；｝）
float常用属性值：left标签向左浮动,right标签向右浮动,none标签不浮动（默认值）
2清除浮动（选择器｛clear：属性值；｝）
clear常用属性值：left清除左侧浮动影响,right清除右侧浮动影响,both同时清除左右两侧浮动影响
使用空标签清除浮动（clear：both）
使用overflow属性清除浮动（overflow：hidden）
使用after伪对象清除浮动
after｛
display：block；
clear：both；
content：“”；
visibility：hidden；
height：0；
｝

overflow属性（选择器｛overflow：属性值；｝｛overflow－x/y：属性值｝）
overflow常用属性值：visible内容不会被修剪，会呈现在标签框之外（默认值）；hidden溢出内容被修剪，且修剪内容不可见；auto在需要时产生滚动条，即自适应所要显示的内容；scroll溢出内容被修剪，且浏览器会始终显示滚动条

1 认识定位属性（定位模式   边偏移）
定位属性（选择器｛position：属性值；｝）
position常用属性值：static自动定位、relative相对定位、absolute绝对定位、fixed固定定位
边偏移（属性取值为数值或百分比）
边偏移属性：top顶端偏移量、bottom底部偏移量、left左侧偏移量、right右侧偏移量
2 定位类型（静态、相对、绝对、固定）
静态定位position取值static（无法通过边偏移改变标签位置）
相对定位position取值relative（可以通过边偏移改变标签位置）
绝对定位position取值absolute
固定定位position取值fixed
3 z-index层叠等级属性（取值可为正整数、负整数和0，0为默认属性值，取值越大，定位元素在层叠元素中越居上）
z-index仅对定位元素有效

网页布局

1认识布局
确定页面的版心宽度（常见宽度值：960px、980px、1000px、1200px等）
分析页面中的模板
控制网页的各个模板（通过DIV+CSS布局来控制网页各个模板）
2单列布局
3两列布局
4三列布局
5网页模块命名规范（原则：避免使用中文字符命名，不能以数字开头命名，不能占用关键字，用最少字母表达最容易理解的意义）
常用命名方式：驼峰式命名（除第一个单词外其余单词首字母都大写）和帕斯卡命名（单词间用“_”连接）
网页中常用命名（命名相关模板和命名CSS文件）：header头部，content/container内容，nav导航栏，footer尾，sidebar侧栏，column栏目，left right center 左边右边中间，loginbar登录条，logo标志，banner广告，main页面主体，hot热点，news新闻，download下载，subnav子导航，menu菜单，submenu子菜单，search搜索，frlEndlink友情链接，copyright版权，scroll滚动，tab标签页，list文章列表，msg提示信息，tips小技巧，title栏目标题，joinus加入，guild指南，service服务，regsiter注册，status状态，vote投票，partner合作伙伴；master主要样式，base基本样式，module模块样式，layout版面样式，themes主题，columns专栏，font文字，forms表单，print打印。

•  全新的网页视听技术

1 音频和视频嵌入技术概述
运用Adobe的FlashPlayer插件将视频和音频嵌入网页中；运用HTML5z中新增的〈video〉标签和〈audio〉标签来嵌入视频或音频。

2 嵌入视频（〈video〉标签用于定义视频文件，支持3种视频格式，OGG、WEBM和MPEG4）
〈video src=“视频文件路径”  controls=“controls”〉〈/video〉
〈video〉标签常见属性及属性值：autoplay、autoplay，loop、loop，preload、auto/meta/none，poster、url。
〈video src=“video/pian.mp4”  controls=“controls” autoplay=“autoplay” loop=“loop”〉浏览器不支持video标签〈/video〉

3 嵌入音频（〈audio〉标签用于定义音频文件，支持3种音频格式，OGG、MP3和WAV）
〈audio src=“音频文件路径” controls=“controls”〉〈/audio〉
〈audio〉标签常见属性及属性值：autoplay、autoplay，loop、loop，preload、auto/meta/none。

4浏览器对音频、视频文件的兼容性
〈audio controls=“controls”〉
      〈source src=“音频文件地址”  type=“媒体文件类型/格式”〉
      〈source src=“音频文件地址”  type=“媒体文件类型/格式”〉
......
〈/audio〉

5控制视频宽和高
运用width和height属性直接为〈video〉标签设置宽和高
video｛
background：#F90；
float：left
｝

transition属性

1 transition－property属性（属性值取值包括none、all和property）
transition－property：none｜all｜property；
2 transition－duration属性
transition－duration：time；
3 transition－timing－function属性（常见属性：linear、ease、ease－in、ease－out、ease－in－out、cubic－bezier（n，n，n，n））
transition－timing－function：linear｜ease｜ease－in｜ease－out｜ease－in－out｜cubic－bezier（n，n，n，n）；
4 transition－delay属性（默认值0，常用单位秒s或毫秒ms，属性值可以为正整数、负整数和0）
transition－delay：time；
5 transition属性
transition：property duration timing－function delay；

12D变形（4种变形效果：平移、缩放、倾斜、旋转）
平移
transform：translate（x－value，y－value）；
缩放
transform：scale（x－value，y－value）；
倾斜
transform：skew（x－value，y－value）；
旋转（单位deg，正数值顺时针旋转，负数值逆时针旋转）
transform：rotate（angle）；
更改变换的中心点（transform－origin属性包含3个参数，默认值分别为50%、50%、0px）
transform－origin：x－axis  y－axis  z－axis；