how2j.cn

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

解压rar如果失败，请用5.21版本或者更高版本的winrar

点击下载 winrar5.21

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


步骤 1 :

练习效果图

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


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


问答区域    
2024-07-24 CSS 布局综合练习2
虚心求学

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



使用 table 和 float 结合的样式实现。 文件路径和组成: 类别 路径 html 文件： 根目录\.html CSS 文件： 根目录\CSS\style.css imgs 文件： 根目录\imgs\...
加载中 
/*----------------------- CSS文件 ------------------------------*/
 
body,table{
    font-family:宋体;
    font-size:10px;
    color:F4F4F4;
    background-color:#11141B;
}
 
div#left{
    padding-left:15px;
    padding-right:15px;
    margin-right:
}
 
div#right{
 
}
 
.lfloat{
    float:left;
}
 
.rfloat{
    float:right;
}
 
 
.title{
    font-size:15px;
    text-align:center;
}
 
.orange{
    color:#FF9100;
    font-weight:bold;
    margin-left:15px;
    font-size:10px;
}
 
.cbox td{
    width:75px;
    text-align:left;
}
 
.left-top{
    padding:0px;
    border-bottom:1px dashed #666;
    margin-bottom:10px;
}
 
table{
    margin-left:8px;
    margin-right:8px;
}
 
.largecbox td{
    width:75px;
}
 
.left-bottom{
    margin-bottom:38px;
}
 
img{
    margin-top:5px;
    width:62px;
    height:62px;
    border:1px solid #666;
}
 
.picture{
    text-align:center;
    color:#FF9100
}
 
.picture img{
    margin-bottom:14px;
    margin-left:5px;
    margin-right:5px;
}
 
.picture td{
    text-align:center;
    margin-bottom:14px;
    line-height:135%;
}
 
<!-------------------------- html 文件 --------------------------->
 
<html>
    <head>
    <meta http-equiv="Content-Type" connect="text/html; charset=UTF-8"/>
    </head>
    <link rel = "stylesheet" type = "text/css" href = "./css/style.css">
 
    <body>
        <div id="info" class="lfloat">
     
    <div class="left-top">
    <div class="title"><p>英雄资料</p></div>
    <table class = "cbox">
        <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>
    <p class="orange" style="font-size:10px;">英雄价格:</p>
    </div>
    <div class="left-mid">
     
    <table class = "cbox">
        <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>
    </table>
    </div>
    <div class="left-bottom">
    <div class="title"><p>物品资料</p></div>
    <table class = "largecbox">
        <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>
    <div class="title"><p>符文资料</p></div>
    </div>
        </div>
     
        <div id="right" class="lfloat">
    <table class="picture">
        <tr>
            <td>
            <img src="./imgs/0.jpg"/>
            <div>牛头酋长</div>
            <div>阿利斯塔</div>
            </td>
            <td>
            <img src="./imgs/1.jpg"/>
            <div>钢铁大侠</div>
            <div>波比</div>
            </td>
            <td>
            <img src="./imgs/2.jpg"/>
            <div>殇之木乃伊</div>
            <div>阿木木</div>
            </td>
            <td>
            <img src="./imgs/3.jpg"/>
            <div>冰晶凤凰</div>
            <div>艾尼维亚</div>
            </td>
            <td>
            <img src="./imgs/4.jpg"/>
            <div>黑暗之女</div>
            <div>安妮</div>
            </td>
            <td>
            <img src="./imgs/5.jpg"/>
            <div>寒冰猎手</div>
            <div>艾希</div>
            </td>
            <td>
            <img src="./imgs/6.jpg"/>
            <div>蒸汽机机器人</div>
            <div>布里茨</div>
            </td>
        </tr>
        <tr>
            <td>
            <img src="./imgs/7.jpg"/>
            <div>牛头酋长</div>
            <div>阿利斯塔</div>
            </td>
            <td>
            <img src="./imgs/8.jpg"/>
            <div>钢铁大侠</div>
            <div>波比</div>
            </td>
            <td>
            <img src="./imgs/9.jpg"/>
            <div>殇之木乃伊</div>
            <div>阿木木</div>
            </td>
            <td>
            <img src="./imgs/10.jpg"/>
            <div>冰晶凤凰</div>
            <div>艾尼维亚</div>
            </td>
            <td>
            <img src="./imgs/11.jpg"/>
            <div>黑暗之女</div>
            <div>安妮</div>
            </td>
            <td>
            <img src="./imgs/12.jpg"/>
            <div>寒冰猎手</div>
            <div>艾希</div>
            </td>
            <td>
            <img src="./imgs/13.jpg"/>
            <div>蒸汽机机器人</div>
            <div>布里茨</div>
            </td>
        </tr>
        <tr>
            <td>
            <img src="./imgs/14.jpg"/>
            <div>牛头酋长</div>
            <div>阿利斯塔</div>
            </td>
            <td>
            <img src="./imgs/15.jpg"/>
            <div>钢铁大侠</div>
            <div>波比</div>
            </td>
            <td>
            <img src="./imgs/16.jpg"/>
            <div>殇之木乃伊</div>
            <div>阿木木</div>
            </td>
            <td>
            <img src="./imgs/17.jpg"/>
            <div>冰晶凤凰</div>
            <div>艾尼维亚</div>
            </td>
            <td>
            <img src="./imgs/18.jpg"/>
            <div>黑暗之女</div>
            <div>安妮</div>
            </td>
            <td>
            <img src="./imgs/19.jpg"/>
            <div>寒冰猎手</div>
            <div>艾希</div>
            </td>
            <td>
            <img src="./imgs/20.jpg"/>
            <div>蒸汽机机器人</div>
            <div>布里茨</div>
            </td>
        </tr>
        <tr>
            <td>
            <img src="./imgs/21.jpg"/>
            <div>牛头酋长</div>
            <div>阿利斯塔</div>
            </td>
            <td>
            <img src="./imgs/22.jpg"/>
            <div>钢铁大侠</div>
            <div>波比</div>
            </td>
            <td>
            <img src="./imgs/23.jpg"/>
            <div>殇之木乃伊</div>
            <div>阿木木</div>
            </td>
            <td>
            <img src="./imgs/24.jpg"/>
            <div>冰晶凤凰</div>
            <div>艾尼维亚</div>
            </td>
            <td>
            <img src="./imgs/25.jpg"/>
            <div>黑暗之女</div>
            <div>安妮</div>
            </td>
            <td>
            <img src="./imgs/26.jpg"/>
            <div>寒冰猎手</div>
            <div>艾希</div>
            </td>
            <td>
            <img src="./imgs/27.jpg"/>
            <div>蒸汽机机器人</div>
            <div>布里茨</div>
            </td>
        </tr>
        <tr>
            <td>
            <img src="./imgs/28.jpg"/>
            <div>牛头酋长</div>
            <div>阿利斯塔</div>
            </td>
            <td>
            <img src="./imgs/29.jpg"/>
            <div>钢铁大侠</div>
            <div>波比</div>
            </td>
            <td>
            <img src="./imgs/30.jpg"/>
            <div>殇之木乃伊</div>
            <div>阿木木</div>
            </td>
            <td>
            <img src="./imgs/31.jpg"/>
            <div>冰晶凤凰</div>
            <div>艾尼维亚</div>
            </td>
            <td>
            <img src="./imgs/32.jpg"/>
            <div>黑暗之女</div>
            <div>安妮</div>
            </td>
            <td>
            <img src="./imgs/33.jpg"/>
            <div>寒冰猎手</div>
            <div>艾希</div>
            </td>
            <td>
            <img src="./imgs/34.jpg"/>
            <div>蒸汽机机器人</div>
            <div>布里茨</div>
            </td>
        </tr>
    </table>
        </div>
    </body>
