how2j.cn

需要的人物头像在右侧

相关下载
文件名 文件大小
imgs.rar 774k
answer.rar 776k

步骤 1 :

练习效果图

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
练习效果图


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-01-14 交作业!
猎手



哈哈!
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>
	body{
		font-family:宋体;
		font-size:11px;
	}
	.box{
		//border:1px solid;
		width:769px;
		height:554px;
		background-color:gray;
		margin:0px auto;
	}
	.div1{
		//display:inline-block;
		//border:1px solid;
		width:220px;
		height:500px;
		background-color:black;
		margin-top:3px;
		margin-left:5px;
		//margin-bottom:50px;
		float:left;
		//padding-top:50px;
		
	}
	.div2 img{
		//display:inline-block;
		width:55px;
		height:55px;
		border:1px solid white;
	}
	.div2{
		//display:inline-block;
		//border:1px solid white;
		width:510px;
		height:550px;
		background-color:black;
		margin-top:3px;
		margin-left:25px;
		float:left;
	}
	.fontColor1{
		color:white;
	}
	.fontColor2{
		color:Orange;
	}
	.font2{
		display:inline-block;
		width:50px;
		//border:1px solid white;
		//text-align:center;
		//margin-top:2px;
	}
	.checkbox span{
		margin-bottom:5px;
		width:64px;
		display:inline-block;
	}
	.checkbox{
		margin-left:10px;
	}
	.fontTop{
		//margin-top:10px;
		//margin-bottom:10px;
		font-size:15px;
		text-align:center;
	}
	.a{
		display:inline-block;
		//border:1px solid white;
		margin:11px 5px;
	}
	.imgFont{
		text-align:center;
		width:55px;
		margin-top:5px;
		//border:1px solid white;
	}
</style>
<body>
	<div class="box">
		<div id="div1" class="div1 fontColor1">
			<p class="fontTop">英雄资料</p>
			<div class="checkbox" style="//border:solid 1px white;">
				<span><input type="checkbox">坦克</span>
				<span><input type="checkbox">法师</span>
				<span><input type="checkbox">刺客</span>
				<span><input type="checkbox">辅助</span>
				<span><input type="checkbox">新手</span>
				<span><input type="checkbox">近战</span>
				<span><input type="checkbox">远程</span>
				<span><input type="checkbox">推进</span>
				<span><input type="checkbox">打野</span>
				<span><input type="checkbox">后期</span>
				<span><input type="checkbox">潜行</span>
				<span><input type="checkbox">战士</span>
			</div>
			<p class="fontColor2" style="margin-left:15px;">英雄价格:</p>
			<div class="checkbox">
				<span><input type="checkbox">6300</span>
				<span><input type="checkbox">4800</span>
				<span><input type="checkbox">3150</span>
				<span><input type="checkbox">4200</span>
				<span><input type="checkbox">450</span>
			</div>
			<p class="fontTop">物品资料</p>
			<div class="checkbox">
				<span><input type="checkbox">生命值</span>
				<span><input type="checkbox">攻击速度</span>
				<span><input type="checkbox">护甲穿透</span>
				<span><input type="checkbox">暴击</span>
				<span><input type="checkbox">法术穿透</span>
				<span><input type="checkbox">魔法抗性</span>
				<span><input type="checkbox">法术伤害</span>
				<span><input type="checkbox">物理伤害</span>
				<span><input type="checkbox">消耗品</span>
				<span><input type="checkbox">韧性</span>
				<span><input type="checkbox">法力值</span>
				<span><input type="checkbox">生命偷取</span>
				<span><input type="checkbox">冷却缩减</span>
				<span><input type="checkbox">生命回复</span>
				<span><input type="checkbox">附魔</span>
				<span><input type="checkbox">法力回复</span>
				<span><input type="checkbox">法术吸血</span>
				<span><input type="checkbox">移动速度</span>
				<span><input type="checkbox">护甲值</span>
			</div>
			<p class="fontTop">符文资料</p>
		</div>
		
		<div id="div2" class="div2">	
			<span class="a">
				<img src="0.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="1.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="2.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="3.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="8.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="10.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="35.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
		</div>
		
	<div>
</body>
</html>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-01-14 交作业!
猎手



