静态页面（2） fly

效果图：

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 }




至此，此页面完毕。


 






        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/flytime/p/6814637.html