慕课手机展示页案例

最新推荐文章于 2024-08-10 16:15:00 发布

deliefu3790

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量203

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sandraryan/p/11313343.html

版权

https://www.cnblogs.com/sandraryan/

这个例子来自mooc某个视频。无利益相关~

本来是一个加了js的很好看的页面。但是由于我太菜了，只写好了静态页面。以后学了js考虑加上。（挖坑）

注释量还可以，所以(●'◡'●)

直接上代码

<!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>mooc phone</title>
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.css" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="wrap">
        <header class="header">
            <div class="header_wrap">
                <div class="header_logo">慕课手机</div>
                <nav class="header_nav">
                    <a href="javascript:;">首页</a>
                    <a href="javascript:;">机型</a>
                    <a href="javascript:;">说明</a>
                    <a href="javascript:;">其他产品</a>
                    <a href="javascript:;">立即购买</a>
                </nav>
            </div>   
        </header>
            
        <div class="content">
            <div class="screen1">
                <h2 class="screen1_heading"><b>慕课手机</b>让你的生活更精彩</h2>
                <div class="screen1_phone"></div>
                <div class="screen1_shadow"></div>
            </div>
        
            <div class="screen2">
                <h2>优美的设计，更令人着迷</h2>
                <h3>采用受欢迎的设计，让他更加出色<br>
                    款式小巧，轻便，手感舒适，绚丽高清的显示屏，整个外观格外精致。
                </h3>
                <div class="screen2_phone">
                    <div>高清摄像</div>
                    <div>大屏显示</div>
                    <div>超薄机身</div>
                </div>
            </div>
            <div class="screen3">
                <div class="screen3_wrap">
                    <h2 class="screen3_heading">外形小巧，功能强大的手机</h2>
                    <h3 class="screen3_subheading">采用受欢迎的设计，让它更加出色。
                    <br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
                    <div class="screen3_phone"></div>
                    <div class="screen3_features">
                    <div><span>5.7</span>英寸大屏</div>
                    <div><span>1200</span>万像素</div>
                    <div><span>3D</span>touch</div>
                    <div><span>A9</span>处理器</div>
                    </div>
                </div>
            </div>

            <div class="screen4">
                <h2>丰富的手机型号</h2>
                <h3>找到适合你的手机</h3>
                <div class="screen4_type">
                    <div>
                        <img src="img/phone-1.png" alt="">
                        <div class="name">慕课红</div>
                        <div class="storage">16G/32G/64G</div>
                    </div>
                    <div>
                        <img src="img/phone-2.png" alt="">
                        <div class="name">土豪金</div>
                        <div class="storage">16G/32G/64G</div>
                    </div>
                    <div>
                        <img src="img/phone-3.png" alt="">
                        <div class="name">太空灰</div>
                        <div class="storage">16G/32G/64G</div>
                    </div>
                    <div>
                        <img src="img/phone-4.png" alt="">
                        <div class="name">绅士黑</div>
                        <div class="storage">16G/32G/64G</div>
                    </div>
                </div>
            </div>

            <div class="screen5">
                <div class="screen-5_wrap">
                    <h2>游戏、学习、拍照、有这一部就够了</h2>
                    <h3>看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</h3>
                </div>
                <div class="back"></div>
            </div>
            <div class="buy">
                <a href="javascript:;">立即购买</a>
            </div>
        </div>

        <div class="footer">© 2016 imooc.com 京ICP备13046642号</div>
    </div>
</body>
</html>

* {margin: 0;padding: 0;}
.wrap {
    background-color: #fff;
    font-size: 12px;
    font-family: "Microsoft Yahei",微软雅黑;
}
a {
    text-decoration: none;
}

/* basic style */

