【Web】CSS（No.34）Css页面布局经典案例（四）《米柚官网》
需要素材点击图片联系我或私信、评论
效果图：
html源码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>米柚title>
<link rel="stylesheet" href="css/index.css">
head>
<body>
<div class="nav">
<div class="nav-bar">
<img src="img/logo.png" alt="" class="logo">
<ul class="bar">
<li>首页li>
<li>主题li>
<li>下载li>
<li>产品li>
<li>论坛li>
ul>
<span class="method">
<a href="#">简a><span> | span>
<a href="#">繁a><span> | span>
<a href="#">Englisha>
span>
div>
div>
<div class="main">
<div class="V5">
<div class="banner">
<div class="button">
<a href="#">下载MIUIa>
<a href="#">进入论坛a>
div>
div>
div>
<div class="video">
<div class="vid">
<div class="video1">
<img src="img/video1.png" alt="">
<span>MIUI 介绍视频span>
div>
<div class="video2">
<img src="img/video2.png" alt="">
<span>MIUI V5视频span>
div>
<div class="video3">
<img src="img/video3.png" alt="">
<span>MIUI 自由桌面span>
div>
<div class="video4">
<img src="img/video4.png" alt="">
<span>MIUI 发展历程span>
div>
div>
div>
<div class="APP">
<div class="APP-top">
<div class="top1">
<img src="img/ico-1.jpg" alt="">
<h4>电话、短信h4>
<p>
根据中国用户使用习惯特别优化<br>
更可发送免费网络短信
p>
div>
<div class="top2">
<img src="img/ico-2.jpg" alt="">
<h4>更安全h4>
<p>
系统级全面保护手机和数据安全<br>
更可拦截广告电话、短信
p>
div>
<div class="top3">
<img src="img/ico-3.jpg" alt="">
<h4>丰富的在线资源h4>
<p>
取之不尽的视频、音乐、游戏<br>
更有超过60万安卓应用…无比强大
p>
div>
<div class="top4">
<img src="img/ico-4.jpg" alt="">
<h4>与众不同h4>
<p>
独创百变主题与自由桌面<br>
从里到外，让你的手机个性十足
p>
div>
div>
<div class="APP-bottom">
<div class="bottom1">
<img src="img/ico-5.jpg" alt="">
<h4>云服务h4>
<p>
同步通讯录、短信、相册<br>
为你保管好一切
p>
div>
<div class="bottom2">
<img src="img/ico-6.jpg" alt="">
<h4>极速桌面体验h4>
<p>
驱动级系统优化<br>
提供丝般顺滑体验
p>
div>
<div class="bottom3">
<img src="img/ico-7.jpg" alt="">
<h4>200余项功能改进h4>
<p>
精心打造相机、闹钟等必备工具<br>
更有贴心的大字体、语音助手…
p>
div>
<div class="bottom4">
<img src="img/ico-8.jpg" alt="">
<h4>"活"的操作系统h4>
<p>
根据论坛反馈不断进化<br>
每周五更新、风雨无阻
p>
div>
div>
<div class="more">
<img src="img/more.jpg" alt="">
div>
div>
div>
<div class="tail">
<div class="tails">
<div class="t1">
<div class="orange">div>
<h4>活动公告h4>
<ul>
<li>四格报告li>
<li>内测申请li>
ul>
div>
<div class="t2">
<div class="orange">div>
<h4>更新日志h4>
<ul>
<li>3.6.14（开发板）li>
<li>3.2.22（推荐版）li>
ul>
div>
<div class="t3">
<div class="orange">div>
<h4>关注MIUIh4>
<ul>
<li>新浪微博li>
<li>腾讯微博li>
ul>
div>
div>
<div class="mi">
<h6>MIUI官方网站 - 发烧友必刷的Android ROM - 北京小米科技 © 2013 京ICP备10046444号h6>
div>
<div class="footer">
<img src="img/footer_copy.png" alt="">
div>
div>
body>
html>
css源码：
/* 公共 */
* {
margin:0;
padding:0;
box-sizing:border-box;
}
a {
text-decoration:none;
}
/* 导航部分 */
.nav {
width:100%;
height:110px;
background:url(../img/head-bg.jpg) no-repeat;
background-size:cover;
}
.nav-bar {
width:1000px;
height:100%;
margin:0 auto;
}
.nav-bar>img {
margin-top:40px;
margin-right:30px;
float:left;
}
.bar {
font-size:16px;
color:#ffffff;
list-style:none;
margin-left:80px;
margin-top:55px;
float:left;
}
.bar li {
float:left;
margin-right:70px;
}
.method {
font-size:10px;
color:#ffffff;
text-decoration:none;
display:block;
float:right;
margin-top:60px;
}
.method>a,
.method>span {
font-size:10px;
color:#ffffff;
float:left;
}
/* 正文部分 */
.main {
width:100%;
height:1345px;
}
/* V5 */
.V5 {
width:100%;
height:545px;
background:url(../img/banner-bg.jpg);
}
.banner {
width:1000px;
height:100%;
background:url(../img/banner.jpg) no-repeat;
margin:0px auto;
}
.button {
width:328px;
height:80px;
background:url(../img/icon-bg.png) no-repeat;
float:left;
margin-left:30px;
margin-top:400px;
padding-top:30px;
}
.button>a {
color:rgb(140,140,140);
margin-left:60px;
margin-right:20px;
}
.button>a:hover {
color:rgb(195,64,0);
}
/* video */
.video {
width:100%;
height:200px;
background-color:rgb(229,229,229);
border-top:1px solid rgb(210,210,210);
border-bottom:1px solid rgb(210,210,210);
overflow:hidden;
}
.vid {
width:1000px;
height:100%;
margin:0px auto;
overflow:hidden;
}
.video1,
.video2,
.video3,
.video4 {
width:25%;
height:100%;
float:left;
}
.video1>img,
.video2>img,
.video3>img,
.video4>img {
float:left;
margin-top:20px;
margin-left:76px;
}
.video1>span,
.video2>span,
.video3>span,
.video4>span {
float:left;
margin-top:130px;
margin-left:-106px;
}
/* APP */
.APP {
width:100%;
height:600px;
overflow:hidden;
}
.APP-top,
.APP-bottom {
width:1000px;
height:250px;
margin:0px auto;
/*background-color:#abcdef;*/
overflow:hidden;
}
.top1,
.top2,
.top3,
.top4,
.bottom1,
.bottom2,
.bottom3,
.bottom4 {
width:25%;
height:100%;
float:left;
font-size:14px;
text-align:center;
}
.top1>img,
.top2>img,
.top3>img,
.top4>img,
.bottom1>img,
.bottom2>img,
.bottom3>img,
.bottom4>img {
margin-top:40px;
margin-bottom:15px;
}
.top1>h4,
.top2>h4,
.top3>h4,
.top4>h4,
.bottom1>h4,
.bottom2>h4,
.bottom3>h4,
.bottom4>h4 {
margin-bottom:5px;
}
/* 了解更多 */
.more {
width: 1000px;
height: 100px;
margin:0px auto;
text-align:center;
}
.more>img {
margin-top:15px;
}
/* 页尾部分 */
.tail {
width:100%;
height:360px;
background-color:rgb(47,47,47);
}
.tails {
width:1000px;
height:200px;
margin:0px auto;
}
.orange {
width:5px;
height:20px;
background-color:rgb(236,97,23);
float:left;
margin-top:80px;
margin-right:10px;
margin-left:130px;
}
.t1,
.t2,
.t3 {
width:33%;
height:100%;
float:left;
font-size:12px;
}
.t1>h4,
.t2>h4,
.t3>h4 {
font-size:16px;
margin-top:80px;
color:rgb(255,255,255);
}
.t1>ul li,
.t2>ul li,
.t3>ul li {
list-style:none;
margin:20px 0px 0px 10px;
color:rgb(255,255,255);
padding-left:140px;
}
.mi,
.footer {
width:1000px;
height:80px;
margin:0px auto;
text-align:center;
}
.mi {
padding-top:50px;
color:rgb(187,187,187);
}
.footer {
padding-top:30px;
}