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

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

下面素效果图

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

上代码

<html>
<head>
</head>
<body>
	<div id ="ti">
	       <h1 style="color:#EEB422; padding-top:15px; padding-left:15px">灵魂劫卜</h1>
	       <h1 style="color:white; padding-left:15px;">明世隐</h1>
	       <h2 style="color:white; padding-left:15px;">辅助</h2>
		   <h2 style="color:white; padding-left:15px;">皮肤</h2>
		   <div id = "zb">
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/heroimg/501/501-smallskin-2.jpg"> </img>
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/heroimg/501/501-smallskin-1.jpg"> </img>
		</br><a href = "#t2">更多内容</a>
		</div>
		   
		</div>
    <div >
	<img class="header" style="width:1345px; height:780px;" src="./1.jpg" id="caocao_pic" onClick="change_pic()"> </img>
    </div>
	<div id = "bd">
		
		<div id = "t2">
			<h3>技能介绍</h3>
			<div id = "jn">
			<img id = "jntu" src= "http://game.gtimg.cn/images/yxzj/img201606/heroimg/501/50100.png"> </img>
			<div id = "wz"><div id = "jnbt"> <span>大吉大利</span><span style = " float:right;">冷却值：0消耗：0</span> </div>
			<p>被动：明世隐对同一目标的第三次普攻会对其造成0.75秒晕眩，对同一目标叠满印记后3秒内无法再对其叠加印记虽然明世隐是辅助，但是在前期对抗时，该被动会对敌人造成极大的威胁</p>
			</div>
			</div>
			<div id = "jn">
			<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/heroimg/501/50110.png"> </img>
			<div id = "wz">
			<div id = "jnbt"> <span>临卦·无忧</span><span style = " float:right;">冷却值：3消耗：50</span> </div>
			<p> 以法器连接一名队友/敌人，增加/减少75~180物攻和90~215法攻及15%移速，强化自身2/3该数值的物攻和法强并提升15%移速；若目标是敌人，还会每0.5秒造成100（+20%法术加成）点法术伤害，并对魂链触碰的敌人也造成同等伤害...</p>
			</div>
			</div>
			<div id = "jn">
			<img id = "jntu" src = "http://game.gtimg.cn/images/yxzj/img201606/heroimg/501/50120.png"> </img>
			<div id = "wz">
			<div id = "jnbt"> <span>师卦·飞翼</span><span style = " float:right;">冷却值：3消耗：50</span> </div>
			<p> 法器状态切换后，临卦·无忧对目标的连接效果也会相应切换；攻击改变状态：使连接的队友/敌人增加/减少物理及法术攻击，并强化自身2/3该数值的物理及法术攻击；防御改变状态：增加/减少连接的队友/敌人54%物理及法术防御，并强化自身2/3该数值的物理及法术防御</p>
			</div>
			</div>
			<div id = "jn">
			<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/heroimg/501/50130.png"> </img>
			<div id = "wz">
			<div id = "jnbt"> <span>泰卦·长生</span><span style = " float:right;">冷却值：40/35/30消耗：120</span> </div>
			<p> 在0.75秒吟唱后，法器会带走他的部分生命，化作能量射向当前连接的目标；如果目标是敌人会造成真实伤害，如果是队友会回复等量生命；法球命中目标瞬间，明世隐会损失等量生命值，损失值不会超过当前生命值，且损失生命值会在之后10秒内逐渐恢复</p>
			</div>
			</div>
			
		</div>
		
		<div id = "t3">
		 <div id = "bt"><h3>出装建议</h3></div>
		<div id = "zb">
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/itemimg/1722.jpg"> </img>
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/itemimg/1426.jpg"> </img>
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/itemimg/1237.jpg"> </img>
		</div>
		<div id = "zb">
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/itemimg/1234.jpg"> </img>
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/itemimg/1334.jpg"> </img>
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/itemimg/1337.jpg"> </img>
		</div>
		<p>Tips：辅助出门装，跑线支援迅速，续航较好，作为中场辅助，前可支援坦克，后可增强输出，自身也有一定坦度，不会轻易死去</p>
		</div>
		
		
		<div id = "t4">
		<div id = "bt"><h3>铭文搭配建议</h3></div>
		<div id = "zb">
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/mingwen/1514.png"> </img>
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/mingwen/3515.png"> </img>
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/mingwen/2520.png"> </img>
		</div>
		<p>Tips：明世隐前期较为强势，铭文也将偏向增加其对线期的伤害能力，移速铭文能保持连接不被轻易拉开</p>
		</div>
		
		
		<div id = "t4">
		<div id = "bt"><h3>英雄关系</h3></div>
		<div id = "zb">
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/heroimg/133/133.jpg"> </img>
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/heroimg/139/139.jpg"> </img>
		</div>
		<p>能为狄仁杰提供高额的输出提升或削弱敌方坦克</p>
		<p>将敌人减速，让老夫子轻松开启战斗</p>
		</div>
	
		
		<div id = "t22">
		<div id = "bt"><h3>技能加点建议</h3></div>
		<div id = "zb">
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/heroimg/501/50110.png"> </img>
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/heroimg/501/50120.png"> </img>
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/summoner/80115.jpg"> </img>
		<img id = "jntu" src="http://game.gtimg.cn/images/yxzj/img201606/summoner/80102.jpg"> </img>
		</div>
		<p>主升：临卦·无忧； 副升：师卦·飞翼</p>
		<p>召唤师技能：闪现/治疗术</p>
		</div>
		
</body>

</html>

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

<script>
function change_pic(){
var imgObj = document.getElementById("caocao_pic");
var Flag=(imgObj.getAttribute("src",2)=="./1.jpg")
imgObj.src= Flag ? "./2.jpg":"./1.jpg";
}
</script>

下面加很多很多的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这部分不做提，因为我还不太会

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

JavaScript 基礎筆記（字符串方法）

計算機網絡第一章.計算機網絡形成和發展

【記錄一下我的第一個網站誕生】

css常用樣式

【記錄貼】html+css 超簡單的佈局

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結