- 制作自己的导航条。
- HTML头部元素：
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表：
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器：
- 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基础
原文地址：http://www.cnblogs.com/ffr0068/p/7681058.html