问答详情
源自:2-1 样式文件和初始化

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

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

提问者:慕丝6703952 2016-06-17 22:04

个回答

  • 慕容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>


  • 慕容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);
    	}

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