导航，头部，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>
    <link rel="stylesheet" type="text/css" href="177.css">
    <base href="http://www.gzcc.cn/2016/images/" target="_blank">

</head>
<body>
<nav>
           <img src="footer1-logo.png">
           <input type="test"name="search">
           <button type="submit">搜索</button>
           <a href="">注册</a>
           <a href="">登录</a>
    <br>   <a href="http://www.gzcc.cn/">学校官网</a>
           <a href="">人文社科</a>
           <a href="">自然科学</a>
           <a href="">专业书籍</a>
           <a href="">文学名著</a>
           <a href="">小说杂志</a>
           <a href="">散文诗集</a>
    </nav>
<h1>广州商学院图书管理系统</h1>
<h2 >GCC欢迎您</h2>
<hr>
<p class="tea"> 请注意运行环境是否安全！</p>
<p class="textblue">  请注意运行环境是否安全！</p>
<p class="tea">请注意运行环境是否安全！</p>
<p><img src ="http://news.gzcc.cn/2016/images/banner.png"></p>
<div id="container" style="width: 400px">
    <div id="header" style="background-color: blue"><h2 align="center"
style="margin-bottom: 0;">登录</h2></div>

<div id="content" style="background-color: cornflowerblue;height: 150px;width: 400px;float: left;"align="center">
<from>
            用户<input type="text" name="firstname">  <br>
            密码<input type="password" name="pwd" >    <br>
    <br><input type="radio" value="教师">教师
            <input type="radio" value="学生">学生
            <input type="radio" value="访客">访客 <br>
            <input type="button" value="登陆">
            <input type="button" value="取消">
        </form><div id="container" style="width: 400px">
    <div id="header" style="background-color: blue"><h2 align="center" style="margin-bottom: 0;">搜索</h2></div>
       <div id="content" style="background-color: cornflowerblue;height: 250px;width: 400px;float: left;">



        <form align="center">
            <select>
                <option>图书类型</option>
                <option>图书编号</option>
                <option>图书归属</option>
    </select>
        </form>

           <ul>
                                <li>自然科学类</li>
                                <li>人文社科类</li>


            </ul>
            <ol>
                <li>计算机科学技术</li>
                <li>Java程序设计语言</li>
                <li>Web网络架构</li>
                <li>Python网络数据采集</li>
            </ol>
           /div>
    <div id="footer" style="background-color:blue;clear:both;text-align:center;">版权 © xyjie</div>

</div>
</body>

    4.  

posted @ 2017-10-17 21:16  073徐英杰  阅读(150)  评论(0)  编辑  收藏  举报