                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /从 psd 到 html

老师，你的源码css ,html能否也共享一下，我想对照看一下

慕丝6703952

2016-06-17

源自：从 psd 到 html 2-1

关注问题我要回答

1391

操作

收起

2 回答

慕容7847281 回答被采纳 +3 积分
2016-06-18

唔，刚刚有两行代码写做了，

<p>© All Rights Reserved 2014.<br>Find  More at Pixelhint.com</p></div>（这一行没有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>（这一行也有问题）
正确的：<p>France Restaurant<br>68, rue  de la Couronne<br>75002 PARIS<br>02.94.23.69.56</p>

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

收起回答

慕丝6703952 提问者

非常感谢！

2016-06-18 回复有任何疑惑可以回复我~

慕容7847281 回复慕丝6703952 提问者

加油吧，我也是才开始学

2016-06-18 回复有任何疑惑可以回复我~

慕容7847281
2016-06-18

这是我弄的html，我也跟着老师在写

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>i我的第一个页面</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>
  <!--公共头结束-->
  
  <div class="index-banner"></div>
  <!--Banner结束-->
  
  <div class="public-container index-list"></div>
  <!--推荐列表结束-->
  
  <div class="public-container index-panel">
  	<div class="index-panel-heder">Featured Dishes</div>
  </div>
  <!--轮播面板结束-->
  
  <div class="public-container index-panel">
  	<div class="index-panel-heder">Featured Dishes</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></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>
  <!--公共底结束-->
  
</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;
	}

现在这部分是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);
	}

我们可以互相参照一下，对比着看看

3 回复有任何疑惑可以回复我~

收起回答