</html>

							

						
				
					
						
			

		

	
		
















	






		
		
		
		
		














	

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






		

		

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

		
		

		

			

				
				
					
					

						
			

			

				
				
					
					

						
			

		

		
			
		

			
			

			
		

		
					
	


			







		
	
		
		
		
			

			

		
		
	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2022-06-15
	  		
	  				
	  					 
	  
					
						什么方式都试过了，左边还是不能居中 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  

	    
		

			

				
				
					
					
					
					
					
					田萬 
					
					

					
					
					
					


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

 					
					
					
					
					

					

					
									
						

						

							
尽力了，左边真的不知道怎么居中

								
						
		
						

								
									
								
									
										

										
											加载中
										
										
										
									
								
						
		
						

							

								
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		  .header{
			  background-color: dimgrey;
			  height: 550px;
			  width: 800px;
		  }
		  img{
			  width: 50px;
			  height: 50px;
		  }
		  .left{
			  background-color: black;
			  color: white;
			  width: 300px;
		  }
		 .a{
			 padding: 10px 0px;
			 text-align: center;
		 }
		 .right{
			 position: absolute;
			 left: 300px;
			 top: 25px;
			 background-color: #000000;
			 color: darkorange;
		 }
		 img{
			 margin: 0px;
			 padding:11px 0px;
			 border: 1px solid #696969;
		 }
		 span{
			 text-align: center;
		 }
		.input{
			border: 1px solid #696969;
		}
		</style>
	</head>
	<body>
   <div class="header">	
		<div class="left">
		<h4 class="a">英雄资料</h4>
		<div class="top" style="text-align: center;">
			<table >
			 <tr style="text-align: center;">
			     <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>
		   </div>
		   <h5 style="color: #FF8C00;">英雄价格:</h5>
		   <div class="center">
		<table>
		   <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>
	   </div>
	    <h4 class="a">物品资料</h4>
		<div class="foot">
		  <table>
		<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>
   </div>
   </div>
   <div class="right">
	  <table>
	   <tr>
		   <td><img src="img/0.jpg" ></td>
		   <td><img src="img/1.jpg" ></td>
		   <td><img src="img/10.jpg" ></td>
		   <td><img src="img/11.jpg" ></td>
		   <td><img src="img/12.jpg" ></td>
		   <td><img src="img/13.jpg" ></td>
		   <td><img src="img/14.jpg" ></td>
	   </tr>
	   <tr>
		   <td><span>沙漠死神</span></td>
		   <td><span>冰霜女巫</span></td>
		   <td><span>虚空先知</span></td>
		   <td><span>神圣天使</span></td>
		   <td><span>蜘蛛女皇</span></td>
		   <td><span>虚空恶魔</span></td>
		   <td><span>诡术妖姬</span></td>
	   </tr>
	   <tr>
		   <td><img src="img/15.jpg" ></td>
		   <td><img src="img/16.jpg" ></td>
		   <td><img src="img/17.jpg" ></td>
		   <td><img src="img/18.jpg" ></td>
		   <td><img src="img/19.jpg" ></td>
		   <td><img src="img/2.jpg" ></td>
		   <td><img src="img/20.jpg" ></td>
	   </tr>
	   <tr>
		   <td><span>龙血武姬</span></td>
		   <td><span>德玛西亚</span></td>
		   <td><span>刀锋意志</span></td>
		   <td><span>复仇火焰</span></td>
		   <td><span>豹女</span></td>
		   <td><span>酒桶</span></td>
		   <td><span>布里茨</span></td>
	   </tr>
	   <tr>
		   <td><img src=" img/21.jpg" ></td>
		   <td><img src="img/22.jpg" ></td>
		   <td><img src="img/23.jpg" ></td>
		   <td><img src="img/24.jpg" ></td>
		   <td><img src="img/25.jpg" ></td>
		   <td><img src="img/26.jpg" ></td>
		   <td><img src="img/27.jpg" ></td>
	   </tr>
	   <tr>
		   <td><span>疾风剑豪</span></td>
		   <td><span>死亡唱诵</span></td>
		   <td><span>不详之刃</span></td>
		   <td><span>惩戒之箭</span></td>
		   <td><span>炼金术士</span></td>
		   <td><span>精灵女巫</span></td>
		   <td><span>沙漠之神</span></td>
	   </tr>
	   <tr>
		   <td><img src="img/28.jpg" ></td>
		   <td><img src="img/29.jpg" ></td>
		   <td><img src="img/3.jpg" ></td>
		   <td><img src="img/30.jpg" ></td>
		   <td><img src="img/31.jpg" ></td>
		   <td><img src="img/32.jpg" ></td>
		   <td><img src="img/33.jpg" ></td>
	   </tr>
	   <tr>
		   <td><span>深渊巨口</span></td>
		   <td><span>皮城女警</span></td>
		   <td><span>众星之子</span></td>
		   <td><span>未来守护</span></td>
		   <td><span>光辉女郎</span></td>
		   <td><span>战争之影</span></td>
		   <td><span>费雷尔卓</span></td>
	   </tr>
	   <tr>
		   <td><img src="img/34.jpg" ></td>
		   <td><img src="img/35.jpg" ></td>
		   <td><img src="img/36.jpg" ></td>
		   <td><img src="img/37.jpg" ></td>
		   <td><img src="img/38.jpg" ></td>
		   <td><img src="img/39.jpg" ></td>
		   <td><img src="img/4.jpg" ></td>
	   </tr>
	   <tr>
		   <td><span>战争之女</span></td>
		   <td><span>狂暴之心</span></td>
		   <td><span>蛮族之王</span></td>
		   <td><span>皎月女神</span></td>
		   <td><span>海洋之灾</span></td>
		   <td><span>麦林炮手</span></td>
		   <td><span>无双剑魔</span></td>
	   </tr>
	   </table>
   </div>
  </div>  
