导航，头部，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/2016/images/banner.png" target="_blank">
    <link rel="stylesheet" type="text/css" href="222.css">
    <style type="text/css">
#gg{
    color:red;
    }
.text1{
    color:black;
    }

    </style>

</head>
<body>

<nav>
    <p><img src="banner.png" width="420"></p>
    <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>

<div>
    <p><span style="font-size: 40px;color: blue;font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace";>欢迎来到广州商学院！</p>
</div>




<div  id="container" style="width:400px " >
    <div id="header" style="background-color:deepskyblue;"><h2 align="center" style="margin-bottom:0;">登录</h2></div>

    <div id="content" style="background-color:lightskyblue;height:150px;width:400px;float:left;">
        <form action="">
            Username:<input type="text" name="user" placeholder="请输入用户名"><br>
            Password:<input type="password" name="password" placeholder="请输入密码">
            <br>
            <input type="radio" name="role" value="stu">student
            <input type="radio" name="role" value="teacher">teacher
            <br>
            <input type="button" value="login">
            <input type="button" value="cancel">
        </form>
    </div>
    <div id="footer" style="background-color:deepskyblue;clear:both;text-align:center;">版权 © duym</div>

</div>


<div  id="container" style="width:400px " >
    <div id="header" style="background-color:deepskyblue;"><h2 align="center" style="margin-bottom:0;">搜索</h2></div>

 <div id="content" style="background-color:lightskyblue;height:200px;width:400px;float:left;">
 <select>
                <option value="" style="color: #c2c2c2;">---请选择---</option>
                <option>学生</option>
                <option>教师</option>
                <option>访客</option>
            </select>

　<ul>
             <li>学校校历</li>
             <li>学校校报</li>
             <li>信息公开</li>
         </ul>
             <ol>
                 <li>图书馆</li>
                 <li>教务系统</li>
             </ol>
         </div>

 <div id="footer" style="background-color:deepskyblue;clear:both;text-align:center;">版权 © duym</div>


<hr>
 <P id="gg">友情链接</P>
  <a href="http://www.gzcc.cn/">广州商学院<br>
      <img src="http://www.gzcc.cn/2016/images/banner.png" width="258" height="39" alt="gzcc.cn"  ></a>

    <p class="text1">版权所有：广州商学院<br>
    地址：广州市黄埔区九龙大道206号
    </p>


</body>
</html>

css

#gg{
    color:red;
    }
.text1{
    color:black;
    }

 

 

 

posted on 2017-10-17 19:30  097吴嘉玲  阅读(152)  评论(0)    收藏  举报

导航