how2j.cn

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

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


步骤 1 :

练习效果图

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


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


问答区域    
2020-06-09 练习2
piyi

关于 前端部分-CSS-综合性练习2 的提问



rt
加载中 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #interface{
            margin: 0 auto;
            margin-top: 100px;
            width: 770px;
            height: 555px;
            background-color: #333333;
        }
        .left{
            display: inline-block;
            width: 215px;
            height: 505px;
            margin: 10px 20px 40px 7px; 
            background-color:#11141B;
            font-size: 0.7em;
            float: left;
        }
        .left table{
            width: 90%;
            height: 108px;
            text-align: center;
            color: white;
        }
        .left span{
            margin-left: 15px;
            color: #F29202;
        }
        .left caption{
            font-size: 1.1em;
            margin: 10px 0;
        }
        .left hr{
            border: 0px;
            border-bottom: dashed 2px;
            color: #1D2533;
            margin: 10px 0px;
        }
        .tab2{
            height: 54px !important;
        }
        .tab3{
            height: 189px !important;
        }
        .right{
            display: inline-block;
            width: 520px;
            height: 545px;
            background-color:#11141B;
            margin-top: 10px;
            font-size: 0.7em;
        }
        .right table{
            text-align: center;
            height: 530px;
            width: 100%;
        }
        .right span{
            display: block;
            color: #F29202;
        }
    </style>
</head>
<body>
    <div id="interface">
        <div class="left">
            <table>
                <caption>英雄资料</caption>
                <tr>
                    <td><input type="checkbox" > 坦克</td>
                    <td><input type="checkbox" > 法师</td>
                    <td><input type="checkbox" > 刺客</td>
                </tr>
                <tr>
                    <td><input type="checkbox" > 辅助</td>
                    <td><input type="checkbox" > 新手</td>
                    <td><input type="checkbox" > 近战</td>
                </tr>
                <tr>
                    <td><input type="checkbox" > 远程</td>
                    <td><input type="checkbox" > 推进</td>
                    <td><input type="checkbox" > 打野</td>
                </tr>
                <tr>
                    <td><input type="checkbox" > 后期</td>
                    <td><input type="checkbox" > 潜行</td>
                    <td><input type="checkbox" > 战士</td>
                </tr>
            </table>
            <span>英雄价格:</span>
            <hr>
            <table class="tab2">
                <tr>
                    <td><input type="checkbox" > 6300</td>
                    <td><input type="checkbox" > 4800</td>
                    <td><input type="checkbox" > 3150</td>
                </tr>
                <tr>
                    <td><input type="checkbox" > 1350</td>
                    <td><input type="checkbox" > 450</td>
                </tr>
            </table>
            <table class="tab3">
                <caption>物品资料</caption>
                <tr>
                    <td><input type="checkbox" > 生命值</td>
                    <td><input type="checkbox" > 法师</td>
                    <td><input type="checkbox" > 刺客</td>
                </tr>
                <tr>
                    <td><input type="checkbox" > 辅助</td>
                    <td><input type="checkbox" > 新手</td>
                    <td><input type="checkbox" > 近战</td>
                </tr>
                <tr>
                    <td><input type="checkbox" > 远程</td>
                    <td><input type="checkbox" > 推进</td>
                    <td><input type="checkbox" > 打野</td>
                </tr>
                <tr>
                    <td><input type="checkbox" > 后期</td>
                    <td><input type="checkbox" > 潜行</td>
                    <td><input type="checkbox" > 战士</td>
                </tr>
                <tr>
                    <td><input type="checkbox" > 后期</td>
                    <td><input type="checkbox" > 潜行</td>
                    <td><input type="checkbox" > 战士</td>
                </tr>
                <tr>
                    <td><input type="checkbox" > 后期</td>
                    <td><input type="checkbox" > 潜行</td>
                    <td><input type="checkbox" > 战士</td>
                </tr>
                <tr>
                    <td><input type="checkbox" > 后期</td>
                </tr>
            </table>
            <table>
                <caption>符文资料</caption>
            </table>
        </div>
        <div class="right">
            <table>
                <tr>
                    <td>
                        <div>
                            <img src="lol\0.jpg" width="80%">
                        </div>
                        <span>沙漠死神</span>
                        <span>内瑟斯</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\1.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\2.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\3.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\4.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\5.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\6.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <img src="lol\7.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\8.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\9.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\10.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\11.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\12.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\13.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <img src="lol\14.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\15.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\16.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\17.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\18.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\19.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\20.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <img src="lol\21.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\22.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\23.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\24.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\25.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\26.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\27.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <img src="lol\28.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\29.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\30.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\31.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\32.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\33.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\34.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    
    
