体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

5-2作业问题

来源：5-1 修改与建议

charr

2017-11-26 03:12:45

http://img.mukewang.com/climg/5a19bf180001eede25501618.jpg老师 这里不理解为什么我向logo加了margin-top 20px， 会影响到剩下那五个选项。我没有设置给他们margin top，我试的时候就算给他们margin top 0， 也没用。logo或者这五个二选一必须float left。不然就会影响到这五个 这是什么原因呢？我看Google网页的element上面也没标注这五个有任何的margintop，就是整体往下移了。。 求助

写回答

4回答

怎么都被占用了呢

2017-11-27

在inline-block中设置margin肯定会影响同行元素，因为它们存在某种对齐方式。这种效果的布局适合使用浮动完成。

0

charr

提问者

2017-11-27

<!DOCTYPE html>
<html>
<head>
	<title></title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<header>
	<span  class="logo"><img src="img/logo.png"></span>
	<div class="five-choices">
		<span>课程</span>
		<span class="new">职业路径<img src="img/icon-new.png"></span>
		<span>实战</span>
		<span>猿问</span>
		<span>手记</span>
		</div>
	<span class="portrait"></span>
	<span class="clock"></span>
	<span class="lock"></span>
	<div class="search">
		<span class="example">前端入门</span>
		<input type="text" class="search-input">
		<span class="zoom"></span>
	</div>
</header>



<div class="banner"></div>
<div class="main">

	<h1>我的购物车</h1>
	<div class="box">
		<section class="overall">
			<input type="checkbox" name="" class=" selectAllInput" checked="" id="selectAllInput">
			<span class="selectAllSpan">全选</span>
			<span class="first-nameOfItem">商品名称</span>
			<span class="first-totalPrice">总价</span>
			<span class="first-pricePerItem">单价</span>
			<span class="first-numberOfItems">数量</span>
			<span class="first-operate">操作</span>
		</section>


		<section class="items">
			<input type="checkbox" name="" class="checkbox" checked=''>
			<span class="nameOfItem"><img src="img/g1.jpg"><span>前端小白成长记</span></span>
			<span class="totalPrice"><span>¥ </span><span class="num-totalPrice">396</span></span>
			<span class="pricePerItem">¥<span class="num-pricePerItem">396</span></span>
			<span class="numberOfItems"><span class="sign minus">-</span><input type="text" value="1" class="numinput"><span class="sign plus">+</span></span></span>
			<span class="operate">删除</span>

		</section>


		<section class="items">
			<input type="checkbox" name="" class="checkbox" checked=''>
			<span class="nameOfItem"><img src="img/g2.jpg"><span>前端小白成长记</span></span>
			<span class="totalPrice"><span>¥ </span><span class="num-totalPrice">396</span></span>
			<span class="pricePerItem">¥<span class="num-pricePerItem">396</span></span>
			<span class="numberOfItems"><span class="sign minus">-</span><input type="text" value="1" class="numinput"><span class="sign plus">+</span></span></span>
			<span class="operate">删除</span>

		</section>


		<section class="items">
			<input type="checkbox" name="" class="checkbox" checked="">
			<span class="nameOfItem"><img src="img/g1.jpg"><span>前端小白成长记</span></span>
			<span class="totalPrice"><span>¥ </span><span class="num-totalPrice">396</span></span>
			<span class="pricePerItem">¥<span class="num-pricePerItem">396</span></span>
			<span class="numberOfItems"><span class="sign minus">-</span><input type="text" value="1"  class="numinput"><span class="sign plus">+</span></span></span>
			<span class="operate">删除</span>

		</section>


		<section class="items">
			<input type="checkbox" name="" class="checkbox" checked=''>
			<span class="nameOfItem"><img src="img/g1.jpg"><span>前端小白成长记</span></span>
			<span class="totalPrice"><span>¥ </span><span class="num-totalPrice">396</span></span>
			<span class="pricePerItem">¥<span class="num-pricePerItem">396</span></span>
			<span class="numberOfItems"><span class="sign minus">-</span><input type="text" value="1" class="numinput"><span class="sign plus">+</span></span></span>
			<span class="operate">删除</span>

		</section>
	</div>
	<section class="checkout">
			<span>应付金额: </span>
			<span class="sum" id="sum">¥ 1584</span>
			<span class="gocheckout">去结算</span>
	</section>

</div>



<footer>
	<div class="range">	
	<div class="contacts">
	<span>网站首页</span>
	<span>企业合作</span>
	<span>人才招聘</span>
	<span>联系我们</span>
	<span>讲师招募</span>
	<span>常见问题</span>
	<span>意见反馈</span>
	<span>慕课大学</span>
	<span>友情链接</span>
	</div>
	<span class="rights">Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</span>
	<div class="social">
		<span class="social-first"></span>
		<span class="social-second"></span>
		<span class="social-third"></span>
	</div>
	</div>

</footer>
<script type="text/javascript" src="final.js" ></script> 
</body>
</html>


0

charr

提问者

2017-11-27


*{
	margin: 0;
	padding: 0;
	color: white;
}
html,body{
	position: relative;
}
body{
	height: 960px;
}
header{
	width: 100%;
	height: 80px;
	background-color: rgba(0,0,0,0.95);
	position: relative;
}
.logo{
	display: inline-block;
	float: left;
	margin-top: 20px;
}
.five-choices{
	display: inline-block;
	line-height: 80px;
	height: 80px;
}
.five-choices span{
	margin-left: 35px;
}
.new{
	position: relative;
}
.new > img{
	position: absolute;
	top: -10px;
}

