导航，头部，CSS基础

标签：val   script   you   选择器   href   button   target   alpha   code   

1. 制作自己的导航条。
2. HTML头部元素：
   1.   定义了页面链接标签的默认链接地址
   3.   定义了一个文档和外部资源之间的关系
3. 练习样式表：
   1. 行内样式表
   2. 内嵌样式表
   3. 外部样式表
4. 分别练习定义三类选择器：
   1. HTML 选择器
   2. CLASS 类选择器
   3. ID 选择器

       

      DOCTYPE html>
      html lang="en">
      head>
      meta charset="UTF-8">
      title>GuDamtitle>
      head>
      body>
      base href="http://ms.9you.com/web_v3/statics/images/uhg.jpg/"target="_blank">
          link rel="stylesheet" type="text/css" href="T5.css">
          style type="text/css">
             p{
                  color: red;
              }
              h2{
           background-color: cyan;
              }
              .textyellow{
                  color: blue;
                         }
              #tt{
                  color: yellow;
              }
          style>
      
      head>
      body>
           nav>
               img src="w_02_08_00.png">
               a href="http://www.gzcc.cn/">首页a>
               a href="">下载a>
               input type="text" name="search">
               button type="submit">搜索button>
               a href="">登录a>
               a href="">注册a>
           nav>
      body>
      
      h1 align="center">Gudam交流平台h1>
      h2>Gudam模型h2>
      p> Gudam作品p>
      
       div>高达online新区span style="background-color: cyan;font-family: ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;font-size: 50px;color: yellow">火爆开服span>div>
      
             h3 id="2017">2017h3>
       script>
                 document.write(Date())
                 document.getElementById("2017").innerHTML="高达online";
             script>
             p style="color: blueviolet;margin-left: 40px;">等你来战！p>
             p>是时候表演真正的技术了！p>
      
         div id="container" style="width: 400px">
              div id="header" style="background-color: aquamarine">h2 align="center" style="margin-bottom: 0;">登录h2>div>
              div id="content" style="background-color: antiquewhite;height: 150px;width: 400px;float: left;">
      form action="">
      Username:input type="text" name="username"placeholder="请输入用户名">br>
           Password:input type="password" name="password"placeholder="请输入密码">
          br>
          input type="radio" name="role" value="stu">VIP玩家
           input type="radio" name="role" value="stu">普通玩家br>
           input type="button" value="login">
           input type="button" value="cancel">br>
           input type="button" value="忘记密码">
      form>
      div>
          div id="footer1" style="background-color: aliceblue;clear: both;text-align: center;">版权 ? duymdiv>
          div>
         div id="container1" style="width: 400px">
             div id="header1" style="background-color: aquamarine">h2 align="center" style="margin-bottom: 0;">调查问卷h2>div>
             div id="content1" style="background-color: antiquewhite;height: 150px;width: 400px;float: left;">
      form>
         select>
          option>调查问卷一option>
          option>调查问卷二option>
          select>
       
      form>
        ul>
           li>看过哪些高达作品？li>
           li>你最欢的高达是哪一部？li>
        ul>
      
           ol>
      li>喜欢哪个高达驾驶员？li>
      li>你最欢的高达是哪一个高达？li>
      
        ol>
      div>
      div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 ? duymdiv>
      div>
      
      div>
      h2 align="center">大型活动h2>
      p id="tt">秋之战！p>
      p >完成一场大规模战（5积分）！！！p>
      p class="textyellow">19：00-23：00每完成一场大规模战（1积分）！！！p>
      
      body>
      ht>
      
      div  id="container2" style="width:400px " >
          div id="header2" style="background-color:hotpink">h2 align="center" style="margin-bottom:0;">快速通道 Fast Trackh2>
          div>
      
          div id="content2" style="background-color:lightskyblue;height:150px;width:400px;float:left;">
          ol>
          li>游戏登陆li>
          li>游戏特色li>
          li>操作系统li>
      ol>
       dl>
                        dt>高达系列dt>
                            dd>UC系列dd>
                            dd>Seed系列dd>
           dl>
               div>
          div id="footer2" style="background-color:hotpink;clear:both;text-align:center;">版权  duymdiv>
      
          dl>
                      dt>高达dt>
                      dd>因为“高达”的名字早已经深入民心，各地粉丝迷都一律称之为“高达”。dd>dl>
      
      a href="http://ms.9you.com/newplayer3.html">高达online img src="http://ms.9you.com/web_v3/statics/images/bodright_dowanload.png">a>
      
      div>
      
      body>
      html>

      css：

    p{
               color: red;
           }
           h2{
        background-color: cyan;
           }
           .textyellow{
               color: blue;
                      }
           #tt{
               color: yellow;
           }

   

导航，头部，CSS基础

标签：val   script   you   选择器   href   button   target   alpha   code   

原文地址：http://www.cnblogs.com/yeyuanchao/p/7680844.html