how2j.cn

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

工具版本兼容问题
需要的人物头像在右侧



步骤 1 :

练习效果图

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


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


问答区域    
2019-03-06 提交作业
1998whh914



思路: 1.先创建整体容器div控制其宽度,保证其不会跟随页面缩放变化 2.在整体容器中创建两个容器,一个靠左的left-div,一个靠右的right-div。此为重要的两个部分 3.对靠左的left-div进行划分从上到下依次是: div-英雄资料 div: table-属性表格 div: div-英雄价格 div: table-属性表格 div-物品资料 div: table-属性表格 div-符文 4.对靠右的right-div进行划分从外到里依次是: div-table 5.创建css,左侧css比较容易设定,右侧需要熟练掌握table的间距问题,另外还要知道控制文字行高的属性。 (PS:思路不止这么一条其实还可以很多种布局,习惯性用div来将网页划分成不同的区域,,不清楚这样算不算坏习惯)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>综合练习2</title>
<style>
body{
	
}
div.BG{
	width: 770px;
	background-color: #333333;
	font-family: "微软雅黑";
	font-size: 12px;
}
div.FloatLetf{
	width: 250px;
	float: left;
	background-color: #11141b;
	color: white;
	margin: 8px 5px;
}
div.HeroData,div.RuneData,div.ProperTypeFont{
	font-size: 16px;
	text-align: center;
	padding: 30px 0px;
}
div.Type table{
	width: 100%;
	background-color: #11141B;
}

