Day22 CSS版型設計完成網頁!

2021 iThome 鐵人賽

DAY 22

Modern Web

我的網頁前端小小小教室系列第 22 篇

13th鐵人賽

karta1366796

團隊imac_跳過這篇

2021-10-06 23:24:37

1270 瀏覽

分享至

前面的幾篇文章已經讓我們可以完成一個屬於你的網頁!包括從頁首、網頁內容、頁尾、排版，這些所教的工具如果都學起來融會貫通後。就可以完成一個有質感的網頁了!

<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>