html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度一下</title>
<link rel="stylesheet" href="baidu.css" />
<style type="text/css" title=""></style>
</head>
<body>
<div class="top">
<div class="title">
<span>
<a class="bold" href="#">新闻</a>
<a class="bold" href="#" >hao 123</a>
<a class="bold" href="#" >地图</a>
<a class="bold" href="#" >视频</a>
<a class="bold" href="#">贴吧</a>
<a href="#">登录</a>
<a href="#">设置</a>
<input class="list" type="submit" value="更多产品" name="submit" />
</span>
</div>
</div>
css:
@charset "utf-8";
/* CSS Document */
.top{
100%;
height:64px;}
.top>.title{
height:64px;
float:right;}
.top>.title>span{
line-height:64px;
float:right;}
.top>.title>span>a{
font-size:13px;
font-family:"宋体";
text-decoration:underline;
color:#333}
.top>.title>span>.bold{
font-weight:bold;}
.list{
border:0;
height:25px;
60px;
background:#36F;
color:#fff;}
1 <link rel="stylesheet" href="baidu.css" />
CSS样式一共3中使用方法
——内联式样式表
行样式<div style="color:#000;"></div>
只能操作1个标签，细节灵活
——嵌入式样式表
<head>
<style>
div{color:#000;}
</style>
</head>
——引用式样式表
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
2 <span>
在CSS定义中属于一个行内元素,在行内定义一个区域，也就是一行内可以被 <span> 划分成好几个区域，从而实现某种特定效果。
<span> 本身没有任何属性。 <div> 在CSS定义中属于一个块级元素 <div> 可以包含段落、标题、表格甚至其它部分。
这使DIV便于建立不同集成的类，如章节、摘要或备注。在页面效果上，使用 <div> 会自动换行，使用 <span> 就会保持同行。
3 <td><input type="submit" value="提交" name="submit" class="btn" >
这是一个表单的提交按钮啊！
type="submit" 类型是“提交”
value="提交" 按钮上显示的值是“提交”
name="submit" 被引用时候的名字是“submit”
class="btn" 不看代码上下文不好说，是引用的类，没有包，大概是默认路径下的类，都没装在包里
4当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）
5 css 中 字体： color 颜色， font-size 大小，font-family 类型 ,font-weight:bold 加粗，float:right 右对齐，float:left 左对齐，float：center 居中， folat none 取消对齐方式。
font-style: italic 斜体，font-style 字体风格，font-style:normal 正常