一、图片样式
1,图片边框
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,图片缩放
img.test1 {
width: 50%; /*相对宽度*/
height: 300px; /*绝对高度*/
}
二、图片的对齐
1,横向对齐
<div style="text-align: left;"><img src="bike.gif" class="test1"></div>
<div style="text-align: center;"><img src="bike.gif" class="test1"></div>
<div style="text-align: right;"><img src="bike.gif" class="test1"></div>
只能通过设置父元素的text-align属性来设置图片的横向对齐
2,纵向对齐
<div style="text-align: left;">baseline<img src="bike.gif" style="vertical-align: baseline;" border="1">方式</div>
<div style="text-align: left;">bottom<img src="bike.gif" style="vertical-align: bottom;" border="1">方式</div>
<div style="text-align: left;">middle<img src="bike.gif" style="vertical-align: middle;" border="1">方式</div>
<div style="text-align: left;">sub<img src="bike.gif" style="vertical-align: sub;" border="1">方式</div>
<div style="text-align: left;">super<img src="bike.gif" style="vertical-align: super;" border="1">方式</div>
<div style="text-align: left;">text-bottom<img src="bike.gif" style="vertical-align: text-bottom;" border="1">方式</div>
<div style="text-align: left;">text-top<img src="bike.gif" style="vertical-align: text-top;" border="1">方式</div>
<div style="text-align: left;">top<img src="bike.gif" style="vertical-align: top;" border="1">方式</div>
<div style="text-align: left;">5px<img src="bike.gif" style="vertical-align: 5px;" border="1">方式</div>
<div style="text-align: left;">-10px<img src="bike.gif" style="vertical-align: -10px;" border="1">方式</div>
<div style="text-align: left;">0px<img src="bike.gif" style="vertical-align: 0px;" border="1">方式</div>
三、图文混排
1,文字环绕
<img src="test.jpg" style="float: left;">testtestasetesateastesatesates<p>afdsfsd</p>12312313<p>sadfsdafsd</p>
2,图片与文字间距
img {
margin-right: 50px;
margin-bottom: 25px;
}
分享到:
相关推荐
精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....
第4章 用CSS设置图片效果 4.1 图片样式 4.2 图片的对齐 4.3 图文混排 4.4 图文实例:八仙过海 . 第5章 用CSS设置网页中的背景 5.1 背景颜色 5.2 背景图片 5.3 背景综合一:...
精通css+div 1,2,8,9,10章
《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar
正在学习css+div的朋友应该都知道这几本书吧,《精通css+div 网页样式与布局》还有《css设计彻底研究》这些书都非常好,现在将《精通css+div 网页样式与布局》的ppt文件传上来,这样大家就可以不用买实体书了,至于...
精通CSS+DIV网页样式和布局 5个完整网站的CSS+DIV布局和美化方案
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript...
精通CSS+DIV网页样式与布局 语言:中文 格式:txt 使用前请您先阅读以下条款,否则请勿使用本站提供的文件! 1) 本站不保证所提供程序的完整性和安全性。 2) 请在使用前查毒 (这也是您使用其它网络资源所必须注意...
《精通CSS+DIV网页样式与布局》实例源码.rar
精通css+div样式和布局源码.rar精通css+div样式和布局源码.rar精通css+div样式和布局源码.rar精通css+div样式和布局源码.rar
CSS+DIV网页样式与布局 精通CSS+DIV网页样式与布局
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript,Ajax,...
精通CSS+DIV网页样式与布局(附书源码)
精通CSS+DIV光盘文件 精通CSS+DIV光盘文件 精通CSS+DIV光盘文件
精通CSS+DIV网页样式与布局完整源代码
精通CSS+Div一书的配套光盘,里面都是源代码,适合于初学者
3.4.1 段落的水平对齐方式 3.4.2 段落的垂直对齐方式 3.4.3 行间距和字间距 3.4.4 首字放大 3.5 段落实例:百度搜索 第4章 用CSS设置图片效果 4.1 图片样式 4.1.1 图片边框 4.1.2 图片缩放 4.2 ...
网页,精通CSS+DIV网页样式与布局,精通CSS+DIV精通CSS+DIV
精通CSS+DIV网页样式与布局
精通CSS+DIV网页样式与布局完整版