老师好，请问生活服务区为何会布局混乱
来源：5-2 作业题
悄然于心
2019-03-09 02:22:18
<!--购物车--> <div class="car"> <div class="carImg"> <div class="carImg1"></div> <p>购物车 | 0</p> <div class="carImg2"></div> </div> <div class="car-nav hiden"> <div class="car-title">最近加入的商品</div> <div class="car-column"> <div class="car-menu"> <a href="#"><img src="JS-images/cart/1.png"><pre>adidas 阿迪达斯 训练 男子</pre><span>X</span><br><p>￥ 335 × 1</p></a> </div> <div class="car-menu"> <a href="#"><img src="JS-images/cart/2.png"><pre>玉兰油多效修护三部曲</pre><span>X</span><br><p>￥ 199 × 2</p></a> </div> <div class="car-menu"> <a href="#"><img src="JS-images/cart/3.png"><pre>Apple iPhone 7(A1660)</pre><span>X</span><br><p>￥ 6188 × 1</p></a> </div> <div class="car-menu"> <a href="#"><img src="JS-images/cart/4.png"><pre>飞利浦面条机</pre><span>X</span><br><p>￥ 659 × 4</p></a> </div> <div class="car-menu"> <a href="#"><img src="JS-images/cart/5.png"><pre>罗技G29 力反馈游戏方向</pre><span>X</span><br><p>￥ 2999 × 1</p></a> </div> <div class="car-menu"> <a href="#"><img src="JS-images/cart/1.png"><pre>adidas 阿迪达斯 训练 男子</pre><span>X</span><br><p>￥ 335 × 1</p></a> </div> <div class="car-menu"> <a href="#"><img src="JS-images/cart/2.png"><pre>玉兰油多效修护三部曲</pre><span>X</span><br><p>￥ 199 × 2</p></a> </div> <div class="car-menu"> <a href="#"><img src="JS-images/cart/3.png"><pre>Apple iPhone 7(A1660)</pre><span>X</span><br><p>￥ 6188 × 1</p></a> </div> <div class="car-menu"> <a href="#"><img src="JS-images/cart/4.png"><pre>飞利浦面条机</pre><span>X</span><br><p>￥ 659 × 4</p></a> </div> <div class="car-menu"> <a href="#"><img src="JS-images/cart/5.png"><pre>罗技G29 力反馈游戏方向</pre><span>X</span><br><p>￥ 2999 × 1</p></a> </div> </div> <div class="car-total"><p>共 27 件商品，共计 ￥0.00</p><button>去购物车</button></div> </div> </div> </div> <!--生活服务区--> <div class="content"> <div class="content1"> <div><a href="#"><h3>慕快报</h3><span>更多></span></a></div> <div><a href="#"><h4>[特惠]</h4><span>精选图书每满150减50</span></a></div> <div><a href="#"><h4>[公告]</h4><span>因广州图书仓搬仓升级配送延迟</span></a></div> <div><a href="#"><h4>[特惠]</h4><span>爆款手机12期免息 抽奖赢电视</span></a></div> <div><a href="#"><h4>[公告]</h4><span>广东、福建受台风影响配送延迟</span></a></div> <div><a href="#"><h4>[特惠]</h4><span>大闸蟹领劵满399减180</span></a></div> </div> <div class="content2"> <dl><dt></dt><dd>话费</dd></dl> <dl><dt></dt><dd>机票</dd></dl> <dl><dt></dt><dd>电影票</dd></dl> <dl><dt></dt><dd>游戏</dd></dl> <dl><dt></dt><dd>彩票</dd></dl> <dl><dt></dt><dd>加油卡</dd></dl> <dl><dt></dt><dd>酒店</dd></dl> <dl><dt></dt><dd>火车票</dd></dl> <dl><dt></dt><dd>众筹</dd></dl> <dl><dt></dt><dd>理财</dd></dl> <dl><dt></dt><dd>补品卡</dd></dl> <dl><dt></dt><dd>白条</dd></dl> </div> <div class="content3"></div>
/*购物车*/
.logo > .car{
width:200px;
height:auto;
background:#f00;
float:right;
margin-top:35px;
margin-right:50px;
color:#fff;
}
.logo > .car .carImg{
width:200px;
height:41px;
}
.car .carImg1{
width:16px;
height:16px;
background:url("JS-images/icon/26.png") no-repeat;
float:left;
margin:12px 20px;
}
.car p{
font-size:15px;
height:41px;
line-height: 41px;
float:left;
}
.car .carImg2{
width:16px;
height:16px;
background:url("JS-images/icon/23.png") no-repeat;
float:right;
margin:12px 20px 0 10px;
}
.car:hover .carImg{
background: #fff;
color: #f00;
border:1px solid #ececec;
}
.car:hover .carImg .carImg1{
background: url("JS-images/icon/25.png");
}
.car:hover .carImg .carImg2{
background: url("JS-images/icon/22.png");
}
.car-nav{
width:350px;
height:355px;
border:1px solid #ececec;
background:#fff;
color:#000;
}
.car-title,.car-total,.car-menu{
width:340px;
height:50px;
padding-left:10px;
}
.car-title,.car-total{line-height: 50px;}
.car-column{
width:340px;
height:250px;
overflow-y:scroll;
overflow-x:hidden;
font-size:10px;
}
.car-menu:hover{
background: #ddd;
}
.car-column p{font-size:10px;height:0px;}
.car-column pre{font-size:10px;color:#666;margin-top:10px;margin-bottom:-20px;}
.car-column img{float:left;margin-right:10px;margin-top:1px;}
.car-column span{float:right;margin-right:70px;}
.car-column .car-menu{
border-top:1px solid #ececec;
clear:both;
}
.car-total button{
width:80px;
height:35px;
background: #f00;
color:#fff;
border-radius:3px;
margin-left:50px;
}
/*生活服务区*/
.content{
width:275px;
height:497px;
border:1px solid #999;
margin-top:10px;
position: absolute;
top:0;
right:10px;
}
.content1{
width:230px;
height:182px;
padding:20px;
font-size:14px;
}
.content1 h3{
color:#f00;
float:left;
width:50%;
}
.content1 div:nth-child(1) > a > span{
float:right;
text-align:right;
width:50%;
color:#999;
}
.content1 > div{
width:230px;
}
.content1 > div > h4{
float:left;
}
.content1 > div > span{
float:left;
}
.content2 dd{
border:1px solid #999;
}//购物车子菜单
function carHiden(){
var car = $(".car");
var carNav = $(".car-nav");
car.hover(function(){
carNav.show()
},function(){
carNav.hide()
})
}
$(document).ready(function(){
carHiden();
// chart();
})写回答
1回答
-
Steve007
2019-03-10
同学，你好。服务区布局混乱，是因为没有设置正确的样式，修改如下：
祝学习愉快！
0
相似问题