- 制作自己的导航条。
- HTML头部元素：
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表：
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器：
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fire</title>
<style type="text/css">
a{
color:green;background-color:aqua;
}
</style>
</head>
<body bgcolor="white">
<h1 align="center"><span style="background-color:yellow;font-size:100px">WELCOME!</span> to GZCC</h1>
<nav>
<img src="http://oa.gzcc.cn/uploadfile/2016/0617/20160617044054839.jpg" width="50" height="50">
<a href="http://www.gzcc.cn/html/xygk/xueyuanjianjie/">FRONT</a>
<input type="text"name="search">
<button type="submit">SEARCH</button>
<a href="http://www.gzcc.cn/html/yonghufenglei/xuesheng/">STUDENT</a>
<a href="http://www.gzcc.cn/html/yonghufenglei/jiaoshi/">TEACHER</a>
<a href="http://www.gzcc.cn/html/yonghufenglei/xiaoyou/">FRIEND</a>
<a href="http://www.gzcc.cn/html/yonghufenglei/kaosheng/">TEXT</a>
<a href="http://jwxw.gzcc.cn/">LOGIN</a>
</nav>
<img src="http://www.gzcc.cn/2016/images/banner.png"width="1800">
<h4 align="center"> Management system</h4>
<div id="container" style="width:400px ">
<div id="header" style="background-color: aqua;"><h2 align="center" style="margin-bottom:0;">LOGIN</h2></div>
<form align="center">
username:<input type="text"name="username"placeholder="please input your user"><br>
password:<input type="password"name="password" placeholder="please input your password"><br>
<input type="radio" name="role" value="stu">student
<input type="checkbox" name="vehicle" value="teacher">teacher<br>
<input type="button" value="check in"style="width: 250px;height: 50px;background-color: aqua;color: fuchsia">
</form>
<div id="content" style="background-color:#EEEEEE;height:150px;width:400px;float:left;"></div>
<div id="footer" style="background-color:aqua;clear:both;text-align:center;">版权 © duym</div>
</div>
</form>
<form>
<select>
<option>请选择</option>
<option></option>
</select>
</form>
<ul>
<li>专业与课程建设</li>
<li>人才培养方案</li>
<li>教研室建设</li>
<li>教学通讯</li>
<li>教师技能大赛</li>
</ul>
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
</form>
</body>
</html>
a{
color:green;background-color:aqua;
}
#d{
color:aqua ;
}
.one{
color:blue;
}
