实验一 html网页设计
实验目的：
1、 能够对整个页面进行html结构设计。
2、 掌握CSS+DIV的应用。
实验内容及要求：
***个人博客网页
参考Internet网上的博客网站，设计自己的个人网页，主要包括：图像背景、表格布局，插入图像，flash或者影片播放，插入超级链接（至少3个），例如点击“关于我”，将链接到表单设计的网页，进行个人信息的填写。点击提交后，回到主页。
实验源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人博客主页</title>
</head>
<style type="text/css">
* {margin:0;padding:0;}/*去掉页面样式*/
body
{
background: url(image/bg.png) repeat;
text-align:center;
background-position: -70px -60px;
}
div
{
font-size: 15px;
font-family: 华文行楷;
}
a:hover
{
font-size: 40px;
}
a:link
{
color:#6495ED;
}
a:visited
{
color: #6495ED;
}
.td
{
50;
height: 150;
}
table
{
clear: both;
}
#macji{
position:relative;
100%;
height:80px;
text-align:center;
overflow:hidden
}
#macji .macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
position:relative;
right:50%;
float:left;
margin:10px;
padding:0 10px;
line-height:60px;
}
</style>
<body>
<div>
<img src="image/埃菲尔.jpg" alt="埃菲尔铁塔" width="500" height="200">
</div>
<div id="macji" >
<ul class="macji-skin">
<li>
<a href="个人博客网页.html">首页</a>
</li>
<li>
<a href="随笔.html">随笔</a>
</li>
<li>
<a href="个人首页.html">个人首页</a>
</li>
</ul>
</div>
<audio autoplay="autoplay" controls="controls" hidden=true>
<source src="image/Valder.mp3" type="audio/mpeg">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随笔</title>
</head>
<<style type="text/css">
* {margin:0;padding:0;}/*去掉页面样式*/
body
{
background: url(image/bg.png) repeat;
text-align:center;
background-position: -70px -60px;
font-family: 华文行楷;
}
div
{
font-size: 15px;
}
a:hover
{
font-size: 40px;
}
a:link
{
color:#6495ED;
}
a:visited
{
color: #6495ED;
}
.td
{
50;
height: 150;
}
table
{
clear: both;
}
textarea
{
clear: both;
font-family: 华文行楷;
color: #778899;
height: 500px;
50%;
}
input
{
clear: both;
font-family: 华文行楷;
}
#macji{
position:relative;
100%;
height:80px;
text-align:center;
overflow:hidden
}
#macji .macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
position:relative;
right:50%;
float:left;
margin:10px;
padding:0 10px;
line-height:60px;
}
</style>
<body>
<div>
<img src="image/埃菲尔.jpg" alt="埃菲尔铁塔" width="500" height="200">
</div>
<div id="macji" >
<ul class="macji-skin">
<li>
<a href="个人博客网页.html">首页</a>
</li>
<li>
<a href="随笔.html">随笔</a>
</li>
<li>
<a href="个人首页.html">个人首页</a>
</li>
</ul>
</div>
<textarea name="" id="" cols="30" rows="10">
在这里添加新随笔。。。
</textarea>
<br>
<input type="button" value="提交">
<audio autoplay="autoplay" controls="controls" hidden=true>
<source src="image/Valder.mp3" type="audio/mpeg">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人首页</title>
</head>
<style type="text/css">
* {margin:0;padding:0;}/*去掉页面样式*/
body
{
background: url(image/bg.png) repeat;
text-align:center;
background-position: -70px -60px;
}
div
{
font-size: 15px;
font-family: 华文行楷;
}
a:hover
{
font-size: 40px;
}
a:link
{
color:#6495ED;
}
a:visited
{
color: #6495ED;
}
.td
{
50;
height: 150;
}
table
{
clear: both;
}
form
{
clear: both;
font-family: 华文行楷;
}
#macji{
position:relative;
100%;
height:80px;
text-align:center;
overflow:hidden
}
#macji .macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
position:relative;
right:50%;
float:left;
margin:10px;
padding:0 10px;
line-height:60px;
}
</style>
<body>
<div>
<img src="image/埃菲尔.jpg" alt="埃菲尔铁塔" width="500" height="200">
</div>
<div id="macji" >
<ul class="macji-skin">
<li>
<a href="个人博客网页.html">首页</a>
</li>
<li>
<a href="随笔.html">随笔</a>
</li>
<li>
<a href="个人首页.html">个人首页</a>
</li>
</ul>
</div>
<div>
<form action="个人博客网页.html" method="post">
姓名：<input type="text"><br>
密码：<input type="password"><br>
性别：<input type="radio" checked value="男">男
<input type="radio" value="女">女
<br>
<input type="submit" value="提交">
<button type="reset">重置</button>
</form>
</div>
<audio autoplay="autoplay" controls="controls" hidden=true>
<source src="image/Valder.mp3" type="audio/mpeg">
</body>
</html>
实验截图：
个人博客主页：
随笔：
个人首页
实验体会：
CSS+DIV 这两个真的功能很强大，让以前做的丑陋无比的网页有了生机，很棒