how2j.cn

下载区
文件名 文件大小
img.rar 41k
answer.rar 42k

工具版本兼容问题
用到的图片在右侧



步骤 1 :

练习-综合练习1

edit
练习-综合练习1


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


问答区域    
2019-10-22 提交作业
啊勤小伙子



交作业,还有个德玛西亚 的作业也放一起了,大部分都是通过计算 边距 ,直接复制全部代码就好了
<style>
td{
 background-color:gray;
}
 .alllength{
 width:888px;

 }
 .left{
  
   float:left;

  }
  .right{
  float:right;
    overflow:hidden;

  }
  
  .link-top {
            width: 100%;
            height: 1px;
            border-top: solid gray 1px;
        }
		
	 .link-bottom {
            width: 100%;
            height: 1px;
            border-top: solid gray 1px;
        }	
		
	#div1
        {
            position: relative;
            height: 45px;
            width: 90%;
           
        }
        #div2
        {
            position: absolute;
            bottom: 0;
           
            width: 100%;
           
        }	
		
		 #div3
        {
            position: absolute;
            bottom: -300;
           
            width: 100%;
           
        }	
		
	img#i2{
	  position: absolute;
	  left: 8px;
	   top: 830px;
	  z-index:-1;
	}	
	
	.f{
	  float:left;
	}
	
	 .top{
	   width:1600px;
	   float:top;
	   
	  }
	  .bottom{
	   width:1600px;
	   float:bottom;
	   margin-top:  -12px
	  
	  }
	  

		
	

</style>

<html>
<body>
<h1>英雄联盟 (电子竞技类游戏)</h1>
<p>
<b>《英雄联盟》</b>(简称lol)是由美国<i>Riot Games</i>开发,中国大陆地区由腾讯游戏运营的网络游戏。<br/>
</p>
<p>
<b>《英雄联盟》</b>除了即时战略、团队作战外,还拥有一百多位特色各异的英雄、丰富的地图及玩法、自动匹配的战网平台,包括天赋树、召唤师系统、符文等元素。[<ins>1</ins>]<br/>
</p>
<p>
2016年1月,根据官方数据显示,LOL全球最高同时在线已突破<del>750</del> 900万,全球日活跃高达2700万,全球月活跃已达6700<br/>万,注册用户亿计,LOL已经成为当今世界最具人气和影响力的网络游戏之一。[<ins>2</ins>]
</p>

<h1>英雄技能</h1>
<table border="1" width="1000px">
  <tr bgcolor="Gainsboro">
      <td width="15%"><b>技能名</b></td>
      <td width="5%"><b>触发</b></td>
	  <td width="12%"><b>技能属性</b></td>
      <td><b>技能效果</b></td>
	  <td width="10%">图标</td>
    
  </tr>

   <tr >
      <td width="15%"><b>坚韧</b></td>
      <td width="5%"><b>被动</b></td>
	  <td width="12%" colspan="2">如果盖伦在最近的10秒里没有受到伤害或者被敌方技能命中,那么盖伦会每秒回复他0.5%的最大生命值。小兵的伤害不会中断坚韧效果。</td>
      
	  <td width="10%"><div align="center"><img src="file://C:\Users\lenovo\Desktop\images\skill1.png"></div></td>
    
  </tr>
  
   <tr >
      <td width="15%"><b>致命打击</b></td>
      <td width="5%"><b>Q</b></td>
	  <td width="12%">冷却时间:8</td>
      <td>盖伦的移动速度获得爆发性提升,同时移除身上的所有减速效果,并且他的下次攻击将打击敌人的要害部位,造成额外伤害并将目标沉默。</td>
	  <td width="10%"><div align="center"><img src="file://C:\Users\lenovo\Desktop\images\skill2.png"></div></td>
    
  </tr>
  
  <tr >
      <td width="15%"><b>勇气</b></td>
      <td width="5%"><b>W</b></td>
	  <td width="12%">冷却时间:24/23/22/21/20</td>
      <td>盖伦被动地提升护甲和魔法抗性。他也可以激活这个技能来获得一层护盾,暂时减少即将到来的伤害和控制效果。</td>
	  <td width="10%"><div align="center"><img src="file://C:\Users\lenovo\Desktop\images\skill3.png"></div></td>
    
  </tr>
  
  <tr >
      <td width="15%"><b>审判</b></td>
      <td width="5%"><b>E</b></td>
	  <td width="12%">冷却时间:13/12/11/10/9</td>
      <td>盖伦用他的大剑来表演死亡之舞,在持续期间内对周围的敌方单位造成伤害。效果被动:盖伦的额外护甲和魔法抗性(来自符文、天赋和装备)提高20%。主动:盖伦获得一个持续2/3/4/5/6秒的防御护盾,减少即将到来的30/30/30/30/30%的伤害,并获得30%控制效果减免。</td>
	  <td width="10%"><div align="center"><img src="file://C:\Users\lenovo\Desktop\images\skill4.png"></div></td>
    
  </tr>
  
   <tr >
      <td width="15%"><b>德玛西亚正义</b></td>
      <td width="5%"><b>R</b></td>
	  <td width="12%">冷却时间:160/120/80</td>
      <td>效果盖伦召唤德玛西亚之力,试图斩杀一名敌方英雄,目标损失的生命越多,则此技能造成的伤害越高。造成175/350/525魔法伤害,敌人每失去3.5/3/2.5生命值就会多承受1伤害。

