html5网页结课作业 html网页课程设计

转载

架构魔法之光 2023-06-05 16:10:41

文章标签 html 个人博客 css 文章分类 HTML5 移动开发

实验一 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
           {
                  width: 50;
                  height: 150;
           }
           table
           {
             clear: both;
           }
#macji{
position:relative;
width: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
           {
                  width: 50;
                  height: 150;
           }
           table
           {
             clear: both;
           }
           textarea
           {
 
             clear: both;
                  font-family: 华文行楷;
                  color: #778899;
                  height: 500px;
                  width: 50%;
                 
           }
           input
           {
             clear: both;
                  font-family: 华文行楷;
           }
#macji{
position:relative;
width: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
           {
                  width: 50;
                  height: 150;
           }
           table
           {
             clear: both;
           }
           form
           {
             clear: both;
                  font-family: 华文行楷;
           }
#macji{
position:relative;
width: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>

实验截图：

个人博客主页：

html5网页结课作业 html网页课程设计_个人博客