</body>
</html>

							

						
				
					
						
			

		

	
		
















	






		
		
		
		
		














	

		回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢	
	






		

		

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

		
		

		

			

				
				
					
					

						
			

			

				
				
					
					

						
			

		

		
			
		

			
			

			
		

		
					
	


			







		
	
		
		
		
			

			

		
		
	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2020-05-17
	  		
	  				
	  					 
	  
					
						基本完成了，瑕疵有点多 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  

	    
		

			

				
				
					
					
					
					
					
					liuyufalse123 
					
					

					
					
					
					


						
				
				
					
						
关于
							
							
								
									 
									前端部分-CSS-综合性练习2
									
								
							
							 的提问
						

 					
					
					
					
					

					

					
									
						

						

							
英雄名长的问题

								
						
		
						

								
									
								
									
										

										
											加载中
										
										
										
									
								
						
		
						

							

								
<!DOCTYPE html>
<html>
<head>
	<title>综合练习2</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../css/综合练习2.css"/>
</head>
<body>
	<div class="div1">
		<div class="div2 floatleft">
			<h4 class="h1">英雄资料</h4>
			<table class="table1 text">
				<tr>
					<td width="35%"><input type="checkbox" value="坦克">坦克</td>
					<td width="35%"><input type="checkbox" value="法师">法师</td>
					<td><input type="checkbox" value="刺客">刺客</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="辅助">辅助</td>
					<td><input type="checkbox" value="新手">新手</td>
					<td><input type="checkbox" value="近战">近战</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="远程">远程</td>
					<td><input type="checkbox" value="推进">推进</td>
					<td><input type="checkbox" value="打野">打野</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="后期">后期</td>
					<td><input type="checkbox" value="潜行">潜行</td>
					<td><input type="checkbox" value="战士">战士</td>
				</tr>
			</table>
			<p class="p2">英雄价格:</p>
			<table class="table1 text">
				<tr>
					<td width="35%"><input type="checkbox" value="6300">6300</td>
					<td width="35%"><input type="checkbox" value="4800">4800</td>
					<td><input type="checkbox" value="3150">3150</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="1350">1350</td>
					<td><input type="checkbox" value="450">450</td>
				</tr>
			</table>
			<h4 class="h1">物品资料</h4>
			<table class="table1 text">
				<tr>
					<td width="35%"><input type="checkbox" value="生命值">生命值</td>
					<td width="35%"><input type="checkbox" value="攻击速度">攻击速度</td>
					<td><input type="checkbox" value="护甲穿透">护甲穿透</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="暴击">暴击</td>
					<td><input type="checkbox" value="法术穿透">法术穿透</td>
					<td><input type="checkbox" value="魔法抗性">魔法抗性</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="法术伤害">法术伤害</td>
					<td><input type="checkbox" value="物理伤害">物理伤害</td>
					<td><input type="checkbox" value="消耗品">消耗品</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="韧性">韧性</td>
					<td><input type="checkbox" value="法力值">法力值</td>
					<td><input type="checkbox" value="生命偷取">生命偷取</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="冷却缩减">冷却缩减</td>
					<td><input type="checkbox" value="生命回复">生命回复</td>
					<td><input type="checkbox" value="附魔">附魔</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="法力回复">法力回复</td>
					<td><input type="checkbox" value="法术吸血">法术吸血</td>
					<td><input type="checkbox" value="移动速度">移动速度</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="护甲值">护甲值</td>
				</tr>
			</table>
			<h4 class="h1">符文资料</h4>
		</div>
		<div class="div3 floatright">
			<table class="table2 text2">
				<tr>
					<td><img src="../../../image/imgs/0.jpg"><br/><span>沙漠死神</span><br/><span>内瑟斯</span></td>
					<td><img src="../../../image/imgs/1.jpg"><br/><span>冰霜女巫</span><br/><span>丽桑卓</span></td>
					<td><img src="../../../image/imgs/2.jpg"><br/><span>酒桶</span><br/><span>古拉加斯</span></td>
					<td><img src="../../../image/imgs/3.jpg"><br/><span>众星之子</span><br/><span>索拉卡</span></td>
					<td><img src="../../../image/imgs/4.jpg"><br/><span>剑魔</span><br/><span>亚托克斯</span></td>
					<td><img src="../../../image/imgs/5.jpg"><br/><span>盲僧</span><br/><span>李青</span></td>
					<td><img src="../../../image/imgs/6.jpg"><br/><span>雷霆咆哮</span><br/><span>沃利贝尔</span></td>
				</tr>
				<tr>
					<td><img src="../../../image/imgs/7.jpg"><br/><span>离群之刺</span><br/><span>阿卡丽</span></td>
					<td><img src="../../../image/imgs/8.jpg"><br/><span>扭曲树精</span><br/><span>茂凯</span></td>
					<td><img src="../../../image/imgs/9.jpg"><br/><span>符文法师</span><br/><span>瑞兹</span></td>
					<td><img src="../../../image/imgs/10.jpg"><br/><span>虚空先知</span><br/><span>凯尔</span></td>
					<td><img src="../../../image/imgs/11.jpg"><br/><span>正义天使</span><br/><span>内瑟斯</span></td>
					<td><img src="../../../image/imgs/12.jpg"><br/><span>蜘蛛女皇</span><br/><span>伊莉丝</span></td>
					<td><img src="../../../image/imgs/13.jpg"><br/><span>水晶先锋</span><br/><span>斯卡纳</span></td>
				</tr>
				<tr>
					<td><img src="../../../image/imgs/14.jpg"><br/><span>诡术妖姬</span><br/><span>乐芙兰</span></td>
					<td><img src="../../../image/imgs/15.jpg"><br/><span>龙血武姬</span><br/><span>希瓦娜</span></td>
					<td><img src="../../../image/imgs/16.jpg"><br/><span>德玛西亚皇子</span><br/><span>嘉文四世</span></td>
					<td><img src="../../../image/imgs/17.jpg"><br/><span>刀锋舞者</span><br/><span>艾瑞莉娅</span></td>
					<td><img src="../../../image/imgs/18.jpg"><br/><span>复仇焰魂</span><br/><span>布兰德</span></td>
					<td><img src="../../../image/imgs/19.jpg"><br/><span>狂野女猎手</span><br/><span>奈德丽</span></td>
					<td><img src="../../../image/imgs/20.jpg"><br/><span>蒸汽机器人</span><br/><span>布里茨</span></td>
				</tr>
				<tr>
					<td><img src="../../../image/imgs/21.jpg"><br/><span>疾风剑豪</span><br/><span>亚索</span></td>
					<td><img src="../../../image/imgs/22.jpg"><br/><span>死亡颂唱者</span><br/><span>卡尔萨斯</span></td>
					<td><img src="../../../image/imgs/23.jpg"><br/><span>不祥之刃</span><br/><span>卡特琳娜</span></td>
					<td><img src="../../../image/imgs/24.jpg"><br/><span>惩戒之箭</span><br/><span>韦鲁斯</span></td>
					<td><img src="../../../image/imgs/25.jpg"><br/><span>诺克萨斯统领</span><br/><span>斯维因</span></td>
					<td><img src="../../../image/imgs/26.jpg"><br/><span>仙灵女巫</span><br/><span>璐璐</span></td>
					<td><img src="../../../image/imgs/27.jpg"><br/><span>沙漠皇帝</span><br/><span>阿兹尔</span></td>
				</tr>
				<tr>
					<td><img src="../../../image/imgs/28.jpg"><br/><span>深渊巨口</span><br/><span>克格莫</span></td>
					<td><img src="../../../image/imgs/29.jpg"><br/><span>皮城女警</span><br/><span>凯特琳</span></td>
					<td><img src="../../../image/imgs/30.jpg"><br/><span>未来守护者</span><br/><span>杰斯</span></td>
					<td><img src="../../../image/imgs/31.jpg"><br/><span>光辉女郎</span><br/><span>拉克丝</span></td>
					<td><img src="../../../image/imgs/32.jpg"><br/><span>战争之影</span><br/><span>赫卡里姆</span></td>
					<td><img src="../../../image/imgs/33.jpg"><br/><span>弗雷尔卓德之心</span><br/><span>布隆</span></td>
					<td><img src="../../../image/imgs/34.jpg"><br/><span>战争女神</span><br/><span>希维尔</span></td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>

