制作商品详情页面案例

最新推荐文章于 2024-08-19 13:37:11 发布

李子木9

最新推荐文章于 2024-08-19 13:37:11 发布

阅读量9.1k

点赞数 15

文章标签： html5 html webstorm

本文链接：https://blog.csdn.net/m0_57534474/article/details/120691199

版权

HTML CSS 商品详情页布局样式

关键词由CSDN通过智能技术生成

需将文章最后的图片保存下来与代码放于同一目录中

商品详情页面模板

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">专柜价&nbsp;&nbsp;&nbsp;<strike>￥1399.00</strike></font><br>
        <font size="-1" color="#FF0099">新年价&nbsp;&nbsp;&nbsp;￥<font size="+2">1199.00</font></font>
      </div><br>
    <font size="-1" color="#CCCCCC">运费&nbsp;&nbsp;<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">网络类型&nbsp;</font></li>
          <li>移动联通双4G</li>
          <li>移动4G</li>
          <li>4G全网通</li><br><br><br>
        </ul>
        <ul>
          <li class="list1"><font color="#CCCCCC">机身颜色&nbsp;</font></li>
          <li>金色</li>
          <li>黑色</li>
          <li>白色</li>
        </ul>
        <br><br><br>
        <ul>
          <li class="list1"><font color="#CCCCCC">套餐类型&nbsp;</font></li>
          <li>官方标配</li>
        </ul>
        <br><br><br>
        <ul>
          <li class="list1"><font color="#CCCCCC">存储容量&nbsp;</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;
}