zoukankan      html  css  js  c++  java
  • 简单的静态网页(宠物网)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>宠物网首页</title>
        <link href="CSS/PetPage.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="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
            <div class="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
            <div class="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
            <div class="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
            <div class="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
            <div class="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
            <div class="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
            <div class="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
            <div class="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
            <div class="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
            <div class="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
            <div class="don">
                <img src="Images/pic.jpg">
                <p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p>
                <a href="#">read more</a>
            </div>
        </div>
        <!--尾部-->
        <div id="footer">
            <h2>CONTACT US</h2>
            <ul>
                <li><img src="Images/fb.png"></li>
                <li><img src="Images/g+.png"></li>
                <li><img src="Images/rss.png"></li>
                <li><img src="Images/tw.png"></li>
            </ul>
        </div>
    </body>
    </html>
    /*使用外部字体*/
    @font-face {
        font-family: BebasNeue-webfont;
        src: url("../fonts/BebasNeue-webfont.ttf");
    }
    *{
        padding: 0px;
        margin: 0px;
    }
    a{
        text-decoration: none;
        color: black;
    }
    
    ul{
        list-style: none;
    }
    
    body{
        background: url("../Images/pattern.gif");
        font-family: "BebasNeue-webfont";
    }
    
    #header{
        background-color: red;
        height: 3px;
    }
    
    #nav{
        text-align: center;
        /*margin: 0px auto;*/
    }
    
    #nav ul{
        /*background-color: red;*/
        display: inline-block;
    }
    
    #nav ul li{
        float: left;
        /* 200px;*/
    
    }
    
    #nav ul li a{
        display: inline-block;
        color: white;
        margin-right: 20px;
        font-size: 40px;
        width: 200px;
        /*background-color: green;*/
        text-align: center;
    }
    #nav ul li a:hover{
        background-color: white;
        color: black;
    }
    #nav ul li a.select{
        background-color: white;
        color: black;
    }
    
    #list{
        background: white;
        text-align: center;
        margin-top: 30px;
    }
    
    #list .don{
        /*background-color: blue;*/
        width: 382px;
        display: inline-block;
        margin: 20px;
        text-align: left;
    }
    
    #list .don p{
        color: #999;
        font-family: "sans-serif";
    }
    
    #list .don a{
        background: #C0392B;
        color: white;
        display: inline-block;
        width: 170px;
        height: 40px;
        line-height: 40px;
        font-size: 30px;
        text-align: center;
    }
    
    #list .don a:hover{
        background: rgb(11,17,15);
    }
    
    #footer{
        text-align: center;
        margin-bottom: 30px;
    }
    
    #footer h2{
        color: white;
        margin: 5px 0px;
        font-size: 30px;
    }
    
    #footer ul li{
        display: inline-block;
        margin-right: 10px;
    }
    
    #footer ul li:hover{
        /**/
        opacity: 0.6;
    }
    
    /*响应式设计*/
    @media  screen and (max-1153px ){
    
        #nav ul li a{
            width: 150px;
            font-size: 30px;
        }
    }
    
    @media  screen and (max-873px ){
    
        #nav ul li a{
            width: 100px;
            font-size: 25px;
        }
    }
    
    @media  screen and (max-688px ){
    
        #nav ul li a{
            width: 80px;
            font-size: 20px;
        }
    }
  • 相关阅读:
    1091 Acute Stroke
    1092 To Buy or Not to Buy
    1093 Count PAT's
    1094 The Largest Generation
    1095 Cars on Campus
    1096 Consecutive Factors
    1097 Deduplication on a Linked List
    2.掌握Python基本数据类型,从python陌路人到熟人!
    Python基础语法,他其实很贵!
    某外企软件测试面试题整理(更新中)
  • 原文地址:https://www.cnblogs.com/lantu1989/p/5879475.html
Copyright © 2011-2022 走看看