技能细节

R:盖伦召唤德玛西亚之力来对敌方英雄造成夺命一击。目标已损失的生命值越多,所受的伤害值越高。</td>
	  <td width="10%"><div align="center"><img src="file://C:\Users\lenovo\Desktop\images\skill5.png"></div></td>
    
  </tr>


</table>

<div style="margin-top:30px;" class="alllength" >

   <div id="div1">
  
	<div class="left" style="vertical-align:middle" ><img src="file://C:\Users\lenovo\Desktop\img\1.png"><a style="color:gray; margin-left:5px;font-size:4px;"  text-decoration="none"><b>最新动态</b></a></div> 
	<div class="right" style="vertical-align:middle" ><img src="file://C:\Users\lenovo\Desktop\img\2.png"><a style="color:gray; margin-left:5px;font-size:4px;"  text-decoration="none"><b>设置</b></a></div> 
     
	<div id="div2" ><p  class="link-top"></p></div>
	
	<div id="div3" ><p  class="link-bottom"></p></div>
   </div>	
	
	
	<div>
		<div class="f">
			<img src="file://C:\Users\lenovo\Desktop\img\4.png">	&nbsp;&nbsp;
		</div>
		
		
		
		<div class="top">
			<p style="font-size:0.5em;" >  热门回答,来自&nbsp;&nbsp;机械&nbsp;&nbsp;<a style="color:blue; " >关注话题</a> <img style="margin-left: 573px;" src="file://C:\Users\lenovo\Desktop\img\3.png"></p>  
			 </div>
		
		
		<div class="bottom"><p style="font-size:0.5em;color: lightskyblue;"><strong>人类历史上令人叹为观止的极限精度制造成果有哪些?</strong></p></div>
		
		<div ><p style="font-size:0.8em;color: gray;margin-top: 19px;margin-left: 55px;"><strong>Vincent FU,Materials Science,PhD</strong></p></div>
		
			<div style="margin-top:-28px;">
			<p style="font-size: 8pt; color:gray; margin-left:4pt" >6551</p> <img id="i2" src="file://C:\Users\lenovo\Desktop\img\5.png">
		</div>
		
		<div style="margin-left:52px; width:650px;">
        <div class="f">
			<img src="file://C:\Users\lenovo\Desktop\img\6.png">	&nbsp;&nbsp;
		</div>      说到精度,就不得不提在材料学中最重要的一个方面:表征。要项研究一种材料性能,握在手里把玩时远远不够的,
                    就算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,
                    而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千
                    倍),如果要获得更深... <a style="color:blue; ">显示全部</a>
		</div>
		
		<div style="margin-top:30px;" >
		
			<p  style="font-size:0.8em;color: lightgray;margin-top: 19px;margin-left: 55px;"><strong><img  src="file://C:\Users\lenovo\Desktop\img\7.png">关注问题 <img  src="file://C:\Users\lenovo\Desktop\img\8.png">&nbsp;876条评论 <img  src="file://C:\Users\lenovo\Desktop\img\9.png">&nbsp;作者保留权利</strong></p>
			
			
		</div>
		
			
		</div>
		
		
		
		
	
		
	</div>
	
	

	
	
	
</div>

</body>
</html>


							





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





2019-10-18 作业
18870287891



1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习1方案2</title>
		<style>
			.div1{
				border-bottom: 1px solid lightgray;
				width: 50%;
				height: 35px;
			}
			.d1{
				float: left;
				
			}
			.d2{
				float: right;
			}
			.div2{
				margin-top: 20px;
				width: 50%;
				height: 250px;
				 border-bottom: 1px solid lightgray;
			}
			.d3{
				width: 60px;
				float:left;
				 
			}
			.d4{
				float: right;
				 
				}
			.a1 {
				text-decoration: none;
			}
			.a2{
				text-decoration: none;
			}
			.d5{
				font-family: 楷体;
			}
			.d6{
				margin-top: 15px;
			}
			.d7{
				
				background-color:lightblue ;
				width: 40px;
			}
			.d8{
				font-family: "times new roman";
				position: absolute;
				left: 70px;
				top: 115px;
				
			}
			.d10{
				position:relative ;
				left: 60px;
				
			}
			.d11{
				width: 400px;
				position: absolute;
				left: 280px;
				top: 140px;
				font-size: 13px;
				line-height: 22px;
			}
			.d12{
				position:relative ;
				left: 60px;
				top: 10px;
				font-size: small;
				color: gray;
				
			}
		    
			
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="d1">
				<img src="../img/1.png" />
				<strong>最新动态</strong>
			</div>
			<div class="d2">
				<img src="../img/2.png" />
				设置
			</div>
		</div>
		<div class="div2">
			<div class="d3">
				<img src="../img/4.png" />
			</div>
			<div class="d4">
				<img src="../img/3.png" />
			</div>
			<div class="d5" >
				热门回答,来自 机械  <a class="a1" href="#self" >关注话题</a> <br />
				<font color="blue">人类史上令人叹为观止的极限精度制造成果有哪些?</font>
			</div>
			<div class="d6">
				<div class="d7">
					1156
				</div>
				<div class="d8">
					<strong>Vincent Fu</strong> , Materials Science, PhD
				</div>
			</div>
			<div class="d9">
				<div class="d10">
					<img src="../img/6.png" />
				</div>
				<div class="d11">
					说到精度,就不得不提在材料学中最重要的一个方面:表征。
					要项研究一种材料性能,握在手里把玩时远远不够的,
					就算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,
					而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千
					倍),如果要获得更深... <a class="a2" href="#self">显示全部</a>
				</div>
			</div>
			<div class="d12">
				<img src="../img/7.png" />关注问题
				<img src="../img/8.png" />100条评论
				<img src="../img/9.png" />作者保留权利
			</div>
		</div>
		
	</body>
