how2j.cn

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

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



步骤 1 :

练习效果图

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


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


问答区域    
2022-06-15 什么方式都试过了,左边还是不能居中
田萬




尽力了,左边真的不知道怎么居中
加载中
<!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 表格样式做的,问题挺多的
Dfantuan




最上面那一行的白色不知道什么,还有左右位置的调整,我的思路是分开左右写的,先指定左侧浮动,最后右侧跟随,但是不成功,最后整个背景颜色设置,我想的是设置 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

上传截图