谁有全套代码，跟着敲太痛苦了

个回答

坚强一点a

2018-12-27 14:56:11

代码真多啊，都是大神级别的。

0

Sandaydi: 2018-10-23 17:29:09

课程代码

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>从PSD转化为HTML</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
  <div class="box">
    <!--头部区-->
    <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 public-container">
        <img src="img/demo1.png" alt="banner" />
      </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>
    <!--menu区-->
    <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 href="#" 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 href="#" class="title">
              <h4>Arcu pede enim justo.</h4>
              <p class="comment">Tuna, Sweetcorn, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$45</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Metus varius laoreet.</h4>
              <p class="comment">Chicken, mozzarella cheese, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$62</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Cras dapibussemper nisi.</h4>
              <p class="comment">Pineapple, Minced Beef, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$32</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Donec sodales magna.</h4>
              <p class="comment">Tuna, Sweetcorn, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$25</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Quam semper libero.</h4>
              <p class="comment">Cheese, tomato, mushrooms, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$15</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Saugue velit cursus.</h4>
              <p class="comment">Pineapple, Minced Beef, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$30</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Nam eget dui Etiam.</h4>
              <p class="comment">Chicken, mozzarella cheese, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$35</div>
          </li>
        </ul>
      </div>
      <a href="#" class="menu-more-btn">
        <span>load more</span>
        <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="img/demo2.png" />
              <div class="name">
                <span>Fugiat nulla sint</span>
                <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="img/demo22.png" />
              <div class="name">
                <span>Daute irure dolor</span>
                <span class="price">$24</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="img/demo23.png" />
              <div class="name">
                <span>Officia deserunt mollit</span>
                <span class="price">$60</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="img/demo24.png" />
              <div class="name">
                <span>Pim minim veniam</span>
                <span class="price">$17</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 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-pics clearfloat">
        <a href="#" class="pic-col pic-col-m">
          <img src="img/demo3.png" alt="美食" />
        </a>
        <div class="pic-col pic-col-s">
          <a class="pic-row"><img src="img/demo4.png" alt="" /></a>
          <a class="pic-row"><img src="img/demo5.png" alt="" /></a>
        </div>
        <a href="#" class="pic-col pic-col-l">
          <img src="img/demo6.png" alt="" />
        </a>
      </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>
            <a href="tel:718-749-1714">718-749-1714</a>
          </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">
          <div class="footer-logo"></div>
          <div class="footer-info">&copy;All Rights Reserved 2018.<br>Find More at PixelHint.com</div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

reset.css

body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, input, form, a, p, textarea {
  margin: 0;
  padding: 0;
  font-family: helvetica;
}
ul, ol, li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #fff;
  display: block;
}
img {
  border: none;
  display: block;
}
.clearfloat {
  zoom: 1;
}
.clearfloat:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

common.css

.box {
  min-width: 1160px;
}
.public-header {
  height: 110px;
}
.public-header .header-logo {
  float: left;
  margin-top: 40px;
}
.public-header .header-logo a {
  height: 54px;
  width: 182px;
  background: url("../img/index-header-logo.png") no-repeat;
}
.public-header .header-nav {
  float: right;
  font-size: 14px;
}
.public-header .header-nav .item {
  float: left;
  margin-top: 44px;
  margin-left: 50px;
}
.public-header .header-nav a {
  color: #3b3b3b;
}
.public-header .header-nav a:hover {
  text-decoration: underline;
}
.public-container {
  position: relative;
  margin: 0 auto;
  width: 1100px;
}
.public-footer {
  height: 218px;
  margin-top: 200px;
  padding-top: 100px;
  background: #3b3b3b;
}
.public-footer .footer-col {
  width: 230px;
  float: left;
  margin-right: 60px;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 1.8;
}
.public-footer .footer-col:last-child {
  margin-right: 0;
}
.public-footer .footer-logo {
  width: 182px;
  height: 55px;
  margin-top: -10px;
  margin-bottom: 10px;
  background: url("../img/index-footer-logo.png") no-repeat;
}

index.css

