一、知识点
1、无序列表
2、float浮动
(1)why浮动的作用:排版布局
(2)原理:两个盒子，默认上下排列，给第二个盒子就会浮上去（跟第一个盒子同一水平线）
(3)how怎么用:
（4）clear:清除浮动
3、CSS精灵图
4、详情页面用到的CSS属性：
（1）、border-radius：边框圆角半径
（2）、text-decoration：line-through：文本划线（a标签去掉下划线、none）
5、table标签
(1)、包含字标签：
caption表的标签
tr表的行
td表的列
th表头（黑体）
（2）、常用属性：border-spacing、colspan、rowspan
（3）、作用：布局
二·、商品详情 html .css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商品详情</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/detail.css">
</head>
<body>
<div id="all">
<iframe class="iheader" src="header.html"></iframe>
<div style="clear: both;"></div>
<div id="content">
<div class="a1">
<img class="big" src="img/cake1_big.jpg">
<div class="a11">
<ul>
<li><img src="img/cake1_s1.jpg"></li>
<li><img src="img/cake1_s2.jpg"></li>
<li><img src="img/cake1_s3.jpg"></li>
<li><img src="img/cake1_s4.jpg"></li>
</ul>
</div>
</div>
<div class="a2">
<h2>提拉米苏(约2磅)</h2>
<div class="a21">
<div class="a211">
<span class="color">售价</span>
<span class="prices">￥198</span>
<span class="shic">市场价<span class="prices2">￥338</span></span>
<span class="yis">已售6264件</span>
</div>
<div class="a22">
<p></p>
<span class="color">材料</span>
<span class="neir">鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪</span>
<p></p>
<span class="color">包装</span>
<span class="neir">一次性蛋糕用具一套</span>
<p></p>
<span class="color">备注</span>
<span class="neir">品牌:悦轩饼家</span>
</div>
<div class="a23">
<p></p>
<span class="color">配送说明</span>
<p>北京、上海、广州、深圳、天津、重庆、南京、长沙</p>
<span class="color">配送至</span>
<p>郑州</p>
<span class="color">说明</span>
<p>深圳大鹏新区暂不配送</p>
</div>
<div class="a24">
<span class="color">选择</span>
<p></p>
<span class="bang">2磅</span>
<span class="bang">3磅</span>
<span class="bang">4磅</span>
</div>
<div class="a25">
<a href="#"><button class="a25color1">加入购物车</button></a>
<a href="#"><button class="a25color2">加入购物车</button></a>
</div>
</div>
</div>
</div>
<div style="clear: both;"></div>
<iframe class="ifooter" src="footer.html"></iframe>
</div>
</body>
</html>
.css样式
iframe{
width: 1200px;
margin: auto;
}
.all{
width: 100%;
height: 810px;
padding-bottom: 50px;
margin-top: -80px;
margin-bottom: 1px;
}
.all .content{
margin-top: 0px;
float: left;
}
.all iframe{
/* border: 2px solid red; */
}
#content{
/* border: 1px solid red; */
width: 1200px;
margin-top: -80px;
margin: auto;
}
#content .a1{
float: left;
margin-left: 10px;
}
#content .a1 .big{
/* float: left; */
width: 450px;
height: 400px;
}
#content .a11 ul li{
list-style: none;
float: left;
margin: 20px 15px;
}
.a11 ul li img{
border: 3px white solid;
width: 80px;
height: 80px;
}
.a11 ul li img:hover{
border: 3px #FF4F0D solid;
}
.a2{
float: left;
margin-left: 90px;
}
.a21 .color{
color: #758188;
}
.a21 .a211{
background-color: #F2F5F8;
color: #758188;
}
.a21 .a211 .prices,.shic{
margin-left: 40px;
}
.a21 .a211 .prices{
color: #FF4F0D;
font-size: 35px;
font-weight: bold;
}
.a21 .a211 .prices2{
text-decoration: line-through;
}
.a21 .a211 .yis{
margin-left: 230px;
}
.a22{
background-color: #F6F9FB;
}
.a22 span,p{
margin-top: 10px;
}
.a22 .neir{
margin-left: 50px;
}
.a23{
margin-top: 10px;
}
.a24{
margin-top: 10px;
}
.a24 .bang{
display: inline-block;
border: 3px #EDF0F5 solid;
width: 50px;
line-height: 40px;
margin-left: 30px;
text-align: center;
}
.a24 .bang:hover{
border: 3px #FF4F0D solid;
}
.a25{
margin-top: 30px;
}
.a25 button{
display: inline-block;
width: 200px;
height: 60px;
border-radius: 30px;
margin-left: 30px;
}
.a25 .a25color1{
background-color: #FFEEE8;
color: #FF4F0D;
font-size: 20px;
font-weight: bolder;
border: 1px #FF4F0D solid;
}
.a25 .a25color2{
background-color: #FF4F0D;
color: white;
font-size: 20px;
font-weight: bolder;
border: 1px #FF4F0D solid;
}
/* .all .iheader{
margin: auto;
} */
实现样式
本文转载自: https://blog.csdn.net/qq_67519129/article/details/125302357
版权归原作者 从此再无྅ 所有， 如有侵权，请联系我们删除。
版权归原作者 从此再无྅ 所有， 如有侵权，请联系我们删除。