导航，头部，CSS基础

时间：2017-10-17 15:07:13 阅读：165 评论：0 收藏：0 [点我收藏+]

标签：blank 导航 head 选择器 inpu eee 默认 targe height

制作自己的导航条。
HTML头部元素：
1. <base> 定义了页面链接标签的默认链接地址
2. <style> 定义了HTML文档的样式文件
3. <link> 定义了一个文档和外部资源之间的关系
练习样式表：
1. 行内样式表
2. 内嵌样式表
3. 外部样式表

分别练习定义三类选择器：

HTML 选择器
CLASS 类选择器

ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教务系统</title>
    <base href="http:www.gzcc.cn/"target="_blank">
    <link rel="stylesheet"type="text/css"href="171.css">
    <style type="text/css">
     p{
    color:red
    }
    p1{
    color:green
    }
</style>
</head>
<body>
 <nav>
       <h2><img src="logo/logo_school.png"></h2>
                    <h3><img src="logo/logo_jw.png"></h3>
        <a href="">官方首页</a>
     <a href="">校内咨询</a>
        <a href="http://www.gzcc.cn/">下载APP</a>
        <input type="text"name="search">
        <button type="submit">搜索</button>
    <a href="">返回</a>
    <a href="">注销</a>
    </nav>
  <div>
       <p> 通知:请保护好登录安全,防止信息泄露!</p>
        <P>警告:请保护好登录安全,防止信息泄露!</P>
        <p>注意:请保护好登录安全,防止信息泄露!</p>
        <p1>重要的事情说三遍!!!</p1>
    </div>
<hr>

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

<div id="content" style="background-color: #EEEEEE;height: 150px;width: 400px;float: left;">
    <form action="">
            <select>
              <option>校内入口</option>
              <option>校外入口</option>


          </select><br>
      账号:<input type="text" name="账号"placeholder="请输入学号"><br>
            密码:<input type="password" name="密码"placeholder="请输入密码">
            <br>
        <input type="radio"name="role"value="stu">学生
            <input type="checkbox"name="vehicle"value="tea">教师<br>

            <input type="button" value="登录">
            <input type="button" value="取消">
            <input type="button" value="刷新">

    </form>


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

<div id="content" style="background-color: #EEEEEE;height: 150px;width: 400px;float: left;">
    <form action="">
        <ul>
            <li>交通指南</li>
            <li>人才招聘</li>
            <li>合作院校</li>
            <li>信息公开</li>
      </ul>
        <dl>
          <dt>版权所有:广州商学院  地址:广州市黄浦区九龙大道206号</dt>
            </div>
    <div id="footer" style="background-color: #FFA500;clear: both;text-align: center;">版权 ? duym</div>
</div>


<hr>
<P>友情链接</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>






</body>
</html>

p{

color:red;
}
h1{

background-color:darkgreen;

}
textnblue{

color:blue;


}
#tt{
color:#FFD700;

}

技术分享

导航，头部，CSS基础

标签：blank 导航 head 选择器 inpu eee 默认 targe height

原文地址：http://www.cnblogs.com/ffr0068/p/7681058.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行