一、??作品介紹
HTML實例網(wǎng)頁代碼, 本實例適合于初學HTML的同學。該實例里面有設置了css的樣式設置，有div的樣式格局，這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設計個人網(wǎng)站并將其轉換為代碼的過程來實踐設計。
二、??作品效果
??視頻演示
https://live.csdn.net/v/embed/240025
(title-I64JP-個人博客帶js輪播帶音樂(11頁))]
?? 截圖演示
11.png
10.png
09.png
08.png
07.png
06.png
05.png
04.png
03.png
02.png
01.png
三、?? 作品代碼
??HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<title>個人博客</title>
</head>
<body>
<div class="menu">
<div class="banner">
<div class="top_img">
<div class="focus" id="focus">
<div id="focus_m" class="focus_m">
<ul>
<li style="display:block"> <img src="images/back.jpg" width="100%" /> </li>
<li style="display:none"> <img src="images/ad.jpg" width="100%" /> </li>
<li style="display:none"> <img src="images/ac.jpg" width="100%" /> </li>
</ul>
</div>
<a href="javascript:;" class="focus_l" id="focus_l" title="上一張"><b></b><span></span></a> <a href="javascript:;" class="focus_r" id="focus_r" title="下一張"><b></b><span></span></a> </div>
</div>
</div>
<script src="js/js.js"></script>
<ul class="center">
<li><a href="index.html">首頁</a></li>
<li><a href="sheying.html">攝影展示</a></li>
<li><a href="aihao.html">個人愛好</a></li>
<li><a href="riz.html">日志</a></li>
<li><a href="tuijian.html">讀物推薦</a></li>
<li><a href="lianxi.html">聯(lián)系我們</a></li>
</ul>
<div class="clear"></div>
</div>
<div class=" center">
<div class="bar" id="wanbiao">
<h3>基本信息</h3>
</div>
<div class="jianjie">
<div class="touxiang"> <img src="images/touxiang.jpg" alt="" width="180" height="160"> </div>
<div class="xinxi">
<p style="height: 30px;">姓名：XXX</p>
<p style="height: 30px;">性別：男</p>
<p style="height: 30px;">電話：XXXXXXX</p>
<p style="height: 30px;">郵箱：XXXXXXX</p>
</div>
<p>
<audio controls="controls" autoplay="autoplay" src="images/Life.mp3"></audio>
</p>
</div>
</div>
</div>
<div class="bar" id="pinpai">
<h3>人生格言 : 迷茫的時候就努力一下試試~</h3>
</div>
<div class="fu">
<div class="pics scrollleft">
<ul>
<li>
<p><img src="images/7.jpg" height="250" width="470" /></p>
</li>
<li>
<p><img src="images/9.jpg" height="250" width="450" /></p>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="end">
<p>個人博客 </p>
</div>
</body>
</html>
??CSS代碼
@charset "utf-8";
/* CSS Document */
html {
background: #ebe716
}
form .in {
margin-bottom: 10px;
}
form .in p {
margin-bottom: 10px;
}
form .in .phone {
width: 100%;
height: 40px;
border: 1px solid #666;
}
form .in .phone.oh {
height: 90px;
}
form .but {
width: 140px;
height: 40px;
color: #fff;
background: #000;
border: none;
}
.riz {
width: 600px;
height: 200px;
margin: 0 auto;
}
.right {
margin-top: 50px;
}
.banner img{ display:block}
.focus{height:435px;overflow:hidden;position:relative;}
/* focus_s */
.focus_s{position:absolute;left:50%;bottom:5%;height:13px;overflow:hidden;width:110px;z-index:9;margin:0 0 0 -30px;}
.focus_s li{float:left;cursor:pointer;height:13px;width:12px;overflow:hidden;margin-right:10px;background:url(../images/dian.png) no-repeat;}
.focus_s li.active{background-position:-12px 0;}
/* focus_m */
.focus_m ul{opacity:1;filter:alpha(opacity=100);}
.focus_m li{width:100%;height:435px;position:absolute;top:0;left:0;}
/* focus_l focus_r */
.focus_l,.focus_r{position:absolute;display:block;width:50px;height:75px;overflow:hidden;z-index:2;top:150px;}
.focus_l{left:0;}
.focus_r{right:0;}
.focus_l b,.focus_r b{position:absolute;z-index:1;display:block;width:50px;height:75px;overflow:hidden;background:#000;opacity:0.3;filter:alpha(opacity=30);cursor:pointer;}
.focus_l span,.focus_r span{display:inline-block;position:relative;z-index:2;width:22px;height:33px;top:21px;cursor:pointer; margin-right:28px;}
.focus_l span{left:12px;background-image:url(../images/l.png);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/l.png');}
.focus_r span{left:16px;background:url(../images/r.png) 0 0 no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r.png');}
.focus_l:hover b,.focus_r:hover b{opacity:0.5;filter:alpha(opacity=50);}
四、??更多源碼
【干貨分享】自學編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學習指南】從web基礎、計算機基礎到前端常用框架的教程，涵蓋前端大部分必備知識（學習指南 + 技術文章 + 資源分享）
