                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /從 psd 到 html

老師，你的源碼css ,html能否也共享一下，我想對(duì)照看一下

慕絲6703952

2016-06-17

源自：從 psd 到 html 2-1

關(guān)注問(wèn)題我要回答

1439

操作

收起

2 回答

慕容7847281 回答被采納 +3 積分
2016-06-18

唔，剛剛有兩行代碼寫(xiě)做了，

<p>??All?Rights?Reserved?2014.<br>Find??More?at?Pixelhint.com</p></div>（這一行沒(méi)有div）
正確的：<p>??All?Rights?Reserved?2014.<br>Find??More?at?Pixelhint.com</p>

<p></p>France?Restaurant<br>68,?rue??de?la?Couronne<br>75002?PARIS<br>02.94.23.69.56</div>（這一行也有問(wèn)題）
正確的：<p>France?Restaurant<br>68,?rue??de?la?Couronne<br>75002?PARIS<br>02.94.23.69.56</p>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕絲6703952 提問(wèn)者

非常感謝！

2016-06-18 回復(fù) 有任何疑惑可以回復(fù)我~

#2

慕容7847281 回復(fù) 慕絲6703952 提問(wèn)者

加油吧，我也是才開(kāi)始學(xué)

2016-06-18 回復(fù) 有任何疑惑可以回復(fù)我~

慕容7847281
2016-06-18

這是我弄的html，我也跟著老師在寫(xiě)

<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>i我的第一個(gè)頁(yè)面</title>
	<link?rel="stylesheet"?href="css/index.css"/>
	<link?rel="stylesheet"?href="css/common.css"/>
	<link?rel="stylesheet"?href="css/reset.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="itme"><a?href="">Our?Story</a></li>
????????????<li?class="itme"><a?href="">Menu</a></li>
????????????<li?class="itme"><a?href=""></a>Reservations</li>
????????????<li?class="itme"><a?href=""></a>News</li>
????????????<li?class="itme"><a?href=""></a>Rviews</li>
????????</ul>
????
????</div>
??</div>
??<!--公共頭結(jié)束-->
??
??<div?class="index-banner"></div>
??<!--Banner結(jié)束-->
??
??<div?class="public-container?index-list"></div>
??<!--推薦列表結(jié)束-->
??
??<div?class="public-container?index-panel">
??	<div?class="index-panel-heder">Featured?Dishes</div>
??</div>
??<!--輪播面板結(jié)束-->
??
??<div?class="public-container?index-panel">
??	<div?class="index-panel-heder">Featured?Dishes</div>
??</div>
??<!--普通面板結(jié)束-->
??
??<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></p>France?Restaurant<br>68,?rue??de?la?Couronne<br>75002?PARIS<br>02.94.23.69.56</div>
????????</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>
????????????<p>??All?Rights?Reserved?2014.<br>Find??More?at?Pixelhint.com</p></div>
????????</div>
????</div>??
??</div>
??<!--公共底結(jié)束-->
??
</body>
</html>

這部分是reset.css的代碼

@charset?"utf-8";
/*?CSS?Document?*/

body,div,dl,dt,dd,dt,ul,li,h1,h2,h3,h4,h5,h6,input,form,a,p,textarea{
	margin:0;
	padding:0;
	font-family:Gotham,?"Helvetica?Neue",?Helvetica,?Arial,?sans-serif;
	}

ol,ul,li{
	list-style:none;
	}

a{
	text-decoration:none;
	display:block;
	color:#FFFFFF;
	}

img{
	border:none;
	display:block;
	}

.clearfloat{
	zoom:1;
	}

.clearfloat:after{
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
	}

現(xiàn)在這部分是common.css的代碼

@charset?"utf-8";
/*?CSS?Document?*/

.public-header{
	height:110px;
	}

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

	}
	
.public-header?.header-logo?a{
	width:182px;
	height:54px;
	background:url(../imges/index-hader-logo.png);	
	}

.public-header?.header-nav{
	float:right;
	font-size:14px;
	}
	
.public-header?.header-nav?.itme{
	float:left;
	margin-top:44px;
	color:#3b3b3b;
	margin-left:50px;
	}

.public-header?.header-nav?a{
	color:#3d3d3d;
	}

.public-header?.header-nav?a:hover{
	text-decoration:underline;
	}
	
.public-container{
	position:relative;
	margin:0?auto;
	width:1100px;
	}
	
.public-footer{
	height:218px;
	padding-top:100px;
	background-color:#3b3b3b;
	}
	
.public-footer?.footer-col{
	width:230px;
	float:left;
	margin-right:60px;
	font-size:16px;
	color:#fff;
	line-height:35px;
	}

.public-footer?.footer-col:last-child{
	margin-right:0;
	}
	
.public-footer?.footer-logo{
	width:182px;
	height:55px;
	margin-top:-10px;
	margin-bottom:12px;
	background-image:url(../imges/indx-footer-logo.png);
	}

我們可以互相參照一下，對(duì)比著看看

3 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答