                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /從 psd 到 html

老師能不能分享一下代碼？？？

qq_晨曦_78

2017-09-16

源自：從 psd 到 html 3-1

關注問題我要回答

684

操作

收起

2 回答

小黑點mc
2017-09-25

index.html

<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<link rel="stylesheet" href="css/common.css" >
? ?<link rel="stylesheet" href="css/reset.css" >
? ?<link rel="stylesheet" href="css/index.css" >
? ?<title>Title</title>

</head>
<body>
? ?<div>
? ? ? ?<div>
? ? ? ? ? ?<div><a href=""></a></div>
? ? ? ? ? ?<ul class="header-nav clearfloat">
? ? ? ? ? ? ? ?<li><a href="">Our Story</a></li>
? ? ? ? ? ? ? ?<li><a href="">Menu</a></li>
? ? ? ? ? ? ? ?<li><a href="">Reseractions</a></li>
? ? ? ? ? ? ? ?<li><a href="">News</a></li>
? ? ? ? ? ? ? ?<li><a href="">Rviews</a></li>
? ? ? ? ? ?</ul>

? ? ? ?</div>
? ?</div>
? ?<div>
? ? ? ?<div><img src="images/demo1.jpg" alt="banner"/></div>
? ? ? ?<div>
? ? ? ? ? ?<div></div>
? ? ? ? ? ?<p>
? ? ? ? ? ? ? ?<i></i>
? ? ? ? ? ? ? ?<span>resto restaurant home page website template</span>
? ? ? ? ? ? ? ?<i></i>
? ? ? ? ? ?</p>
? ? ? ?</div>
? ?</div>
? ?<div>
? ? ? ?<div>The Menu</div>
? ? ? ?<div class="public-container menu-list">
? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ? ? ?<a ?class="title" href="#">
? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ?<p>Cheese,tomato,mushrooms,onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?<div></div>
? ? ? ? ? ? ? ? ? ?<div>$50</div>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">
? ? ? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<p>Cheese,tomato,mushrooms,onions.</p>
? ? ? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ? ? ?<div></div>
? ? ? ? ? ? ? ? ? ?<div>$50</div>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">
? ? ? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<p>Cheese,tomato,mushrooms,onions.</p>
? ? ? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ? ? ?<div></div>
? ? ? ? ? ? ? ? ? ?<div>$50</div>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ? ? ?<a ?class="title" href="#">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p>Cheese,tomato,mushrooms,onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ? ? ?<div></div>
? ? ? ? ? ? ? ? ? ?<div>$50</div>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ? ? ?<a href="#">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p>Cheese,tomato,mushrooms,onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ? ? ?<div></div>
? ? ? ? ? ? ? ? ? ?<div>$50</div>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ? ? ?<a href="#">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p>Cheese,tomato,mushrooms,onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ? ? ?<div></div>
? ? ? ? ? ? ? ? ? ?<div>$50</div>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ? ? ?<a href="#">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p>Cheese,tomato,mushrooms,onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ? ? ?<div></div>
? ? ? ? ? ? ? ? ? ?<div>$50</div>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ? ? ?<a href="#">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p>Cheese,tomato,mushrooms,onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ? ? ?<div></div>
? ? ? ? ? ? ? ? ? ?<div>$50</div>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ?</ul>
? ? ? ?</div>
? ? ? ?<a href="#">load more <span>|</span><span>﹀</span></a>
? ?</div>
? ?<div class="public-container index-panel">
? ? ? ?<div class="index-panel-header clearfloat">
? ? ? ? ? ?<h3>FEATURED DISHS</h3>
? ? ? ? ? ?<div></div>
? ? ? ? ? ?<div>
? ? ? ? ? ?<a href="" class="btn active"></a>
? ? ? ? ? ?<a href=""></a>
? ? ? ? ? ?<a href=""></a>
? ? ? ? ? ?<a href=""></a>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ? ? ?<div class="index-panel-body index-food-list">
? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ?<li>
? ? ? ? ? ? ? ? ? ?<a href="#">
? ? ? ? ? ? ? ? ? ? ? ?<img src="images/demo2.jpg">
? ? ? ? ? ? ? ? ? ? ? ?<div>Fugiat nulla sint <span>$30</span></div>
? ? ? ? ? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span class="star nostar"></span>
? ? ? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li>
? ? ? ? ? ? ? ? ? ?<a href="#">
? ? ? ? ? ? ? ? ? ? ? ?<img src="images/demo2.jpg">
? ? ? ? ? ? ? ? ? ? ? ?<div>Fugiat nulla sint <span>$30</span></div>
? ? ? ? ? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span class="star nostar"></span>
? ? ? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li>
? ? ? ? ? ? ? ? ? ?<a href="#">
? ? ? ? ? ? ? ? ? ? ? ?<img src="images/demo2.jpg">
? ? ? ? ? ? ? ? ? ? ? ?<div>Fugiat nulla sint <span>$30</span></div>
? ? ? ? ? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span class="star nostar"></span>
? ? ? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li>
? ? ? ? ? ? ? ? ? ?<a href="#">
? ? ? ? ? ? ? ? ? ? ? ?<img src="images/demo2.jpg">
? ? ? ? ? ? ? ? ? ? ? ?<div>Fugiat nulla sint <span>$30</span></div>
? ? ? ? ? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<span></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></div>
? ? ? ? ? ?</div>
? ? ? ?<div class="index-panel-body index-pics">
? ? ? ? ? ?<a class="pic-col pic-col-m"><img src="images/demo3.png"></a>
? ? ? ? ? ?<div class="pic-col pic-col-s">
? ? ? ? ? ? ? ?<a><img src="images/demo4.png"></a>
? ? ? ? ? ? ? ?<a><img src="images/demo5.png"></a>
? ? ? ? ? ?</div>
? ? ? ? ? ?<a class="pic-col pic-col-l"><img src="images/demo6.png"></a>
? ? ? ? ? ?</div>
? ? ? ?</div>

