一、??作品介紹
HTML實例網頁代碼, 本實例適合于初學HTML的同學。該實例里面有設置了css的樣式設置，有div的樣式格局，這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設計個人網站并將其轉換為代碼的過程來實踐設計。
二、??作品效果
??視頻演示
https://live.csdn.net/v/embed/240012
(title-H44JP 英雄聯盟 lol 6頁帶js 包含輪播)]
?? 截圖演示
06.png
05.png
04.png
03.png
02.png
01.png
三、?? 作品代碼
??HTML代碼
<html>
<!--網站開始-->
<head>
<!--頭部開始-->
<!--設置網站編碼-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--網頁標題-->
<title>英雄聯盟</title>
<!--鏈接CSS文件-->
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<!--結束頭部-->
<body>
<!--主體部分開始-->
<!--插入背景音樂-->
<audio controls="controls" hidden="hidden" autoplay="autoplay" loop="loop">
<source src="music/1.mp3" type="audio/ogg">
<source src="music/1.mp3" type="audio/mpeg">
</audio>
<!--IE背景音樂-->
<bgsound src="music/1.mp3" autostart="true" loop="-1">
<!--制作導航部分-->
<div id="dh">
<!--列表制作超鏈接-->
<div id="nav">
<ul>
<li><a href="" class="current">網站首頁</a></li>
<li><a href="bj.html">背景簡介</a></li>
<li><a href="youxi.html">游戲系統(tǒng)</a></li>
<li><a href="yxlb.html">英雄列表</a></li>
<li><a href="ziliao.html">物品資料</a></li>
<li><a href="dl.html">在線登陸</a></li>
</ul>
</div>
</div>
<!--插入主體1，左邊插入LOGO，右邊插入大圖-->
<div id="zt">
<div id="header">
<!--LOGO-->
<div id="logo"><img src="picture/logo.png" width="275" height="100"></div>
<!--圖片-->
<div id="slider">
<div id="one" class="contentslider">
<div class="cs_wrapper">
<img src="picture/sy1.jpg" alt="Project 1">
</div>
</div>
<div class="cleaner"></div>
</div>
</div>
</div>
<!--制作主體二部分，分成三個部分，插入三列文字-->
<div id="top1">
<div id="top_row">
<div class="top_row_box">
<h5>英雄聯盟的歷史</h5>
<p>他們認為惡毒自私如同疾病，應當從人類靈魂中根除。來到德瑪西亞并定居于此的</p>
</div>
<div class="top_row_box">
<h5>戰(zhàn)爭學院</h5>
<p>戰(zhàn)爭學院內部是馬約里斯秘術中心，部分是魔法學校，部分是法術儲藏地，還有一部</p>
</div>
<div class="top_row_box last">
<h5>諾克薩斯</h5>
<p>就諾克薩斯居民的素質而言，基本都是這條準則的支持者。雖然看起來很殘酷，不過</p>
</div>
<div class="cleaner"></div>
</div>
</div>
<!--制作主體三部分，上半部分插入大圖，下半部分圖文混排-->
<div id="content_wrapper">
<div id="content">
<div class="banner">
<img src="picture/ba3.jpg" id="img">
</div>
<h1>關于英雄聯盟</h1>
<div class="image_wrapper fl_img">
<a href="#"><img src="picture/bj1.jpg" alt="image" width="250" height="180"></a>
</div>
<p class="wzbj">《英雄聯盟》(簡稱LOL)是由美國拳頭游戲(Riot Games)開發(fā)、中國大陸地區(qū)騰訊游戲代理運營的英雄對戰(zhàn)MOBA競技網游。</p>
<p class="wzbj"> 游戲里擁有數百個個性英雄，并擁有排位系統(tǒng)、符文系統(tǒng)等特色養(yǎng)成系統(tǒng)。
《英雄聯盟》還致力于推動全球電子競技的發(fā)展，除了聯動各賽區(qū)發(fā)展職業(yè)聯賽、打造電競體系之外，每年還會舉辦“季中冠軍賽”“全球總決賽”“All
Star全明星賽”三大世界級賽事，獲得了億萬玩家的喜愛，形成了自己獨有的電子競技文化。
英雄聯盟是一款多人競技類游戲，于2018年加入亞運會。</p>
<div class="cleaner"></div>
</div>
</div>
<!--插入頁面版權部分-->
<div id="footer">
</div>
<div id="copyright_wrapper">
<div id="copyright">? 英雄聯盟</div>
</div>
<!--結束版權-->
<script>
var i=0;
var arr=['bj1','bj2','bj3','bj4','bj5','bj6','bj7'];
var ba=document.querySelector("#img");
setInterval(function(){
i++;
ba.src="picture/"+arr[i]+".jpg";
if(i>arr.length-2){
i=0;
}
},2000)
</script>
</body>
</html>
??CSS代碼
body {
margin:0px;
padding:0px;
color:#717174;
font-family: Tahoma, Geneva, sans-serif;
font-size:13px;
line-height:1.5em;
background-color: #121213;
}
a, a:link, a:visited {
color:#c0c0c2;
}
.button a:hover {
color: #fff;
background: url(../image/a4.png) no-repeat;
}
.button1 a {
clear: both;
display: block;
width: 109px;
height: 30px;
padding: 4px 0 0 0;
background: url(../image/a6.png) no-repeat;
color: #000000;
font-weight: bold;
font-size: 11px;
text-align: center;
text-decoration: none;
}
.button1 a:hover {
color: #fff;
background-color: #663333;
background-repeat: no-repeat;
}
ul {
margin: 20px;
padding: 0;
list-style-image: url(http://www.ylcp.shop/files/files/1652241704159/images/list_icon.png);
}
ul li {
margin: 0 0 15px 0;
padding: 0 0;
}
/* menu */
#dh {
width: 100%;
height: 50px;
background: url(../image/m3.jpg) repeat-x;
}
#nav {
width: 920px;
height: 50px;
margin: 0 auto;
padding: 0 30px;
background: url(../image/m1.jpg) no-repeat;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul li{
padding: 0px;
margin: 0px;
display: inline;
}
#nav ul li a{
float: left;
display: block;
width: 124px;
height: 38px;
padding: 12px 0 0 0;
margin-right: 1px;
text-align: center;
font-size: 16px;
text-decoration: none;
color: #d8d3bd;
font-weight: normal;
outline: none;
}
#nav li a:hover, #nav li .current{
color: #fff;
background: url(../image/m2.png) no-repeat;
}
/* end of menu */
/* header */
#zt {
width: 100%;
height: 250px;
background: url(../image/h1.jpg) repeat-x;
border-bottom: 1px solid #000;
}
.footer_box {
float: left;
width: 280px;
padding: 0 30px 0 0;
}
.footer_menu {
margin: 0;
padding: 0;
list-style: none;
}
.footer_menu li {
margin: 0;
padding: 5px 0;
}
.footer_menu li a {
color: #d8d3bd;
}
.footer_menu li a:hover {
color: #fff;
}
#foot img{
padding: 4px;
background: #000;
border: 1px solid #34322f;
margin-bottom: 10px;
}
/* end of footer */
/* 版權信息 */
#copyright_wrapper {
width: 100%;
background: #000000;
border-top: 1px solid #262626;
}
/* 版權信息模塊 */
#copyright {
width: 960px;
margin: 0 auto;
padding: 15px 20px;
text-align: center;
color: #6e6965;
}
#copyright a {
color: #6e6965;
}
/* end of copyright */
.wzsy1 {
font-size: 12px;
line-height: 24px;
}
.wzbj {
font-size: 13px;
line-height: 30px;
text-align: justify;
text-indent: 2em;
}
.bj01 {
height: auto;
width: 100%;
margin-bottom: 30px;
}
.imgyxlb {
height: 180px;
width: 410px;
}
/*插入首頁宣傳大圖片*/
.banner {
/* background-image: url(../images/banner.jpg); *//*設置背景*/
height: 300px;/*設置高度*/
margin-top: 10px;/*上邊距*/
margin-bottom: 30px;/*下邊距*/
}
.banner img{
height: 100%;
width: 100%;
}
.cs_wrapper img {
height: 150px;
width: 100%;
}
四、??更多源碼
【干貨分享】自學編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學習指南】從web基礎、計算機基礎到前端常用框架的教程，涵蓋前端大部分必備知識（學習指南 + 技術文章 + 資源分享）
