<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>从psd到html练习</title>
<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/index.css">
</head>
<body>
<div class="public-header">
<div class="com-width clearfix">
<div class="index-header-logo"></div>
<ul class="index-header-nav ">
<li><a href="#">Our Story</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">ABCD</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">RUBY</a></li>
</ul>
</div>
</div>
<div class="index-banner">
<div class="index-banner-logo"></div>
<p class="index-banner-title"><span class="index-banner-title-decoration"></span>resto restaurant home page website template<span class="index-banner-title-decoration"></span></p>
</div>
<div class="public-container index-menu clearfix">
<div class="com-width ">
<p class="index-menu-title">The Menu</p>
<ul class="menu-list clearfix">
<li class="menu-list-item ">
<div class="name">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</div>
<div class="decoration-line"></div>
<p class="price">￥10</p>
</li>
<li class="menu-list-item ">
<div class="name">
<h4>Arcu pede enim justo.</h4>
<p class="comment">Tuna, Sweetcorn, Cheese.</p>
</div>
<div class="decoration-line"></div>
<p class="price">￥20</p>
</li>
<li class="menu-list-item ">
<div class="name">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</div>
<div class="decoration-line"></div>
<p class="price">￥30</p>
</li>
<li class="menu-list-item ">
<div class="name">
<h4>Cras dapibussemper nisi.</h4>
<p class="comment">Pineapple, Minced Beef, Cheese.</p>
</div>
<div class="decoration-line"></div>
<p class="price">￥40</p>
</li>
<li class="menu-list-item ">
<div class="name">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</div>
<div class="decoration-line"></div>
<p class="price">￥50</p>
</li>
<li class="menu-list-item ">
<div class="name">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</div>
<div class="decoration-line"></div>
<p class="price">￥60</p>
</li>
</ul>
<p class="index-menu-loadmore">load more<span class="separator">|</span></p>
</div>
</div>
<div class="public-container index-panner clearfix">
<div class="com-width">
<div class="title-box">
<h4 class="title">Featured Dishes</h4>
<div class="decoration-line"></div>
<ul class="img-index">
<li class="item-index active"><a href="#"></a></li>
<li class="item-index"><a href="#"></a></li>
<li class="item-index"><a href="#"></a></li>
<li class="item-index"><a href="#"></a></li>
</ul>
</div>
<ul class="product">
<li class="product-itme-1">
<div class="product-img product1"></div>
<div class="product-description">
<p class="product-name">Fugadfasdfiat nulla sint</p>
<p class="product-price">$30</p>
</div>
<ul class="product-com">
<li class="start active"></li>
<li class="start active"></li>
<li class="start active"></li>
<li class="start active"></li>
<li class="start"></li>
</ul>
</li>
<li class="product-itme-1">
<div class="product-img product2"></div>
<div class="product-description">
<p class="product-name">Fugiat nulla sint</p>
<p class="product-price">$30</p>
</div>
<ul class="product-com">
<li class="start active"></li>
<li class="start active"></li>
<li class="start active"></li>
<li class="start active"></li>
<li class="start"></li>
</ul>
</li>
<li class="product-itme-1">
<div class="product-img product3"></div>
<div class="product-description">
<p class="product-name">Fugiat nulla sint</p>
<p class="product-price">$30</p>
</div>
<ul class="product-com">
<li class="start active"></li>
<li class="start active"></li>
<li class="start active"></li>
<li class="start active"></li>
<li class="start"></li>
</ul>
</li>
<li class="product-itme-1">
<div class="product-img product4"></div>
<div class="product-description">
<p class="product-name">Fugiat nulla sint</p>
<p class="product-price">$30</p>
</div>
<ul class="product-com">
<li class="start active"></li>
<li class="start active"></li>
<li class="start active"></li>
<li class="start active"></li>
<li class="start"></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="public-container index-panner clearfix">
<div class="com-width">
<div class="title-box">
<h4 class="title">The Gallery</h4>
<div class="decoration-line"></div>
</div>
<ul class="product">
<li class="product-itme2 product-left">
</li>
<li class="product-itme2 product-center">
<ul>
<li class="product-center-up"></li>
<li class="product-center-down"></li>
</ul>
</li>
<li class="product-itme2 product-right">
</li>
</ul>
</div>
</div>
<div class="public-footer">
<div class="com-width footer-cont clearfix">
<div class="footer-col-wrap">
<ul class="footer-col">
<li>New York Restaurant</li>
<li>3926 Anmoore Road</li>
<li>New York, NY 10014</li>
<li>718-749-1714</li>
</ul>
<ul class="footer-col">
<li>France Restaurant</li>
<li>3926 Anmoore Road</li>
<li>New York, NY 10014</li>
<li>718.749.714</li>
</ul>
<ul class="footer-col">
<li><a href="#">Bolg</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Prlvacy Policy</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="footer-col">
<li class="footer-logo"></li>
<li>© All Rights Reserved 2014. as</li>
<li>Find More at Pixelhint.com</li>
</ul>
</div>
</div>
</div>
</body>
</html>
.com-width{width: 1100px; height: 100%; margin:0 auto; }
a:hover{text-decoration: underline; cursor: pointer;}
/*头部*/
.public-header{height: 70px; background-color: #FFF; padding-top: 40px;}
.public-header .index-header-logo{float: left; width: 181px; height: 54px; background: url(../img/index-header-logo.png) left center no-repeat; }
.public-header .index-header-nav{float: right;}
.public-header .index-header-nav li{float: left; margin-left: 50px;}
.public-header .index-header-nav a{font: 12px/30px "Georgia"; color: #3b3b3b;}
/*底部*/
.public-footer{width: 100%; padding-bottom: 112px; background-color: #3b3b3b;}
.public-footer .footer-cont{padding-top: 90px; overflow: hidden;}
.public-footer .footer-col-wrap{width: 1160px;}
.public-footer .footer-col{width: 230px; float: left; margin-right: 60px; font: 16px/30px "Georgia"; color: #ebebeb;}
.public-footer .footer-col a{color: #ebebeb;}
.public-footer .footer-logo{width: 182px; height: 55px; background: url(../img/index-footer-logo.png) center center no-repeat; margin-top: -16px;}
/*index-banner*/
.index-banner{
position: relative;
width: 100%;
height: 570px;
border-bottom: 4px solid #f34949;
background: url(../img/index-banner-bg.png) center center no-repeat;
background-size: 100%;
background-color: #3f3f3f;
//IE8及以下专属滤镜
filter: alpha(opacity=40);
-khtml-opcity: .4;
-webkit-opcity: .4;
-moz-opacity: .4;
opacity: .4;
}
.index-banner .index-banner-logo{
position: absolute;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -70%);
-moz-transform: translate(-50%, -70%);
-ms-transform: translate(-50%, -70%);
-o-transform: translate(-50%, -70%);
transform: translate(-50%, -70%);
width: 776px;
height: 117px;
background: url(../img/index-banner-logo.png) center center no-repeat;
background-size: 100%;
}
.index-banner .index-banner-title{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -20%);
-moz-transform: translate(-50%, -20%);
-ms-transform: translate(-50%, -20%);
-o-transform: translate(-50%, -20%);
transform: translate(-50%, -20%);
color: #FFF;
}
.index-banner .index-banner-title-decoration{
margin-left: 25px;
margin-right: 25px;
margin-bottom: 3px;
display: inline-block;
width:40px;
height: 2px;
border-bottom: 1px solid #2E2E2E;
}
/*index-menu*/
.index-menu .index-menu-title{
margin-left: 472px;
width: 156px;
height: 50px;
padding-top: 20px;
margin-bottom: 80px;
background-color: #f34949;
color: #FFF;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.index-menu .index-menu-title:after{
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 24px solid #fff;
}
.index-menu .menu-list-item{
display: inline-block;
width: 520px;
font-family: "Tahoma";
font-size: 16px;
margin-bottom: 52px;
}
.menu-list-item:nth-of-type(2n + 1){
float: left;
}
.menu-list-item:nth-of-type(2n){
float: right;
}
.index-menu .name{
display: inline-block;
width: 230px;
}
.index-menu .comment{
font-size: 12px;
line-height:28px;
color:#b7b7b7;
}
.index-menu .decoration-line{
margin-bottom: 20px;
margin-right: 40px;
display: inline-block;
width: 192px;
height: 1px;
border-bottom: 1px solid #e3e1e1;
}
.index-menu .price{
top: -15px;
position: relative;
display: inline-block;
}
/*load more*/
.index-menu .index-menu-loadmore{
margin-left:482px;
margin-bottom: 80px;
padding-left: 16px;
width: 116px;
height: 34px;
border: 1px solid #E1E0E0;
color: #8F8F8F;
font: 14px/34px "Myriad Pro";
background: url(../img/index-loadmore-sharp.png) 110px center no-repeat;
}
.index-menu .index-menu-loadmore .separator{
margin-left: 16px;
}
/*index-panner*/
.index-panner{
margin-bottom: 200px;
}
.index-panner .title-box{
margin-bottom: 120px;
}
.index-panner .title{
display: inline-block;
width: 230px;
font: 20px/20px "Aleo";
font-weight: bold;
}
.index-panner .decoration-line{
display: inline-block;
width: 184px;
border: .1px solid #C7C7C7;
margin-bottom: 4px;
}
.index-panner .img-index{
float: right;
}
.index-panner .item-index{
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #B8B8B8;
margin-left: 4px;
}
.index-panner .active{
background-color: #7F7F7F
}
/*index-panner product*/
.index-panner .product{
width: 1164px;
overflow: hidden;
}
.index-panner .product-itme-1{
width: 231px;
float: left;
margin-right: 60px;
}
.index-panner .product-img{
width: 231px;
height: 202px;
}
.index-panner .product1 {
background: url(../img/index-panner-product1.png) center center no-repeat;
}
.index-panner .product2 {
background: url(../img/index-panner-product2.png) center center no-repeat;
}
.index-panner .product3 {
background: url(../img/index-panner-product3.png) center center no-repeat;
}
.index-panner .product4 {
background: url(../img/index-panner-product4.png) center center no-repeat;
}
.index-panner .product-description{
font: 16px/30px "Tahoma";
color:#555555;
margin-top: 18px;
}
.index-panner .product-name{
float: left;
}
.index-panner .product-price{
float: right;
}
.index-panner .product-com{
margin-top: 50px;
background-color: pink;
}
.index-panner .start{
float: left;
margin-right: 5px;
width: 13px;
height: 13px;
background: url(../img/index-panner-start.png) center center no-repeat;
}
.index-panner .product-left{
float: left;
width: 353px;
height: 382px;
background: url(../img/index-panner-item2-left.png) left center no-repeat;
}
.index-panner .product-center{
float: left;
}
.index-panner .product-center-up{
width: 287px;
height: 251px;
background: url(../img/index-panner-item2-center-1.png) center center no-repeat;
}
.index-panner .product-center-down{
width: 287px;
height: 206px;
background: url(../img/index-panner-item2-center-2.png) center center no-repeat;
margin-top: -75px;
}
.index-panner .product-right{
float: left;
width: 460px;
height: 381px;
background: url(../img/index-panner-item2-right.png) right center no-repeat;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
