H5学习之制作房地产的一个展示页面：康桥

这个的图片长了，想看效果的下载素材看，下面放一个响应式设计模式下的效果图：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>康桥</title>
    <style> 
        body{
            margin: 0;
        }
        img{
            width: 100%;
            display: block;
        }
        a{
            display: block;
            position: relative;
        }
        span{
            position: absolute;
            top: 30px;
            display: block;
            color: white;
            background-color: rgba(51, 0, 51, 0.7);
            width: 135px;
            font-size: 20px;
            line-height: 45px;
            text-align: center;
            /*单独给某个角设置角度*/
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
        }
    </style>
</head>
<body>
    <a href="康桥溪里.html">
        <!--title里面的内容是鼠标指针放上去的时候显示的内容-->
        <img src="image/yxl.jpg" alt="万科.美景堂" title="万科.美景堂">
        <span>万科.美景堂</span>
    </a>
    <a href="">
        <img src="image/jxj.jpg" alt="万科.美龙堂" title="万科.美龙堂">
        <span>万科.美龙堂</span>
    </a>
    <a href="">
        <img src="image/lxw.jpg" alt="万科.观景堂" title="万科.观景堂">
        <span>万科.观景堂</span>
    </a>
</body>
</html>

还有一个页面：

<html>
<head>
    <meta charset="UTF-8">
    <title>康桥溪里</title>
    <link rel="stylesheet" href="animate.css">
    <style>
        body{
            margin: 0;
        }
        ul{
            position: absolute;
            bottom: 30px;
            margin: 0;
            padding: 0;
        }
        a{
            /*去除超链接下的下划线*/
            text-decoration: none;
            background-color: rgba(16, 16, 16,0.7);
            line-height: 250%;
            padding-left: 15px;
            padding-top: 10px;
            padding-bottom: 8px;
            color: white;
            margin-top: 5px;
            background-image: url(image/right-arrow.png);
            /*防止出现重复*/
            background-repeat: no-repeat;
            background-size: 8px 15px;
            background-position: 95% center;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
        }
        li:nth-child(1) a{
            padding-right: 60px;
            animation-delay: 0.5s;
        }
        li:nth-child(2) a{
            padding-right: 90px;
            animation-delay: 1s;
        }
        li:nth-child(3) a{
            padding-right: 80px;
            animation-delay: 1.5s;            
        }
        li:nth-child(4) a{
            padding-right: 50px;
            animation-delay: 2s;            
        }
        li:nth-child(5) a{
            padding-right: 50px;
            animation-delay: 2.5s;            
        }
        li:nth-child(2){
            animation-delay: 0.5s;
        }
        li:nth-child(3){
            animation-delay: 1s;
        }
        li:nth-child(4){
            animation-delay: 1.5s;
        }
        li:nth-child(5){
            animation-delay: 2s;
        }
    </style>

</head>

<body>
    <div>
        <img src="image/lxw-2.jpg" alt="">
    </div>
    <!--ul定义无序列表-->
    <ul>
        <li class="animated slideInLeft">
            <a class="animated fadeIn" href="">楼盘详情</a>
        </li>
        <li class="animated slideInLeft">
            <a class="animated fadeIn" href="">全景户型</a>
        </li>
        <li class="animated slideInLeft">
            <a class="animated fadeIn" href="">项目图册</a>
        </li>
        <li class="animated slideInLeft">
            <a class="animated fadeIn" href="">预约看房</a>
        </li>
        <li class="animated slideInLeft">
            <a class="animated fadeIn" href="">预房贷计算器</a>
        </li>
            
    </ul>
</body>
</html>

素材下载：2017-03-14 kangqiaoxili

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论