<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>欢迎登陆</title> ???<base href="http:www.gzcc.cn/"target="_blank"> ???<link rel="stylesheet"type="text/css"href="color.css"> ???<style type="text/css"> ??p1{ ??????color:red ??} ???hi{ ??????color:blue; ??} ???</style></head><body> <nav> ???<img src="http://www.gzcc.cn/2016/images/banner.png"><br> ???<a href="">首页</a> ???<a href="">新闻</a> ???<input type="text"name="search"> ???<button type="submit">搜索</button> ???<a href="">登陆</a> ???<a href="">注册</a> ???<a href="">退出</a></nav> ???<div> ??????<p>校园活动<span style="font-family: ‘Consolas‘, ‘Deja Vu Sans Mono‘, ‘Bitstream Vera Sans Mono‘, monospace; font-size: 50px;background-color: #FFD700">精选</span></p> ??????<p1> 浏览后请退出账号!</p1><br> ???????<hi>浏览后请退出账号!</hi> ????</div> ??</div> ?<div ?id="container" style="width:400px " > ???<div id="header" style="background-color:lightblue;"><h2 align="center" style="margin-bottom:0;">欢迎登录</h2></div> ???<div id="content" style="background-color:lightblue;height:150px;width:400px;float:left;"> ???<form> ???????username:<input type="text"name="mingzi"placeholder="请输入用户名"><br> ???????password:<input type="password"name="mima"placeholder="请输入密码"><br> ???????student<input type="radio"name="role"value="student" > ???????teacher<input type="radio"name="role"value="teacher" ><br> ????????<input type="button"value="login"> ???????<input type="button"value="cancel"> ???</form> ????</div> ???<div id="footer" style="background-color:lightblue;clear:both;text-align:center;">版权 ? duym</div><div ?id="answer" style="width:400px " ></div><div id="title" style="background-color:pink;"><h2 align="center" style="margin-bottom:0;">搜索</h2></div> <div id="search" style="background-color:pink;height:350px;width:400px;float:left;"> ???<form> ???????<select> ???????????<option>问答</option> ???????????<option>收藏</option> ???????</select> ???</form> ???????<ul> ??????????<li>课表管理</li> ??????????<li>学籍管理</li> ??????????<li>教材管理</li> ??????????<li>教学简报</li> ???????</ul> ???????<ol> ???????????<li>校历</li> ???????????<li>专业课表</li> ???????????<li>教务系统</li> ???????</ol> ???<dl> ????????<dt><a href="http://lib.gzcc.cn/">图书馆</a> </dt> ????????<dd><a href="http://oa.gzcc.cn/index.php?m=content&c=index&a=lists&catid=2333">本馆概况</a></dd> ????????<dd><a href="http://lib.gzcc.cn/html/gaikuang/guanshelveying/">馆舍掠影</a></dd> ???</dl></div></div></body></html>导航，头部，CSS基础
原文地址：http://www.cnblogs.com/lyx1997/p/7684192.html