网页美化

一.标签
表格标签

…… 行标签 …… 单元格标签 …… 语法

文字	文字
文字	文字

二.创建表格的步骤 1.创建表格标签 …… 。 2.在表格标签 …… 中创建行标签 ……，可以有多行。 3.在行标签 …… 中创建单元格标签 ……，可以有多个单元格。 创建不规则表格 表格可以实现行列合并，只需在 td 中加入 rowspan 或 colspan 属性，colspan 表示跨越的列数，rowspan 表示跨越的行数。 跨列：跨列是指单元格的横向合并，实现单元格在水平方向上跨多列。

单元格内容

跨行：单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨行是指单元格在垂直方向上合并。

单元格内容

三.除了设置表格跨行和跨列外，还可以为整个表格添加标题（caption）、对表格数据进行分组等 设计这些表格需要一些表格的高级标签。 表格标题标签 caption，用于描述整个表格的标题。 表格表头 th，用于定义表格的表头，通常是表格的第一行数据，以粗体、居中的样式显示数据。 表格数据的分组标签 thead、tbody 和 tfoot，这 3 个标签通常配合使用，主要对表格数据进行逻辑分组。 thead 对应表格的表头部分，tbody 对应表格的数据主体部分，tfoot 对应表格的底部页脚部分，各分组标签内由多行 tr 组成。 四.网页样式常用的样式属性 字体： font 设置字体的所有样式属性 font-family 定义字体类型 font-size 定义字体大小 font-weight 定义字体的粗细 color 字体颜色 文本属性： line-height 设置行高（即行间距） text-align 设 置 对 齐 方 式， 常 用 的 取 值 为left、right 以及 center letter-spacing 设 置 字 符 间 距， 加大字符间间隔 text-ecoration 设 置 文 本 修 饰， 常 用 的 取 值 为underline（下划线）、none 加下划线，中划线等 边距： 边距是指页面中元素与元素之间的间距，margin 分为上、下、左、右 4 个方向，可以单独设置 margin-top、margin-left、margin-right、margin-bottom，也可以使用复合属性 margin 进行设置。 填充： 元素的填充也称为内边距，它是指元素内容与边框之间的距离，填充分为上、下、左、右四个方向，可通过padding-top、padding-left、padding-right、padding-bottom分别设置四个方向的内边距，也可以通过复合属性padding设置。 边框属性： border 属性 border-style 设置边框的样式，取值：none 无边框、solid 实线以及 dashed 虚线等 border-width 设置边框的宽度 border-color 设置边框的颜色 border 复合属性，用于设置边框宽度、样式以及颜色 五.图片过渡及动画效果 一. 细节内容： 1. 图片如果只设置宽度，高度会自动适应，所以不建议设置高 度。

2. display：
   inline（设置后具备行级元素特性）
   block（设置后具备块级元素特性）
   nline-block（行及元素，但是具有块级属性，但可能产生浏览器不兼容现象出现）
   妙用：若不知道图片大小，可以给父级div加上 display：inline-block（通过行及元素特性使
   div被内容撑开）

3. 清除浮动：

4. 可以用任何块级元素（或者display：block属性）

5. 可以在需要清楚浮动的父元素内加上overflow属性

6. cursor：pointer:
   鼠标到达该分区，会由箭头变成手

二. DIV属性以及定位：

1. overflow:
   hidden:内容超出去隐藏
   auto:内容超出去会自动出现滚动条
   scroll:不管内容是否超出都会有滚动条
   如：
   .div1{
   width:300px;
   height: 300px;
   background-color: red;
   overflow: hidden;
   }
   .div2{
   width:200px;
   height: 500px;
   background-color: green;
   }
   结果：

overflow-x:水平方向. 兼容性不好!
overflow-y:垂直方向.兼容性不好!

2. position:
   absolute:绝对定位
   relative:相对定位
   fixed:相对于浏览器窗口定位（始终停留在浏览器的固定位置，类似于广告）
   如：
   .div1{
   width: 100%;
   height: 2000px;
   background-color: yellow;
   }
   .div2{
   width: 100px;
   height: 200px;
   background-color: red;
   position: fixed;
   right: 0;
   top: 0;
   }
   结果：

3. 居中显示：
   div分区水平垂直居中：水平居中 margin：0 auto；
   垂直居中：
   position: absolute;
   left: 0;
   top: 50%;
   margin-top: ？px;（当前高度的一半）

4. 最外层元素全用百分比无法显示：
   只有父元素高度确定时，子元素高度的百分比才能起作用

解决方法①：（常用）
在最外层加上：
html{
height: 100%;
}
body{
height: 100%;
}

解决方法②：
采用绝对定位：（自动找到最上层定位元素，可以看作是浏览器）
在最外层元素内加上：
position:absolute;
如：
.div1{
width: 100%;
height: 100%;
background-color: red;
position: absolute;
}
结果：

三. 浏览器兼容性：

1. -webkit-: 谷歌、Safari 浏览器
2. -moz-: 火狐
3. -o-: 欧朋
4. -ms-: IE浏览器