Day21 CSS完成简单的网页排版!

前面我们有了导览列加上banner区块!接下来的排版就可以很快速地套用我们之前所学，display:flex完成剩下的排版，让我们继续看下去吧!

我们这里先为昨天的banner加上连结，让网页更清楚鲜明。增加了左下角的资讯。

.bannerproject a{
            text-decoration: none;
            padding-right: 10px;
            margin: 5px;
        }
        
<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>

一样我们先建构出html标签结构!接下来就可以开始排版设定CSS罗!
先从图片跟文字开始，设定display:flex。

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

记得一样是在外容器去做flex设定(justify-content: center;水平置中)!并把我们的item设定宽度，margin，文字置中、另外加上我们前面教过的立体效果box-shadow。

大致上已经完成得差不多了，我们在让文字不要那麽挤，设定一下padding，以及标题的大小及位置。

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