一、图片样式
1，图片边框
Java代码
1.img.test1 {
2. border-style: dotted; /*点划线*/
3. border-color: #FF9900; /*边框颜色*/
4. border-width: 5px; /*边框粗细*/
5.}
6.img.test2 {
7. border-style: dashed; /*虚线*/
8. border-color: blue; /*边框颜色*/
9. border-width: 2px; /*边框粗细*/
10.}
11.img.test3 {
12. border-style: dotted; /*左边框点划线*/
13. border-left-color: #FF9900; /*左边框颜色*/
14. border-left-width: 5px; /*左边框粗细*/
15. border-right-style: dashed; /*右边框虚线*/
16. border-right-color: #33CC33; /*右边框颜色*/
17. border-right-width: 2px; /*右边框粗细*/
18. border-top-style: solid; /*上边框实线*/
19. border-top-color: #CC00FF; /*上边框颜色*/
20. border-top-width: 10px; /*上边框粗细*/
21. border-bottom-style: groove; /*下边框3D凹槽*/
22. border-bottom-color: #666666; /*下边框颜色*/
23. border-bottom-width: 15px; /*下边框粗细*/
24.}
25.img.test4 {
26. border: 5px double #FF00FF
27.}
img.test1 {
border-style: dotted; /*点划线*/
border-color: #FF9900; /*边框颜色*/
border-width: 5px; /*边框粗细*/
}
img.test2 {
border-style: dashed; /*虚线*/
border-color: blue; /*边框颜色*/
border-width: 2px; /*边框粗细*/
}
img.test3 {
border-style: dotted; /*左边框点划线*/
border-left-color: #FF9900; /*左边框颜色*/
border-left-width: 5px; /*左边框粗细*/
border-right-style: dashed; /*右边框虚线*/
border-right-color: #33CC33; /*右边框颜色*/
border-right-width: 2px; /*右边框粗细*/
border-top-style: solid; /*上边框实线*/
border-top-color: #CC00FF; /*上边框颜色*/
border-top-width: 10px; /*上边框粗细*/
border-bottom-style: groove; /*下边框3D凹槽*/
border-bottom-color: #666666; /*下边框颜色*/
border-bottom-width: 15px; /*下边框粗细*/
}
img.test4 {
border: 5px double #FF00FF
}
第4种就是将各个属性值合并
2，图片缩放
Java代码
1.img.test1 {
2. width: 50%; /*相对宽度*/
3. height: 300px; /*绝对高度*/
4.}
img.test1 {
width: 50%; /*相对宽度*/
height: 300px; /*绝对高度*/
}
二、图片的对齐
1，横向对齐
Java代码
1.
2.
3.
只能通过设置父元素的text-align属性来设置图片的横向对齐
2，纵向对齐
Java代码
1.baseline方式
2.bottom方式
3.middle方式
4.sub方式
5.super方式
6.text-bottom方式
7.text-top方式
8.top方式
9.5px方式
10.-10px方式
11.0px方式
baseline方式
bottom方式
middle方式
sub方式
super方式
text-bottom方式
text-top方式
top方式
5px方式
-10px方式
0px方式
三、图文混排
1，文字环绕
Java代码
1.testtestasetesateastesatesates
afdsfsd
12312313sadfsdafsd
testtestasetesateastesatesates
afdsfsd
12312313sadfsdafsd
2，图片与文字间距
Java代码
1.img {
2. margin-right: 50px;
3. margin-bottom: 25px;
4.}
img {
margin-right: 50px;
margin-bottom: 25px;
}下载本文
