今天做了一个58房产的小页
微信截图_20190628200843.png
分享一下制作过程：
首先，先做一个大的背景。为了还原原网页我们需要在ps里面测量他的尺寸。经过测量，宽为355px，高为408px。为了便于观察，我们先一个比较明显一点的背景色。
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 365px;
height: 408px;
background-color:gainsboro;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
微信截图_20190628202639.png
这里需要注意，这个背景上边和左边都有间隙，为避免这种情况，我们一般都会使用全局选择器改变一下默认样式，
* {
margin: 0;
hadding: 0;
}
微信截图_20190628203253.png
然后我们用dl分别把图片和文字做出来。
<div class="box">
<dl>
<dt>
<img src="../111.png" alt="">
</dt>
<dd>
<span>商铺出租</span>
<span>商铺出售</span>
<span>写字楼出租</span>
<span>写字楼出售</span>
<span>生意转让</span>
<span>厂房</span>
<span>仓库</span>
<span>土地</span>
<span>车位</span>
<span>全部商业地产</span>
</dd>
</dl>
</div>
微信截图_20190628203828.png
记得要给图片设置宽高，要不然图片就跑出去了。
.box dl dt img{
width: 364px;
height: 139px;
}
微信截图_20190628204807.png
接下来，给文字部分设置宽高背景色，这里需要注意，span标签是行内元素，需要转换为行内块元素才可以 设置宽高。
微信截图_20190628205823.png
这里我们发现一个问题，span之间出现空隙，这就跟多个img之间会有间距一样，我们可以用 float: left;消除掉。
.box dl dd span {
display: inline-block;
width: 94px;
height: 44px;
background-color: #f3f6f9;
float: left;
}
微信截图_20190628210210.png
然后，我们让文字部分整体居中，像原网页一样。
.box dd {
margin: 30px 0px 0px 30px;
微信截图_20190628211058.png
然后就是让每一行每一列产生间距。
margin-bottom: 12px;
margin-right: 12px;
微信截图_20190628212532.png
这个时候我们来调整一下最后一行文字的尺寸。
.box dl dd span:last-child {
width: 306px;
}
微信截图_20190628212924.png
现在我们就该调整文本对齐方式了，回到我们之前的全局选择器，补充一个 text-align: center;
微信截图_20190628213209.png
文字虽然居中了，但是还是在表格偏上方，我们可以加个行高让他居中。
.box dl dd span {
display: inline-block;
width: 94px;
height: 44px;
background-color: #f3f6f9;
float: left;
margin-bottom: 12px;
margin-right: 12px;
line-height: 44px;
}
微信截图_20190628213450.png
接下来就是制作 全部商业地产 后面的小三角了。
在文字后面加一个i标签。
i {
display: inline-block;
width: 0px;
height: 0px;
border: 5px solid transparent;
border-left-color: gray;
}
微信截图_20190628214708.png
离得有点近了。我们用margin-left调整一下。
最后就是改一下 商铺出租 的颜色。以及制作一个划过效果了。
.box dl dd span:first-child {
color: rgb(255, 153, 0);
}
.box dl dd span:hover{
background-color: rgb(255, 115, 0);
color:white;
}
微信截图_20190628215434.png
上面颜色部分应该用ps取色管在原图取色的，这方面我有点偷懒了。做的不太好。
网友评论