不知道贴出代码是有利还是有弊
大家最好自己边思考边敲哈！
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script src="js/main.js"></script>
<title></title>
</head>
<body>
<div class="main-wapper">
<header>
<nav id="nav">
<div class="logo">
<a href="#">Vincent</a>
</div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">信息</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>Vincent</h1>
<p class="sub_head">
Good morning !
It is really my honor to have this opportunity for an interview,
I hope i can make a good performance today...
</p>
<button>了解我</button>
<div class="more">
更多
</div>
</div>
</div>
</header>
<div class="content">
<section class="green-section">
<div class="wrapper">
<h2>一个标题</h2>
<div class="hr"></div>
<p class="sub_heading">
It is really my honor to have this opportunity for an interview,
I hope i can make a good performance
</p>
</div>
<div class="icon-groups">
<span class="icon"><p>天</p></span>
<span class="icon"><p>地</p></span>
<span class="icon"><p>人</p></span>
</div>
</section>
<section class="gray-section">
<div class="article-preview">
<div class="img-secction">
<img src="img/pic01.jpg" alt=""/>
</div>
<div class="text-section">
<h2>有一个标题</h2>
<div class="sub_heading">我是副标题</div>
<p>Good morning !
It is really my honor to have this,
I hope i can make a good performance
</p>
</div>
</div>
<div class="article-preview">
<div class="text-section">
<h2>有一个标题</h2>
<div class="sub_heading">我是副标题</div>
<p>Good morning !
It is really my honor to have this,
I hope i can make a good performance
</p>
</div>
<div class="img-secction">
<img src="img/pic02.jpg" alt=""/>
</div>
</div>
<div class="article-preview">
<div class="img-secction">
<img src="img/pic03.jpg" alt=""/>
</div>
<div class="text-section">
<h2>有一个标题</h2>
<div class="sub_heading">我是副标题</div>
<p>Good morning !
It is really my honor to have this,
I hope i can make a good performance
</p>
</div>
</div>
</section>
<section class="purple-section">
<div class="wrapper">
<div class="head-wrapper">
<h2>不约</h2>
<div class="hr"></div>
<div class="sub-heading">
Good morning !
It is really my honor to have this,
I hope i can make a good performance
Good morning !
It is really my honor to have this,
I hope i can make a good performance
</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3>标题一</h3>
<p>
Good morning !
It is really my honor to have this,
I hope i can make a good performance
</p>
</div>
<div class="card">
<h3>标题二</h3>
<p>
Good morning !
It is really my honor to have this,
I hope i can make a good performance
</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>
Good morning !
It is really my honor to have this,
I hope i can make a good performance
</p>
</div>
<div class="card">
<h3>标题四</h3>
<p>
Good morning !
It is really my honor to have this,
I hope i can make a good performance
</p>
</div>
<div class="card">
<h3>标题五</h3>
<p>
Good morning !
It is really my honor to have this,
I hope i can make a good performance
</p>
</div>
<div class="card">
<h3>标题六</h3>
<p>
Good morning !
It is really my honor to have this,
I hope i can make a good performance
</p>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="foothead">
<div class="foot-text">
<h3>爱我就养我</h3>
<p>
Good morning !
It is really my honor to have this,
I hope i can make a good performance
</p>
</div>
<div class="buttons">
<button>给钱</button>
<button>给吃的</button>
</div>
</div>
<div class="title_foot">
<ul>
<li><i class="icon-twitter"></i></li>
<li><i class="icon-github-alt"></i></li>
<li><i class="icon-envelope-alt"></i></li>
<li><i class="icon-facebook"></i></li>
<li><i class="icon-linkedin"></i></li>
</ul>
<div class="copy">
© Vincent
</div>
</div>
</footer>
</div>
</body>
</html>
main.css
.clearfix:after{
content: '';
display: block;
clear: both;
}
p{
letter-spacing: 1px;
font-size: 18px;
}
nav{
height: 50px;
background: transparent;
width: 100%;
}
#nav{
position: fixed;
top: 0px;
}
header{
background: rgba(0,0,0,0.3);
}
#banner{
height: 500px;
background: transparent;
}
nav ul{
position:fixed;
list-style: none;
margin: 0;
/*float: right;*/
right: 0px;
}
nav ul li , nav .logo{
height: 50px;
line-height: 50px;
display: inline-block;
margin-right: 10px;
font-size: 0px;
}
nav .logo{
float: left;
padding-left: 10px;
}
.logo a{
line-height: 50px;
display: inline-block;
font-size: 22px;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
}
nav ul li a{
color: #fff;
text-decoration: none;
line-height: 50px;
padding: 0px 10px;
display: inline-block;
font-size: 12px;
}
#banner .inner{
max-width: 350px;
text-align: center;
margin: 0 auto;
position: relative;
top:100px;
}
#banner .inner h1{
margin: 0;
color: #FFFFFF;
}
#banner .inner .sub_head{
line-height: 30px;
margin: 20px;
color: #FFFFff;
}
button{
border:none;
padding:14px 28px;
letter-spacing: 1px;
border-radius: 6px;
font-size: 20px;
background: #18a;
color: #eee;
}
#banner button{
padding: 10px 20px;
}
#banner .inner .more{
margin-top: 80px;
color: #FFFFFF;
}
.inner .hr{
margin: 0px;
height: 2px;
}
h1{
padding: 12px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
h2{
font-size: 30px;
margin: 0px;
}
h3{
font-size: 24px;
margin: 0px;
}
.hr{
width: 100%;
height: 2px;
margin: 20px auto;
}
.content .green-section{
background:#2EC2A4;
padding: 100px 0;
color: #fff;
text-align: center;
}
.sub_heading{
font-size: 18px;
}
.wrapper{
max-width: 1080px;
margin: 0 auto;
}
.wrapper .hr{
background: #25B599;
width:60%;
}
.content .icon-groups .icon{
width: 80px;
height: 80px;
display: inline-block;
background: #22B2A6;
transform: rotate(45deg);
margin: 20px;
box-shadow: 0 0 10px #1EAEA2;
}
.content .icon-groups .icon p{
transform: rotate(-45deg);
margin-top: 30px;
}
.content .icon-groups{
margin-top: 60px;
}
.gray-section{
background: #242F36;
color: #fff;
}
.img-secction{
width: 45%;
}
.img-secction img{
width: 100%
}
.gray-section .text-section{
width: 55%;
}
.article-preview:nth-child(odd){
background-color: rgba(255,255,255,0.05);
}
.article-preview > div{
float: left;
font-size: 0px;
}
.article-preview:after{
content: '';
display: block;
clear: both;
}
.text-section{
}
.text-section h2{
margin-bottom: 20px;
margin-left: 30px;
margin-top: 30px;
}
.text-section p{
margin-left: 30px;
font-size:18px;
letter-spacing: 1px;
}
.text-section .sub_heading{
margin-left: 30px;
font-size: 18px;
margin-top:0px;
}
.main-wapper{
background: #444 url(../img/banner.jpg) no-repeat center;
background-attachment: fixed;
}
.purple-section{
padding:80px;
background: #3D3662;
color: #c5c4c4;
}
.wrapper .head-wrapper{
text-align: center;
padding: 20px;
}
.purple-section .hr{
background: #4B4C8E;
width: 60%;
}
.card-group{
width: 70%;
margin: 0 auto;
}
.card-group .card{
float: left;
min-height: 300px;
width: 50%;
padding: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card:first-child{
background: rgba(0,0,0,0.05);
border-left-radius: 10px;
}
.card:nth-child(2){
background: rgba(0,0,0,0.05);
border-right-radius: 10px;
}
.card:nth-child(3){
background: rgba(0,0,0,0.1);
}
.card:nth-child(4){
background: rgba(0,0,0,0.1);
}
.card:nth-child(5){
background: rgba(0,0,0,0.15);
border-bottom-left-radius: 10px;
}
.card:nth-child(6){
background: rgba(0,0,0,0.15);
border-bottom-right-radius: 10px;
}
footer
{
color: #fff;
background: rgba(0,0,0,0.3);
}
.foothead{
height: 300px;
width: 700px;
margin: 0 auto;
color: #fff;
}
.foothead .foot-text{
display: inline-block;
width: 320px;
padding:80px 0px;
}
.foothead .buttons{
display: inline-block;
padding: 60px;
}
.foothead .buttons button:nth-child(1){
display: block;
margin-bottom: 30px;
border-radius: 0;
padding: 10px 83px 10px 83px;
background: #DF3735;
font-size: 14px;
}
.foothead .buttons button:nth-child(2){
margin-bottom: 30px;
border-radius: 0;
border: 1px solid #fff;
background: transparent;
padding: 8px 65px 8px 65px;
}
.title_foot{
text-align: center;
min-height: 200px;
color: #fff;
background: rgba(0,0,0,0.9);
}
.title_foot ul{
display: block;
margin: 0 auto;
padding: 50px;
width: 1080px;
}
.title_foot ul li{
padding: 10px;
display: inline-block;
}
.title_foot .copy{
padding-bottom: 30px;
}
main,js
$(function () {
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('#nav').css('background','#2E393F')
$('#nav').css('z-index','1')
}
else {
$('#nav').css('background','transparent')
}
});
});
});
样式图