<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello my world</title>
<base
href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank">
<link rel="stylesheet" type="text/css" href="T5.css">
<style type="text/css">
p{
color:darkcyan;font-size: 10px;
}
.textblue{
color:blue;
text-decoration: underline;
}
.tea{
background-color:pink;
}
c{
color:pink;
}
</style>
</head>
<body>
<h3>潇晓旅行</h3>
<br>
<img src="http://file27.mafengwo.net/M00/47/10/wKgB6lTgpUmAKJVPAAw7hogA77U93.groupinfo.w600.jpeg">
</br>
<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>
<hr>
id选择器和class选择器
<p> 上关风</p>
<p class="tea"> 下关花</p>
<p class="textblue"> 苍山雪</p>
<p class="tea">洱海月</p>
<hr>
行内样式
<div style="width:500px;height:50px;background:black;"></div>
内嵌样式
<style type="text/css">
#div{width:500px;height:50px;background:black;}
</style>
<div id="div"></div>
外部样式
<div id="div"></div>
<hr>
<div id="container" style="width: 400px">
<div id="header" style="background-color: gray"><h2 align="center" style="margin-bottom: 0;">注册</h2></div>
<div id="content" style="background-color: pink;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">游客<br>
<input type="button" value="登录">
<input type="button" value="取消">
<input type="button" value="重置">
</form>
</div>
<div id="footer" style="background-color: gray;clear: both;text-align: center;">版权 © duym</div>
</div>
<hr>
<div id="container" style="width:400px">
<div id="header" style="background-color:gray;"><h2 align="center" style="margin-bottom:0;">搜索页面</h2></div>
<div id="contant" style="background-color:pink;height:220px;width:400px;float:left;">
<form action=" "...></form>
<form>
<select >
<option>会员</option>
<option>游客</option>
</select>
</form>
<ul>
<li> 云南简介</li>
<li>大事件</li>
<li>热点</li>
</ul>
<ol>
<li>上关风</li>
<li>下关花</li>
<li>苍山雪</li>
<li>洱海月</li>
</ol>
<div id="footer" style="background-color:gray;clear:both;text-align:center;">版权© duym</div>
</body>
</html>