div.FloatRight{
	overflow: hidden;
	
}
div.FloatRight img{
	width: 45px;
	border: #484d53;
	border-style: solid;
	border-width: 1px;
	padding: 1px;
}
div.FloatRight table{
	margin-top: 8px;
	text-align: center;
	background-color: #11141b;
	color: #ff9100;
	margin-left: 20px;
	line-height: 22px;
}
div.FloatRight table td{
	padding: 8px;
}
</style>

	</head>
	<body>
		
		<div class="BG">
			
			<div class="FloatLetf">
				
				<div class="HeroData">
					英雄资料
				</div>
				
				<div class="Type">
					<table>
						<tr>
							<td>
								<input type="checkbox" />
								<span>坦克</span>
							</td>
							<td>
								<input type="checkbox" />
								<span>法师</span>
							</td>
							<td>
								<input type="checkbox" />
								<span>刺客</span>
							</td>
						</tr>
						<tr>
							<td>
								<input type="checkbox" />
								<span>辅助</span>
							</td>
							<td>
								<input type="checkbox" />
								<span>新手</span>
							</td>
							<td>
								<input type="checkbox" />
								<span>近战</span>
							</td>
						</tr>
						<tr>
							<td>
								<input type="checkbox" />
								<span>远程</span>
							</td>
							<td>
								<input type="checkbox" />
								<span>推进</span>
							</td>
							<td>
								<input type="checkbox" />
								<span>打野</span>
							</td>
						</tr>
						<tr>
							<td>
								<input type="checkbox" />
								<span>后期</span>
							</td>
							<td>
								<input type="checkbox" />
								<span>潜行</span>
							</td>
							<td>
								<input type="checkbox" />
								<span>战士</span>
							</td>
						</tr>
					</table>
				</div>
				
				<div class="HeroCost">
					<div class="Type">
						<table>
							<tr>
								<td style="padding-left: 4px;color: #ff9900;">英雄价格:</td>
							</tr>
							<tr>
								<td colspan="3">
									<div style="border-bottom-style: dotted;border-bottom-width: 1px;border-bottom-color: #263145;"></div>
								</td>
							</tr>
							<tr>
							    <td>
								    <input type="checkbox" />
								    <span>6300</span>
							    </td>
							    <td>
								    <input type="checkbox" />
								    <span>4800</span>
							    </td>
							    <td>
							    	<input type="checkbox" />
								    <span>3150</span>
							    </td>
						    </tr>
						    <tr>
						    	<td>
						    		<input type="checkbox" />
						    		<span>1350</span>
						    	</td>
						    	<td>
						    		<input type="checkbox" />
						    		<span>450</span>
						    	</td>
						    </tr>
						</table>
					</div>
				</div>
				
				<div class="PropertyType">
					<div class="ProperTypeFont">物品资料</div>
					<div class="Type">
						<table>
							<tr>
								<td>
									<input type="checkbox" />
									<span>生命值</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>攻击速度</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>护甲穿透</span>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox" />
									<span>暴击</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>法术穿透</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>魔法抗性</span>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox" />
									<span>法术伤害</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>物理伤害</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>消耗品</span>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox" />
									<span>韧性</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>法力值</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>生命偷取</span>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox" />
									<span>冷却缩减</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>生命回复</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>附魔</span>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox" />
									<span>法力回复</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>法术吸血</span>
								</td>
								<td>
									<input type="checkbox" />
									<span>移动速度</span>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox" />
									<span>护甲值</span>
								</td>
							</tr>
						</table>
					</div>
				</div>
				
				<div class="RuneData">符文资料</div>
				
			</div>

            <div class="MiddleFilling"></div>

			<div class="FloatRight">
				<table>
					<tr>
						<td>
							<img src="img/lianxi2img/0.jpg" /><br/>沙漠死神<br/>内瑟斯
						</td>
						<td>
							<img src="img/lianxi2img/1.jpg" /><br/>冰霜女巫<br/>丽桑卓
						</td>
						<td>
							<img src="img/lianxi2img/2.jpg" /><br/>酒桶<br/>古拉加斯
						</td>
						<td>
							<img src="img/lianxi2img/3.jpg" /><br/>众星之子<br/>索拉卡
						</td>
						<td>
							<img src="img/lianxi2img/4.jpg" /><br/>暗裔剑魔<br/>亚托克斯
						</td>
						<td>
							<img src="img/lianxi2img/5.jpg" /><br/>盲僧<br/>李青
						</td>
						<td>
							<img src="img/lianxi2img/6.jpg" /><br/>雷霆咆哮<br/>沃利贝尔
						</td>
					</tr>
					<tr>
						<td>
							<img src="img/lianxi2img/7.jpg" /><br/>离群之刺<br/>阿卡丽
						</td>
						<td>
							<img src="img/lianxi2img/8.jpg" /><br/>扭曲树精<br/>茂凯
						</td>
						<td>
							<img src="img/lianxi2img/9.jpg" /><br/>流浪法师<br/>瑞兹
						</td>
						<td>
							<img src="img/lianxi2img/10.jpg" /><br/>虚空先知<br/>玛尔扎哈
						</td>
						<td>
							<img src="img/lianxi2img/11.jpg" /><br/>审判天使<br/>凯尔
						</td>
						<td>
							<img src="img/lianxi2img/12.jpg" /><br/>蜘蛛女皇<br/>伊莉丝
						</td>
						<td>
							<img src="img/lianxi2img/13.jpg" /><br/>水晶先锋<br/>斯卡纳
						</td>
					</tr>
					<tr>
						<td>
							<img src="img/lianxi2img/14.jpg" /><br/>离群之刺<br/>阿卡丽
						</td>
						<td>
							<img src="img/lianxi2img/15.jpg" /><br/>扭曲树精<br/>茂凯
						</td>
						<td>
							<img src="img/lianxi2img/16.jpg" /><br/>流浪法师<br/>瑞兹
						</td>
						<td>
							<img src="img/lianxi2img/17.jpg" /><br/>虚空先知<br/>玛尔扎哈
						</td>
						<td>
							<img src="img/lianxi2img/18.jpg" /><br/>审判天使<br/>凯尔
						</td>
						<td>
							<img src="img/lianxi2img/19.jpg" /><br/>蜘蛛女皇<br/>伊莉丝
						</td>
						<td>
							<img src="img/lianxi2img/20.jpg" /><br/>水晶先锋<br/>斯卡纳
						</td>
					</tr>
					<tr>
						<td>
							<img src="img/lianxi2img/21.jpg" /><br/>离群之刺<br/>阿卡丽
						</td>
						<td>
							<img src="img/lianxi2img/22.jpg" /><br/>扭曲树精<br/>茂凯
						</td>
						<td>
							<img src="img/lianxi2img/23.jpg" /><br/>流浪法师<br/>瑞兹
						</td>
						<td>
							<img src="img/lianxi2img/24.jpg" /><br/>虚空先知<br/>玛尔扎哈
						</td>
						<td>
							<img src="img/lianxi2img/25.jpg" /><br/>审判天使<br/>凯尔
						</td>
						<td>
							<img src="img/lianxi2img/26.jpg" /><br/>蜘蛛女皇<br/>伊莉丝
						</td>
						<td>
							<img src="img/lianxi2img/27.jpg" /><br/>水晶先锋<br/>斯卡纳
						</td>
					</tr>
					<tr>
						<td>
							<img src="img/lianxi2img/28.jpg" /><br/>离群之刺<br/>阿卡丽
						</td>
						<td>
							<img src="img/lianxi2img/29.jpg" /><br/>扭曲树精<br/>茂凯
						</td>
						<td>
							<img src="img/lianxi2img/30.jpg" /><br/>流浪法师<br/>瑞兹
						</td>
						<td>
							<img src="img/lianxi2img/31.jpg" /><br/>虚空先知<br/>玛尔扎哈
						</td>
						<td>
							<img src="img/lianxi2img/32.jpg" /><br/>审判天使<br/>凯尔
						</td>
						<td>
							<img src="img/lianxi2img/33.jpg" /><br/>蜘蛛女皇<br/>伊莉丝
						</td>
						<td>
							<img src="img/lianxi2img/34.jpg" /><br/>水晶先锋<br/>斯卡纳
						</td>
					</tr>
					<tr>
						<td>
							<img src="img/lianxi2img/35.jpg" /><br/>离群之刺<br/>阿卡丽
						</td>
						<td>
							<img src="img/lianxi2img/36.jpg" /><br/>扭曲树精<br/>茂凯
						</td>
						<td>
							<img src="img/lianxi2img/37.jpg" /><br/>流浪法师<br/>瑞兹
						</td>
						<td>
							<img src="img/lianxi2img/38.jpg" /><br/>虚空先知<br/>玛尔扎哈
						</td>
						<td>
							<img src="img/lianxi2img/39.jpg" /><br/>审判天使<br/>凯尔
						</td>
						<td>
							<img src="img/lianxi2img/40.jpg" /><br/>蜘蛛女皇<br/>伊莉丝
						</td>
						<td>
							<img src="img/lianxi2img/41.jpg" /><br/>水晶先锋<br/>斯卡纳
						</td>
					</tr>
					<tr>
						<td>
							<img src="img/lianxi2img/42.jpg" /><br/>离群之刺<br/>阿卡丽
						</td>
						<td>
							<img src="img/lianxi2img/43.jpg" /><br/>扭曲树精<br/>茂凯
						</td>
						<td>
							<img src="img/lianxi2img/44.jpg" /><br/>流浪法师<br/>瑞兹
						</td>
						<td>
							<img src="img/lianxi2img/45.jpg" /><br/>虚空先知<br/>玛尔扎哈
						</td>
						<td>
							<img src="img/lianxi2img/46.jpg" /><br/>审判天使<br/>凯尔
						</td>
						<td>
							<img src="img/lianxi2img/47.jpg" /><br/>蜘蛛女皇<br/>伊莉丝
						</td>
						<td>
							<img src="img/lianxi2img/48.jpg" /><br/>水晶先锋<br/>斯卡纳
						</td>
					</tr>
					<tr>
						<td>
							<img src="img/lianxi2img/49.jpg" /><br/>离群之刺<br/>阿卡丽
						</td>
						<td>
							<img src="img/lianxi2img/50.jpg" /><br/>扭曲树精<br/>茂凯
						</td>
						<td>
							<img src="img/lianxi2img/51.jpg" /><br/>流浪法师<br/>瑞兹
						</td>
						<td>
							<img src="img/lianxi2img/52.jpg" /><br/>虚空先知<br/>玛尔扎哈
						</td>
						<td>
							<img src="img/lianxi2img/53.jpg" /><br/>审判天使<br/>凯尔
						</td>
					</tr>
				</table>
			</div>
			
		</div>
		
	</body>
</html>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-02-28 案发沙发
tanhai
发生发发







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2019-01-24 太丑了 哈哈哈哈
2019-01-12 交作业 查英雄名字看的眼花
2019-01-12 交作业 查英雄名字看的眼花
2019-01-08 交作业
2019-01-01 丑陋的一批
2018-12-13 作业2
2018-12-05 交代码
2018-12-05 终于做的和答案效果差不多了
2018-11-28 交作业
2018-11-15 交作业
2018-11-12 交作业
2018-09-30 练习2提问
2018-09-30 练习2提问
2018-08-28 每次都是预先设置宽度
2018-08-26 左边用的table,右边全是div
2018-08-13 交作业
2018-08-03 交个作业
2018-06-25 参考了一下自己写的
2018-06-05 交作业!
2018-06-04 作业2
2018-05-17 站长给的答案,显示错位。uc和360都是,兼容性不太好。
2018-05-17 花了一天,终于做出来了
2018-03-01 交作业 哈哈
2018-03-01 交作业练习..
2018-01-14 交作业!
2018-01-14 交作业!
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群交流: 984886441
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图