</html>
1





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





2019-10-17 交作业
2019-10-16 交作业
2019-09-27 交作业
2019-09-23 交作业
2019-09-17 交作业
2019-09-02 什么时候用id 什么时候用class?
2019-08-26 练习-综合练习1
2019-08-01 查看答案后有个地方很不解
2019-07-28 交作业
2019-07-25 交作业
2019-07-23 ZZ交作业 CSS-综合性练习1
2019-07-23 ZZ交作业 CSS-综合性练习1
2019-07-23 ZZ交作业 CSS-综合性练习1
2019-07-22 。。。。
2019-07-15 综合练习1
2019-06-08 写作业
2019-06-04 交作业
2019-05-29 提交作业,有点粗糙,还是交了吧
2019-05-27 交作业
2019-05-27 交作业
2019-04-23 来交一次作业
2019-04-21 提问
2019-04-18 代码详解(自己看的)
2019-03-23 交作业
2019-03-14 第一次交作业,好紧张
2019-02-28 建的CSS写的 基本上全是用的相对定位布局 不知道怎么写将就把
2019-02-25 我知道知乎这个剑桥材料学博士。。。
2019-02-18 交作业啦
2019-01-24 大概也就这个意思 调着太麻烦 这也不对那也不对
2018-12-24 交作业
2018-12-13 作业
2018-12-04 交作业
2018-11-28 感觉CSS代码太乱了,而且取class名很头痛
2018-11-26 交作业!
2018-11-20 为什么和答案差不多,但是确实这样的结果?
2018-11-15 交作业
2018-11-14 交作业
2018-10-01 交作业
2018-09-19 第一次交作业
2018-09-03 交作业
2018-08-26 全用div硬撸出来的,看来我不适合搞前端
2018-08-25 id="left'什么意思?
2018-08-02 第一次交作业
2018-08-02 给各种div起名真的好烦
2018-07-17 感觉我写的有点多……几乎每个地方都用DIV套住了
2018-06-18 不知道写的怎么样,还可以如何简便些
2018-06-02 作业
2018-04-24 做的不好大家将就看看,哈哈
2018-04-12 终于做了个样子
2018-03-13 作业做的不对,求指点
2018-03-08 交作业
2018-02-24 交作业 写的好乱 全是DIV没事么...
2018-01-29 这个div怎么不在左边
2018-01-29 这个div怎么不在左边
2018-01-29 怎么嵌套两个div这个布局就不对了
2018-01-18 怎么才能随浏览器的大小进行自适应?
2017-12-25 关于边框模型的问题
2017-12-21 交作业。。 菜鸟一只 做了两个小时
2017-12-15 交作业啦
2017-12-15 交作业啦
2017-11-24 请老师检阅一哈
2017-11-24 不熟练花了3小时吧
2017-11-20 花了一小时写的 希望能让老师满意
2017-11-20 本菜鸟写的
2017-09-17 为什么右边的部分是靠 width:367px撑起来的?
2017-09-09 写了一个小时 请批改作业啊老师
2017-09-07 图片和文字不在同一水平
2017-08-21 改变了body的宽度为800px后,为什么只有第一个div改变宽度,其他的不变啊。
2017-08-10 插入img,img默认显示位置不贴着边
2017-08-04 写了一晚上,感觉写的很乱,div套div
2017-06-04 <div style="clear:left;"></div><br>加和不加的区别
2017-06-02 对span元素设置margin-right为什么没有效果?
2017-06-01 关于代码的问题
2017-06-01 line-height=170%是什么意思
2017-06-01 站长,你这个边距是用什么测的啊,还有颜色
2017-05-12 class的问题
2017-04-13 内联元素能直接设置margin和padding吗?
2017-03-19 端技术-CSS-综合性练习1 -练习-综合练习1 的提问
2016-06-02 关于阶段练习的答案




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-综合性练习1 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 881555796
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图