站长,您看我这个全用div和span做的,可以么?
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>
	body{
		font-family:宋体;
		font-size:11px;
	}
	.box{
		//border:1px solid;
		width:769px;
		height:554px;
		background-color:gray;
		margin:0px auto;
	}
	.div1{
		//display:inline-block;
		//border:1px solid;
		width:220px;
		height:500px;
		background-color:black;
		margin-top:3px;
		margin-left:5px;
		//margin-bottom:50px;
		float:left;
		//padding-top:50px;
		
	}
	.div2 img{
		//display:inline-block;
		width:55px;
		height:55px;
		border:1px solid white;
	}
	.div2{
		//display:inline-block;
		//border:1px solid white;
		width:510px;
		height:550px;
		background-color:black;
		margin-top:3px;
		margin-left:25px;
		float:left;
	}
	.fontColor1{
		color:white;
	}
	.fontColor2{
		color:Orange;
	}
	.font2{
		display:inline-block;
		width:50px;
		//border:1px solid white;
		//text-align:center;
		//margin-top:2px;
	}
	.checkbox span{
		margin-bottom:5px;
		width:64px;
		display:inline-block;
	}
	.checkbox{
		margin-left:10px;
	}
	.fontTop{
		//margin-top:10px;
		//margin-bottom:10px;
		font-size:15px;
		text-align:center;
	}
	.a{
		display:inline-block;
		//border:1px solid white;
		margin:11px 5px;
	}
	.imgFont{
		text-align:center;
		width:55px;
		margin-top:5px;
		//border:1px solid white;
	}
</style>
<body>
	<div class="box">
		<div id="div1" class="div1 fontColor1">
			<p class="fontTop">英雄资料</p>
			<div class="checkbox" style="//border:solid 1px white;">
				<span><input type="checkbox">坦克</span>
				<span><input type="checkbox">法师</span>
				<span><input type="checkbox">刺客</span>
				<span><input type="checkbox">辅助</span>
				<span><input type="checkbox">新手</span>
				<span><input type="checkbox">近战</span>
				<span><input type="checkbox">远程</span>
				<span><input type="checkbox">推进</span>
				<span><input type="checkbox">打野</span>
				<span><input type="checkbox">后期</span>
				<span><input type="checkbox">潜行</span>
				<span><input type="checkbox">战士</span>
			</div>
			<p class="fontColor2" style="margin-left:15px;">英雄价格:</p>
			<div class="checkbox">
				<span><input type="checkbox">6300</span>
				<span><input type="checkbox">4800</span>
				<span><input type="checkbox">3150</span>
				<span><input type="checkbox">4200</span>
				<span><input type="checkbox">450</span>
			</div>
			<p class="fontTop">物品资料</p>
			<div class="checkbox">
				<span><input type="checkbox">生命值</span>
				<span><input type="checkbox">攻击速度</span>
				<span><input type="checkbox">护甲穿透</span>
				<span><input type="checkbox">暴击</span>
				<span><input type="checkbox">法术穿透</span>
				<span><input type="checkbox">魔法抗性</span>
				<span><input type="checkbox">法术伤害</span>
				<span><input type="checkbox">物理伤害</span>
				<span><input type="checkbox">消耗品</span>
				<span><input type="checkbox">韧性</span>
				<span><input type="checkbox">法力值</span>
				<span><input type="checkbox">生命偷取</span>
				<span><input type="checkbox">冷却缩减</span>
				<span><input type="checkbox">生命回复</span>
				<span><input type="checkbox">附魔</span>
				<span><input type="checkbox">法力回复</span>
				<span><input type="checkbox">法术吸血</span>
				<span><input type="checkbox">移动速度</span>
				<span><input type="checkbox">护甲值</span>
			</div>
			<p class="fontTop">符文资料</p>
		</div>
		
		<div id="div2" class="div2">	
			<span class="a">
				<img src="0.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="1.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="2.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="3.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="8.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="10.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="35.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
			<span class="a">
				<img src="5.jpg"/>
				<div class="imgFont">
					<span class="fontColor2 font2">牛头酋长阿里斯塔</span>
				</div>
			</span>
		</div>
		
	<div>
</body>
</html>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-12-21 交作业
2017-11-25 可以使用表格嵌套,更方便的排版。
2017-11-25 在ie及edge中部分图片无法显示
2017-11-22 交作业咯!
2017-10-20 交个作业!~
2017-07-23 答案显示得有问题,那个布局。
2017-05-25 chrome显示问题
2017-04-15 关于水平居中的问题
2016-06-22 大神。跪求答案
2016-06-16 假如能把练习的答案发下就好了




提问之前请登陆
关于 前端基础-CSS-综合性练习2 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图