[toc]
使用CSS美化表格和表单元素
数据表格及结构
<table>
<caption>
</caption>
<thead>
<tr>
<th id=" scope='col'>tablelist</th>
<th id='' scope='col'>类型</th>
<th id='' scope='col'>标题</th>
<th id='' scope='col'>日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
.../*如下四行*/
</tr>
</tbody>
</table>
设置相应表格内容, 职责注意的属性:
- 让横坐标和纵坐标教会的地方即tablelist不显示,设置
text-indent:-1000em; -
cellpading="0" cellspacing="0"设置相应的间距及表格内容.
设置表格边框和背景
-
<border-collapse:separate|collapse边框默认分开(不忽略border-spacing和empty-cells属性值)||边框合并为单一边框,忽略border-spacing和empty-cells值. - 偶数行定义
class设置颜色高亮. - 交互行变色: 伪类
tbody tr:hover{background-color:red}. - 背景色设置: 表单元素, 行内元素的设置.
- 表单元素边框-美化登录框方式.
boder属性的设置. - CSS定义圆角文本字段. 可以一种修改背景图片的方式覆盖背景,产生圆角矩形的效果.
background-image:url(../images/6001.jpg); - 多彩下拉菜单: 采用
<select><option id></option>...</select>多个选项的方式, 给选项所需要的id增加覆盖类,完成多彩下拉的方式. - cloumn相关的CSS3.0实现分栏方式. 用float布局过于灵活,不好控制, 使用CSS3.0完成相应布局.
column-width:30px|auto-
column-count网页文本分栏数 -
column-gap网页文本分栏间距 -
column-rule分栏增加分栏线:-
设置超链接
- 超链接的三种类型: 内部连接; 外部链接, 脚本链接:
javascript:window.close(); javascript:alert("...") - 空链接
# - 链接路径: 相对, 绝对, 根路径
- 相对:
../上一级然后开始;test/同级 - 绝对:
ftp://202.116.234.1/等http://www.sina.com.cn等 - 根路径.
/开始表示服务的绝对路径.
- 相对:
设置鼠标
-
cursor: move;等方式;
CSS3属性box-showdow
-
-moz-box-shadow``-webkit-box-shadow方式
CSS3属性overflow
-
overflow:visible|auto|hidden|scroll分别默认: 跟frame一样大,但是没有滚动条, clip属性设置失效| - 自动需要剪切内容显示滚动条|
- 不超过对象尺寸的内容|
- 总是显示滚动条
- 设置只在x和y方向的滚动条:
overflow-x|overflow-y: acroll;
CSS3 resize属性
- IE8 及以下不支持 ,
-
none|both|horizontal||vertical分别不支持缩放|横纵都行|垂直|水平拉伸方式.
CSS3 outline属性
-
outline-color;outline-style;outline-width;outline-offset;inherit分别是颜色, 样式, 宽度, 偏移值, 默认继承的方式.
使用CSS滤镜
Alpha滤镜
filter:alpha(opacity=10,finishopacity=100,style=1,startx=0,starty=0,finishx=0,finishy=100);那个月
)}```
### BlendTrans滤镜
- 图片切换特效, Light滤镜,聚光灯特效
### Blur滤镜, 网页模糊效果. FlipH和FlipV, 网页内容水平和垂直翻转. DropShadow增加阴影的效果.