/* header start */
.header {
    background-color: #f7f7f7;
}
.header_wrap {
    height: 80px;
    width: 1200px;
    position: relative;
    margin: 0 auto;
    /* 其实我觉得直接写在header里面那就可以 */
}
.header_logo {
    width: 150px;
    height: 38px;
    font-size: 20px;
    color: #07111b;
    text-indent: 50px;
    /* 让logo中文字在图片右侧 */
    background: url(img/logo.png) no-repeat;
    background-position: left center;
    background-size: 38px 38px;
    line-height: 38px;
    position: absolute;
    top: 50%;
    margin-top: -19px;
    left: 20px;
    /* 让整个logo的文字和图片垂直居中 */
}
.header_nav {
    position: absolute;
    right: 20px;
    height: 38px;
    top: 50%;
    margin-top: -19px;
    display: inline-block;
    vertical-align: middle;
    /* header里的nav定位 */
}
.header_nav a{
    color: #292f35;
    font-size: 16px;
    height: 38px;
    line-height: 38px;/* 垂直居中 */
    display: inline-block;
    vertical-align: middle;
    margin-left: 40px;
    /* 拉开距离 */
    cursor: pointer;
}
.header_nav a:hover {
    color: #f01400;
    /* 导航每一项都设置hover字体变红 */
}
.header_nav a:first-child {
    color: #f01400;
    /* 首页默认是激活状态 字体红色 */
    border-bottom: 2px solid red;
}

.header_nav a:last-child{
    background-color: #000;
    color: #f4f4f5;
    text-align: center;
    width: 90px;
    border-radius: 5px;
    /* nav里面最后一个不同的样式 */
}
.header_nav:last-child:hover {
    color: white;
    /* nav里面最后一个hover字体不变红色 因为丑 */
}
/* header end */


/* content start */
.content>div {
    padding: 100px 0 0;
    box-sizing: border-box;
    /* 本来用的是给h2加margin-top，后来遇到了各种各样的margin合并，塌陷问题。 */
    /* 选择用父级padding并加上border-box，避免影响每一屏的定高 */
}

.content>div {
    height: 800px;
    position: relative;
    /* 内容部分几个屏高度相同,都设置为定位父容器 */
}
.screen1 {
    background-color: #e7e7e7;
    background: url(img/bg-screen-1.png) no-repeat center;
    background-size: cover;
    /* 第一屏背景色等基本样式，cover是背景图拉伸填满整个页面 */
    overflow: hidden;
}    
.screen1_heading {
    font-weight: 400;
    margin: 0;padding: 0;
    font-size: 46px;
    color: rgb(245, 245, 245);
    text-align: center;
    /* padding-top: 152px; */
    /* 第一屏的文字样式 */
}
.screen1_heading b {
    color: #f05244;
    font-weight: 400;
    /* 第一屏里特殊样式 */
}
.screen1_phone{
    width: 1365px;
    height: 305px;
    background: url(img/screen-1-phone.png) no-repeat center;
    /* 图片太大了，在父元素overflow */
    position: absolute;
    left: 50%;bottom: 180px;
    margin-left: -687px;
    z-index: 2;
    /* 第一屏手机图片（用背景图），居中，提升层级至阴影图上方 */
}
.screen1_shadow {
    width: 1233px;
    height: 411px;
    background: url(img/screen-1-shadow.png) no-repeat center;
    position: absolute;
    left: 50%;bottom: 30px;
    margin-left: -616px;
    z-index: 1;
    opacity: 0.8;
    /* 第一屏手机阴影图， */
}

