代码如下：
实例
/*公共部分*/
html
.header{
width: 100%;
height:120px;
background-color: lightgray;
}
.header .content{
width: 100%;
height: 40px;
overflow: hidden;
}
.header .content h1{
font-size: 2.0em;
width: 130px;
height: 100%;
color: #ff8000;
margin-right: 0px;
margin:auto;
}
/* .header.xia{
width: 100%;
height: 160px;*/
/*overflow: hidden;*/
/*}*/
.header .xia ul {
list-style: none;
width: 100%;
height: 80px;
text-align: center;
padding-left:0px;
background-color: black;
}
.header .xia ul li{
display: inline;
padding: 30px;
height: 100%;
line-height:80px;
}
.header .xia ul li a {
font-size: 1.1em;
color: #fff;
text-decoration:none
}
.header .xia ul li:hover{
background-color: coral;
}
.footer{
width: 100%;
height: 100px;
background-color: black;
overflow: hidden;
}
.footer .left{
width: 90%;
height: 100px;
background-color: lightgray;
margin-left: 40px;
padding: 20px;
}
.footer .left h1,h2{
text-align: center;
color: #ff8000
}
/*.footer .right {
width: 320px;
height: 380px;
/*background-color: skyblue;*/
/* margin-top: -380px;
margin-left: 400px;
padding: 20px;
}
.footer .right h1{
color: #ff8000;
}*//*主页部分*/
.tu img{
width: 100%;
height: 500px;
vertical-align: top;
vertical-align: middle;
}
.yan{
width: 100%;
height: 230px;
}
.yan h1{
color: #ff8000;
text-align: center;
padding-top: 50px;
}
.yan p{
font-size: 1.3em;
text-align: center;
}
.copitcont{
width: 100%
height:423px;
overflow: hidden;
}
.zhuti1{
width: 310px;
height: 422px;
margin-left:60px;
margin-right: 40px;
position:absolute;
}
.zhuti1 img{
margin-bottom: 15px;
}
.zhuti1 h3{
color: #ff8000;
text-align: center;
}
.zhuti1 p{
text-align: center;
margin-bottom: 10px;
}
.zhuti1 button{
width: 117px;
height: 47px;
background-color: #ff8000;
border: none;
margin-left: 40px;
}
.zhuti2{
width: 310px;
height: 422px;
margin-left: 410px;
margin-right: 40px;
position:absolute;
}
.zhuti2 img{
margin-bottom: 15px;
}
.zhuti2 h3{
color: #ff8000;
text-align: center;
}
.zhuti2 p{
text-align: center;
margin-bottom: 10px;
}
.zhuti2 button{
width: 117px;
height: 47px;
background-color: #ff8000;
border: none;
margin-left: 40px;
}
.zhuti3{
width: 310px;
height: 422px;
margin-left: 760px;
margin-right: 40px;
position:absolute;
}
.zhuti3 img{
margin-bottom: 15px;
}
.zhuti3 h3{
color: #ff8000;
text-align: center;
}
.zhuti3 p{
text-align: center;
margin-bottom: 10px;
}
.zhuti3 button{
width: 117px;
height: 47px;
background-color: #ff8000;
border: none;
margin-left: 40px;
}
.zhuti4{
width: 310px;
height: 422px;
margin-left:1120px;
margin-right: 30px;
position:absolute;
/*margin: auto;*/
}
.zhuti4 img{
margin-bottom: 15px;
}
.zhuti4 h3{
color: #ff8000;
text-align: center;
}
.zhuti4 p{
text-align: center;
margin-bottom: 10px;
}
.zhuti4 button{
width: 117px;
height: 47px;
background-color: #ff8000;
border: none;
margin-left: 40px;
}
.it{
width: 100%;
height:900px;
margin-top:420px;
margin-left: 50px;
overflow: hidden;
}
.it .left {
width: 665px;
height: 858px;
position: absolute;
}
.it .left h2{
color: #ff8000;
text-align: center;
}
.it .left p{
font-size: 1em;
text-align: center;
padding-bottom: 20px;
}
.it .left button{
width: 117px;
height: 47px;
background-color: #ff8000;
border: none;
margin-left:80px;
}
.it .right{
width: 304px;
height: 922px;
position: absolute;
margin-left: 45%;
}
.it .right h2{
color: #ff8000;
}
.it .right ul li{
list-style: none;
margin-top:40px;
margin-bottom: 40px;
}
.it .right ul li a{
font-size: 1.0em;
/*text-decoration:none;*/
}
.it .mo {
width: 304px;
height: 922px;
position: absolute;
margin-left: 70%;
}
.it .mo h2{
color: #ff8000;
}
.it .mo ul li{
list-style: none;
margin-top:40px;
margin-bottom: 40px;
}
.it .mo .one h3{
color: #ff8000;
margin-left:-100px;
margin-top: 80px;
}
.it .mo .one p{
font-size: 0.8em;
margin-left:-100px;
}
.it .mo .one hr{
color: #ff8000;
margin-left: -100px;
margin-top: 50px;
}
.it .mo .two h3{
color: #ff8000;
margin-left:-100px;
margin-top: 30px;
}
.it .mo .two p{
font-size: 0.8em;
margin-left:-100px;
}
.it .mo .two hr{
color: #ff8000;
margin-left: -100px;
margin-top: 20px;
}
.it .mo .three h3{
color: #ff8000;
margin-left:-100px;
margin-top: 30px;
}
.it .mo .three p{
font-size: 0.8em;
margin-left:-100px;
}
.it .mo .three hr{
color: #ff8000;
margin-left: -100px;
margin-top: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xu</title>
<link rel="stylesheet" type="text/css" href="css/xu.css">
<link rel="stylesheet" type="text/css" href="css/zhu.css">
</head>
<body>
<div class="header">
<div class="content">
<h1>classic</h1>
</div>
<div class="xia">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<div class="tu"><img src="images/1.jpg"></div>
<div class="yan">
<h1>Introduction</h1>
<p>Suspendisse ut magna vel velit cursus tempor ut nec nunc. Mauris vehicula,
<br> augue in tincidunt porta, purus ipsum blandit massa.</p>
</div>
<div class="copitcont">
<div class="zhuti1">
<img src="images/2.jpg">
<h3>Lorem ipsum dolor #1</h3>
<p>Aenean cursus tellus mauris, quis
<br> consequat mauris dapibus id. Donec
<br>scelerisque porttitor pharetra</p>
<button type="button">DETAIL</button>
</div>
<div class="zhuti2">
<img src="images/3.jpg">
<h3>Lorem ipsum dolor #2</h3>
<p>Aenean cursus tellus mauris, quis
<br>consequat mauris dapibus id.
<br>scelerisque porttitor pharetra</p>
<button type="button">READ MORE</button>
</div>
<div class="zhuti3">
<img src="images/4.jpg">
<h3>Lorem ipsum dolor #3</h3>
<p>Aenean cursus tellus mauris, quis
<br> consequat mauris dapibus id. Donec
<br> scelerisque porttitor pharetra</p>
<button type="button">DETAIL</button>
</div>
<div class="zhuti4">
<img src="images/5.jpg">
<h3>Lorem ipsum dolor #4</h3>
<p>Aenean cursus tellus mauris, quis
<br> consequat mauris dapibus id. Donec
<br> scelerisque porttitor pharetra</p>
<button type="button">READ MORE</button>
</div>
</div>
<div class="it">
<div class="left">
<h2>Pellentesque fermentum mauris et posuere</h2>
<p>Vivamus accumsan blandit ligula. Sed lobortis efficitur sapien</p>
<img src="images/6.jpg">
<p>Donec tempor lobortis tortor, in feugiat massa facilisis sed. Ut dignissim viverra
<br> pretium. In eu justo maximus turpis feugiat finibus scelerisque nec
<br> eros. Cras nec lectus tempor nibh vestibulum eleifend et ac elit.</p>
<p>Morbi vel pharetra massa, non iaculis tortor. Nulla porttitor tincidunt felis et
<br> feugiat. Vivamus fermentum ligula justo, sit amet blandit nisl volutpat id. Fusce
<br> sagittis ultricies felis, non luctus mauris lacinia quis.</p>
<p>Ut fringilla lacus ac tempor ullamcorper. Mauris iaculis
<br>placerat ex et mattis. Mauris id vulputate lectus, id fermentum sapien.</p>
<button type="button">READ MORE</button>
</div>
<div class="right">
<ul>
<h2>Categories</h2>
<li><a href="">Tincidunt non faucibus placerat</a></li>
<li><a href="">Vestibulum tempor ac lectus</a></li>
<li><a href="">Fusce non turpis euismod</a></li>
<li><a href="">Nam in augue consectetur</a></li>
<li><a href="">Text Link Color #006699</a></li>
<h2>Related Posts</h2>
<img src="images/7.jpg">
<img src="images/8.jpg">
<img src="images/9.jpg">
</ul>
</div>
<div class="mo">
<ul>
<h2>Useful Links</h2>
<li><a href="">Suspendisse sed dui nulla</a></li>
<li><a href="">Lorem ipsum dolor sit</a></li>
<li><a href="">Duiss nec purus et eros</a></li>
<li><a href="">Etiam pulvinar et ligula sed</a></li>
<li><a href="">Proin egestas eu felis et iaculis</a></li>
<div class="one">
<h3>Lorem ipsum dolor</h3>
<p>Aenean cursus tellus mauris, quis consequat mauris
<br> dapibus id. Donec scelerisque porttitor pharetra.</p>
<hr>
</div>
<div class="two">
<h3>Lorem ipsum dolor</h3>
<p>Aenean cursus tellus mauris, quis consequat mauris
<br> dapibus id. Donec scelerisque porttitor pharetra.</p>
<hr>
</div>
<div class="three">
<h3>Lorem ipsum dolor</h3>
<p>Aenean cursus tellus mauris, quis consequat mauris
<br> dapibus id. Donec scelerisque porttitor pharetra.</p>
<hr>
</div>
</ul>
</div>
</div>
<div class="footer">
<h1>Proin eu posuere felis</h1>
<p>Classic is free HTML CSS website
<br> template provided by templatemo for
<br> everyone. Feel free to use it.</p>
<p>Aenean cursus tellus mauris, quis
<br> consequat mauris dapibus id. Donec
<br> scelerisque porttitor pharetra.</p>
<h2>Danny Egg (Executive)</h2>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图如下：
