教你两步学会页面搭建(速成)附源码

 如下图所示：

网页都是由一个个不同的div板块组成，无论我们是做板块或者自己仿照他人网站都需要我们很好的将其划分，最后再进行一步步的设计。

上图我们可以这样划分：（方法一）

也可以这样划分：（方法二）只划分到蓝色框层，将其中内容化为一个盒子

本代码采用方法二的划分形式

 先对我们设计的界面进行划分，然后在html页面先整理出我们要写的内容，如下

<div class="wai">
        <div class="content">
            <div class="top">
                <h1>军训专题</h1>
                <a href="#">more+</a>
            </div>
            <div class="bottom">
                <div class="item">
                    <span>2023.8.13</span>
                    <img src="images/1.jpg" alt="">
                    <h3>军训小贴士-管理篇</h3>
                    <p>军训是必惨课，占2学分。军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学们须积极参加，态度端正，全程训练。</p>
                </div>
                <div class="item">
                    <span>2023.8.13</span>
                    <img src="images/1.jpg" alt="">
                    <h3>军训小贴士-心理篇</h3>
                    <p>军训，是大学生德育教育的重要部分。不仅对大学生的心理适应起到良好的过渡作用，而且对学生的心理素质的培养起着重要作用。</p>
                </div>
                <div class="item">
                    <span>2023.8.13</span>
                    <img src="images/1.jpg" alt="">
                    <h3>军训小贴士-安全篇</h3>
                    <p>军训中要防中暑、防晒伤、预防感冒、防腹泻、防组织损伤，另外还要做好用电安全、财务安全和人身安全。安全无小事，时刻要注意。</p>
                </div>
                <div class="item">
                    <span>2023.8.13</span>
                    <img src="images/1.jpg" alt="">
                    <h3>军训小贴士-生活篇</h3>
                    <p>军训时身体内水分消耗大，所以—定要补充足量的水，最好每天能喝—两杯盐水，以保证人体机能正常的水分需要，切忌大量喝冰水，少吃冷饮。</p>
                </div>

            </div>
        </div>
    </div>

之后是对其进行css样式设计

.wai {
    background: rgb(245, 245, 245);
    padding: 30px 0 40px;
    margin-top: 60px;
}

.wai .content {
    width: 1100px;
    margin: 0 auto;
}

.wai .content .top{
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid rgb(221, 221, 221);
}

.wai .content .top h1{
    font-size: 20px;
    font-weight: 170;
    padding-bottom: 15px;
    border-bottom: 3px solid rgb(195, 63, 48);
}

.wai .content .top a{
    font-size: 15px;
    color: rgb(153, 153, 153);
    text-decoration: none;
}

.wai .content .bottom{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.wai .content .bottom .item {
    width: 24%;
    background: white;
    position: relative;
}

.wai .content .bottom .item img {
    width: 100%;
}

.wai .content .bottom .item h3 {
    font-size: 16px;
    font-weight: 500;
    color: rgb(195, 63, 48);
    padding: 0 10px;
    margin-top: 10px;
}

.wai .content .bottom .item p {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 10px;
    line-height: 30px;
}

.wai .content .bottom .item span {
    background: rgb(229, 145, 135);
    color: azure;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
    padding: 5px 2px;
}

本页面有一个点就是上边的日期处于图片的上方

此处就需要我们采用一个position属性，将日期所处盒子加入position: relative;属性，而日期加入 position: absolute;属性，这样我们的文本可以相对放置了。