div+css布局基础章节

[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增加阴影的效果.