how2j.cn

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

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


步骤 1 :

练习效果图

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


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


问答区域    
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>


							

						
				
					
						
			

		

	
		











1 个答案 
	

	
	

		
		


				
				
		
		
		
				云淡风清 
					

					
				
				

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

		

							
		
		
		
		
	
	
	












	






		
		
		
		
		














	

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






		

		

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

		
		

		

			

				
				
					
					

						
			

			

				
				
					
					

						
			

		

		
			
		

			
			

			
		

		
					
	


			







		
	
		
		
		
			

			

		
		
	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

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

					
	  

	  
	  
	  

	    
		

			

				
				
					
					
					
					
					
					Dfantuan 
					
					

					
					
					
					


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

 					
					
					
					
					

					

					
									
						

						

							
最上面那一行的白色不知道什么，还有左右位置的调整，我的思路是分开左右写的，先指定左侧浮动，最后右侧跟随，但是不成功，最后整个背景颜色设置，我想的是设置 div.all作为背景灰色并且设置大小的的，结果不成功

								
						
		
						

								
									
								
									
										

										
											加载中
										
										
										
									
								
						
		
						

							

								
<!DOCTYPE html>
<html lang="zh">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
          body{
               width: 1100px;
               font-size: 10px;
               color: azure;
               border-style: solid;
               background-color: rgb(102, 102, 95);
          }
          div.left{
               float: left;
          }
          table.left{
               width: 100%;
               padding:5px 10px 5px;
               background-color: black;
          }
          .title{
               text-align: center;
               font-size: 18px;
               font-weight: bold;
               padding: 5px 0px 15px;
          }
          .bottom{
               padding: 5px 0px 10px 5px;
               color: rgb(206, 159, 41);
               border-bottom: 1px dashed gray;
          }
          .top{
               padding-top: 10px;
          }
          div.right{
               float:right ;
               width: 78%;
              
          }
          table.right{
               width: 60px;
               padding:5px 10px 5px;
               background-color: black;
          }
          img{
               width: 60px;
               /* padding: 0px 10px 10px 15px; */
               margin: 5px 10px 5px 5px;
               border: 1px solid yellow;
          }
          .ylo{
               color: darkorange;
               text-align: center;
          }
     </style>
