导航,头部,CSS基础

2021-05-23 20:29

阅读:745

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

  1. 制作自己的导航条。
  2. HTML头部元素:
    1.   定义了页面链接标签的默认链接地址
    2.   定义了一个文档和外部资源之间的关系
  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


评论


亲,登录后才可以留言!