<html>
<head>
<title>梦</title>
<!-- 这个是style样式表，body 里面内容所用到的样式都要在这里面写，我用的 类选择器 Class="" -->
<style>
.by
{
width:75%;
height:90%;
border:2px red dashed;
margin:0 auto;
}
.tou
{
width:75%;
font-size:50px;
color:gray;
background-color:pink;
margin:0 auto;
}
.img1
{
border:2px green dashed;
width:550px;
margin-top:10px;
margin-left:90px;
padding-left:15px;
float:left;
color:gray;
}
.img2
{
border:2px green dashed;
width:550px;
margin-top:10px;
margin-left:90px;
padding-left:15px;
float:left;
color:gray;
}
.img3
{
border:2px green dashed;
width:550px;
margin-top:10px;
margin-left:90px;
padding-left:15px;
float:left;
color:gray;
}
.img4
{
border:2px green dashed;
width:550px;
margin-top:10px;
margin-left:90px;
padding-left:15px;
float:left;
color:gray;}
span
{
color:green;
padding-left:240px;
}
</style>
</head>
<!-- 这是身体的组成部分，也就是页面的展示部分，在这里写你想要在页面上显示的内容，不知道你整天迷瞪的啥...-->
<body>
<div class="by" >
<div class="tou" align="center">
商品列表
</div>
<div class="img1">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg">
<span>景点1</span>
</div>
<div class="img2">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="2.jpg">
<span>景点2</span>
</div>
<div class="img3">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="3.jpg">
<span>景点3</span>
</div>
<div class="img4">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="4.jpg">
<span>景点4</span>
</div></div>
</body>
</html>
<!-- 这个思路就是 先用一个大的div 把所有的内容都包起来，然后一个图片都放在一个div中。
所做的这一切只有一个目的，就是 容易控制，可以达到自己想要的效果。
OK 结束~！ -->
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
