以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">
正品裸价 购机送钢化膜 保护壳
</div>
<br>
<div class="d2"> <!--价格板块-->
<div class="word2">
<s>专柜价</s>
<s>¥3299.00</s>
</div>
<span class="word1">新年价</span>
<span class="word3">¥2299.00</span>
</div>
<br>
<span class="word4">运费</span>
<span>全国包邮 赠送运费险</span>
<br>
<hr width="425">
<span class="word4">月销量</span>
<span class="word1">5268</span>
<span class="word4">累计评价</span>
<span class="word1">1738</span>
<span class="word4">送购物积分</span>
<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>
网页渲染效果: