主要学习了：
1.图片大小
2.图片边框
3.图片对齐
4.文字环绕
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>/</title>
<style type="text/css">
img
{
width: 300px;
height: 80px;
border: 1px solid red;
}
.div1{text-align: left;}
.div2{text-align: center;}
.div3{text-align: right;}
img{width: 60px;height: 60px;}
#img1{vertical-align: top;}
#img2{vertical-align: middle;}
#img3{vertical-align: bottom;}
#img4{vertical-align: baseline;}
/*img{float: left;}
p{
font-family: "微软雅黑";
font-size: 12px;
}*/
</style>
</head>
<body>
<div class="div1">
<img src="../素材/绱犳潗/img/huawei.jpg" alt="huawei">
</div>
<div class="div2">
<img src="../素材/绱犳潗/img/huawei.jpg" alt="huawei">
</div>
<div class="div3">
<img src="../素材/绱犳潗/img/huawei.jpg" alt="huawei">
</div>
<hr/>
huawei<img id="img1" src="../素材/绱犳潗/img/huawei.jpg" alt="huawei">huawei(top)
<hr/>
huawei<img id="img2" src="../素材/绱犳潗/img/huawei.jpg" alt="huawei">huawei(middle)
<hr/>
huawei<img id="img3" src="../素材/绱犳潗/img/huawei.jpg" alt="huawei">huawei(bottom)
<hr/>
huawei<img id="img4" src="../素材/绱犳潗/img/huawei.jpg" alt="huawei">huawei(baseline)
<hr/>
<img src="../素材/绱犳潗/img/alibaba.jpg">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</body>
</html>
效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
