手机介绍

最新推荐文章于 2019-01-17 15:27:26 发布

gh323093

最新推荐文章于 2019-01-17 15:27:26 发布

阅读量189

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78418295

版权

Web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
     user-scalable=yes">
    <link href="css/zhoukao_01.css" rel="stylesheet">
</head>
<body>
<div class="da clear">
    <div class="xiao">
        <p class="blue">Blue App<span style="font-weight: 100">Tempalte</span></p>
        <div class="one">
            One page Responsive HTML5 parallax bosiness landing page
        </div>
        <p class="lorem">
            Lorem ipsum dolor sit amet,consectetur adipisicing elit. Similique autem,atque in voluptatibus
            repellat nostrum iustoarchitecto vel placeat numquam omnis assumenda.
        </p>
        <div class="down"></div>
    </div>
    <img class="phone" src="images/phone.png">
</div>
</body>
</html>


style文件


*{
    margin: 0;
    padding: 0;
}
.da{
    width: 1400px;
    height: 700px;
    background: url("../images/bg.jpg");
    margin: 0 auto;
}
.clear:after{
    display: block;
    content: '';
    clear: both;
}
.xiao{
    width: 600px;
    height: 500px;
    margin: 150px;
    float: left;
}
.down{
    margin-top: 100px;
    width: 280px;
    height: 70px;
    background: url("../images/003.png");
    transition: all 1s ease;
}
.down:hover{
    line-height: 280px;
    background: url("../images/001.png");
}
.phone{
    display: block;
    margin-top: 50px;
    float: left;
    transition: all 2s ease;
}
.phone:hover{
    transform: rotate(25deg) skew(-25deg);
}
.blue{
    height: 70px;
    font-size: 50px;
    color: white;
    transition: all 2s ease;
}
.blue:hover{
    font-size: 60px;
    color: yellow;
}
.one{
    font-size: 25px;
    color: white;
    width: 400px;
    height: 100px;
    margin-top: 30px;
    transition: all 2s ease;
}
.one:hover{
    transform: rotate(360deg);
}
.lorem{
    width: 600px;
    color: white;
    font-size: 20px;
    line-height: 30px;
}
@media screen and (max-width: 600px){
    .da{
        width: 600px;
        height: 1400px;
        background: url("../images/bg.jpg");
        margin: 0 auto;
    }
    .xiao{
        margin: 0 auto;
        float: none;
        padding-left: 20px;
    }
    .blue{
        width: 90%;
    }
    .one{
        width: 80%;
    }
    .phone{
        margin-left: 100px;
        float: left;
    }
}

gh323093

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机介绍

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"> lin
复制链接

扫一扫

专栏目录