• 简单的静态网页(宠物网)


    <!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;
        }
    }
  • 相关阅读:
    ThreadPoolExecutor线程池参数设置技巧
    函数式接口
    Mac下进入MySQL命令行
    Java8 特性
    Java8 :: 用法 (JDK8 双冒号用法)
    事务传播
    新版IDEA配置tomcat教程(2018)
    Java8 Map的compute()方法
    Spring 普通类与工具类调用service层
    简单工厂(三)——JDK源码中的简单工厂
  • 原文地址:https://www.cnblogs.com/lantu1989/p/5879475.html
Copyright © 2020-2023  润新知