静态页面

Posted yehongrun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了静态页面相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./lesson1.css">
    <title>Document</title>
</head>

<body>

    <header>
        <ul>
            <li>
                <img src="./images/menu.png" >
            </li>
            <li>
                <img src="./images/home-onepage-style1_03.png" >


            </li>
            <li>
                <img src="./images/email.png" >
            </li>


        </ul>
        <div class="demo">
            <p>
                <img src="./images/home-onepage-style1_030.png" >
            </p>
            <p>
                Web Development - ios Developer - lnternet Marketer - Your Freelance
                <!-- <img src="./images/home-onepage-style1_013.png" > -->
            </p>
            <p>
                <img src="./images/home-onepage-style1_031.png" >
            </p>
        </div>

    </header>

    <!-- 白色背景那块 -->
    <div class="box">
        <!-- 上 -->
        <div class="box-top">
            <div>
                <p>
                    <img src="./images/phone_03.jpg" >
                </p>

                <p>Branding Desgn</p>
            </div>
            <p class="line1"></p>
            <div>
                <p>
                    <img src="./images/phone_05.jpg" >
                </p>

                <p class="font-color">Web Development</p>
            </div>
            <p class="line2"></p>
            <div>
                <p>
                    <img src="./images/phone_07.jpg" >
                </p>

                <p>Internet Marketing</p>
            </div>
            <p class="line3"></p>
            <div>
                <p>
                    <img src="./images/phone_09.jpg" >
                </p>

                <p>IOS Development</p>
            </div>
            <!-- <p class="line"></p> -->
        </div>

        <!-- 下 -->
        <div class="box-bottom">
            <p>
                <img src="./images/home-onepage-style1_03_03.png" >
            </p>

            <div>
                <img class="img-top" src="./images/home-onepage-style1_033.png" >
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, doloremque! Numquam enim rem error
                    quam provident aliquam similique nemo perferendis, quidem explicabo, minus distinctio hic eligendi, perspiciatis
                    vero ex reiciendis?
                </p>
                <img class="img-bottom" src="./images/home-onepage-style1_032.png" >
            </div>

        </div>

    </div>

    <!-- 蓝色背景那块 加上 浅红色 -->
    <div class="box-blue">
        <div class="bc-blue">
            <p class="head-img">
                <img src="./images/home-onepage-style1_034.png" >
            </p>
            <div class="text">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus tenetur atque rem, sint architecto laborum exercitationem
                    iusto omnis blanditiis hic alias, ipsum eligendi perspiciatis voluptate assumenda nisi, voluptates a?
                    Minus.Hic rerum eos praesentium accusamus quos ab consectetur, vel reprehenderit eum quaerat tempora
                    doloremque optio minus itaque. Nulla mollitia exercitationem eius, qui, voluptas harum molestiae voluptatem
                    odit rerum aut obcaecati.
                </p>

                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus tenetur atque rem, sint architecto laborum exercitationem
                    iusto omnis blanditiis hic alias, ipsum eligendi perspiciatis voluptate assumenda nisi, voluptates a?
                    Minus.Hic rerum eos praesentium accusamus quos ab consectetur, vel reprehenderit eum quaerat tempora
                    doloremque optio minus itaque. Nulla mollitia exercitationem eius, qui, voluptas harum molestiae voluptatem
                    odit rerum aut obcaecati.
                </p>
            </div>
        </div>

        <!-- 浅红色 -->
        <div class="bc-red">
        </div>
    </div>

    <!-- Recent Works -->
    <div class="works">
        <div class="recent">
            <img src="./images/home-onepage-style1_03_13.png" >
        </div>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, eum voluptatem suscipit numquam, quam dolores maiores necessitatibus
            sed, ipsum unde dolore fugit nobis nisi aliquam earum tenetur commodi sit quasi!Illum nam tenetur rem ab fugit
            repellat consequatur! Consectetur illo assumenda quis pariatur dignissimos tenetur nobis explicabo sapiente sequi
            dolore, fugit ipsam veniam incidunt autem quisquam, non praesentium, beatae in?
        </p>
        <div class="button">
            <i>ALL</i>
            <i>BRANDING</i>
            <i>ILLUSTRAIONS</i>
            <i>WEB DESIGN</i>
        </div>
    </div>

    <!-- 两行图片 -->
    <ul class="lesson">
        <li>
            <img src="./images/mid_bottom_0007_business-card2.png" >
        </li>
        <li>
            <img src="./images/mid_bottom_0006_food-website.png" >
            <img class="li-img2" src="./images/home-onepage-style11_03.png" >

        </li>
        <li>
            <img src="./images/mid_bottom_0005_business-card.png" >
        </li>
        <li>
            <img src="./images/mid_bottom_0004_flat-phone.png" >
        </li>
        <li>
            <img src="./images/mid_bottom_0003_sign-board.png" >
        </li>
        <li>
            <img src="./images/mid_bottom_0002_branding.png" >
        </li>
        <li>
            <img src="./images/mid_bottom_0001_phone-mockup2.png" >
        </li>
        <li>
            <img src="./images/mid_bottom_0000_diamond.png" >
        </li>
    </ul>

    <!-- Dan Cederholm -->
    <div class="dan">
        <div>
            <div class="dan2">
                <img src="./images/other_0003_images-副本.png" >
                <p class="cederholm">Dan Cederholm</p>
            </div>
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus neque enim earum dolor pariatur expedita explicabo
                culpa odit mollitia corporis, asperiores molestiae animi ab laudantium!
            </p>
            <img src="./images/home-onepage-style1_13.png" >
        </div>
    </div>

    <!-- contact  me-->
    <div class="contact">
        <div>
            <div>
                <img src="./images/home-onepage-style1_0016_Contact-Me.png" >
            </div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem cupiditate ut omnis? Ipsam minima laudantium
                at necessitatibus incidunt, ducimus accusamus est inventore.
            </p>
        </div>
        <div class="demo2">
            <div class="demo2-first-div">
                <form action="#">
                    <p>
                        <input class="input-name" type="text" value="Name">
                    </p>
                    <p>
                        <input class="input-emall" type="text" value="Emall">
                    </p>
                    <p>
                        <input class="input-subject" type="text" value="Subject">
                    </p>
            </div>

            <div class="demo2-last-div">
                <textarea rows="10" cols="30">Message</textarea>
            </div>
            <button>
                <span>Submit</span>
                <img src="./images/other_0001_sending-copy.png" >
            </button>
            </form>
        </div>
    </div>

    <!-- VIEW  GOOGLE  MAP -->
    <div class="view">
        <p>VIEW GOOGLE MAP</p>
        <div class="bc-img-blue">
            <ul>
                <li>
                    <img src="./images/home-onepage-style1_0000_Shape-8.png" >
                </li>
                <li>
                    <img src="./images/home-onepage-style1_0001_Instagram-icon.png" >
                </li>
                <li>
                    <img src="./images/home-onepage-style1_0004_Behance-icon.png" >
                </li>
                <li>
                    <img src="./images/home-onepage-style1_0006_g.png" >
                </li>
                <li>
                    <img src="./images/home-onepage-style1_0007_Shape-164.png" >
                </li>
                <li>
                    <img src="./images/home-onepage-style1_0008_icon-copy-5.png" >
                </li>
            </ul>
        </div>

        <div>
            <p>Copyright &copy; 2014 Clean Flat Style.All Rights Reserved</p>
            <p>Terms &amp; Conditions - Disclaimer - Privacy Poticy </p>
        </div>
    </div>
