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 */