一、知識(shí)點(diǎn)
1、無(wú)序列表<ul></ul>
2、float浮動(dòng)
(1)why浮動(dòng)的作用:排版布局
(2)原理:兩個(gè)盒子，默認(rèn)上下排列，給第二個(gè)盒子就會(huì)浮上去（跟第一個(gè)盒子同一水平線）
(3)how怎么用:
（4）clear:清除浮動(dòng)
3、CSS精靈圖
4、詳情頁(yè)面用到的CSS屬性：
（1）、border-radius：邊框圓角半徑
（2）、text-decoration：line-through：文本劃線（a標(biāo)簽去掉下劃線、none）
5、table標(biāo)簽
(1)、包含字標(biāo)簽：
caption表的標(biāo)簽
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">售價(jià)</span>
<span class="prices">￥198</span>
<span class="shic">市場(chǎng)價(jià)<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">配送說(shuō)明</span>
<p>北京、上海、廣州、深圳、天津、重慶、南京、長(zhǎng)沙</p>
<span class="color">配送至</span>
<p>鄭州</p>
<span class="color">說(shuō)明</span>
<p>深圳大鵬新區(qū)暫不配送</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">加入購(gòu)物車(chē)</button></a>
<a href="#"><button class="a25color2">加入購(gòu)物車(chē)</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;
} */實(shí)現(xiàn)樣式
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-511192.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-511192.html
到了這里，關(guān)于HTML .CSS實(shí)現(xiàn)商品詳情（detail）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