</body>
</html>


							

						

								
						

							

								

							

						
				
					
						
			

		

	
		











2 个答案 
	

	
	

		
		


				
				
		
		
		
				CharlieLong 
					

					
				
				

				
				
					答案时间：2023-10-27
				
				
				
		
		
			
交作业啦！

		

							
		
			
			
		
		
		
			
		
		
	

		
		


				
				
		
		
		
				云淡风清 
					

					
				
				

				
				
					答案时间：2022-12-14
				
				
				
		
		
			
我看了下，你左边那些复选框也是用table做的，如果你是想要左边那些复选框对齐的话，在你代码的style中加入这个样式就可以了：.left td {width:120px;text-align:left;} 你可以试试。 

		

							
		
		
		
		
	
	
	












	






		
		
		
		
		














	

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






		

		

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

		
		

		

			

				
				
					
					

						
			

			

				
				
					
					

						
			

		

		
			
		

			
			

			
		

		
					
	


			







		
	
		
		
		
			

			

		
		
	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2022-03-20
	  		
	  				
	  					 
	  
					
						表格样式做的，问题挺多的 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2022-03-19
	  		
	  				
	  					 
	  
					
						comprehensive exercise2 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2021-09-14
	  		
	  				
	  					 
	  
					
						供参考，采用表格编写 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	






	






			
			
			
			
			









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


			













		

			
		

		

			
			提问之前请登陆
			
		





	

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






		

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

		

		
		
		

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


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

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

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

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



			

		 
		
		
		
		

		

		

			

				
					
						上传截图