谁有全套代码，跟着敲太痛苦了
谁有全套代码，跟着敲太痛苦了
3 回答
课程代码
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">©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;
}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">©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
举报
0/150
提交
取消
