制作商品详情页面案例

2021-10-10 20:32:07 阅读：122 来源： 互联网

标签：left border 案例 1px nbsp mr 页面 margin 详情

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

商品详情页面模板

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;
}

标签：left,border,案例,1px,nbsp,mr,页面,margin,详情
来源： https://blog.csdn.net/m0_57534474/article/details/120691199

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

制作商品详情页面案例