.portrait{
	background: url("img/ava.jpg");
}
.clock{
	background: url("img/clock.png");
}
.lock{
	background: url("img/lock.png");
}
.portrait,.clock,.lock{
display: inline-block;
width: 40px;
height: 40px;
float: right;
margin-right: 40px;
margin-top: 20px;
border-radius: 50%;
background-size: contain;
}
/*必须要先定义background才可以设置background相关settings*/
.search{
	position: relative;
	display: inline-block;
	width: 280px;
	height: 40px;
	float: right;
	margin-right: 35px;
	margin-top: 20px;
	border-bottom: rgba(255,255,255,0.3) 1px solid;
}
.search>input{
	width: 120px;
	position: absolute;
	right: 70px;
	border:none;
	height: 30px;
	margin-bottom: 10px;
	background: rgba(0,0,0,0.0001);
	text-decoration-line: none;
}
.search > span {
	display: inline-block;
}
.zoom{
	position: absolute;
	right: 25px;
	width: 30px;
	height: 30px;
	background: url(img/zoom.jpg) rgba(0,0,0,0.1);
	background-size: contain;
}
.example{
	position: absolute;
	width: 75px;
	height: 30px;
	background: grey;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
}
.banner{
	z-index: -1;
	display: inline-block;
	width: 100%;
	height: 160px;
	background: url('img/cart-header-bg.jpg') repeat-x;
}
.main{
	display: block;
	width: 1000px;	
	margin-left:auto;
	margin-right:auto;
	margin-top: -145px;
	position: relative;
}
.main > h1{
	display: block;
	color: black;
	line-height: 70px;
}
.box{
	width: 100%;
	box-shadow: 0px 0px 10px 2px gray;
}
.overall{
	position: relative;
	display: inline-block;
	height: 70px;
	background-color: rgba(130,130,130,0.5);
	width: 100%;
}
.overall  span{
	display: inline-block;
	line-height: 70px;
}
.items{
	position: relative;
	height: 90px;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px grey solid;
}
.checkbox{
	position: absolute;
	left: 15px;
	top: 40px;
	display: inline-block;
	height: 20px;
	width: 20px;
}
.selectAllInput{
	position: absolute;
	left: 15px;
	top: 30px;
	display: inline-block;
	margin-top: 0px;
	width: 20px;
	height: 20px;
}
.selectAllSpan{
	margin-left: 40px;
}

.main span,.main input{
	text-align:center;
	color:black;
}
.nameOfItem{
	margin-left: 60px;
}
.nameOfItem span{
	position: absolute;
	top: 40px;
	left: 230px;
}
.first-nameOfItem{
	margin-left: 30px;
}
.first-totalPrice{
	margin-left: 270px;
}
.totalPrice{
	position: absolute;
	top: 40px;
	left: 440px;
}
.first-pricePerItem{
	margin-left: 100px;
}
.pricePerItem{
	position: absolute;
	top: 40px;
	left: 580px;
}
.first-numberOfItems{
	margin-left: 100px;
}
.numberOfItems{
	position: absolute;
	top: 40px;
	left: 705px;
}
.sign{
	font-size: 12px;
	line-height: 12px;
	text-align:center;
	display: inline-block;
	width: 12px;
	height: 12px;
	border:1px solid gray;
	cursor: pointer;
}
.numberOfItems > input{
	width: 40px;
}
.first-operate{
	margin-left: 100px;
}
span.operate{
	position: absolute;
	top: 40px;
	left: 860px;
	cursor: pointer;
	color: rgba(0,0,0,0.4);
}
section.checkout{
	border:1px rgba(130,130,130,0.5) solid;
	margin-top: 50px;
	height: 60px;
	line-height: 60px;
	position: relative;
}
.checkout span:first-of-type{
	margin-left: 720px; 
}

.checkout .sum{
	color: red;
	font-size: 30px;
}
.checkout .gocheckout{
	position: absolute;
	top: 0px;
	right: 0px;
	color: white;
	display: inline-block;
	line-height: 60px;
	height: 60px;
	width: 100px;
	background: red;
	cursor: pointer;
}
footer{
	position: absolute;
	bottom:0;
	display: block;
	width: 100%;
	height: 80px;
	background: black;
}
footer span{
	color: rgba(255,255,255,0.8);
	font-size: 10px;
}
footer .range{
	height: 40px;
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	position: relative;
}
footer .contacts span :not(:first-of-type){
	margin-left: 30px;
}
footer .rights{
	color: rgba(255,255,255,0.4);
	font-size: 11px;
}
footer .social{
	position: absolute;
	right: 0px;
	top: 5px;
}
footer .social-first {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url("img/wx.png");
	background-size: contain;
	border-radius: 50%;
}
footer .social-second {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url("img/wb.png");
	background-size: contain;
	border-radius: 50%;
}
footer .social-third {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url("img/qq.png");
	background-size: contain;
	border-radius: 50%;
}
footer .social span{
	cursor: pointer;
	margin-right: 20px;
	opacity: 0.5;
}
footer .social span:hover{
	opacity: 1;
}
/*no space allowed bewtween hover and element*/


0

怎么都被占用了呢

2017-11-26

请把代码粘贴上来吧，方便帮你调试

0
hharr
h 麻烦您了!
h017-11-27
共1条回复

0 学习 · 5760 问题

查看课程

相似问题

5-2作业

回答 2

关于5-2作业题的问题

回答 2

5-2 作业删除功能问题

回答 2

作业批改问题

回答 1

5-2作业题问题

回答 2

打开慕课网App查看更多内容