【记录帖】还是 html+ css 炒鸡简单。练手贴参上

惯例，炒鸡简陋原型图参上

下面素效果图

因为比较菜，目前还做不到一比一。欢迎点评。

上代码

	

	       
灵魂劫卜
	       
明世隐
	       
辅助
		   
皮肤
		   

		 
		 
		
更多内容
		
		   
		
    

	 
    
	

		
		

			
技能介绍
			

			 
			
 大吉大利冷却值：0消耗：0 
			
被动：明世隐对同一目标的第三次普攻会对其造成0.75秒晕眩，对同一目标叠满印记后3秒内无法再对其叠加印记虽然明世隐是辅助，但是在前期对抗时，该被动会对敌人造成极大的威胁
			
			
			

			 
			

			
 临卦·无忧冷却值：3消耗：50 
			
 以法器连接一名队友/敌人，增加/减少75~180物攻和90~215法攻及15%移速，强化自身2/3该数值的物攻和法强并提升15%移速；若目标是敌人，还会每0.5秒造成100（+20%法术加成）点法术伤害，并对魂链触碰的敌人也造成同等伤害...
			
			
			

			 
			

			
 师卦·飞翼冷却值：3消耗：50 
			
 法器状态切换后，临卦·无忧对目标的连接效果也会相应切换；攻击改变状态：使连接的队友/敌人增加/减少物理及法术攻击，并强化自身2/3该数值的物理及法术攻击；防御改变状态：增加/减少连接的队友/敌人54%物理及法术防御，并强化自身2/3该数值的物理及法术防御
			
			
			

			 
			

			
 泰卦·长生冷却值：40/35/30消耗：120 
			
 在0.75秒吟唱后，法器会带走他的部分生命，化作能量射向当前连接的目标；如果目标是敌人会造成真实伤害，如果是队友会回复等量生命；法球命中目标瞬间，明世隐会损失等量生命值，损失值不会超过当前生命值，且损失生命值会在之后10秒内逐渐恢复
			
			
			
		
		
		

		 
出装建议
		

		 
		 
		 
		
		

		 
		 
		 
		
		
Tips：辅助出门装，跑线支援迅速，续航较好，作为中场辅助，前可支援坦克，后可增强输出，自身也有一定坦度，不会轻易死去
		
		
		
		

		
铭文搭配建议
		

		 
		 
		 
		
		
Tips：明世隐前期较为强势，铭文也将偏向增加其对线期的伤害能力，移速铭文能保持连接不被轻易拉开
		
		
		
		

		
英雄关系
		

		 
		 
		
		
能为狄仁杰提供高额的输出提升或削弱敌方坦克
		
将敌人减速，让老夫子轻松开启战斗
		
	
		
		

		
技能加点建议
		

		 
		 
		 
		 
		
		
主升：临卦·无忧； 副升：师卦·飞翼
		
召唤师技能：闪现/治疗术
		
		

还没会走，但是就是想跑 。加了一丢丢js

下面加很多很多的css

body{ background:#F2F2F2;}
#wz{
	float : right;
	width: 550px;
        height: 100px;
	margin-right :8px;
}
#zb{
        margin-right:20px;
	text-align:center;
}
#bt{

	margin-left:10px;
	margin-bottom:5px;
	width: 130px;
        height: 10px;
}
#jnbt{
        margin-top:10px;
	margin-left: 10px;
        margin-bottom: 5px;
        width: 500px;
        height: 10px;
}
#bd{
    margin-left: 50px;
    width: 1230px;
    height: 1000px;
    border-radius: 10px;
    text-align: center;
}
#jntu{
     width: 85px;
    height: 85px;
    margin-left: 10px;
    margin-top : 10px;
    border-radius: 10px;
}
#jn{
    border-bottom: 1px dashed #363636;
    width: 680px;
    height: 135px;
    border-radius: 10px;
    background-color: white;
    margin-left: 10px;
    margin-top: 19px;
    margin-right: 10px;
}
#t{
    width: 1010px;
    height: 250px;
    border-radius: 10px;
    background :url(./8001.jpg) no-repeat center center;
    background-size: cover;
 
}
#t2{
	float: left;
        width: 700px;
        height: 680px;
        border-radius: 10px;
	background-color: white;
	text-align:left;
	padding: 5px;
	margin-top : 20px;
	margin-left: 20px;
}
#t22{
    padding:5px;
    margin-top:10px;
    float: left;
    width: 700px;
    height: 210px;
    border-radius: 10px;
    background-color: white;
    text-align:left;
    padding: 5px;
    margin-left: 20px;
}
#t3{
    text-align: left;
    float: right;
    width: 450px;
    height: 330px;
    border-radius: 10px;
    background-color: white;
    margin-left: 10px;
    margin-top: 20px;
    margin-right: 20px;
}
#t4{
    text-align: left;
    float: right;
    width: 450px;
    height: 240px;
    border-radius: 10px;
    background-color: white;
    margin-left: 10px;
    margin-top: 19px;
    margin-right: 20px;
}
#t3 a{
	margin-top: 10px;
	margin-left:10px;
}
    body{width:100%;margin:0;padding:0;}
	
    #header{
	width:1345px;
	height:780px;
	}
   
	 #ti{
		position: absolute;
		z-index: 999;
		background-color: rgba(0,0,0,0.5);
		height: 400px;
		width: 350px;
		margin-top: 300px;
		margin-left: 70px;
		}
		
}

我朋友说我就这样发太单调了，让我总结一下，加点踩坑的事情、、、

但是大家都知道啦，这个是前端超级基础的东西了，还有坑的话、、、那还得了

我就总结几个好用的样式语句

1.调背景透明度，前三个数是颜色，最后一个是透明度；

background-color: rgba(0,0,0,0.5);

2.设置模块的堆叠的，就是word文档那个图片下一层上一层类似。数值越大，显示就越在前，打算用这个做个原生的弹窗；

z-index: 999;

其他没啥好说的，就是说调调。

js这部分不做提，因为我还不太会