/*广告区*/
.index-banner {
  position: relative;
  background: rgba(0, 0, 0, .1);
}
.index-banner-bg {
  height: 565px;
  overflow: hidden;
}
.index-banner-bg img {
  margin: 0 auto;
}
.index-banner-text {
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -388px;
}
.index-banner-text .text-logo {
  width: 776px;
  height: 117px;
  background: url("../img/index-banner-text-logo.png") no-repeat;
}
.index-banner-text .text-info {
  margin-top: 17px;
  text-align: center;
  color: #fff;
}
.index-banner-text .text-info .line {
  display: inline-block;
  width: 40px;
  border-top: 1px solid #fff;
  vertical-align: middle;
}
.index-banner-text .text-info .txt {
  margin: 0 26px;
}
/*menu区*/
.index-menu {
  position: relative;
  border-top: 4px solid #f34949;
}
.index-menu .menu-tips {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -78px;
  width: 156px;
  height: 75px;
  text-align: center;
  line-height: 65px;
  color: #fff;
  background: #f34949;
}
.index-menu .menu-tips:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 78px solid transparent;
  border-right: 78px solid transparent;
  border-bottom: 10px solid #fff;
}
.index-menu .menu-list {
  margin-top: 150px;
  color: #555;
  overflow: hidden;
}
.index-menu .menu-list ul {
  width: 1160px;
}
.index-menu .menu-item {
  float: left;
  width: 520px;
  margin-right: 60px;
  margin-bottom: 56px;
  position: relative;
}
.index-menu .menu-item .title, .index-menu .menu-item .line, {
  float: left;
}
.index-menu .menu-item .price {
  position: absolute;
  top: 10px;
  right: 5px;
}
.index-menu .menu-item .title {
  width: 230px;
  color: #555;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.index-menu .menu-item .comment {
  margin-top: 4px;
  color: #b7b7b7;
  font-size: 12px;
}
.index-menu .menu-item .line {
  margin-top: 10px;
  width: 192px;
  border-top: 1px solid #e3e1e1;
}
.index-menu .menu-more-btn {
  margin: 0 auto;
  width: 114px;
  height: 32px;
  padding-left: 16px;
  border: 1px solid #d7d5d5;
  font-size: 14px;
  line-height: 32px;
  color: #b7b7b7;
}
.index-menu .menu-more-btn .icon {
  display: inline-block;
  width: 11px;
  height: 7px;
  margin-left: 10px;
  background: url("../img/index-btn-icon.png") no-repeat;
}
/*菜单区*/
.index-panel {
  margin-top: 200px;
}
.index-panel-header h3 {
  float: left;
  margin-right: 48px;
  font-size: 20px;
  color: #3b3b3b;
  font-weight: normal;
}
.index-panel-header .line {
  float: left;
  margin-top: 10px;
  width: 200px;
  border-top: 1px solid #e5e3e3;
}
.index-panel-header .btn-group {
  font-size: 0;
  float: right;
}
.index-panel-header .btn {
  display: inline-block;
  margin-left: 11px;
  width: 9px;
  height: 9px;
  background: #dedede;
  border-radius: 50%;
}
.index-panel-header .active {
  background: #9b9b9b;
}
.index-panel-body {
  margin-top: 75px;
}
.index-food-list {
  overflow: hidden;
}
.index-food-list ul {
  width: 1160px;
}
.index-food-list .food-item {
  float: left;
  width: 230px;
  margin-right: 60px;
}
.index-food-list .food-item .banner {
  margin-bottom: 30px;
  height: 202px;
}
.index-food-list .food-item .name {
  color: #555;
  margin-bottom: 10px;
}
.index-food-list .food-item .price {
  float: right;
}
.index-food-list .food-item .star-bar {
  font-size: 0;
}
.index-food-list .food-item .star {
  display: inline-block;
  width: 12px;
  height: 13px;
  margin-right: 5px;
  background-image: url("../img/index-star.png");
  background-repeat: no-repeat;
}
.index-food-list .food-item .nostar {
  background-position: 0 -12px;
}
.index-pics {
  height: 380px;
  overflow: hidden;
}
.index-pics .pic-col {
  float: left;
}
.index-pics .pic-col-m {
  width: 353px;
}
.index-pics .pic-col-s {
  width: 287px;
}
.index-pics .pic-col-l {
  width: 460px;
}

Sandaydi: 2018-10-23 17:13:15

