【記錄帖】還是 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 炒雞簡單。練手貼參上

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

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

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

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

css常用樣式

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

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

linux以太網驅動總結