                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3布局樣式與案例

左浮不生效，價格顏色也不生效

<!DOCTYPE html>

<html>

<head>

</head>

<style>

body{

? ?background-color: white;

}

a{

? ?text-decoration: none;

}

.product .product-container{

? ?margin: 10px 15px;

? ?background-color: white;

? ?border-radius: 6px;

}

.product .product-tit{

? ?font-size: 17px;

? ?font-weight: 700;

? ?line-height: 24px;

? ?color: black;

? ?padding-top: 10px;

? ?margin: 0 10px;

}

.product .product-tit .product-tit-decs{

? ?font-size: 12px;

? ?color: #999;

? ?font-weight: normal;

}

.product .product-tit .more{

? ?font-size: 12px;

? ?color: #999;

? ?font-weight: normal;

? ?float:right;

}

.product .product-tit .more::after{

? ?content: ">";

? ?display: inline;

? ?font-size: 16px;

}

.product .product-content{

? ?margin: 0 14px;

}

.product .product-item{

? ?overflow: hidden;

}

.product .product-item .thumb{

? ?width: 93px;

? ?height: 93px;

? ?float: left;

}

.product .product-item .thumb img{

? ?display: inline-block;

? ?width: 100%;

? ?height: 100%;

}

.product .product-item .info{

? ?padding: 0 8px 0 8px;

}

.product .product-item .info .name{

? ?font-size: 14px;

? ?color: #222;

? ?font-weight: normal;

? ?margin: 0;

}

.product .product-item .info .price span{

? ?font-size: 13px;

? ?color: #f50808;

? ? font-weight: 0;

}

.product .product-item .info .price i{

? ?font-style: normal;

? ?font-size: 14px;

}

</style>

<body>

<div class="product-tit">促銷精品

<span class="product-tit-decs">誠意推薦品質(zhì)商品</span>

</div>

</div>

<h3 class="name">京鮮生四川愛媛38號果凍橙4.5-5斤單果65mm起生鮮水果源頭直發(fā)包郵</h3>

</div>

</div> ?

</div>

</body>

</html>

小灰灰掉線了

2024-11-26

源自：CSS3布局樣式與案例 3-4

關(guān)注問題我要回答

40

操作

收起

1 回答

AI小慕
2024-11-27

問題分析

左浮不生效：從提供的代碼來看，.product-item?.thumb?和?.product-item?.info?都沒有設(shè)置浮動或使用?Flex?布局，這可能導(dǎo)致它們無法正確排列。
價格顏色不生效：檢查了?.product?.product-item?.info?.price?span?的樣式，發(fā)現(xiàn)?color:?#f50808;?應(yīng)該是有效的。如果顏色沒有生效，可能是其他?CSS?規(guī)則覆蓋了這個樣式。

解決方案

左浮不生效：為?.product-item?.thumb?添加?float:?left;，并確保?.product-item?.info?也浮動或使用?Flex?布局。
價格顏色不生效：檢查是否有其他?CSS?規(guī)則覆蓋了這個樣式，并確保選擇器的優(yōu)先級足夠高。

修復(fù)后的完整代碼

<!DOCTYPE?html>
<html>

<head>
??<meta?charset="UTF-8"?/>
??<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0,?user-scalable=0"?/>
??<title>商品列表</title>
??<style>
????body?{
??????background-color:?white;
????}

????a?{
??????text-decoration:?none;
????}

????.product?.product-container?{
??????margin:?10px?15px;
??????background-color:?white;
??????border-radius:?6px;
????}

????.product?.product-tit?{
??????font-size:?17px;
??????font-weight:?700;
??????line-height:?24px;
??????color:?black;
??????padding-top:?10px;
??????margin:?0?10px;
????}

????.product?.product-tit?.product-tit-decs?{
??????font-size:?12px;
??????color:?#999;
??????font-weight:?normal;
????}

????.product?.product-tit?.more?{
??????font-size:?12px;
??????color:?#999;
??????font-weight:?normal;
??????float:?right;
????}

????.product?.product-tit?.more::after?{
??????content:?">";
??????display:?inline;
??????font-size:?16px;
????}

????.product?.product-content?{
??????margin:?0?14px;
????}

????.product?.product-item?{
??????overflow:?hidden;
????}

????.product?.product-item?.thumb?{
??????width:?93px;
??????height:?93px;
??????float:?left;
????}

????.product?.product-item?.thumb?img?{
??????display:?inline-block;
??????width:?100%;
??????height:?100%;
????}

????.product?.product-item?.info?{
??????padding:?0?8px?0?8px;
??????float:?left;
??????width:?calc(100%?-?101px);?/*?確保信息區(qū)域占據(jù)剩余空間?*/
????}

????.product?.product-item?.info?.name?{
??????font-size:?14px;
??????color:?#222;
??????font-weight:?normal;
??????margin:?0;
????}

????.product?.product-item?.info?.price?span?{
??????font-size:?13px;
??????color:?#f50808?!important;?/*?使用?!important?確保顏色生效?*/
??????font-weight:?0;
????}

????.product?.product-item?.info?.price?i?{
??????font-style:?normal;
??????font-size:?14px;
????}
??</style>
</head>

<body>
??<div?class="product">
????<div?class="product-container">
??????<div?class="product-tit">促銷精品
????????<span?class="product-tit-decs">誠意推薦品質(zhì)商品</span>
????????<a?href=""?class="more">更多</a>
??????</div>
??????<div?class="product-content">
????????<div?class="product-item">
??????????<div?class="thumb">
????????????<img?src="https://m.360buyimg.com/seckillcms/jfs/t1/243337/31/19356/139292/66f76f93F7a53f83b/dea172897c4da9b5.png">
??????????</div>
??????????<div?class="info">
????????????<h3?class="name">京鮮生?四川愛媛38號果凍橙4.5-5斤?單果65mm起?生鮮水果?源頭直發(fā)包郵</h3>
????????????<div?class="price">
??????????????<span><i>￥</i>?19.9</span>
????????????</div>
??????????</div>
????????</div>
??????</div>
????</div>
??</div>
</body>

</html>

核心問題及解答

左浮不生效：通過為?.product-item?.thumb?添加?float:?left;?并確保?.product-item?.info?也浮動，解決了布局問題。
價格顏色不生效：通過在?.product?.product-item?.info?.price?span?中添加?!important，確保顏色樣式生效。同時檢查是否有其他?CSS?規(guī)則覆蓋了這個樣式。