index.html

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>从PSD转化为HTML</title>    <link rel="stylesheet" href="css/reset.css" />    <link rel="stylesheet" href="css/common.css" />    <link rel="stylesheet" href="css/index.css" />  </head>  <body>  	<div class="box">    <!--头部区-->    <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 public-container">        <img src="img/demo1.png" alt="banner" />      </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>    <!--menu区-->    <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 href="#" 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 href="#" class="title">              <h4>Arcu pede enim justo.</h4>              <p class="comment">Tuna, Sweetcorn, Cheese.</p>            </a>            <div class="line"></div>            <div class="price">$45</div>          </li>          <li class="menu-item clearfloat">            <a href="#" class="title">              <h4>Metus varius laoreet.</h4>              <p class="comment">Chicken, mozzarella cheese, onions.</p>            </a>            <div class="line"></div>            <div class="price">$62</div>          </li>          <li class="menu-item clearfloat">            <a href="#" class="title">              <h4>Cras dapibussemper nisi.</h4>              <p class="comment">Pineapple, Minced Beef, Cheese.</p>            </a>            <div class="line"></div>            <div class="price">$32</div>          </li>          <li class="menu-item clearfloat">            <a href="#" class="title">              <h4>Donec sodales magna.</h4>              <p class="comment">Tuna, Sweetcorn, Cheese.</p>            </a>            <div class="line"></div>            <div class="price">$25</div>          </li>          <li class="menu-item clearfloat">            <a href="#" class="title">              <h4>Quam semper libero.</h4>              <p class="comment">Cheese, tomato, mushrooms, onions.</p>            </a>            <div class="line"></div>            <div class="price">$15</div>          </li>          <li class="menu-item clearfloat">            <a href="#" class="title">              <h4>Saugue velit cursus.</h4>              <p class="comment">Pineapple, Minced Beef, Cheese.</p>            </a>            <div class="line"></div>            <div class="price">$30</div>          </li>          <li class="menu-item clearfloat">            <a href="#" class="title">              <h4>Nam eget dui Etiam.</h4>              <p class="comment">Chicken, mozzarella cheese, onions.</p>            </a>            <div class="line"></div>            <div class="price">$35</div>          </li>        </ul>      </div>      <a href="#" class="menu-more-btn">        <span>load more</span>        <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="img/demo2.png" />              <div class="name">                <span>Fugiat nulla sint</span>                <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="img/demo22.png" />              <div class="name">                <span>Daute irure dolor</span>                <span class="price">$24</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="img/demo23.png" />              <div class="name">                <span>Officia deserunt mollit</span>                <span class="price">$60</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="img/demo24.png" />              <div class="name">                <span>Pim minim veniam</span>                <span class="price">$17</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 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-pics clearfloat">        <a href="#" class="pic-col pic-col-m">          <img src="img/demo3.png" alt="美食" />        </a>        <div class="pic-col pic-col-s">          <a class="pic-row"><img src="img/demo4.png" alt="" /></a>          <a class="pic-row"><img src="img/demo5.png" alt="" /></a>        </div>        <a href="#" class="pic-col pic-col-l">          <img src="img/demo6.png" alt="" />        </a>      </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>            <a href="tel:718-749-1714">718-749-1714</a>          </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">          <div class="footer-logo"></div>          <div class="footer-info">&copy;All Rights Reserved 2018.<br>Find More at PixelHint.com</div>        </div>      </div>    </div>    </div>  </body></html>

reset.css

