需将文章最后的图片保存下来与代码放于同一目录中
商品详情页面模板
HTML代码
<!--制作商品详情页面-->
<!--李子木-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作商品详情页面</title>
<link rel="stylesheet" href="mr-style.css" type="text/css">
</head>
<body>
<div class="mr-cont">
<!--插入图片-->
<div class="mr-pic">
<dl>
<dt><img src="images/dhw4.jpg" alt="错误"></dt>
<dd class="mr-sel"><img src="images/xhw41.jpg" height="70px" width="70px" alt="错误"></dd>
<dd><img src="images/xhw42.jpg" height="70px" width="70px" alt="错误"></dd>
<dd><img src="images/xhw43.jpg" height="70px" width="70px" alt="错误"></dd>
</dl>
</div>
<!-- 添加商品详情的文字信息-->
<div class="mr-mess">
<div>
<h3>现货送钢化膜Huawei/华为G9青春版plus移动联通全网通4G手机</h3>
<font size="-1" color="#FF0099">正品裸价 购机送钢化膜 保护壳<br><br></font>
</div>
<div class="mr-price">
<font size="-1" color="#CCCCCC">专柜价 <strike>￥1399.00</strike></font><br>
<font size="-1" color="#FF0099">新年价 ￥<font size="+2">1199.00</font></font>
</div><br>
<font size="-1" color="#CCCCCC">运费 <font size="-1">北京至长春 快递：0.00</font></font><br><br>
<hr>
<br>
<div>
<font size="-1" color="#CCCCCC">月销量</font> <font size="-1" color="#FF0099">172 </font>
<font size="-1" color="#CCCCCC">累积评论</font> <font size="-1" color="#FF0099">91 </font>
<font size="-1" color="#CCCCCC">送51购积分</font> <font size="-1" color="#00CC00">119<br>
<br>
</font>
<hr>
<br>
</div>
<div class="dul">
<ul>
<li class="list1"><font color="#CCCCCC">网络类型 </font></li>
<li>移动联通双4G</li>
<li>移动4G</li>
<li>4G全网通</li><br><br><br>
</ul>
<ul>
<li class="list1"><font color="#CCCCCC">机身颜色 </font></li>
<li>金色</li>
<li>黑色</li>
<li>白色</li>
</ul>
<br><br><br>
<ul>
<li class="list1"><font color="#CCCCCC">套餐类型 </font></li>
<li>官方标配</li>
</ul>
<br><br><br>
<ul>
<li class="list1"><font color="#CCCCCC">存储容量 </font></li>
<li>16G</li>
<li>32G</li>
<li>64G</li>
</ul>
</div>
</div>
</div>
</body>
</html>CSS代码
/* 李子木 */
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0
}
.mr-cont {
margin: 20px auto;
height: 565px;
width: 950px;
border: 1px solid #F00
}
.mr-pic {
float: left;
margin: 50px auto
}
.mr-mess {
float: left;
width: 528px;
margin: 30px 20px;
}
dl {
margin: 20px;
text-align: center;
width: 340px;
height: 435px;
border: 1px #999999 solid
}
dt {
margin-top: 70px;
}
dd {
float: left;
margin: 30px 5px;
border: 1px solid #CCC;
}
.mr-sel {
margin-left: 50px;
border: 1px solid #C00;
}
ul li {
list-style: none;
float: left;
height: 30px;
text-align: center;
line-height: 30px;
}
.list1~li {
width: 120px;
border: 1px dashed #999999;
margin: 0 5px;
}
.mr-price {
background: #FBECFF
}
.dul ul{
margin:0px auto;
}