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;
        }
    }
  • 相关阅读:
    "use strict"
    jquery.is()
    $.proxy
    windows检测文件夹是否更新.bat脚本 windows循环检查文件夹
    linux下串口多线程通信 ,多串口收发数据错乱问题解决办法
    linux串口配置详解
    linux socket 程序被ctrl+c或者异常终止,提示:bind error:Address already in use,解决办法
    linux下包含自定义.c文件 调用报错未定义解决办法
    linux下对一个文件写完马上读取,读到空白
    linux 下socket通信,client断开service退出解决办法
  • 原文地址:https://www.cnblogs.com/lantu1989/p/5879475.html
Copyright © 2011-2022 走看看