body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, input, form, a, p, textarea {  margin: 0;  padding: 0;  font-family: helvetica;}ul, ol, li {  list-style: none;}a {  text-decoration: none;  color: #fff;  display: block;}img {  border: none;  display: block;}.clearfloat {  zoom: 1;}.clearfloat:after {  display: block;  clear: both;  content: "";  visibility: hidden;  height: 0;}

common.css

.box {  min-width: 1160px;}.public-header {  height: 110px;}.public-header .header-logo {  float: left;  margin-top: 40px;}.public-header .header-logo a {  height: 54px;  width: 182px;  background: url("../img/index-header-logo.png") no-repeat;}.public-header .header-nav {  float: right;  font-size: 14px;}.public-header .header-nav .item {  float: left;  margin-top: 44px;  margin-left: 50px;}.public-header .header-nav a {  color: #3b3b3b;}.public-header .header-nav a:hover {  text-decoration: underline;}.public-container {  position: relative;  margin: 0 auto;  width: 1100px;}.public-footer {  height: 218px;  margin-top: 200px;  padding-top: 100px;  background: #3b3b3b;}.public-footer .footer-col {  width: 230px;  float: left;  margin-right: 60px;  font-size: 16px;  color: #FFFFFF;  line-height: 1.8;}.public-footer .footer-col:last-child {  margin-right: 0;}.public-footer .footer-logo {  width: 182px;  height: 55px;  margin-top: -10px;  margin-bottom: 10px;  background: url("../img/index-footer-logo.png") no-repeat;}

index.css

/*广告区*/.index-banner {  position: relative;  background: rgba(0, 0, 0, .1);}.index-banner-bg {  height: 565px;  overflow: hidden;}.index-banner-bg img {  margin: 0 auto;}.index-banner-text {  position: absolute;  top: 200px;  left: 50%;  margin-left: -388px;}.index-banner-text .text-logo {  width: 776px;  height: 117px;  background: url("../img/index-banner-text-logo.png") no-repeat;}.index-banner-text .text-info {  margin-top: 17px;  text-align: center;  color: #fff;}.index-banner-text .text-info .line {  display: inline-block;  width: 40px;  border-top: 1px solid #fff;  vertical-align: middle;}.index-banner-text .text-info .txt {  margin: 0 26px;}/*menu区*/.index-menu {  position: relative;  border-top: 4px solid #f34949;}.index-menu .menu-tips {  position: absolute;  left: 50%;  top: 0;  margin-left: -78px;  width: 156px;  height: 75px;  text-align: center;  line-height: 65px;  color: #fff;  background: #f34949;}.index-menu .menu-tips:after {  position: absolute;  content: "";  left: 0;  bottom: 0;  width: 0;  height: 0;  border-left: 78px solid transparent;  border-right: 78px solid transparent;  border-bottom: 10px solid #fff;}.index-menu .menu-list {  margin-top: 150px;  color: #555;  overflow: hidden;}.index-menu .menu-list ul {  width: 1160px;}.index-menu .menu-item {  float: left;  width: 520px;  margin-right: 60px;  margin-bottom: 56px;  position: relative;}.index-menu .menu-item .title, .index-menu .menu-item .line, {  float: left;}.index-menu .menu-item .price {  position: absolute;  top: 10px;  right: 5px;}.index-menu .menu-item .title {  width: 230px;  color: #555;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}.index-menu .menu-item .comment {  margin-top: 4px;  color: #b7b7b7;  font-size: 12px;}.index-menu .menu-item .line {  margin-top: 10px;  width: 192px;  border-top: 1px solid #e3e1e1;}.index-menu .menu-more-btn {  margin: 0 auto;  width: 114px;  height: 32px;  padding-left: 16px;  border: 1px solid #d7d5d5;  font-size: 14px;  line-height: 32px;  color: #b7b7b7;}.index-menu .menu-more-btn .icon {  display: inline-block;  width: 11px;  height: 7px;  margin-left: 10px;  background: url("../img/index-btn-icon.png") no-repeat;}/*菜单区*/.index-panel {  margin-top: 200px;}.index-panel-header h3 {  float: left;  margin-right: 48px;  font-size: 20px;  color: #3b3b3b;  font-weight: normal;}.index-panel-header .line {  float: left;  margin-top: 10px;  width: 200px;  border-top: 1px solid #e5e3e3;}.index-panel-header .btn-group {  font-size: 0;  float: right;}.index-panel-header .btn {  display: inline-block;  margin-left: 11px;  width: 9px;  height: 9px;  background: #dedede;  border-radius: 50%;}.index-panel-header .active {  background: #9b9b9b;}.index-panel-body {  margin-top: 75px;}.index-food-list {  overflow: hidden;}.index-food-list ul {  width: 1160px;}.index-food-list .food-item {  float: left;  width: 230px;  margin-right: 60px;}.index-food-list .food-item .banner {  margin-bottom: 30px;  height: 202px;}.index-food-list .food-item .name {  color: #555;  margin-bottom: 10px;}.index-food-list .food-item .price {  float: right;}.index-food-list .food-item .star-bar {  font-size: 0;}.index-food-list .food-item .star {  display: inline-block;  width: 12px;  height: 13px;  margin-right: 5px;  background-image: url("../img/index-star.png");  background-repeat: no-repeat;}.index-food-list .food-item .nostar {  background-position: 0 -12px;}.index-pics {  height: 380px;  overflow: hidden;}.index-pics .pic-col {  float: left;}.index-pics .pic-col-m {  width: 353px;}.index-pics .pic-col-s {  width: 287px;}.index-pics .pic-col-l {  width: 460px;}

项目结构

图片地址

https://github.com/CruxF/IMOOC/tree/c0e07af685ed7bf09fbf799b81092514505942d9/HTML_CSS/PSD/img