导航，头部，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)    收藏  举报