一、??作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、??作品效果
??视频演示
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">联系我们</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 仓库（持续更新中...）
??【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