</body>

</html>
 
 
header{
    background-image: url(‘./images/home-onepage-style1_01.jpg‘);
    background-size: 100%;
    height: 736px;
}

header>ul{
    width: 1100px;
    margin: 0px auto;
    padding-top: 66px;
    display: flex;
    justify-content: space-between;
}
header>ul>li:nth-child(2){
    padding-top: 133px;
}

.demo{
    text-align: center;
    padding-top: 30px;
}

.demo>p:nth-child(2){
    margin-top: 26px;
    margin-bottom: 75px;
    color: #fff;
    font-size: 16px;
}


/* 第二板块 */
.box{
    height: 739px;
    background-color: #fff;
    font-size: 16px;
}

.box-top {
    height: 230px;
    border-bottom: 1px solid #c1c1c1;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 70px;
}

.box-top>div{
    margin-right: 110px;
}

.box-top>div>p{
    text-align: center;
}

.line1,
.line2,
.line3{
    position: relative;
    top: -24px;
    height: 150px;
    left: -48px;
    border-right: 1px solid black;
    transform: rotate(90deg);
}

.line2{
    left: -56px;
    height: 160px;
    top: -30px;
}
.line3{
    left: -57px;
    top: -24px;
}
.font-color{
    color: red;
    font-weight: bold;
}


.box-bottom{
    width: 1133px;
    height: 430px;
    margin: 0 auto;
    display: flex;
    line-height: 2;
    margin-bottom: 10px;
}
.box-bottom>p{
    margin-right: 82px;
}

.img-top{
    margin-top: 64px;
    margin-bottom: 24px;
}

.img-bottom{
    margin-top: 40px;
}

