CSS+HTML实例--结合DIV进行页面布局

最新推荐文章于 2024-05-14 14:44:50 发布

张0x0

最新推荐文章于 2024-05-14 14:44:50 发布

阅读量390

点赞数 1

分类专栏： web前端基础学习 css学习文章标签：前端 css html html5

本文链接：https://blog.csdn.net/zxn200125/article/details/120706651

版权

web前端基础学习同时被 2 个专栏收录

80 篇文章 3 订阅

订阅专栏

css学习

12 篇文章 0 订阅

订阅专栏

以CSS+DIV页面布局内容结合之前的基础知识进行制作一个简单的页面布局

css代码：

/*最外框框架，用css+div实现*/
.body{
    width: 800px;
    height: 500px;
    border:1px solid red;
    margin:  50px auto;  /*整体居中*/
}
/*图像模块*/
img{
    width: 300px;
    height: 450px;
    margin: 25px;
    float: left;
}
/*文字模块*/
/*文字最外侧框架*/
.d1{
    width: 425px;
    height: 450px;
    margin-left: 350px;
    margin-top:25px;
}
/*带背景色文字板块*/
.d2{
    width: 425px;
    height: 80px;
    background-color:lightcyan;
    
}
/*文字设置*/
.word1,.word2,.word3{
    color: deeppink;
    font-size: 8px;
}
.word2{
    line-height: 40px;
    color: lightgreen;
}
.word3{
    font-size: 20px;
}
.word4{
    color: lightgrey;
    font-size: 8px;
}
/*表格设置*/
/*机型选项*/
td{
    width: 80px;
    text-align: center;
    border: 2px dotted lightgrey;
    padding: 5px;
}
.td{
    border: none;
    color: lightgrey;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面布局</title>
    <link rel="stylesheet" href="../../code/css/002.css">
</head>
<body>
    <div class="body">  <!--最外框框架，用css+div实现-->
        <div>
            <img src="../../image/picture2.png" alt="">  <!--图像模块-->
        </div>
        <div class="d1">  <!--文字最外侧框架-->
            <div>
                <h3>现货送钢化膜Huawei/华为移动联通全网通4G手机</h3>
            </div>
            <div class="word1">
                正品裸价&nbsp;&nbsp;购机送钢化膜&nbsp;&nbsp;保护壳
            </div>
            <br>
            <div class="d2">  <!--价格板块-->
                <div class="word2">
                    <s>专柜价</s>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <s>￥3299.00</s>
                </div>
                <span class="word1">新年价</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span class="word3">￥2299.00</span>
            </div>
            <br>
            <span class="word4">运费</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>全国包邮 赠送运费险</span>
            <br>
            <hr width="425">
            <span class="word4">月销量</span> &nbsp;&nbsp;
            <span class="word1">5268</span> &nbsp;&nbsp;
            <span class="word4">累计评价</span> &nbsp;&nbsp;
            <span class="word1">1738</span> &nbsp;&nbsp;
            <span class="word4">送购物积分</span> &nbsp;&nbsp;
            <span class="word1">127</span>
            <br>
            <!--用表格设置选项-->
            <table>
                <tr>
                    <td class="td">网络类型</td>
                    <td>双4G</td>
                    <td>4G全网通</td>
                    <td>5G全网通</td>
                </tr>
                <tr>
                    <td class="td">机身颜色</td>
                    <td>金色</td>
                    <td>黑色</td>
                    <td>白色</td>
                </tr>
                <tr>
                    <td class="td">套餐类型</td>
                    <td>基础版</td>
                    <td>官方标配</td>、
                    <td>豪华版</td>
                </tr>
                <tr class="p">
                    <td class="td">存储容量</td>
                    <td >32G</td>
                    <td>64G</td>
                    <td>128G</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

网页渲染效果：