前言
本文以“个人”博客为主题设计，本实例应用html+css。包括音频、点击事件、留言、登录页面等，供大家参考。【关注作者互关|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，有兴趣的联系我交流分享！3Q！
一、网页效果
二、代码展示
1.HTML
代码如下（节选示例）：
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
#images1 {
width: 104px;
display: block;
height: 34px;
background: url(images/zp_01.jpg) no-repeat;
}
#images1:hover {
background: url(images/zp_1.jpg) no-repeat;
}
#images2 {
width: 104px;
display: block;
height: 34px;
background: url(images/zp_02.jpg) no-repeat;
}
#images2:hover {
background: url(images/zp_2.jpg) no-repeat;
}
#images3 {
width: 104px;
display: block;
height: 34px;
background: url(images/zp_03.jpg) no-repeat;
}
#images3:hover {
background: url(images/zp_3.jpg) no-repeat;
}
#images4 {
width: 104px;
display: block;
height: 34px;
background: url(images/zp_04.jpg) no-repeat;
}
#images4:hover {
background: url(images/zp_4.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="body">
<!--nav-->
<div class="nav">
<div class="main">
<ul>
<li>
<a href="#"><img src="images/logo.png" height="100%"></a>
</li>
<li>
<a href="index.html" class="active">博客首页</a>
</li>
<li>
<a href="index1.html">个人简介</a>
</li>
<li>
<a href="index2.html">个人作品</a>
</li>
<li>
<a href="index3.html">联系我</a>
</li>
<li>
<a href="index4.html">会员登录</a>
</li>
<li>
<a>
<p class="search">
<input type="text" name="" id="" value="" placeholder="搜索" />
</p>
</a>
</li>
</ul>
</div>
</div>
<!--nav-->
<!-- banner -->
<div class="main">
<div class="banner">
<embed src="images/1.swf" width="100%" height="600" quality="High" wmode="transparent" style="position: absolute;">
<img src="images/banner.jpg" width="100%">
</div>
</div>
<div class="main">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr style="background: #efefef;">
<td height="120" align="center" style="font-size: 30px; color: #515151;">
<p style="height: 80px;line-height: 80px;">生活点滴，不忘记录</p>
<table width="480" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<a href="#" id="images1"></a>
</td>
<td align="center">
<a href="#" id="images2"></a>
</td>
<td align="center">
<a href="#" id="images3"></a>
</td>
<td align="center">
<a href="#" id="images4"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="240" align="center" valign="bottom"><img src="images/pic_1.jpg" width="224" height="224" alt="" />
<img src="images/pic_2.jpg" width="224" height="224" alt="" /> <img src="images/pic_3.jpg" width="224"
height="224" alt="" /> <img src="images/pic_4.jpg" width="224" height="224" alt="" /></td>
</tr>
<tr>
<td height="80" align="center" style="color: #484848">
<p>更多照片</p>
<p><img src="images/tb01.png" width="40" height="15" alt="" /></p>
</td>
</tr>
<tr>
<td height="50" align="center">
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<hr size="1">
</td>
<td width="150" align="center" style="font-size: 20px;">个人寄语</td>
<td>
<hr size="1">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100" align="center">
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/zc.png" width="84" height="82" alt="" /></td>
<td width="400" align="center" class="text"> 这里以后就是我的家了，也是所有喜爱我的朋友们共同的家，有<br> 什么事情大家都可以在这里畅所欲言，我也会经常来这里和大家
<br> 交流的。谢谢大家的支持！ </td>
<td align="right"><img src="images/yc.png" width="86" height="82" alt="" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<audio src="images/music.mp3" hidden="hidden" autoplay="autoplay" loop="loop">
当前浏览器不支持audio
</audio>
<div class="foot">
© Copyright 版权所有
</div>
</div>
</body>
</html>
......
2.CSS
代码如下（节选示例）：
* {
margin: 0;
padding: 0;
font-family: "黑体";
font-size: 14px;
color: #5c5c5c;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
color: #5C5C5C;
}
html,
body {
min-height: 1080px;
background: url(../images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
.body {
width: 100%;
overflow: hidden;
}
.main {
width: 1100px;
margin: 0 auto;
overflow: hidden;
background: #efefef;
}
/*nav*/
.nav {
width: 100%;
margin-top: 10px;
overflow: hidden;
background: #efefef;
background-size: 100% 100%;
text-align: center;
}
.nav ul{
overflow: hidden;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
}
.nav ul li {
float: left;
}
.nav ul li a {
line-height: 50px;
font-weight: 700;
display: block;
padding: 0 20px;
}
.active {
border-radius: 5px;
background: #e4e3e3;
}
.search input{
width: 100px;
border: 1px solid #aaa;
border-radius: 5px;
height: 26px;
}
.search img{
vertical-align: middle;
margin-left: -20px;
}
.foot{
background: #efefef;
text-align: center;
height: 40px;
line-height:40px ;
}
......
标签：web,repeat,no,33,jpg,height,html,background,images From： https://blog.csdn.net/A240307/article/details/136978250