效果图:
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/common.css" rel="stylesheet" type="text/css" /> <link href="css/index.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="public-header"> <div class="public-container clearfloat"> <div class="header-logo"> <a href=""></a> </div> <ul class="header-nav clearfloat"> <li class="item"><a href="">Our Story </a></li> <li class="item"><a href="">Menu</a></li> <li class="item"><a href="">Reservations</a></li> <li class="item"><a href=""> News</a></li> <li class="item"><a href="">Rviews</a></li> </ul> </div> </div> <div class="index-banner"> <div class="index-banner-bg"> <img src="images/demo1.jpg" alt=""/> </div> <div class="index-banner-text"> <div class="text-logo"></div> <p class="text-info"> <i class="line line-l"></i> <span class="txt">resto restaurant home page website template</span> <i class="line line-r"></i> </p> </div> </div> <div class="index-menu"> <div class="menu-tips"> The Menu </div> <div class="public-container menu-list"> <ul class="clearfloat"> <li class="menu-item clearfloat"> <a class="title"> <h4>Voluptate cillum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> <li class="menu-item clearfloat"> <a class="title"> <h4>Voluptate cillum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> <li class="menu-item clearfloat"> <a class="title"> <h4>Voluptate cillum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> <li class="menu-item clearfloat"> <a class="title"> <h4>Voluptate cillum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> <li class="menu-item clearfloat"> <a class="title"> <h4>Voluptate cillum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> <li class="menu-item clearfloat"> <a class="title"> <h4>Voluptate cillum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> <li class="menu-item clearfloat"> <a class="title"> <h4>Voluptate cillum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> <li class="menu-item clearfloat"> <a class="title"> <h4>Voluptate cillum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> </ul> </div> <a href="" class="menu-more-btn">load more<span>|</span><span class="icon"></span></a> </div> <div class="public-container index-panel"> <div class="index-panel-header clearfloat"> <h3>Featured Dishes</h3> <div class="line"></div> <div class="btn-group"> <a href="" class="btn active"></a> <a href="" class="btn"></a> <a href="" class="btn"></a> <a href="" class="btn"></a> </div> </div> <div class="index-panel-body index-food-list"> <ul class="clearfloat"> <li class="food-item"> <a href=""> <img class="banner" src="images/demo2.jpg"/> <div class="name">Fugiat nulla sint<span class="price">$30</span></div> <div class="star-bar"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star nostar"></span> </div> </a> </li> <li class="food-item"> <a href=""> <img class="banner" src="images/demo2.jpg"/> <div class="name">Fugiat nulla sint<span class="price">$30</span></div> <div class="star-bar"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star nostar"></span> </div> </a> </li> <li class="food-item"> <a href=""> <img class="banner" src="images/demo2.jpg"/> <div class="name">Fugiat nulla sint<span class="price">$30</span></div> <div class="star-bar"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star nostar"></span> </div> </a> </li> <li class="food-item"> <a href=""> <img class="banner" src="images/demo2.jpg"/> <div class="name">Fugiat nulla sint<span class="price">$30</span></div> <div class="star-bar"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star nostar"></span> </div> </a> </li> </ul> </div> </div> <div class="public-container index-panel"> <div class="index-panel-header clearfloat"> <h3>The Gallery</h3> <div class="line"></div> </div> <div class="index-panel-body index-pics"> <a class="pic-col pic-col-m" ><img src="images/demo3.jpg"/></a> <div class="pic-col pic-col-s" > <a class="pic-row "><img src="images/demo4.jpg"/></a> <a class="pic-row "><img src="images/demo5.jpg"/></a> </div> <a class="pic-col pic-col-l" ><img src="images/demo6.jpg"/></a> </div> <!--加上面去的--> <div class="space"></div> </div> <div class="public-footer"> <div class="public-container"> <div class="footer-col"> <p> New York Restaurant<br/>3926 Anmoore Road<br />New York, NY 10014<br />718-749-1714 </p> </div> <div class="footer-col"> <p> France Restaurant<br/>68, rue de la Couronne<br />75002 PARIS<br />02.94.23.69.56 </p> </div> <div class="footer-col"> <a href="">Blog</a> <a href="">Careers</a> <a href="">Privacy Policy</a> <a href="">Contact</a> </div> <div class="footer-col footer-lastchild"> <div class="footer-logo"></div> <div class="footer-info">© All Rights Reserved 2014.<br />Find More at Pixelhint.com</div> </div> </div> </div> </body> </html>
CSS代码:
reset.css
1 body,div,dl,dt,dd,ul,ol,li h1,h2,h3,h4,h5,h6,a,p,form,select,input,img,textarea{ 2 margin:0; 3 padding:0; 4 font-family:Arial, Helvetica, sans-serif; 5 } 6 ol,ul,li{ 7 list-style:none; 8 } 9 a{ 10 text-decoration:none; 11 display:block; 12 color:#fff; 13 } 14 img{ 15 border:none; 16 display:block; 17 } 18 .clearfloat{ 19 zoom:1; 20 } 21 .clearfloat:after{ 22 display:block; 23 clear:both; 24 content:''; 25 visibility:hidden; 26 height:0; 27 }
common.css
1 @charset "utf-8"; 2 /* CSS Document */ 3 4 .public-header{ 5 height:110px; 6 } 7 .public-header .header-logo{ 8 float:left; 9 margin-top:40px; 10 } 11 .public-header .header-logo a{ 12 width:182px; 13 height:54px; 14 background:url(../images/index-header-logo.png); 15 } 16 .public-header .header-nav{ 17 float:right; 18 } 19 .public-header .header-nav .item{ 20 float:left; 21 margin-top:44px; 22 margin-left:50px; 23 } 24 .public-header .header-nav a{ 25 color:#3b3b3b; 26 } 27 .public-container{ 28 position:relative; 29 margin:0 auto; 30 width:1100px; 31 } 32 .public-footer{ 33 height:218px; 34 background:#3b3b3b; 35 padding-top:100px; 36 } 37 .public-footer .footer-col{ 38 width:230px; 39 float:left; 40 margin-left:60px; 41 font-size:16px; 42 color:#fff; 43 line-height:1.8; 44 } 45 .public-footer .footer-lastchild{ 46 float:right; 47 margin-right:0; 48 } 49 .public-footer .footer-logo{ 50 width:182px; 51 height:55px; 52 margin-top:-121px; 53 margin-bottom:14px; 54 background:url(../images/index-footer-logo.png); 55 }
index.css
1 @charset "utf-8"; 2 /* CSS Document */ 3 .index-banner{ 4 position: relative; 5 background: #3b3b3b; 6 } 7 .index-banner-bg{ 8 height:570px; 9 overflow:hidden; 10 } 11 .index-banner img{ 12 margin:0 auto; 13 } 14 .index-banner-text{ 15 position: absolute; 16 top:200px; 17 left:50%; 18 margin-left:-388px; 19 } 20 .index-banner-text .text-logo{ 21 width:776px; 22 height: 117px; 23 background: url("../images/text-logo.png") no-repeat; 24 } 25 .index-banner-text .text-info{ 26 margin-top:17px; 27 text-align: center; 28 color:#fff; 29 } 30 .index-banner-text .text-info .line{ 31 display: inline-block; 32 width:40px; 33 vertical-align: middle; 34 border-top:1px solid #fff; 35 } 36 37 .index-banner-text .text-info .txt{ 38 margin:0 26px; 39 } 40 41 /*index-menu*/ 42 .index-menu{ 43 position: relative; 44 border-top:4px solid #f34949; 45 } 46 .index-menu .menu-tips{ 47 position: absolute; 48 left:50%; 49 top:0; 50 margin-left:-78px; 51 width:156px; 52 height: 75px; 53 text-align: center; 54 line-height: 65px; 55 background:#f34949 ; 56 } 57 .index-menu .menu-tips:after{ 58 position: absolute; 59 content: ''; 60 left:0; 61 bottom:0; 62 width:0; 63 height:0; 64 border-left:78px solid transparent; 65 border-right:78px solid transparent; 66 border-bottom:10px solid #fff; 67 } 68 69 .index-menu .menu-list{ 70 margin-top:150px; 71 color:#555; 72 overflow: hidden; 73 } 74 .index-menu .menu-list ul{ 75 width:1160px; 76 } 77 .index-menu .menu-item{ 78 float:left; 79 width:520px; 80 margin-right:60px; 81 margin-bottom:56px; 82 } 83 84 .index-menu .menu-item .title,.index-menu .menu-item .line{ 85 float:left; 86 } 87 .index-menu .menu-item .price{ 88 float:right; 89 90 } 91 .index-menu .menu-item .title{ 92 width:230px; 93 overflow: hidden; 94 color:#555; 95 white-space: nowrap; 96 text-overflow: ellipsis; 97 } 98 .index-menu .menu-item .comment{ 99 margin-top:4px; 100 color:#b7b7b7; 101 font-size:12px; 102 } 103 .index-menu .menu-item .line{ 104 margin-top:9px; 105 width:192px; 106 border-top:1px solid #e3e1e1; 107 } 108 109 .index-menu .menu-more-btn{ 110 margin:0 auto; 111 width: 114px; 112 height:32px; 113 padding-left:16px; 114 border:1px solid #d7d5d5; 115 font-size:14px; 116 line-height: 32px; 117 color:#d7d5d5; 118 } 119 .index-menu .menu-more-btn .icon{ 120 display:inline-block; 121 width:11px; 122 height:7px; 123 margin-left:7px; 124 background:url("../images/index-btn-icon.png") no-repeat; 125 } 126 127 /*index-panel*/ 128 .index-panel{ 129 margin-top:200px; 130 } 131 132 .index-panel-header h3{ 133 font-size:20px; 134 color:#3b3b3b; 135 font-weight:normal; 136 float:left; 137 margin-right:48px; 138 } 139 .index-panel-header .line{ 140 float:left; 141 width:200px; 142 margin-top:7px; 143 border-top:1px solid #e5e3e3; 144 } 145 .index-panel-header .btn-group{ 146 font-size:0; 147 float:right; 148 149 } 150 .index-panel-header .btn{ 151 display: inline-block; 152 margin-left:11px; 153 width:9px; 154 height:9px; 155 background: #dedede; 156 border-radius:50%; 157 } 158 .index-panel-header .active{ 159 background: #9b9b9b; 160 } 161 .index-panel-body{ 162 margin-top:75px; 163 } 164 165 .index-food-list ul{ 166 width:1160px; 167 } 168 .index-food-list .food-item{ 169 float:left; 170 width:230px; 171 margin-right:60px; 172 } 173 .index-food-list .food-item .banner{ 174 margin-bottom:30px; 175 height:202px; 176 } 177 .index-food-list .food-item .name{ 178 color:#555; 179 margin-bottom:10px; 180 } 181 .index-food-list .food-item .price{ 182 float:right; 183 } 184 .index-food-list .food-item .star-bar{ 185 font-size:0; 186 } 187 .index-food-list .food-item .star{ 188 display:inline-block; 189 width:12px; 190 height:13px; 191 margin-right:5px; 192 background:url("../images/index-star.png") no-repeat; 193 } 194 .index-food-list .food-item .nostar{ 195 background-position:0 -13px; 196 } 197 198 .index-pics{ 199 height:380px; 200 overflow: hidden; 201 } 202 .space{ 203 width:100px; 204 margin-bottom:200px; 205 } 206 .index-pics .pic-col{ 207 float:left; 208 } 209 .index-pics .pic-col-m{ 210 width:353px; 211 } 212 .index-pics .pic-col-s{ 213 width:287px; 214 } 215 .index-pics .pic-col-l{ 216 width:460px; 217 }
至此,此页面完毕。