? ?<div>
? ? ? ?<div>
? ? ? ? ? ?<div>
? ? ? ? ? ? ? ?<p>New York Restaurant<br>3926 Anmoore Road<br>New York,NY10014<br><a href="718-749-1714"></a>718-749-1714</p>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div>
? ? ? ? ? ? ? ?<p>France Restaurant<br>68, rue de la Couronne<br>75002PARIS<br>02.94.23.69.56</p>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div>
? ? ? ? ? ? ? ?<a href="">Blog</a>
? ? ? ? ? ? ? ?<a href="">Careers</a>
? ? ? ? ? ? ? ?<a href="">Privacy Policy</a>
? ? ? ? ? ? ? ?<a href="">Contact</a>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="footer-col footer-col-nor">
? ? ? ? ? ? ? ?<div></div>
? ? ? ? ? ? ? ?<div>?All Rigths Reserved 2014<br>Find More at Pixelhint.com</div>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
</body>
</html>

1 回復有任何疑惑可以回復我~

收起回答

小黑點mc
2017-09-25

reset.css

*{
? ?margin:0;
? ?padding: 0;
}
ul,li,ol{
? ?list-style: none;
}
a{
? ?text-decoration: none;
? ?display: block;
? ?color: #fff;
}
img{
? ?border: none;
? ?display: block;
}
.clearfloat{ ? /*清除浮動*/
? ?zoom: 1; ?/*觸發IE事件*/
}
.clearfloat:after{
? ?display: block;
? ?clear: both;
? ?content: "";
? ?visibility: hidden; ? ?/*將元素隱藏*/
? ?height: 0;
}

index.css

