导航，头部，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>lh-three</title>
</head>
<style type="text/css">
   h2{ text-align: center;margin-bottom:0;}
    #headertwo{background-color:antiquewhite;}
    #contenttwo{background-color:pink;height:200px;width:400px;float:left;}
    #footertwo{background-color:antiquewhite;clear:both;text-align:center;}
    #wedang{width:400px;float:right}
    #school{width:400px;float:left}
</style>
<body>
<nav>
    <a href="">Home</a>
    <a href="">Doenload</a>
    <input type="text"name="search">
    <input type="submit"value="search">
    <a href="">login</a>
    <a href="">register</a>
</nav>
<h2 style="text-align: center">login</h2>

<div  id="denglu" style="width:400px">
    <div id="headerone" style="background-color:antiquewhite;"><h2>login</h2></div>

    <div id="contentone" style="background-color:plum;height:150px;width:400px;float:left;">
        <form>
            firstname:<input type="text"name="firstname"placeholder="please enter your firstname"><br>
            password:<input type="password"name="password"placeholder="please enter your password"><br>
            <input type="radio"name="role"value="stu">student
            <input type="radio"name="role"value="tch">teacher<br>
            <input type="button"value="log in">
        </form></div>
    <div id="footerone" style="background-color:palevioletred;clear:both;text-align:center;">copyright@yjl</div>
</div>

<div  id="wedang"style="background-color:plum;height:150px;width:400px;float:left;">
<div id="headertwo"><h2>相关文档</h2></div>

<div id="contenttwo">
 <form>
 <select>
            <option>查询</option>
            <option>收藏</option>
            <option>选择</option>
</select>
</form>
 <ul>
            <li>专业</li>
            <li>教学</li>
            <li>课程</li>
        </ul>
        课程要求：
        <ol>
            <li>按照教学制度</li>
            <li>对课程严格监管</li>
            <li>理解课程内容</li>
        </ol>
</div>
    <div id="footertwo">copyright@yjl</div>
    </div>

<div  id="school" >
    <div id="headertwo"><h2>学校构成</h2></div>
    <div id="contenttwo">
        <dl>
            <dt>学院类别</dt>
            <dd>信息学院</dd>
            <dd>法律学院</dd>
            <dd>经融学院</dd>
        </dl>
    </div>
    <div id="footertwo">copyright@yjl
    </div>

<br>
    <p>参考链接</p>
    <a href="http://www.gzcc.cn/">广州商学院<br>


</body>
</html>

       

posted @ 2017-10-17 16:13  105杨捷丽  阅读(143)  评论(0)  编辑  收藏  举报