58房产小页面制作教程

今天做了一个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取色管在原图取色的，这方面我有点偷懒了。做的不太好。

58房产小页面制作教程

推荐阅读更多精彩内容