码迷，mamicode.com
首页 > 其他好文 > 详细

静态页面

时间：2018-06-10 12:11:35      阅读：171      评论：0      收藏：0      [点我收藏+]

标签：rendis   card   ati   tag   site   uos   clean   oct   tran   

<!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;
}

静态页面

标签：rendis   card   ati   tag   site   uos   clean   oct   tran   

原文地址：https://www.cnblogs.com/yehongrun/p/9162287.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！