1.制作自己的导航条。
HTML头部元素：
<base> 定义了页面链接标签的默认链接地址
<style> 定义了HTML文档的样式
<link> 定义了一个文档和外部资源之间的关系
练习样式表：
行内样式表
内嵌样式表
外部样式表
分别练习定义三类选择器：
HTML 选择器
CLASS 类选择器
ID 选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>欢迎你，请先登陆！</title> ???<base href="http://www.baidu.com"/> ???<base target="_blank"> ???<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body><nav class="navbar navbar-default" role="navigation"> ???<div class="container-fluid"> ???????<div class="navbar-header"> ???????????<a class="navbar-brand" href="">登录页面</a> ???????</div> ???????<form class="navbar-form navbar-left" role="search"> ???????????<div class="form-group"> ???????????????<input type="text" class="form-control" placeholder="Search"> ???????????</div> ???????????<button type="submit" class="btn btn-default">搜索</button> ???????</form> ???</div></nav><h2 id="green">请先登录！</h2><div id="container" style="width: 400px" align="center"> ???<div id="header" style="background-color: aquamarine"> ???????<h2 align="center">登陆</h2> ???</div> ???<div id="content"> ???????<form> ???????????<p align="center">账号: ???????????????<input type="text" name="user" placeholder="请输入用户名"> ???????????</p> ???????????<p align="center">密码: ???????????????<input type="password" name="psw"> ???????????</p> ???????????<input type="radio" checked="checked">学生 ???????????<input type="radio">老师 ???????????<br> ???????????<input type="checkbox"> 记住密码<a ???????????????href="https://passport.baidu.com/?getpassindex&tt=1508203677420&gid=01CB309-BEA2-415B-9B05-262DB927F635&tpl=mn&u=https%3A%2F%2Fwww.baidu.com%2Findex.php%3Ftn%3Dsite888_3_pg%26ssl_s%3D1%26ssl_c%3Dssl1_15f27f1bbc4"> 登陆遇到问题？</a> ???????????<br> ???????????<input type="button" name="login" value="登陆">    ???????????<input type="button" name="regist" value="注册"> ???????</form> ???</div> ???<div style="background-color: aquamarine"> ???????<i>版权信息@</i> ???</div> ???<p> ???????<select> ???????????<option>收藏</option> ???????????<option>点赞</option> ???????????<option>评论</option> ???????</select> ???</p> ???<ul> ???????<li>python</li> ???????<li>c++</li> ???????<li>html</li> ???</ul> ???<ol> ???????<li>python</li> ???????<li>c<span style="color: red">++</span></li> ???????> ???????<li>html</li> ???</ol></div></body></html><style> ???p { ???????color: red; ???????align-content: center; ???} ???#red { ???????color: red; ???} ???#green { ???????color: green; ???}</style>运行截图：
导航，头部，css基础
原文地址：http://www.cnblogs.com/yishhaoo/p/7689275.html