- 制作自己的导航条。
- HTML头部元素：
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表：
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器：
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>MIS问答平台</title> ????<style type="text/css"> ???????a{font:"宋体";color:LightSkyBlue;font-size:150% } ????????p{ ???????????color:blue; ???????} ???????.h1{ ???????????background-color: purple; ???????} ???????.textblue{ ???????????color:pink; ???????} ???????#tt{ ???????????color:yellow; ???????}</style> ???<link href="wk1.2.css"rel="stylesheet"type="text/css"> ???<base href="http://www.gzcc.cn/"></head><body><nav> ??<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D180%2C140%2C50/sign=9f84efaedc2a60595245b25a4e0905a3/8718367adab44aede0f8bd83b81c8701a18bfb27.jpg"> ???<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> ???<h1>通知</h1> ???<p>明天早上九点将召开<span style="font-size: 45px;font: 500;background-color:pink";>十九大</span></p></div><h1>欢迎来访</h1><h4>2015</h4><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=""> ???????用户名:<input type="" name="用户名" placeholder="请输入用户名"><br> ???????密 ?码:<input type="" name="密码" placeholder="请输入密码"><br> ???????<br> ???????<input type="radio"name="role" value="stu">学生 ???????<input type="radio" name="role" value="tea">教师 ???????<input type="radio" name="role" value="tea">游客<br> ???????????<input type="button" value="登录"> ???????????<input type="button" value="取消"> ???????????<input type="button" value="重置"> ?????????<br> ?????????<input type="checkbox"value="true"><span>记住我</span> <a href="">登录遇到问题</a><br> ?????????<input type="button"value="login" onclick="alert(‘登录验证‘)"> ???</form></div> ???<div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 ? duym</div></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: antiquewhite;height: 150px;width: 400px;float: left;"><form> ???<select> ???????<option>问答</option> ???????<option>收藏</option> ???</select> ???</form> ???<ul> ???????<li>python</li> ???????<li>css</li> ???</ul> ???<ol> ???????<li>广州商学院</li> ???????<li>信息技术与工程学院</li> ???</ol> ???<div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 ? duym</div></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: antiquewhite;height: 150px;width: 400px;float: left;"> ???<dl> ???????<dt>项目一</dt> ?????????<dd>描述项目</dd> ???????<dt>项目二</dt> ?????????<dd>描述项目</dd> ???</dl> ???</div> ???<div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 ? duym</div></div> ???<br><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>导航，头部，CSS基础
原文地址：http://www.cnblogs.com/blackboardf/p/7684083.html