.screen2 {
    background-color: #fafafa;
    /* box-sizing: border-box; */
    overflow: hidden;
    /* 第二屏基本样式 */
}
.screen2 h2, .screen4 h2, .screen5 h2{
    font-weight: 400;
    /* padding: 0; */
    color: #f01400;
    text-align: center;
    line-height: 46px;
    /* margin: 100px 0 30px; */
    font-size: 40px;
    /* 第2,4,5屏主要(标题)文字 */
}
.screen2 h3, .screen4 h3, .screen5 h3{
    font-weight: 400;
    margin: 0;padding: 0;
    color: #2c3137;
    text-align: center;
    margin-top: 50px;
    line-height: 28px;
    font-size: 16px;
    /* 第2,4,5屏副标题文字 */
}
.screen2_phone {
    width: 928px;
    height: 873px;
    background: url(img/bg-screen-2.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -464px;
    bottom: -345px;
    z-index: 2;
    /* 第二屏手机图片 */
}
.screen2_phone div {
    width: 108px;
    height: 22px;
    font-size: 22px;
    line-height: 22px;
    color: #4d555d;
    position: absolute;
    /* 手机图片上三个亮点 */
}
.screen2_phone div:nth-child(2),.screen2_phone div:nth-child(3){
    padding: 0 0 0 112px;
    background: url(img/icon-point-left.png) center left no-repeat;
    /* 第二三个亮点图片不同,位置不同 */
}
.screen2_phone div:nth-child(1){
    padding-right: 80px;
    background: url(img/icon-point-right.png) right center no-repeat;
    top: 200px;
    left: -30px;
}
.screen2_phone div:nth-child(2){
    top: 110px;
    right: 106px;
}
.screen2_phone div:nth-child(3){
    top: 330px;
    right: -20px;
}


.screen3 {
    background-color: #a71316;
    overflow: hidden;

}
.screen3_wrap {
    width: 1200px;
    margin: 0 auto; 
}
.screen3 h2 {
    font-weight: 400;
    color: #fff; 
    padding: 80px 0 40px;
    font-size: 40px;
    /* 第3屏主要(标题)文字 */
}
.screen3 h3 {
    color: #fff; 
    font-weight: 400;
    line-height: 28px;
    font-size: 16px;
    /* 第3屏副标题文字 */
}
.screen3_phone {
    width: 928px;
    height: 873px;
    background: url(img/bg-screen-3.png) no-repeat center;
    background-size: 700px 670px;
    position: absolute;
    left: 33%;
    bottom: -170px;
    z-index: 2;
    /* 第3屏手机图片 */
}
.screen3_features {
    width: 250px;height: 250px;
    position: absolute;
    top: 50%;left: 50px;
    text-align: center;
    /* 四个特点的总样式，定位，居中（并传递给内部元素） */
}
.screen3_features div{
    display: inline-block;
    width: 99px;height: 99px;
    border: 1px solid white;
    margin: 10px;
    font-size: 16px;
    color: white;
    /* 两个一排 */
}
.screen3_features span {
    font-size: 30px;
    display: block;
    padding: 15px 0;
    /* 内部数字的样式，并用padding撑开使元素居中效果 */
}


.screen4 {
    text-align: center;
    overflow: hidden;
}
.screen4_type {
    /* border:1px solid red; */
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
}
.screen4 .name {
    font-size: 16px;
    margin: 30px 0 20px;
}
.screen4 .storage {
    font-size: 14px;
    color: rgb(187, 185, 185);
}


.screen5 {
    background-color: #d9dde1;
}
.screen5 .back{
    height: 700px;
    background: url(img/bg-screen-5.png) no-repeat;
    background-position: center bottom;
    background-size: 140% 70%;
    /* 第五屏背景图 */
}

.content .buy {
    height: 300px;
    background: url(img/bg-screen-buy.png) no-repeat;
    background-size: 100% 300px;
    text-align: center;
    /* 按钮，文字居中 */
    padding-top: 110px;
    /* 购买按钮的背景图 居中 */
}
.buy a {
    color: white;
    font-size: 30px;
    background-color: red;
    display: inline-block;
    width: 300px;
    height: 80px;
    line-height: 80px;
    border-radius: 5px;
    /* 按钮样式 */
}
/* content end */

/* footer start */
.footer {
    background-color: #07111b;
    height: 80px;
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: 80px;
}
/* footer end */

转载于:https://www.cnblogs.com/sandraryan/p/11313343.html

deliefu3790

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
慕课手机展示页案例

https://www.cnblogs.com/sandraryan/这个例子来自mooc某个视频。无利益相关~本来是一个加了js的很好看的页面。但是由于我太菜了，只写好了静态页面。以后学了js考虑加上。（挖坑）注释量还可以，所以(●'◡'●)直接上代码<!DOCTYPE html><html lang="en"><head&...
复制链接

扫一扫