/*banner圖樣式*/
.index-banner{
? ?position: relative;
? ?background: #b3b3b3;
}
.index-banner-bg{
? ?height: 570px;
? ?overflow: hidden;
? ?width: 100%;
}
.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("../images/index-text-logo.png") no-repeat;
}
.index-banner-text .text-info{
? ?margin-top: 18px;
? ?text-align: center;
? ?color: #fff;
}
.index-banner-text .text-info .line{
? ?display: inline-block;
? ?width: 40px;
? ?border-top: solid #fff 1px;
? ?vertical-align: middle;
? ?*margin-top:22px; ? /*只在IE7下有效*/
}
.index-banner-text .text-info .text{
? ?margin: 0 26px;
}
/*菜單*/
.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; ? /*以下三條語句為設置menu倒三角*/
? ?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;
}
.index-menu .menu-item .title,.index-menu .menu-item .line{
? ?float: left;
}
.index-menu .menu-item .price{
? ?float: right;
? ?color: #747474;
}
.index-menu .menu-item .title{
? ?width: 230px;
? ?color: #555555;
? ?overflow: hidden;
? ?white-space: nowrap; ?/*段落中的文本不換行*/
? ?text-overflow: ellipsis; /*當對象內文本溢出時顯示省略標記*/
}
.index-menu .menu-item .comment{
? ?margin-top: 11px;
? ?color: #b7b7b7;
? ?font-size: 12px;
}
.index-menu .menu-item .line{
? ?width: 192px;
? ?margin-top: 10px;
? ?border-top: 1px solid #e3e1e1;
}
.index-menu .menu-more-btn{
? ?margin: 0 auto;
? ?width: 133px;
? ?padding-left: 16px;
? ?padding-top: 11px;
? ?padding-bottom: 10px;
? ?border: 1px solid #d7d5d5;
? ?line-height: 32px;
? ?color: #b7b7b7;
}
.index-menu .menu-more-btn .icon{
? ?display: inline-block;
? ?position: absolute;
? ?width: 11px;
? ?height: 7px;
? ?margin-left: 11px;
? ?padding-top: 3px;
? ?margin-right: 11px;
? ?/*background: url("") no-repeat;*/
}
.index-panel{
? ?margin-top: 200px;
}
.index-panel-header h3{
? ?float: left;
? ?color: #3b3b3b;
? ?font-size: 20px;
? ?font-weight: normal;
? ?margin-right: 48px;
}
.index-panel-header .line{
? ?float: left;
? ?width: 200px;
? ?margin-top: 11px;
? ?border-top: 1px solid #e5e3e3;
}
.index-panel-header .btn-group{
? ?font-size: 0; ?/*可清除inline-block ?4px的間距*/
? ?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 .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{
? ?margin-bottom: 10px;
? ?color: #555;
}
.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: 12px;
? ?margin-right: 5px;
? ?background-image: url("../images/index-star.png");
? ?background-repeat: no-repeat;
}
.index-food-list .food-item .nostar{
? ?background-position: 0 -11px;
}
.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;
}

common.css

.public-header{
? ?height: 110px;
}
.public-header .header-logo{
? ?float: left;
? ?margin-top: 40px;

}
.public-header .header-logo a{
? ?height: 54px;
? ?width: 182px;
? ?background: url("../images/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{
? ?float: left;
? ?width: 230px;
? ?margin-right: 60px;
? ?color: #fff;
? ?font-size: 16px;
}
.public-footer .footer-col-nor{
? ?margin-right: 0;
}
.public-footer .footer-logo{
? ?height: 55px;
? ?width: 182px;
? ?margin-top: -15px;
? ?margin-bottom: 12px;
? ?background: url("../images/index-footer-logo.png") no-repeat;

}

0 回復有任何疑惑可以回復我~

收起回答

舉報

0/150

提交

取消

從 psd 到 html

參與學習 105472 人
解答問題 466 個

教你把PSD設計稿轉化成HTML，用案例來講解基本流程

進入課程

本課相似問答

2 回答老師能不能將完整的代碼也分享一份出來??？

2 回答老師寫的源碼能不能下載？

2 回答老師，你的源碼css ,html能否也共享一下，我想對照看一下

3 回答誰下載了psd圖？求分享一下

2 回答誰有photoshop的安裝包，能不能發給我一下

搜索更多本課相關問答

老師能不能分享一下代碼？？？

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

老師能不能分享一下代碼？？？

2 回答

本課相似問答

老師能不能分享一下代碼？？？

老師能不能分享一下代碼？？？

老師能不能分享一下代碼？？？