导航,头部,CSS基础

  1. 制作自己的导航条。
  2. HTML头部元素:
    1. <base>  定义了页面链接标签的默认链接地址
    2. <style>  定义了HTML文档的样式文件
    3. <link>  定义了一个文档和外部资源之间的关系
  3. 练习样式表:
    1. 行内样式表
    2. 内嵌样式表
    3. 外部样式表
  4. 分别练习定义三类选择器:
    1. HTML 选择器
    2. CLASS 类选择器
    3. ID 选择器
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>大型综艺节目</title>
          <base href=https://baike.baidu.com/item/极限挑战/17558221?fr=aladdin"target="_blank">
          <link rel="stylesheet"type="text/css"href="a.css">
           <style type="text/css">
         p{
             color:brown;
         }
      
         h1{
            background-color:lightskyblue;
         }
         .textblue{
              color:skyblue
         </style>
      </head>
      <body>
      <h1>大型综艺节目</h1>
      <nav>
          <a href="https://baike.baidu.com/item/极限挑战/17558221?fr=aladdin">首页</a>
          <a href="">登录</a>
          <a href="">注册</a>
          <a href="">退出</a>
          <input type="text"name="search">
          <button type="submit">搜索</button>
          <a href="">下载</a>
          <a href="">播放记录</a>
          <a href="">最新咨讯</a>
      </nav>
       <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507723247150&di=5090a56eaf6868257edee9295813b943&imgtype=0&src=http%3A%2F%2F365jia.cn%2Fuploads%2Fnews%2Ffolder_1890088%2Fimages%2F4102ec499b570873d3cd46df47bb208f.png" width="450" height="250" >
      <body bgcolor="#eee8aa"align="center">
      <p id="a">欢迎进入极限挑战</p>
      <p class="textblue">想要了解更多吗?</p>
      <p><span style="background-color:red;font-family:'Microsoft YaHei UI', Helvetica, Arial, sans-serif;font-size: 30px" >重点!</span>来了!</p>
      <p><span style="background-color:lightpink;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 40px">登录观看海量高清视频</span></p>
      <p>》会员登录可观看更多精彩视频《</p>
            <div id="container" style="width: 1500px">
            <div id="header" style="background-color:lightskyblue"><h2 align="center" style="margin-bottom: 0;">会员登录</h2></div>
            <div id="content" style="background-color:lightpink;height:200px;width:1500px;float:left;">
                  <p></p>
                 <form action="">
                  Username:<input type="text" name="username"placeholder="请输入用户名"><br>
                     <p></p>
                  Password:<input type="password" name="password"placeholder="请输入登录密码"><br>
                     <p></p>
                      <input type="radio">普通会员
                          <input type="radio">金牌会员
                          <input type="radio">钻石会员<br>
                      <p></p>
                  <input type="button" value="登录"style="margin-right:10px;font-size:14px";>
                  <input type="button" value="取消" style="margin-right:10px;font-size:14px">
          </form>
      </div>
          <div id="footer" style="background-color: gray;clear: both;text-align: center;height:50px;width:1500px;">版权@duym</div>
      </div>
      <hr>
       <P>友情链接</P>
        <a href="https://baike.baidu.com/item/%E6%9E%81%E9%99%90%E6%8C%91%E6%88%98/17558221?fr=aladdin">极限挑战<br>
            <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=9750cc7bac64034f1bc0ca54ceaa1254/9f2f070828381f30358f8f0fae014c086f06f086.jpg"width="200" height="200" alt="/baike.baidu.com/item/%E6%9E%81%E9%99%90%E6%8C%91%E6%88%98/17558221?fr=aladdin"   ></a>
      </body>
      </html>

      截图如下:

       

posted @ 2017-10-17 21:21  103许雅婷  阅读(158)  评论(0)    收藏  举报