一、??作品介紹
HTML實例網(wǎng)頁代碼, 本實例適合于初學HTML的同學。該實例里面有設(shè)置了css的樣式設(shè)置季眷，有div的樣式格局冕臭，這個實例比較全面腺晾，有助于同學的學習,本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。
二辜贵、??作品效果
??視頻演示
https://live.csdn.net/v/embed/240780
(title-X01SJ 班級校園我的班級 無js 13頁)]
?? 截圖演示
07.png
06.png
05.png
04.png
03.png
02.png
01.png
三悯蝉、?? 作品代碼
??HTML代碼
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="main" >
<div class="content12">
<div class="daohang">
<div class="img"><img src="images/1.jpg"></div>
<ul>
<li class="active"><a href="index.html">首頁</a>
<li ><a href="guanyu.html">關(guān)于</a>
</li>
<li ><a href="banjixinwen.html">班級新聞</a>
</li>
<li ><a href="banjixiangmu.html">班級項目</a>
</li>
<li ><a href="dengluzhuce.html">登錄注冊</a>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="content12">
<div class="guanggaotupian">
<div class="img">
<img src="images/2.jpg"></div>
</div>
</div>
<div class="clear"></div>
<div class="content8">
<div class="taitou">
<div class="title">
<span class="cntitle">班級項目</span>
<span class="pytitle">BANJIXIANGMU</span>
<em></em>
</div>
<div class="clear"></div>
</div>
<div class="bjxm">
<ul>
<li>
<div class="img"><img src="images/3.jpg"></div>
<div class="desc">
<div class="title">辯論賽</div>
<div class="clear"></div>
辯論賽也叫論辯賽，還叫做辯論會托慨。它在形式上是參賽雙方就某一問題進行辯論的一種競賽活動鼻由，實際上是圍繞辯論的問題而展開的一種相關(guān)知識的競賽，思維反應(yīng)能力的競賽厚棵，語言表達能力的競賽蕉世，也是綜合能力的競賽。<button>查看詳情</button>
</div>
</li>
<li>
<div class="img"><img src="images/4.jpg"></div>
<div class="desc">
<div class="title">足球賽</div>
<div class="clear"></div>
<button>查看詳情</button>
</div>
</li>
</ul>
</div>
</div>
<div class="content4">
<div class="taitou">
<div class="title">
<span class="cntitle">留言方式</span>
<span class="pytitle">LIUYANFANGSHI</span>
<em></em>
</div>
<div class="clear"></div>
</div>
<div class="lybd">
<form id="form" class="form">
<div class="list extral">
<div class="title">呢稱</div>
<input type="input" name="input " class="input" id="ziduan1" />
</div>
<div class="list extral">
<div class="title">郵件</div>
<input type="input" name="input " class="input" id="ziduan2" />
</div>
<div class="list extral">
<div class="title">電話</div>
<input type="input" name="input " class="input" id="ziduan3" />
</div>
<div class="clear"></div>
<div>
<div class="title">興趣</div>
<input class="checkbox" type="checkbox" name="checkbox" value="打籃球" />打籃球<input class="checkbox" type="checkbox" name="checkbox" value="游戲" />游戲<input class="checkbox" type="checkbox" name="checkbox" value="下棋" />下棋</div>
<div class="clear"></div>
<div class="clear"></div>
<div>
<div class="title">年齡</div>
<select class="select" name="select5" >
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div>
<div class="title">性別</div>
<input class="radio" type="radio" name="radio6" value="男"/>男<input class="radio" type="radio" name="radio6" value="女"/>女</div>
<div class="clear"></div>
<div class="clear"></div>
<div>
<div class="title">介紹</div>
<textarea class="textarea" name="textarea" ></textarea>
</div>
<div class="clear"></div>
<div class="subpart">
<button type="button" class="submit" id="sub" >提交</button> <button type="button" class="submit" id="reset" >重置</button>
</div>
</form>
</div>
</div>
<div class="clear"></div>
<div class="content12">
<div class="dibu">
<div class="desc">
我的班級
</div>
</div>
</div>
<div class="clear"></div></div></body></html>
四婆硬、??更多源碼
【干貨分享】自學編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學習指南】從web基礎(chǔ)狠轻、計算機基礎(chǔ)到前端常用框架的教程，涵蓋前端大部分必備知識（學習指南 + 技術(shù)文章 + 資源分享）
