div+css布局基础章节

[toc]

使用CSS美化表格和表单元素

数据表格及结构

设置相应的间距及表格内容.

设置表格边框和背景

  • 边框默认分开(不忽略border-spacing和empty-cells属性值)||边框合并为单一边框,忽略border-spacing和empty-cells值.
  • 偶数行定义class设置颜色高亮.
  • 交互行变色: 伪类 tbody tr:hover{background-color:red}.
  • 背景色设置: 表单元素, 行内元素的设置.
  • 表单元素边框-美化登录框方式. boder属性的设置.
  • CSS定义圆角文本字段. 可以一种修改背景图片的方式覆盖背景,产生圆角矩形的效果. background-image:url(../images/6001.jpg);
  • 多彩下拉菜单: 采用 多个选项的方式, 给选项所需要的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增加阴影的效果.

你可能感兴趣的:(div+css布局基础章节)