<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP开发框架</title>
<link rel="stylesheet" type="text/css" href="CSS/简洁、优雅的PHP开发框架.css">
</head>
<body>
<div class="main">
<h1>为WEB艺术家创造的PHP框架。</h1>
<div class="main_a">
<a href="">5.1 中文文档</a>
<a href="">5.0 中文文档</a>
<a href="">4.2 中文文档</a>
<a href="">4.1 中文文档</a>
<a href="">lumen 中文文档</a>
<a href="">问答社区</a>
</div>
</div>
<div class="section">
<a href="">首页</a>
<a href="">lumen</a>
<a href="">问答社区</a>
<a href="">中文文档</a>
<a href="">下载离线文档</a>
<a href="">API</a>
<a href="">PHP中文手册</a>
<a href="">Composer</a>
</div>
<div class="article"></div>
<div class="footer"></div>
</body>
</html>
CSS/简洁、优雅的PHP开发框架.css
*{
margin: 0;
padding: 0;
}
.main{
100%;
height: 240px;
background-image: url(http://image.golaravel.com/5/c9/44e1c4e50d55159c65da6a41bc07e.jpg);
background-size: 100% 240px;
position: relative;
}
.main h1:nth-child(1){
color: white;
text-align: center;
font-size: 45px;
margin: 0 auto;
padding-top: 80px;
font-family: inherit;
}
.main_a{
684px;
height: 40px;
padding-top: 50px;
margin: 0 auto;
}
.main_a > a{
display: block;
height: 38px;
border: 1px solid red;
border-radius: 3px;
float: left;
margin-left: 5px;
color: white;
line-height: 38px;
text-align: center;
text-decoration: none;
}
.main_a a:nth-child(1){
108px;
margin-left: 0px;
}
.main_a a:nth-child(2){
108px;
}
.main_a a:nth-child(3){
108px;
}
.main_a a:nth-child(4){
108px;
}
.main_a a:nth-child(5){
130px;
}
.main_a a:nth-child(6){
85px;
}
.main_a a:hover{
background-color: black;
}
.section{
876px;
height:60px;
margin: 0 auto;
}
.section > a{
display: block;
height: 60px;
text-decoration: none;
line-height: 60px;
text-align: center;
float: left;
color: black;
}
.section > a:hover{
color: #f4645f;
}
.section a:nth-child(1){
81px;
border-bottom: 2px solid #f16662;
}
.section a:nth-child(2){
96px;
}
.section a:nth-child(3){
110px;
}
.section a:nth-child(4){
110px;
}
.section a:nth-child(5){
144px;
}
.section a:nth-child(6){
76px;
}
.section a:nth-child(7){
141px;
}
.section a:nth-child(8){
118px;
}
.article{
100%;
height: 1000px;
border-top: 2px solid #e1e1e1;
background-color:#ebebeb;
}