olampiad
پنج شنبه 18 مهر 1392, 18:11 عصر
سلام
این قالب رو من واسه همون تصاویر بالا ساختم.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style type="text/css">
body{
background:url(image/top.jpg);
margin:0px;
padding:0px;
}
#top{
background:#222222;
width:100%;
height:30px;
}
@font-face{
font-family:hamid;
src:url(font/pacifico.woff);
}
.t_right{
color:#808080;
float:right;
width:250px;
text-align:left;
padding-top:4px;
}
.t_left{
color:#FFF;
font-size:15px;
float:left;
width:450px;
text-align:right;
padding-top:4px;
}
header{
width:100%;
height:132px;
}
.h_right{
float:right;
width:530px;
height:60px;
color:#8a8a8a;
font-size:14px;
padding-top:50px;
padding-left:20px;
}
.h_right2{
float:right;
width:200px;
height:130px;
}
.in_top{
width:250px;
background:url(image/top.jpg);
height:25px;
border:0px solid;
color:#a9a9a9;
box-shadow:1px 1px 1px 0px #dbdbdb inset;
padding-left:10px;
}
.h_right3{
float:right;
width:450px;
height:130px;
padding-left:10px;}
.h_right3 nav{
width:280px;
}
.h_right3 nav ul{
margin:0px;
width:280px;
height:50px
padding:0px;
list-style:none;
float:left;
margin-top:50px;
}
.h_right3 nav ul li a:link,.h_right3 nav ul li a:visited{
color:#C00;
float:left;
margin-left:10px;
margin-right:10px;
text-decoration:none;
height:30px;
}
.h_right3 nav ul li a:hover{
border-bottom:1px solid;
}
#z_heade{
background:#dc001e;
height:150px;
width:100%;
box-shadow:0px 4px 4px 0px #6e000f inset;
}
.z_heade_right{
width:400px;
float:right;
height:150px;
padding-left:50px;}
.z_heade_left{
width:720px;
float:right;
height:150px;}
.z_heade_left p{
margin-bottom:0px;
margin-top:20px;
color:#FFF;
}
.z_heade_left h1{
font-family:hamid;
margin-top:0px;
color:#FFF;
font-size:45px;
}
.bb{
background:#c00327;
border:0px solid;
margin-top:50px;
color:#FFF;
font-size:15px;
font-weight:700;
height:50px;
width:180px;
box-shadow:1px 3px 6px 0px #8b021c;
border-radius:3px;
}
.z_heade_right p{
margin-top:3px;
font-size:10px;
padding-left:25px;
color:#FFF;}
#all{
width:980px;
height:auto;
margin:auto;
}
aside{
float:right;
width:230px;
height:800px;}
.price{
color:#222222;
}
.section{
text-align:justify;
color:#222222;
width:710px;
height:300px;
padding:10px;
}
.section img{
float:right;
margin-left:20px;
margin-bottom:0px;
}
.prev{
width:725px;
height:300px;
margin-top:80px;
}
.prev h3{
font-size:22px;
width:200px;
font-family:hamid;
}
.prev ul{
margin:0px;
padding:0px;
list-style:none;
}
.prev ul li{
width:225px;
padding-left:110px;
background:#000;
height:71px;
border-radius:4px;
float:left;
background:#fac7d2 url(image/li.jpg) left no-repeat;
margin:10px
}
.prev ul li h4{
width:210px;
margin-top:7px;
margin-bottom:0px;
font-family:hamid;
font-size:17px;
}
.prev ul li p{
margin-top:0px;
margin-bottom:0px;
font-size:10px;
}
.list{
background:#cccccc;
width:100%;
height:276px;
clear:both;
}
.list ul{
margin:0px;
padding:0px;
width:1000px;
list-style:none;
margin-left:280px;
height:275px;
}
.list ul li{
width:310px;
height:265px;
margin-right:10px;
margin-left:10px;
float:left;
}
.list ul li h4{
font-size:17px;
margin-top:10px;
width:270px;
font-family:hamid;
}
.list ul li p{
}
footer{
background:#222222;
height:48px;
clear:both;
}
.f_right{
float:right;
width:330px;
text-align:left;
color:#FFF;
margin-top:15px;
font-size:14px;
}
.f_left{
float:left;
width:300px;
text-align:right;
color:#FFF;
font-size:14px;
margin-top:15px;
}
</style>
</head>
<body>
<div id="top">
<div class="t_right">sign out</div>
<div class="t_left">Welcome Thomas <span style="color:#808080; font-size:14px;">[manage account]</span></div>
</div>
<header>
<div class="h_right"><input class="in_top" type="text" value="search anythin instore"> search</div>
<div class="h_right2"><img src="image/logo.jpg"></div>
<div class="h_right3">
<nav>
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Top Prodoct</a></li>
<li><a href="#">Carts</a></li>
</ul>
</nav>
</div>
</header>
<div id="z_heade">
<div class="z_heade_right"><input type="submit" value="Add to Cart" class="bb"><br><p>
is stroc them a Estekha yuo
</p></div>
<div class="z_heade_left">
<p>Top Produc / This week / Back</p>
<h1>&S.back Top 25 colection</h1>
</div>
</div>
<div id="all">
<aside>dd</aside>
<section class="section">
<h2 class="price">Limited Discount: <span style="color:#b8b8b8;">$ 24.99</span> $19.99</h2>
<p>
<img src="image/one.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id diam metus. Duis tellus augue, malesuada ac lacinia eu, faucibus quis sem. Morbi at metus nisi, at facilisis sem. Nullam sit amet orci lorem. Aenean blandit tellus a ante malesuada ut malesuada lectus tristique. Suspendisse potenti. Donec urna quam, tempor ut dignissim sed, laoreet quis eros. In hac habitasse platea dictumst. Nunc tempus, risus non viverra ultrices, nisl purus ornare tellus, ut scelerisque nunc sem non turpis. Phasellus dictum interdum enim, non viverra odio pharetra id. Duis ut molestie purus. Morbi lectus lectus, ultricies eu congue et, posuere id felis. Fusce elementum felis lacinia mi convallis venenatis. Donec molestie tempor ligula, quis euismod ipsum posuere a. Donec id mi erat, at volutpat massa. Suspendisse tempor, massa eget venenatis malesuada, ipsum turpis suscipit risus, id fermentum dui purus eget nisi.
</p>
</section>
<section class="prev">
<h3>Previewe</h3>
<ul>
<li>
<h4>Violin Concerto in A minor</h4>
<p>Diuration 3:25<p>
</li>
<li>
<h4>Christmas Oratorio</h4>
<p>Diuration 3:25<p>
</li>
<li>
<h4>Jesu Joy of Man's Desiring</h4>
<p>Diuration 3:25<p>
</li>
<li>
<h4>Suite No. 3 in D major</h4>
<p>Diuration 3:25<p>
</li>
</ul>
</section>
<section class="ok">
<h3></h3>
</section>
</div>
<div class="list">
<ul>
<li>
<h4>Tollow you</h4>
<p>
Lorem ipsum dolor sit amet
</p>
</li>
<li>
<h4>Vewu leter</h4>
<p>
Faucibus quis sem. Morbi at metus nisi, at facilisis sem. Nullam sit amet orci lorem. Aenean blandit tellus a ante malesuada ut malesuada.
</p>
<input type="text" value="youre email"><br>
<input type="submit">
</li>
<li>
<h4>Relund policy</h4>
</li>
</ul>
</div>
<footer>
<div class="f_right">handamne in lipzic Gearmany</div>
<div class="f_left">@2013 hamid ok joon</div>
</footer>
</body>
</html>