1、设置图片边框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片边框</title>
<style type="text/css">
.i1{
border-width: 1px;
border-color: red;
border-style: solid;
}
.i2{
border: 2px red dashed;
}
.i3{
border: 2px red dotted;
}
.i4{
border-top: 6px red solid;
border-right:2px blue dashed;
border-bottom: 2px yellow dotted;
border-left: 2px blue dashed;
}
</style>
</head>
<body>
<h1>实线边框</h1>
<img src="../java2.jpg" class="i1"/>
<h1>虚线边框</h1>
<img src="../java2.jpg" class="i2"/>
<h1>点画线边框</h1>
<img src="../java2.jpg" class="i3"/>
<h1>给不同的边框设置样式</h1>
<img src="../java2.jpg" class="i4"/>
</body>
</html>
运行结果:
2、设置图片大小及缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片大小及缩放</title>
</head>
<body>
<div style="border: 1px red solid;">
<h1>图片大小</h1>
<img src="../java.jpg" style="width: 160px;height: 180px;"/>
</div>
<div style="border: 1px red solid;">
<h1>图片缩放</h1>
<img src="../java.jpg" style="width: 20%;"/>
</div>
</body>
</html>
运行结果:
3、图文混排
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图文混排</title>
<style type="text/css">
img{
width: 150px;
height: 180px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<img src="../java.jpg">
<p>Java之父——詹姆斯·高斯林出生于加拿大,是一位计算机编程天才。在卡内基·梅隆大学攻读计算机博士学位时,他编写了多处理器版本的Unix操作系统。</p>
<p>1991年,在Sun公司工作期间,高斯林和一群技术人员创建了一个名为Oak的项目,旨在开发运行于虚拟机的编程语言,同时允许程序在电视机机顶盒等多平台上运行。后来,这项工作就演变为Java。随着互联网的普及,尤其是网景开发的网页浏览器的面世,Java成为全球最流行的开发语言。因此被人称作Java之父。</p>
<p>高斯林一直对oracle公司抱有不满。这位工程师在离开甲骨文时写到,“我所说的都关乎细节与诚实,但吐露真相只会带来更多的坏处。”并称,“在Sun与oracle的并购会议上,到处是有关Sun和谷歌专利的争吵。oracle律师的眼睛闪闪发光。”
他表示,在收购Sun的早期阶段,oracle就表示出要同谷歌展开法律交锋的意愿。他本人也曾批评Android市场上的碎片化现象太过严重,足以影响软件开发者的工作。</p>
</body>
</html>
运行结果:
4、设置图片与文字的对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片与文字的对齐方式</title>
<style type="text/css">
p{
border: 1px red solid;
}
</style>
</head>
<body>
<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>
运行结果: