美文网首页HTML/CSS/JavaScript
H5笔记(宠物网)

H5笔记(宠物网)

作者: 阿凡提说AI | 来源:发表于2017-07-16 14:43 被阅读9次

    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笔记(宠物网)

        本文链接:https://www.haomeiwen.com/subject/mpwtkxtx.html