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

首页课程实战体系课手记专栏慕课教程

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

来源：2-1 样式文件和初始化

慕丝6703952

2016-06-17 22:04

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

写回答关注

2回答

慕容7847281: 2016-06-18 05:25:11

已采纳

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

<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>

2 0

慕容7847... 回复慕丝6703...

加油吧，我也是才开始学

2016-06-18 16:14:10

共 2 条回复 >

慕容7847281: 2016-06-18 05:19:01

这是我弄的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);
	}

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

0 3

从 psd 到 html

教你把PSD设计稿转化成HTML，用案例来讲解基本流程

105471 学习 · 410 问题

查看课程

相似问题

老师你好，有代码文件吗？我想对照一下。

回答 1

老师能不能将完整的代码也分享一份出来啊？

回答 2

有写好的没？共享一份

回答 2

老师写的源码能不能下载？

回答 2

谁下载了psd图？求分享一下

回答 3

打开慕课网App查看更多内容