网页框架分析

给你一张网页图，你知道怎么把它写出来吗？

来看图

通过分析，此网页的构成：

页面背景为灰色，绿框是版心内容，是此页面最大的盒子，设宽和高，里面可以分为上下两个盒子，即两个红框，下面的盒子里面又有4个子盒子，紫色框，每一个小盒子里面都是三部分构成

<div class="header">
        <div class="title">
            <span>华为全屋智能，住进未来家</span>
        </div>
        <div class="father">
            <div class="son tu1">
                <p class="da">亮点功能</p>
                <div class="xiao">
                    生活起居的智能化改造
                </div>
                <img src="./image/1.jpg" alt="">
                <span class="iconfont icon-a-xiangxiayuan"></span>
            </div>
            <div class="son tu2">
                <p class="da">方案介绍</p>
                <div class="xiao">
                    华为全屋智能1+2+N解决方案
                </div>
                <img src="./image/2.jpg" alt="">
                <span class="iconfont icon-a-xiangxiayuan"></span>
            </div>
            <div class="son tu3">
                <p class="da">智能单品</p>
                <div class="xiao">
                    智能中控屏、智能门锁等更多单品
                </div>
                <img src="./image/3.jpg" alt="">
                <span class="iconfont icon-a-xiangxiayuan"></span>
            </div>
            <div class="son tu4">
                <p class="da">智慧场景</p>
                <div class="xiao">
                    多设备联动打造丰富智慧场景体验
                </div>
                <img src="./image/4.jpg" alt="">
                <span class="iconfont icon-a-xiangxiayuan"></span>
            </div>
        </div>
    </div>

用外链式来写css样式

/* 初始化 */

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #666;
}

ul {
    list-style-type: none;
}

先初始化，

然后列出框架

/* 页面内容 */

body {
    background-color: rgb(203, 190, 190, .3);
}

.header {
    width: 1050px;
    height: 500px;
    margin: 0 auto;
}

.title {
    height: 100px;
    font-size: 24px;
    
}

.father {
    height: 350px;
    border: 0px solid #fff;
}

.father .son {
    width: 230px;
    height: 350px;
    display: inline-block;
    background-color: white;
    
}


.da {
    
    text-align: center;
}

.xiao {
    
    color: gray;
    text-align: center;
}

img {
    height: 230px;
   
}

最后一点一点完善，完整css代码如下：

/* 页面内容 */

body {
    background-color: rgb(203, 190, 190, .3);
}

.header {
    width: 1050px;
    height: 500px;
}

.title {
    height: 100px;
    font-size: 24px;
    text-align: center;
    font-weight: 700px;
    line-height: 100px;
}

.father {
    height: 350px;
    border: 0px solid #fff;
}

.father .son {
    width: 230px;
    height: 350px;
    display: inline-block;
    background-color: white;
    /* border: 1px solid white; */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.father .tu1,
.tu2,
.tu3 {
    margin-right: 33px;
}

.father .tu4 {
    float: right;
}

.da {
    margin-top: 25px;
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.xiao {
    font-size: 12px;
    color: gray;
    text-align: center;
}

img {
    height: 230px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.iconfont {
    position: absolute;
    bottom: 20px;
    right: 20px;
}