导航，头部，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>
    <base href="http://www.gzcc.cn/"target="_blank">
    <link rel="stylesheet"type="text/css"href="123.css">
    <style>
           h2{ text-align: center;margin-bottom:0;}
           #headertwo{background-color:#66b3ff;}
           #contenttwo{background-color:#ffffce;height:200px;width:400px;float:left;}
           #footertwo{background-color:#66b3ff;clear:both;text-align:center;}
           #wedang{width:400px;float:right}
           #school{width:400px;float:left}
    </style>
</head>


<body>
<nav>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508218922117&di=ac29aea7dcf936bb8b4094a968092a17&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201603%2F30%2F20160330185143_BLnaT.jpeg"width="60" height="35">
    <a href="">首页</a>
    <a href="">下载</a>
    <input type="text"name="search">
    <input type="submit"value="搜索">
    <a href="">登录</a>
    <a href="">注册</a>
</nav>
<h2 style="text-align: center">登录</h2>

<div>
    <p>请注意登录环境<span style="font-family: '', monospace; font-size: 25px;background-color:#bbffff">是否安全</span></p>
</div>
<div  id="denglu" style="width:400px">
    <div id="headerone" style="background-color:#0080ff;"><h2>登录</h2></div>

    <div id="contentone" style="background-color:#EEEEEE;height:150px;width:400px;float:left;">
        <form>
            firstname:<input type="text"name="firstname"placeholder="请输入用户名"><br>
            password:<input type="password"name="password"placeholder="请输入密码"><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:#0080ff;clear:both;text-align:center;">版权  duym</div>
</div>

<div  id="wedang">
    <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>
        </ol>
</div>
    <div id="footertwo">版权  duym</div>
    </div>

<div  id="school" >
    <div id="headertwo"><h2>学校构成</h2></div>
    <div id="contenttwo">
        <dl>
            <dt>学院类别</dt>
            <dd>信息学院</dd>
            <dd>艺术学院</dd>

        </dl>
    </div>
    <div id="footertwo">版权  duym
    </div>

<br>
    <p>参考链接</p>
    <a href="http://www.gzcc.cn/">广州商学院<br>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508316961&di=bb8764ce4ad8f8d52bfa3e8a96579948&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201508%2F17%2F20150817231259_Y8nR2.thumb.700_0.jpeg"width="100" height="100" alt="土间埋" >
    </a>

</body>
</html>

 

posted @ 2017-10-17 13:10  074罗桦  阅读(274)  评论(0)    收藏  举报