</head>
<body>
     <div class="all">
          <div class="left">
               <table class="left">
                    <tr>
                         <td  class="title" colspan="3">英雄资料</td>
                    </tr>
                    <tr class="checkbox">
                         <td><input type="checkbox" name="" id="">坦克</td>
                         <td><input type="checkbox" name="" id="">法师</td>
                         <td><input type="checkbox" name="" id="">战士</td>
                    </tr>
                    <tr class="checkbox">
                         <td><input type="checkbox" name="" id="">射手</td>
                         <td><input type="checkbox" name="" id="">刺客</td>
                         <td><input type="checkbox" name="" id="">辅助</td>
                    </tr>
                    <tr class="checkbox">
                         <td><input type="checkbox" name="" id="">新手</td>
                         <td><input type="checkbox" name="" id="">老手</td>
                         <td><input type="checkbox" name="" id="">福星</td>
                    </tr>
                    <tr class="checkbox">
                         <td><input type="checkbox" name="" id="">光暗</td>
                         <td><input type="checkbox" name="" id="">使者</td>
                         <td><input type="checkbox" name="" id="">天神</td>
                    </tr>
               </table>  
               <table class="left">
                    <tr>
                         <td class="bottom" colspan="3">英雄价格：</td>
                    </tr>
                    <tr>
                         <td class="top"><input type="checkbox">6300</td>
                         <td class="top"><input type="checkbox">1100</td>
                         <td class="top"><input type="checkbox">3200</td>
                    </tr>
                    <tr>
                         <td><input type="checkbox">2860</td>
                         <td><input type="checkbox">5000</td>
                    </tr>
               </table>
               <table class="left">
                    <tr>
                         <td  class="title" colspan="3">物品资料</td>
                    </tr>
                    <tr class="checkbox">
                         <td><input type="checkbox" name="" id="">生命值1</td>
                         <td><input type="checkbox" name="" id="">攻速</td>
                         <td><input type="checkbox" name="" id="">护甲</td>
                    </tr>
                    <tr class="checkbox">
                         <td><input type="checkbox" name="" id="">暴击</td>
                         <td><input type="checkbox" name="" id="">魔抗</td>
                         <td><input type="checkbox" name="" id="">法穿</td>
                    </tr>
                    <tr class="checkbox">
                         <td><input type="checkbox" name="" id="">法伤</td>
                         <td><input type="checkbox" name="" id="">法爆</td>
                         <td><input type="checkbox" name="" id="">消耗品</td>
                    </tr>
                    <tr class="checkbox">
                         <td><input type="checkbox" name="" id="">法力值</td>
                         <td><input type="checkbox" name="" id="">冷却缩减</td>
                         <td><input type="checkbox" name="" id="">生命偷取</td>
                    </tr>
                    <tr class="checkbox">
                         <td><input type="checkbox" name="" id="">法术吸血</td>
                         <td><input type="checkbox" name="" id="">附魔</td>
                         <td><input type="checkbox" name="" id="">物理吸血</td>
                    </tr>
               </table> 
               <table class="left">
                    <tr>
                         <td  class="title" colspan="3">物品资料</td>
                    </tr>
               </table>           
               </div>
          </div>
          <div class="right">
               <table class="right">
                    <tr class="ylo">
                         <td class="tt"><img src="./imgs/1.jpg" alt="">女巫</td>
                         <td><img src="./imgs/2.jpg" alt="">酒桶</td>
                         <td><img src="./imgs/3.jpg" alt="">奶妈</td>
                         <td><img src="./imgs/4.jpg" alt="">剑魔</td>
                         <td><img src="./imgs/5.jpg" alt="">盲僧</td>
                         <td><img src="./imgs/6.jpg" alt="">狗熊</td>
                         <td><img src="./imgs/7.jpg" alt="">阿卡丽</td>
                    </tr>
                    <tr class="ylo">
                         <td><img src="./imgs/8.jpg" alt="">大树</td>
                         <td><img src="./imgs/9.jpg" alt="">流浪法师</td>
                         <td><img src="./imgs/10.jpg" alt="">虚空先知</td>
                         <td><img src="./imgs/11.jpg" alt="">天使</td>
                         <td><img src="./imgs/12.jpg" alt="">蜘蛛</td>
                         <td><img src="./imgs/13.jpg" alt="">蝎子</td>
                         <td><img src="./imgs/14.jpg" alt="">妖姬</td>
                    </tr>
                    <tr class="ylo">
                         <td><img src="./imgs/15.jpg" alt="">龙女</td>
                         <td><img src="./imgs/16.jpg" alt="">皇子</td>
                         <td><img src="./imgs/17.jpg" alt="">刀妹</td>
                         <td><img src="./imgs/18.jpg" alt="">火男</td>
                         <td><img src="./imgs/19.jpg" alt="">豹女</td>
                         <td><img src="./imgs/20.jpg" alt="">星界游神</td>
                         <td><img src="./imgs/21.jpg" alt="">压缩</td>
                    </tr>
                    <tr class="ylo">
                         <td><img src="./imgs/22.jpg" alt="">死歌</td>
                         <td><img src="./imgs/23.jpg" alt="">卡特琳娜</td>
                         <td><img src="./imgs/24.jpg" alt="">维鲁斯</td>
                         <td><img src="./imgs/25.jpg" alt="">炼金术师</td>
                         <td><img src="./imgs/26.jpg" alt="">璐璐</td>
                         <td><img src="./imgs/27.jpg" alt="">黄鸡</td>
                         <td><img src="./imgs/28.jpg" alt="">大嘴</td>
                    </tr>
                    <tr class="ylo">
                         <td><img src="./imgs/29.jpg" alt="">女警</td>
                         <td><img src="./imgs/30.jpg" alt="">杰斯</td>
                         <td><img src="./imgs/31.jpg" alt="">光辉</td>
                         <td><img src="./imgs/32.jpg" alt="">人马</td>
                         <td><img src="./imgs/33.jpg" alt="">布隆</td>
                         <td><img src="./imgs/34.jpg" alt="">轮子妈</td>
                         <td><img src="./imgs/35.jpg" alt="">凯南</td>
                    </tr>
               </table>
          </div>
     </div>
</body>
</html>


							

						

								
						

							

								

							

						
				
					
						
			

		

	
		











1 个答案 
	

	
	

		
		


				
				
		
		
		
				慕羽1314 
					

					
				
				

				
				
					答案时间：2022-05-21
				
				
				
		
		

							
		
			
			
		
		
		
			
		
		
	
	
	












	






		
		
		
		
		














	

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






		

		

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

		
		

		

			

				
				
					
					

						
			

			

				
				
					
					

						
			

		

		
			
		

			
			

			
		

		
					
	


			







		
	
		
		
		
			

			

		
		
	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2022-03-19
	  		
	  				
	  					 
	  
					
						comprehensive exercise2 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

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

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2021-05-14
	  		
	  				
	  					 
	  
					
						答案有错，table多了个align="right"属性 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	






	






			
			
			
			
			









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


			













		

			
		

		

			
			提问之前请登陆
			
		





	

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






		

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

		

		
		
		

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


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

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

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

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



			

		 
		
		
		
		

		

		

			

				
					
						上传截图