Day22 CSS版型设计完成网页!

前面的几篇文章已经让我们可以完成一个属於你的网页!包括从页首、网页内容、页尾、排版,这些所教的工具如果都学起来融会贯通後。就可以完成一个有质感的网页了!

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .header img{
            width: 80px;
            height: 100%;
        }

        .header{
            display: flex;
            background-color: rgb(184, 176, 176);
            
        }

        .header a{
            text-decoration: none;
        }

        .header nav{
            display: flex;
            width: 100%;
            justify-content: flex-end;
            line-height: 25px;
            font-size: 0px;
        }

        .header nav a{
            display: inline-block;
            color: blue;
            font-size: 16px;
            padding: 10px;
            
        }

        .header nav a:hover{
            background-color: black;
        }

        .banner img{
            width: 100%;
            height: 300px;
        }

        .banner{
            position: relative;
        }

        .banner .title p{
            width: 100%;
            position: absolute;
            display: flex;
            justify-content: center;
            top: 70px;
            font-size: 50px;
        }

        .box{
            display: inline-block;
            position: absolute;
            top: 200px;
            left: 620px;
            
        }
        .search{
            width: 300px;
            vertical-align: middle;
            white-space: nowrap;
            position: relative;

        }

        .search input#search{
            width: 300px;
            height: 50px;
            background: #ccced3;
            border: none;
            font-size: 10pt;
            float: left;
            color: #63717f;
            padding-left: 45px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        .search .icon{
        position: absolute;
        top: 50%;
        margin-left: 17px;
        margin-top: 17px;
        z-index: 1;
        color: #4f5b66;
        }

        .bannerproject a{
            text-decoration: none;
            padding-right: 10px;
            margin: 5px;
        }

        .article .wrap{
            display: flex;
            width: 100%;
            justify-content: center;
        }

        .article .wrap .item{
            width: 300px;
            margin: 20px;
            text-align: center;
            box-shadow: 1px 5px 5px grey;
        }

        .article p{
            padding: 10px;
        }

        .article h1{
            font-size: 40px;
            text-align: center;
            margin: 20px;
        }

        .section{
            
            background-color: rgb(216, 216, 204);
        }

        .section .wrap{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;
            margin-left: 25px;
            
        }

        .section .wrap .item{
            width: 400px;
            
        }

        .section .wrap img{
            width: 100%;
            height: 100%;
            vertical-align: top ;
        }

        .section .text{
            padding: 0px 10px;
            text-align: center;
        }

        .section h1{
            font-size: 30px;
        }

        .server .wrap{
            display: flex;
            justify-content: center;
            align-items: center;
            
        }

        .server img{
            width: 100%;
            
        }

        .server .item{
            width: 300px;
            padding: 20px;
            
        }

        .server p{
            padding: 10px;
            text-align: center;
        }

        .server h1{
            font-size: 40px;
            text-align: center;
            margin-top: 30px;
            margin-bottom: 10px;
        }

        .footer{
            color: white;
            background-color: black;
            text-align: center;
            height: 40px;
            line-height: 40px;
            margin-top: 20px;
        }
    </style>
<body>
    <div class="header">
        <a class="logo" href="#">
            <img src="img/1200x630wa.png" alt="">
        </a>
        <nav>
            <ul>
                <a href="">关於我们</a>
                <a href="">活动办法</a>
                <a href="">下载</a>
                <a href="">产品介绍</a>
                <a href="">客服中心</a>
            </ul>
        </nav>
    </div>

    <div class="banner">
        <img src="img/234-1200x300.jpg" alt=""> 
        <div class="title">
            <p>MY WEBSITE</p>
            <div class="box">
                <div class="search">
                    <span class="icon"><i class="fa fa-search"></i></span>
                    <input
                        type="search"
                        id="search"
                        placeholder="Search..."
                    />
                </div>
            </div>
            
        </div>
    </div>

    <div class="bannerproject">
                <a href="">首页</a>
                <a href="">最新消息</a>
                <a href="">活动</a>
    </div>

    <div class="article">
        <h1>Page Introduction</h1>
        <div class="wrap">
            <div class="item">
                <img src="https://picsum.photos/300/250?random=2" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos libero suscipit laborum quaerat! Distinctio corporis molestiae fuga qui ducimus minima consectetur veritatis a. Unde rerum provident ipsa esse? Animi, eius.</p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/300/250?random=3" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolore architecto labore, doloremque itaque aliquid illum, consequuntur quaerat sapiente, et voluptate in nemo similique veniam nisi inventore harum dolor. Quidem?</p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/300/250?random=4" alt="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore, aliquid temporibus obcaecati cumque soluta id officiis porro repellat aspernatur est delectus voluptatum et minus ipsum! Assumenda nulla neque repudiandae?</p>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="wrap">
            <div class="item pic">
                <img src="https://picsum.photos/300/250?random=5" alt="">
            </div>
            <div class="item text">
                <h1>title</h1>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, dolorem et molestias saepe impedit repellat. Quidem ducimus dignissimos sunt, a qui beatae blanditiis quas modi autem mollitia similique ad! Voluptatum ipsam, officia porro beatae sapiente atque culpa id nobis corrupti.</p>
            </div>
        </div>
    </div>


    <div class="server">
        <h1>Server</h1>
        <div class="wrap">
            
            <div class="item">
                <img src="https://picsum.photos/300/250?random=6" alt="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit rem perspiciatis ullam natus doloremque distinctio neque est quasi, nesciunt et, veniam nisi! Eligendi omnis tenetur molestias sunt incidunt corrupti possimus!</p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/300/250?random=7" alt="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit rem perspiciatis ullam natus doloremque distinctio neque est quasi, nesciunt et, veniam nisi! Eligendi omnis tenetur molestias sunt incidunt corrupti possimus!</p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/300/250?random=8" alt="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit rem perspiciatis ullam natus doloremque distinctio neque est quasi, nesciunt et, veniam nisi! Eligendi omnis tenetur molestias sunt incidunt corrupti possimus!</p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/300/250?random=9" alt="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit rem perspiciatis ullam natus doloremque distinctio neque est quasi, nesciunt et, veniam nisi! Eligendi omnis tenetur molestias sunt incidunt corrupti possimus!</p>
            </div>
        </div>
    </div>

    <div class="footer">
        &copy;making by jason for website
    </div>
</body>

快动手为自己写个网页,也可以参考我设计的方法打造一个属於你的网页!

里面从页首到中间内容到页尾都可以套用一样的方法,而每一个属性都是前面所学过的!如果有任何疑问都可以提出。

最後成品


<<:  [Day21] 第二十一章 - 使用Ajax来做登入API界接

>>:  JavaScript Day21 - AJAX(3)

Day 4 如何规划拟定隐私三宝

隐私三宝包含了隐私条款、服务条款、Cookie policy,其中隐私条款若要自己从无到有生出来,似...

React-依视窗大小改变DOM

在class component上 一开始必须得在construtor上导入state判断视窗大小 ...

Day30 续 -- 三十而已

终於把内容都讲完拉,回顾一下自己写的文章, 发现自己觉得最好的是第一天跟最後一天的标题, 至於内容的...

轻松小单元 - 名词定义

应该早在几篇就先出来的,不过实在没把握精确度,边写边修正吧... 资通安全管理法: 简称「资安法」,...

网路是怎样连接的(十一) 初探IP协议

思考重点 封包是如何找到下一个端节点的 IP地址在封包转发中扮演的角色 MAC地址在封包转发中扮演的...