一、??作品介紹
HTML實(shí)例網(wǎng)頁代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計(jì)。
二、??作品效果
??視頻演示
https://live.csdn.net/v/embed/240012
(title-H44JP 英雄聯(lián)盟 lol 6頁帶js 包含輪播)]
?? 截圖演示
06.png
05.png
04.png
03.png
02.png
01.png
三、?? 作品代碼
??HTML代碼
<html>
<!--網(wǎng)站開始-->
<head>
<!--頭部開始-->
<!--設(shè)置網(wǎng)站編碼-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--網(wǎng)頁標(biāo)題-->
<title>英雄聯(lián)盟</title>
<!--鏈接CSS文件-->
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<!--結(jié)束頭部-->
<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">
<!--制作導(dǎo)航部分-->
<div id="dh">
<!--列表制作超鏈接-->
<div id="nav">
<ul>
<li><a href="" class="current">網(wǎng)站首頁</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>
<!--制作主體二部分，分成三個(gè)部分，插入三列文字-->
<div id="top1">
<div id="top_row">
<div class="top_row_box">
<h5>英雄聯(lián)盟的歷史</h5>
<p>他們認(rèn)為惡毒自私如同疾病，應(yīng)當(dāng)從人類靈魂中根除。來到德瑪西亞并定居于此的</p>
</div>
<div class="top_row_box">
<h5>戰(zhàn)爭學(xué)院</h5>
<p>戰(zhàn)爭學(xué)院內(nèi)部是馬約里斯秘術(shù)中心，部分是魔法學(xué)校，部分是法術(shù)儲(chǔ)藏地，還有一部</p>
</div>
<div class="top_row_box last">
<h5>諾克薩斯</h5>
<p>就諾克薩斯居民的素質(zhì)而言，基本都是這條準(zhǔn)則的支持者。雖然看起來很殘酷，不過</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>關(guān)于英雄聯(lián)盟</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">《英雄聯(lián)盟》(簡稱LOL)是由美國拳頭游戲(Riot Games)開發(fā)、中國大陸地區(qū)騰訊游戲代理運(yùn)營的英雄對戰(zhàn)MOBA競技網(wǎng)游。</p>
<p class="wzbj"> 游戲里擁有數(shù)百個(gè)個(gè)性英雄，并擁有排位系統(tǒng)、符文系統(tǒng)等特色養(yǎng)成系統(tǒng)。
《英雄聯(lián)盟》還致力于推動(dòng)全球電子競技的發(fā)展，除了聯(lián)動(dòng)各賽區(qū)發(fā)展職業(yè)聯(lián)賽、打造電競體系之外，每年還會(huì)舉辦“季中冠軍賽”“全球總決賽”“All
Star全明星賽”三大世界級(jí)賽事，獲得了億萬玩家的喜愛，形成了自己獨(dú)有的電子競技文化。
英雄聯(lián)盟是一款多人競技類游戲，于2018年加入亞運(yùn)會(huì)。</p>
<div class="cleaner"></div>
</div>
</div>
<!--插入頁面版權(quán)部分-->
<div id="footer">
</div>
<div id="copyright_wrapper">
<div id="copyright">? 英雄聯(lián)盟</div>
</div>
<!--結(jié)束版權(quán)-->
<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 */
/* 版權(quán)信息 */
#copyright_wrapper {
width: 100%;
background: #000000;
border-top: 1px solid #262626;
}
/* 版權(quán)信息模塊 */
#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); *//*設(shè)置背景*/
height: 300px;/*設(shè)置高度*/
margin-top: 10px;/*上邊距*/
margin-bottom: 30px;/*下邊距*/
}
.banner img{
height: 100%;
width: 100%;
}
.cs_wrapper img {
height: 150px;
width: 100%;
}
四、??更多源碼
【干貨分享】自學(xué)編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)、計(jì)算機(jī)基礎(chǔ)到前端常用框架的教程，涵蓋前端大部分必備知識(shí)（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
Gitee倉庫地址（來個(gè)Star吧~）： https://gitee.com/zhanyuqiu2022/my-app
