- 制作自己的导航条。
- HTML头部元素：
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表：
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器：
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>GuDam</title></head><body><base href="http://ms.9you.com/web_v3/statics/images/uhg.jpg/"target="_blank"> ???<link rel="stylesheet" type="text/css" href="T5.css"> ???<style type="text/css"> ??????p{ ???????????color: red; ???????} ???????h2{ ????background-color: cyan; ???????} ???????.textyellow{ ???????????color: blue; ??????????????????} ???????#tt{ ???????????color: yellow; ???????} ???</style></head><body> ????<nav> ????????<img src="w_02_08_00.png"> ????????<a href="http://www.gzcc.cn/">首页</a> ????????<a href="">下载</a> ????????<input type="text" name="search"> ????????<button type="submit">搜索</button> ????????<a href="">登录</a> ????????<a href="">注册</a> ????</nav></body><h1 align="center">Gudam交流平台</h1><h2>Gudam模型</h2><p> Gudam作品</p> <div>高达online新区<span style="background-color: cyan;font-family: ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;font-size: 50px;color: yellow">火爆开服</span></div> ??????<h3 id="2017">2017</h3> <script> ??????????document.write(Date()) ??????????document.getElementById("2017").innerHTML="高达online"; ??????</script> ??????<p style="color: blueviolet;margin-left: 40px;">等你来战！</p> ??????<p>是时候表演真正的技术了！</p> ??<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: antiquewhite;height: 150px;width: 400px;float: left;"><form action="">Username:<input type="text" name="username"placeholder="请输入用户名"><br> ????Password:<input type="password" name="password"placeholder="请输入密码"> ???<br> ???<input type="radio" name="role" value="stu">VIP玩家 ????<input type="radio" name="role" value="stu">普通玩家<br> ????<input type="button" value="login"> ????<input type="button" value="cancel"><br> ????<input type="button" value="忘记密码"></form></div> ???<div id="footer1" style="background-color: aliceblue;clear: both;text-align: center;">版权 ? duym</div> ???</div> ??<div id="container1" style="width: 400px"> ??????<div id="header1" style="background-color: aquamarine"><h2 align="center" style="margin-bottom: 0;">调查问卷</h2></div> ??????<div id="content1" style="background-color: antiquewhite;height: 150px;width: 400px;float: left;"><form> ??<select> ???<option>调查问卷一</option> ???<option>调查问卷二</option> ???</select> </form> ?<ul> ????<li>看过哪些高达作品？</li> ????<li>你最欢的高达是哪一部？</li> ?</ul> ????<ol><li>喜欢哪个高达驾驶员？</li><li>你最欢的高达是哪一个高达？</li> ?</ol></div><div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 ? duym</div></div></div><h2 align="center">大型活动</h2><p id="tt">秋之战！</p><p >完成一场大规模战（5积分）！！！</p><p class="textyellow">19：00-23：00每完成一场大规模战（1积分）！！！</p></body></ht><div ?id="container2" style="width:400px " > ???<div id="header2" style="background-color:hotpink"><h2 align="center" style="margin-bottom:0;">快速通道 Fast Track</h2> ???</div> ???<div id="content2" style="background-color:lightskyblue;height:150px;width:400px;float:left;"> ???<ol> ???<li>游戏登陆</li> ???<li>游戏特色</li> ???<li>操作系统</li></ol> <dl> ?????????????????<dt>高达系列</dt> ?????????????????????<dd>UC系列</dd> ?????????????????????<dd>Seed系列</dd> ????</dl> ????????</div> ???<div id="footer2" style="background-color:hotpink;clear:both;text-align:center;">版权 ?duym</div> ???<dl> ???????????????<dt>高达</dt> ???????????????<dd>因为“高达”的名字早已经深入民心，各地粉丝迷都一律称之为“高达”。</dd></dl><a href="http://ms.9you.com/newplayer3.html">高达online <img src="http://ms.9you.com/web_v3/statics/images/bodright_dowanload.png"></a></div></body></html>css：
p{ ???????????color: red; ???????} ???????h2{ ????background-color: cyan; ???????} ???????.textyellow{ ???????????color: blue; ??????????????????} ???????#tt{ ???????????color: yellow; ???????}
导航，头部，CSS基础
原文地址：http://www.cnblogs.com/yeyuanchao/p/7680844.html