zoukankan      html  css  js  c++  java
  • PHP——实验一 html网页设计

    实验一 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 这两个真的功能很强大,让以前做的丑陋无比的网页有了生机,很棒

  • 相关阅读:
    Linux imooc learning
    有用的生活有关的website
    ps -ef | grep java
    2.3. Configuring sudo Access-RedHat
    How to change java version in Linux
    文档记录工具
    Jmeter 学习imooc
    Linux 用户管理
    Builder模式(设计模式)
    Prototype模式(设计模式)
  • 原文地址:https://www.cnblogs.com/smartisn/p/12361923.html
Copyright © 2011-2022 走看看