/* 蓝色那块 和浅红色那块 */
.box-blue{
    /* height: 606px; */
}
.bc-blue{
    background: url(‘./images/home-onepage-style1_021.png‘),no-repeat;
    background-size: 100%;
    height: 490px;
}

.bc-red{
    background: url(‘./images/home-onepage-style1_022.png‘),no-repeat;
    background-size: 100%;
    height: 120px;
}

.head-img{
    padding-top: 96px;
    width: 174px;
    margin: 0px auto;
    margin-bottom: 58px;
}

.text{
    width: 963px;
    margin: 0 auto;
    color: #fff;
    font-size: 14px;
}

.text>p:first-child{
    margin-bottom: 25px;
}


/* Recent Works */
.works{
    height: 436px;
}
.recent{
    width: 60px;
    margin: 0px auto;
    margin-top: 106px;
}

.works>p{
    width: 828px;
    margin: 0px auto;
    margin-top: 38px;
    font-size: 14px;
    line-height: 2;
    padding-bottom: 65px;
}

.button{
    width: 574px;
    margin: 0 auto;
    display: flex;
}
.button>i{
    margin-right: 10px;
}

.button>i:first-child{
    display: inline-block;
    width: 90px;
    height: 46px;
    color: #fff;
    background-color: red;
    border: none;
    text-align: center;
    line-height: 46px;
    border-radius: 5px;
}

.button>i:nth-child(2){
    width: 130px;
    height: 46px;
    border: 2px solid black;
    font-size: 16px;
    text-align: center;
    line-height: 46px;
    box-sizing: border-box;
}

.button>i:nth-child(3){
    width: 130px;
    height: 46px;
    border: 2px solid black;
    font-size: 16px;
    text-align: center;
    line-height: 46px;
    box-sizing: border-box;
}

.button>i:nth-child(4){
    width: 130px;
    height: 46px;
    border: 2px solid black;
    font-size: 16px;
    text-align: center;
    line-height: 46px;
    box-sizing: border-box;
}

/* 两行图片 */
.lesson{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.lesson>li{
    width: 25%;
}
.lesson>li>img{
    width: 100%;
    height: 100%;
}

.lesson>li:nth-child(2){
    position: relative;
    overflow: hidden;
}
.lesson>li:nth-child(2)>img:nth-child(2){
    position: absolute;
    top: 0px;
    opacity:0.8;
}

/* Dan Cederholm */
.dan{
    height: 400px;
    background-image: url(‘./images/other_0000_图层-2.png‘);
    background-size: 100%;
    color: #fff;
    text-align: center;
    line-height: 2;
}
.dan>div{
    width: 820px;
    margin: 0 auto;
    padding-top: 60px;
}
.dan>div>p{
    margin-bottom: 20px;
}

.cederholm{
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.dan2{
    width: 190px;
    margin: 0 auto;
}

/* contact  me */
.contact{
    height: 568px;
    font-size: 16px;
    text-align: center;
    margin-bottom: 100px;
}

.contact>div:first-child{
    width: 773px;
    margin: 0 auto;
    padding-top: 67px;
}
.contact>div:first-child>div{
    text-align: center;
}

.contact>div:first-child>p{
    margin-top: 42px;
}

.demo2  input{
    width: 560px;
    height: 40px;
    margin-bottom: 20px;
    position: relative;
}

.demo2{
    width: 1147px;
    margin: 0 auto;
    margin-top: 43px;
    display:flex;
    position: relative;
}
textarea{
    width: 550px;
    height: 172px;
    margin-left: 30px;
}
button{
    width: 178px;
    height: 54px;
    position: absolute;
    top: 240px;
    left: 45%;
    background-color: red;
    border: none;
    font-size: 18px;
    color: #fff;
}
button>span{
    margin-right: 30px;
}

.demo2-first-div{
    width: 560px;
}



/* VIEW  GOOGLE  MAP */
.view{
    background-image: url(‘./images/home-onepage-style1_0010_Rectangle-26.png‘);
    background-size: 100%;
    height: 60px;
}
.view>p{
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    color: #fff;
}
.bc-img-blue{
    background-image: url(‘./images/home-onepage-style1_0014_Rectangle-25.png‘);
    height: 140px;
}
.bc-img-blue>ul{
    width: 548px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    line-height: 140px;
}
.view>div:last-child{
    height: 70px;
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    line-height: 70px;
}






































































以上是关于静态页面的主要内容，如果未能解决你的问题，请参考以下文章

asp 如何生成静态页面 具体步骤如何?

页面静态化

ASP.NET MVC 如何访问html静态页面？

node部署静态页面；node上线静态页面

站点用的是discuz，在静态页面上使用动态参数,会造成spider多次和重复抓取

纯静态页面才能达到网站制作静态化的真正目的