慕课手机展示页案例

╰+攻爆jí腚メ 2023-06-05 08:07 18阅读 0赞

[https://www.cnblogs.com/sandraryan/][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

[https_www.cnblogs.com_sandraryan]: https://www.cnblogs.com/sandraryan/