css文件
div.div1{
	width: 850px;
	height: 600px;
	background-color: #383838;
	padding-top: 10px;
}

div.div2{
	width: 250px;
	height: 560px;
	background-color:black;
	margin-left: 5px;
	margin-right: 15px;
	padding: 0px 10px;
}
h4.h1{
	font-family: 黑体;
	font-size: 14px;
	color: #FFFFFF;
	width: 250px;
	text-align: center;
}
table.table1{
	width: 250px;
	padding-left: 10px;
}
.floatleft{
	float: left;
}
.floatright{
	float: right;
}
.text{
	font-size: 1px;
	color: #FFFFFF;
}
p.p2{
	border-bottom:1px dashed #5C5C5C;
	color: #CD8500;
	font-size: 10px;
	font-family: 黑体;
	padding-bottom:10px;
}
div.div3{
	width: 520px;
	height: 595px;
	background-color:black;
	margin-right: 15px;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;

}
img{
	width: 50px;
	height: 50px;
	border: 1px solid #C2C2C2;
	margin:5px;
}
table.table2{
	width: 520px;
	text-align: center;
}
.text2{
	color: #CD8500;
	font-size: 1px;
	font-family: 黑体;
}
span{
	display: inline-block;
	margin-bottom: 5px;
}

							

						

								
						

							

								

							

						
				
					
						
			

		

	
		
















	






		
		
		
		
		














	

		回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢	
	






		

		

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

		
		

		

			

				
				
					
					

						
			

			

				
				
					
					

						
			

		

		
			
		

			
			

			
		

		
					
	


			







		
	
		
		
		
			

			

		
		
	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2020-05-14
	  		
	  				
	  					 
	  
					
						做的很粗糙 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2020-04-04
	  		
	  				
	  					 
	  
					
						淦，500多行。。。 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2020-03-20
	  		
	  				
	  					 
	  
					
						站长，后端的用不用做这些啊，感觉都没人做？ 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	






	






			
			
			
			
			









提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 27 条以前的提问，请 点击查看 


			













		

			
		

		

			
			提问之前请登陆
			
		





	

		提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢	
	






		

		
关于
		 
		前端部分-CSS-综合性练习2 
		
		 的提问

		

		
		
		

		
尽量提供截图、代码和异常信息，有助于分析和解决问题。
		
		
		
		
			也可进本站QQ群交流: 745032160
			


				提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。

				对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度 

				在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。

				请使用和站长一样的版本，可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了，都统一放在了这里， 方便大家下载：
				https://how2j.cn/k/helloworld/helloworld-version/1718.html
				 
				
				
				
				 



			

		 
		
		
		
		

		

		

			

				
					
						上传截图