CSS (二)
1、 图片效果
1) 图片边框
Border
Border-style |
Border-color |
Border-width |
Dotted 点划线 Dashed 虚线 Solid 实线 |
颜色 |
宽度 |
border:solid 1px #f00;
2) 图文混排
例:1.html
2.html
2、设置网页背景
1)背景颜色
Background-color
例:3.html,4.html
3) 背景图片
(1)Background-image:url(xx.jpg) 例:5.html
(2)背景图的重复 例:6.html
垂直方向重复 |
水平方向重复 |
不重复 |
Background-repeat:repeat-y |
Background-repeat:repeat-x |
Background-repeat:no-repeat |
(3)背景图片位置 例:7.html
Background-position:30% 70%
Background-position:300px 25px
(4)固定背景图片 例:8.html
Background-attachment:fixed;
(5)多个背景图片 例:9.html
(6)样式综合设置
Background-color:blue;
Background-image:url(xx.jpg);
Background-repeat:no-repeat;
Background-attachment:fixed;(背景图片固定,用于背景内内容大于背景时候使用)
Backdground-position:5px 10px;(图片方位距离左边和上边)
Backdground-size:cover;(让图片拉升铺满整个背景)
Background:blue url(xx.jpg) no-repeat fixed 5px 10px;(写到一起最方便)
3、a:link(正常浏览状态)
a:visited(被点击过的链接样式)
a:hover(鼠标经过的样式)
a:active(被激活的样式)
4、overflow:auto(文本超过后使用自动)