html源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div class="bg"></div>
<div class="page">
<div class="header">
<div class="nav">
<img src="./images/logo.png" alt="">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">TECHNOLOGY</a></li>
<li><a href="#">PRICING</a></li>
<li><a href="#">CONTACTS</a></li>
</ul>
</div>
<div class="show">
<img src="./images/slide-3.jpg" alt="">
<p>GROWING CLEAN AND FULL OF HEALTH PRODUCTS</p>
<div class="lborder"></div>
<div class="rborder"></div>
</div>
</div>
<div class="main">
<div class="lside">
<div class="lside_up">
<h3>Our products:</h3>
<div class="product pre3">
<img src="./images/page2-img6.jpg" alt="">
<p><span>Tomatoes</span><br>Vitamus handrerit mauris
ut du gravida ut viverra lectus tincidunt.
</p>
</div>
<div class="product pre3">
<img src="./images/page2-img6.jpg" alt="">
<p><span>Tomatoes</span><br>Vitamus handrerit mauris
ut du gravida ut viverra lectus tincidunt.
</p>
</div>
<div class="product pre3">
<img src="./images/page2-img6.jpg" alt="">
<p><span>Tomatoes</span><br>Vitamus handrerit mauris
ut du gravida ut viverra lectus tincidunt.
</p>
</div>
<div class="product last">
<img src="./images/page2-img6.jpg" alt="">
<p><span>Tomatoes</span><br>Vitamus handrerit mauris
ut du gravida ut viverra lectus tincidunt.
</p>
</div>
</div>
<div class="lside_bm">
<p><a href="#">Read more ></a></p>
<h3>Need a useful advice from breeder?</h3>
<h6>WE WANT TO RAISE YOUR CROPS & LIVESTOCK!</h6>
<p class="john">
<img src="./images/quote-before.png" alt="">
<span>This website template has several pages:Home,
Products,Technology,Pricing,Contacts</span>
(note that contact us from doesn't work)Vivams hendrerit
mauris ut dui.gravida ut viverra lectus Vivams hendrerit
mauris ut dui.gravida ut viverra lectus Vivams hendrerit
mauris ut dui.gravida ut viverra lectus Vivams hendrerit
mauris ut dui.gravida ut viverra lectus mauris ut dui.
gravida
<img src="./images/quote-after.png" alt="">
<span class="name">John Smith<i>(breeder)</i></span>
</p>
<img class="oldman" src="./images/banner-box-img.png" alt="">
</div>
</div>
<div class="rside">
<div class="rside_up">
<h3>Welcome!</h3>
<p class="firp">AgroPlus is one of<a href="#">Free website templates</a>
created by <br>TemplatesMonster.com team.
</p>
<p class="secp">
This website template is optimized for 1280x1024 screen resolution.
It is also XHTML & CSS valid. The PSD source files of this
The PSD source files of this<a href="">AgroPlus</a>
The PSD source files of this The PSD source files of this
</p>
</div>
<div class="rside_bm">
<p><a href="#">Read more ></a></p>
<h3>Our programs:</h3>
<ul>
<li>Agronomic Practices</li>
<li>Biotechnology</li>
<li>Biotechnology Research</li>
<li>Benefits of Biotechnology</li>
<li>The Regulatory Process</li>
<li>Breeding</li>
<li>Learning Centers</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="copyright">
<p>
©2012 <span>AgroPlus</span> <br>
Professional free web templates
<a href="">at <br>www.websitetemplatesonline.com.
|<br>Flashtemplates.com. </a>Flash Design-the Smart
Choice. <br>
<a href="#">Website Templates</a> by TempalteMonster.com
</p>
</div>
<div class="arch">
<h4>Achives:</h4>
<ul>
<li>October 2012</li>
<li>September 2012</li>
<li>August 2012</li>
<li>July 2012</li>
</ul>
</div>
<div class="link">
<h4>Links:</h4>
<ul>
<li>Documentation</li>
<li>Plugins</li>
<li>SuggestIdeas</li>
<li>SupportForum</li>
</ul>
</div>
<div class="support">
<h4>Support:</h4>
<ul>
<li>Special Proposition</li>
<li>Free Phone</li>
<li>Solutions</li>
</ul>
</div>
<ul id="commu">
<li><img src="./images/social-icon-1.png" alt=""></li>
<li><img src="./images/social-icon-2.png" alt=""></li>
<li><img src="./images/social-icon-3.png" alt=""></li>
</ul>
</div>
</div>
</body>
</html>
css源代码:
*{
padding:0;
margin: 0;
}
body{
width: 100%;
background: url("./images/body-bg.gif") repeat;
/*font-size: 0;*/
}
a{
text-decoration: none;
}
.page{
width: 952px;
margin-right: auto;
position: absolute;
top: 80px;
left: 22%;
z-index: 2;
background: url("./images/body-bg.gif") repeat;
}
.bg{
width: 100%;
height: 810px;
background: url("./images/main-bg.jpg") no-repeat;
}
.header{
width: 100%;
height: 512px;
margin: 0 auto;
position: relative;
}
.nav{
width: 888px;
height: 108px;
position: absolute;
left: 0;
top: 0;
padding-left:32px;
padding-right: 32px;
z-index: 3;
background: rgba(0, 0, 0, 0.5);
}
.nav img{
display: block;
float: left;
width: 200px;
height: 65px;
padding-top: 20px;
}
.nav li{
list-style: none;
float:left;
padding-top: 45px;
padding-left: 68px;
font-size: 13px;
}
.nav li a{
color: white;
padding-top: 5px;
}
.nav li a:hover{
background: url("./images/nav-active.png") no-repeat 3px -1px;
}
.show{
width: 100%;
}
.show img{
width: 100%;
}
.show p{
font-size: 70px;
font-weight: bolder;
font-family: "segeo ui";
color: white;
width: 770px;
height: 304px;
text-align: center;
position: absolute;
left: 80px;
bottom: 60px;
z-index: 5;
}
.lborder{
background: url("./images/slider-prev.png") no-repeat -32px 0;
width: 32px;
height: 403px;
position: absolute;
left: 0px;
top: 108px;
z-index: 4;
}
.rborder{
background: url("./images/slider-next.png") no-repeat -32px 0;
width: 32px;
height: 403px;
position: absolute;
right: -1px;
top: 108px;
z-index: 4;
}
.lborder:hover{
width: 32px;
height: 403px;
background: url("./images/slider-prev.png") no-repeat;
}
.rborder:hover{
width: 32px;
height: 403px;
background: url("./images/slider-next.png") no-repeat;
}
a:hover{
color: red!important;
}
.main{
width: 873px;
/*height: 724px;*/
margin: 0 auto;
}
.lside{
width: 632px;
height: 100%;
margin-right: 46px;
float: left;
}
.lside_up{
width: 632px;
height: 317px;
border-bottom: 1px solid gray;
}
.lside_up h3{
width: 100%;
height: 53px;
padding-top: 40px;
color: white;
font-size: 25px;
}
.product{
width: 152px;
height: 225px;
float: left;
}
.pre3{
margin-right: 8px;
}
.product img{
width: 152px;
height: 122px;
}
.product p{
width: 100%;
font-size: 13px;
color: grey;
margin-top: 10px;
}
.product p span{
color: #b5921c;
line-height: 30px;
}
.last{
margin-right: 0;
}
.lside_bm{
width: 100%;
height: 408px;
clear: both;
position: relative;
}
.lside_bm p{
width: 100%;
height: 45px;
text-align: right;
padding-top: 15px;
}
.lside_bm p a{
font-size: 13px;
color: white;
text-decoration: underline;
}
.oldman{
display: block;
position: absolute;
right: 0;
top: 50px;
z-index: 6;
}
.lside_bm>.john{
width: 345px;
height: 295px;
padding-left: 38px;
font-size: 13px;
color: grey;
text-align: left;
font-style: italic;
}
.lside_bm span{
color: #b5921c;
font-style: italic;
}
.lside_bm h3,.lside_bm h6{
padding-left: 38px;
color: white;
}
.lside_bm h3{
font-weight: bold;
}
.lside_bm h6{
font-size: 15px;
}
.lside_bm .john .name{
display: block;
margin-top: 25px;
padding-left: 200px;
font-size: 14px;
font-weight: bold;
font-style: normal;
color: white;
}
.lside_bm .john .name i{
font-size: 14px;
font-style: italic;
font-weight: lighter;
}
.rside{
width: 195px;
float: right;
}
.ride_up{
width: 100%;
height:310px;
}
.rside_up h3{
width: 100%;
height: 52px;
padding-top: 40px;
color: #ae050a;
font-size: 25px;
}
.rside_up .firp{
color: #ae050a;
font-size: 13px;
}
.firp a,.secp a{
color: white;
text-decoration: underline;
}
.secp {
font-size: 14px;
color: grey;
padding-bottom: 13px;
border-bottom: 1px solid grey;
}
.rside_bm {
width:100%;
}
.rside_bm p:nth-child(1){
width:100%;
height: 54px;
padding-top: 14px;
text-align: right;
}
.rside_bm p:nth-child(1) a{
font-size: 13px;
color: white;
text-decoration: underline;
}
.rside_bm h3{
width: 100%;
height: 50px;
color: white;
font-size: 28px;
}
.rside_bm ul{
list-style:inside url("./images/list-1-marker.gif");
}
.rside_bm li{
font-size: 15px;
padding: 5px 0;
color: grey;
border-bottom: 1px solid grey;
}
.rside_bm li:nth-child(7){
border-width: 0;
}
.footer{
width: 100%;
border-top: 3px solid grey;
clear: both;
}
.copyright{
font-size: 13px;
color: grey;
width: 300px;
height: 205px;
float: left;
margin-top: 20px;
}
.copyright span{
font-size: 20px;
font-weight: bolder;
font-family: "Impact";
text-shadow: 1em,1em,0.5em;
}
.copyright p a{
text-decoration: underline;
color: grey;
}
.arch{
float: left;
}
.link{
float: left;
}
.support{
float: left;
}
.commu{
float: right;
}
.footer ul{
list-style: inside url("./images/list-1-marker.gif");
margin-left:45px;
}
.footer li{
font-size: 14px;
color: grey;
padding: 7px 0;
}
.footer h4{
padding-left: 45px;
color: #ae050a;
margin-top: 20px;
}
#commu{
margin-top: 20px;
list-style-type: none;
float: right;
}
#commu img{
width: 32px;
height: 30px;
}
#commu li{
display: block;
width: 40px;
height: 20px;
background: gray;
margin-top: 10px;
text-align: center;
}