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="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;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="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;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;
}
