导航，头部，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="http://www.gzcc.cn/">
    <link rel="stylesheet"type="text/css"href="171.css">
    <body bgcolor="#b0e0e6">

    <style type="text/css">
     p{
            color: blueviolet;
        }
        h2{
     background-color: lightseagreen;
        }
       .textyellow{
            color:green;
                   }
        #t{
            color: red;
        }
</style>

</head>
<body >


<nav>
    <img src="http://www.gzcc.cn/2016/images/banner.png"><br>
    <a href="">首页</a>
    <a href="">下载</a>
    <input type="text"name="search">
    <button type="submit">搜索</button>
    <a href="">登录</a>
    <a href="">注册</a>
    </nav>

 <div>广州商学院即将举办校运会<span style="background-color: pink;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 50px;color: deeppink">放假4天！！！</span></div>

 <p style="color: blue;margin-left: 20px;">This is a paragraph</p>
       <p>This is a paragraph</p>


       <h3 id="2015">2015</h3>
       <script>
           document.write(Date())
    document.getElementById("2015").innerHTML="";
       </script>

<br>
<a href="#2">2</a>

       <div id="container" style="width: 400px ">
    <div id="header" style="background-color:blue"><h2 align="center" style="margin-bottom: 0;">用户登录/LOGIN</h2></div>
       <div id="content" style="background-color: lightskyblue;height: 180px;width: 400px;float: left;">
           <form align="center">
           用户名:<input type="text" name="username"placeholder=""><br><br>
       密码:<input type="Password" name="passname"placeholde=""><br><br>
            <input type="radio" value="student">学生
            <input type="radio" value="teacher">教师 <br>
            <input type="button" value="登录" >
            <input type="button" value="取消">
            </form>


<br><br>
<h2 align="center">通知</h2>
           <p id="t">广州商学院即将举办校运会放假4天！！！</p>
           <p >广州商学院即将举办校运会放假4天！！！</p>
<p class="textyellow">广州商学院即将举办校运会放假4天！！！</p>

</body>
</html>

       

posted on 2017-10-17 19:43  104鲍珊珊  阅读(206)  评论(4)    收藏  举报

导航