1.设置图像边框
下面给出四种图像边框的样式：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .c1{ border-width: 5px; border-color: red; border-style: solid; } .c2{ /* 虚线边框 */ border: 5px red dashed; } .c3{ /* 点画线边框 */ border: 5px red dotted; } .c4{ border-top: 5px red dotted; border-left: 5px blue solid; border-bottom: 5px red dashed; border-right: 5px blue solid; }</style></head><body><h1>实线边框</h1><img src="fj1.jpg" class="c1"/><h1>虚线边框</h1><img src="fj1.jpg" class="c2"/><h1>点画线边框</h1><img src="fj1.jpg" class="c3"/><h1>给不同的边框设置样式</h1><img src="fj1.jpg" class="c4"/></body></html>
复制代码
运行结果分别是：
注意：平常我们设置图像边框的时候一般 border-width 设置为 2px 即可！
2.设置图片大小
设置大小有两种方式，一种是设置宽高的具体值，一种是设置百分比大小；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .c1{ width:180px; height:200px; } .c2{ width:20%; }</style></head><body><h1>图片大小</h1><img src="fj1.jpg" class="c1"/><h1>图片缩放</h1><img src="fj1.jpg" class="c2"/></body></html>
复制代码
运行结果：
注意：这里的图片缩小 20%是指当前图片相对于图片的容器大小而言，而且设置宽 width 为 20%，其高 height 也相对应的缩小，不会影响图片的观赏！
3.图文混排
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> img{ width:180px; height:200px; /* 图片向左悬浮，文本围绕在右边 */ float:left; margin:5px; }</style></head><body><h1>图文混排</h1><img src="fj1.jpg"/><p>凤凰古城，位于湖南省湘西土家族苗族自治州的西南部，土地总面积约10平方千米。2010年底约5万人口，由苗族、汉族、土家族等28个民族组成，为典型的少数民族聚居区。</p><p> 陵山脉南部，云贵高原东侧，距州府吉首市52公里。东经为109°18′至109°48′之间，北纬27°44′至28°19′之间。与贵州省为邻。东与泸溪县交界，南与麻阳县相连，西同贵州省铜仁市、松桃苗族自治县接壤，北和吉首市、花垣县毗邻，史称“西托云贵，东控辰沅，北制川鄂，南扼桂边”。</p><p>凤凰古城地形复杂，东部及东南角的河谷丘陵地带为第一级台阶，以低山、高丘为主、兼有岗地及部分河谷平地、地表切割破碎，谷狭坡陡，一般海拔在500米以下。从东北到西南的中间地带为第二级台阶，海拔500～800米。西北部中山地带为第三级台阶，海拔在800米以上。</p></body></html>
复制代码
运行结果：
4.设置图片与文字的对齐方式
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> p{ border:1px red solid; }</style></head><body><h1>设置图片与文字的对齐方式</h1><p>竖直对齐：<img src="red.jpg" style="vertical-align: baseline;"/> 方式：<img src="blue.jpg" style="vertical-align: baseline;"/>baseline</p><p>竖直对齐：<img src="red.jpg" style="vertical-align: top;"/> 方式：<img src="blue.jpg" style="vertical-align: top;"/>top</p><p>竖直对齐：<img src="red.jpg" style="vertical-align: middle;"/> 方式：<img src="blue.jpg" style="vertical-align: middle;"/>middle</p><p>竖直对齐：<img src="red.jpg" style="vertical-align: bottom;"/> 方式：<img src="blue.jpg" style="vertical-align: bottom;"/>bottom</p><p>竖直对齐：<img src="red.jpg" style="vertical-align: text-bottom;"/> 方式：<img src="blue.jpg" style="vertical-align: text-bottom;"/>text-bottom</p><p>竖直对齐：<img src="red.jpg" style="vertical-align: text-top;"/> 方式：<img src="blue.jpg" style="vertical-align: text-top;"/>text-top</p><p>竖直对齐：<img src="red.jpg" style="vertical-align: sub;"/> 方式：<img src="blue.jpg" style="vertical-align: sub;"/>sub</p><p>竖直对齐：<img src="red.jpg" style="vertical-align: super;"/> 方式：<img src="blue.jpg" style="vertical-align: super;"/>super</p><p>竖直对齐：<img src="red.jpg" style="vertical-align: 20px;"/> 方式：<img src="blue.jpg" style="vertical-align: 20px;"/>20px;</p><p>竖直对齐：<img src="red.jpg" style="vertical-align: -20px;"/> 方式：<img src="blue.jpg" style="vertical-align: -20px;"/>-20px;</p></body></html>
复制代码
运行结果：
各种对齐方式的区别如上图所示！
我是【程序员的时光】，热爱技术分享，信仰终身学习，爱健身，会点厨艺的热血青年，我们下期再见！
评论