H5笔记（宠物网）

index.css

/*使用外部字体*/
@font-face {
    font-family: BebasNeue-webfont;
    src: url("../fonts/BebasNeue-webfont.ttf");
}

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0px;
    margin: 0px;
}

a{
    text-decoration: none;
    color: black;
}

ul{
    list-style: none;
}

body{
    background: url("../img/pattern.gif");
    font-family: "BebasNeue-webfont";
}

#header{
    background-color: red;
    height: 3px;
}

#nav{
   text-align: center;
}

#nav ul{
    display: inline-block;
}

#nav ul li{
    float: left;
}

#nav ul li a{
    display: inline-block;
    color: white;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 10px;
    width: 200px;
    font-size: 40px;
    text-align: center;
}

#nav ul li a:hover{
    background: white;
    color: black;
}

#nav ul li a.select{
    background: white;
    color: black;
}

#list{
    background: white;
    text-align: center;
    margin-top: 30px;
}

#list .dom{
    width: 382px;
    display: inline-block;
    margin: 20px;
    text-align: left;
}

#list .dom p{
    color: #999;
    font-family: "sans-serif";
    margin-bottom: 5px;
}

#list .dom a{
    background: #C0392B;
    color: white;
    display: inline-block;
    width: 170px;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    text-align: center;
}

#list .dom a:hover{
    background:rgb(11,17,15);
}

#footer{
    text-align: center;
    margin-bottom: 20px;
}

#footer h2{
    color: white;
    margin: 8px 0px;
    font-size: 30px;
}

#footer ul li{
    display: inline-block;
    margin-right: 10px;
}

#footer ul li:hover{
    /*不透明度 0-1*/
    opacity: 0.6;
}

/*响应式设计,监听屏幕的变化,当宽度和高度产生变化的时候,在这里面重写样式*/
@media screen and (max-width:1153px){
    #nav ul li a{
        width: 150px;
        font-size: 30px;
    }


}

@media screen and (max-width:873px){
    #nav ul li a{
        width: 100px;
        font-size: 25px;
    }
}

@media screen and (max-width:688px){
    #nav ul li a{
        width: 80px;
        font-size: 20px;
    }
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>宠物网首页</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
   <!--头部-->
   <div id="header">
   </div>
   <!--导航-->
   <div id="nav">
       <ul>
           <li><a href="#" class="select">home</a></li>
           <li><a href="#">about us</a></li>
           <li><a href="#">servces</a></li>
           <li><a href="#">gallery</a></li>
           <li><a href="#">contact</a></li>
       </ul>
   </div>
   <!--列表-->
   <div id="list">
       <!--宠物-->
      <div class="dom">
          ![](img/pic.jpg)
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
          <a href="#">read more</a>
      </div>
       <div class="dom">
           ![](img/pic2.jpg)
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           ![](img/pic.jpg)
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           ![](img/pic1.jpg)
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           ![](img/pic.jpg)
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           ![](img/pic.jpg)
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           ![](img/pic2.jpg)
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           ![](img/pic1.jpg)
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           ![](img/pic2.jpg)
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           ![](img/pic1.jpg)
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           ![](img/pic.jpg)
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           ![](img/pic1.jpg)
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
   </div>
   <!--尾部-->
   <div id="footer">
       <h2>contact us</h2>
       <ul>
           <li>![](img/fb.png)</li>
           <li>![](img/g+.png)</li>
           <li>![](img/rss.png)</li>
           <li>![](img/tw.png)</li>
       </ul>
   </div>
</body>
</html>

H5笔记（宠物网）

推荐阅读更多精彩内容