1.制作自己的导航条。
2.HTML头部元素：
<base> 定义了页面链接标签的默认链接地址
<style> 定义了HTML文档的样式文件
<link> 定义了一个文档和外部资源之间的关系
3.练习样式表：行内样式表;内嵌样式表;外部样式表
分别练习定义三类选择器：
HTML 选择器
CLASS 类选择器
ID 选择器
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>登录|哈哈书院</title>
????<base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank">
???<link rel="stylesheet" type="text/css" href="ha.css">
</head>
<body style="background-color: khaki">
<nav>
?????<img src="w_02_08_00.png">
???<a href="">首页</a>
???<a href="">下载</a>
???<input type="text"name="search">
???<button type="submit">搜索</button>
???<a href="">登录</a>
???<a href="">注册</a>
</nav>
<script>
??????????document.write(Date())
??????????document.getElementById("2015").innerHTML="????";
??????</script>
<div ?id="contar" style="width:400px;margin:0px auto;" >
????<div id="header" style="background-color:aquamarine"><h2 align="center" style="margin-bottom: 0;"><font face="华文新魏" color="#ffc0cb" size="12" >哈哈书院 </font></h2></div>
????????<div id="content" style="background-color:peachpuff;width:400px;float:left;line-height:40px;">
???<form action="">
?????Username:<input type="text" name="user" placeholder="敢问阁下大名"><br>
???????????Password:<input type="password" name="password" placeholder="请输入通关密码">
???????????<br>
???<input type="radio" name="role" value="stu">student
???????<input type="radio" name="role" value="tea">teacher
???<input type="checkbox" name="vehicle" value="Bike">记住密码<br><br>
???????????<input type="button" value="login">
???????????<input type="button" value="cancel">
???</form>
</div>
???<div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 ? duym</div>
</div>
<div ?id="container" style="width:400px;margin:0px auto;" >
????<div id="header" style="background-color:aquamarine"><h2 align="center" style="margin-bottom: 0;"><font face="华文新魏" color="#ffc0cb" size="12" >问答平台</font></h2></div>
????????<div id="content" style="background-color:peachpuff;width:400px;float:left;line-height:40px;">
???<from>
???????<select>
???????????<option>--请选择--</option>
????????????<option>问答</option>
???????????<option>收藏</option>
???????</select>
???</from>
???<ul>
???????<li>哈哈书院简史</li>
???????<ol><li>建院之初</li><li>建院那些事</li><li>桃李满天下</li></ol>
???</ul>
????????????<ul>
???????<li>哈哈书院招生简介</li>
???????<ol><li>爱笑的人运气不会差</li><li>喜欢你的颜，想要你的钱</li><li>哈哈哈哈哈</li><br></ol>
???</ul>
<div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 ? duym</div>
</div>
???<style type="text/css">
???????p{
???????????color:darkcyan;font-size: 10px;
???????}
???????.textblue{
???????????color:blue;
???????????text-decoration: underline;
???????}
???????.tea{
???????????background-color:yellow;
???????}
???????c{
???????????color:yellow;
???????}
???</style>
???<div>
??????<p>上哈哈书院<span style="font-family: ‘Consolas‘, ‘Deja Vu Sans Mono‘, ‘Bitstream Vera Sans Mono‘, monospace; font-size: 35px;background-color: #FFD700"; >拿开学大礼包</span></p>
???</div>
???<hr>
<a href="http://www.gzcc.cn/">哈哈学院<br>
</body>
</html>
CSS:
p{ ???????????color: crimson; ???????} ???????h1{ ????background-color: cyan; ???????} ???????.textyellow{ ???????????color: gold; ???????????background-color: cyan; ???????} ???????#tt{ ???????????color: chartreuse; ???????}导航，头部，CSS基础
原文地址：http://www.cnblogs.com/00js/p/7680897.html