《CSS那些事儿》元素篇

p:first-letter{float:left;font-weight:bold;font-size:2em} 
p{clear:both}
解析：左浮动已占据多行，加粗，设置大小，清除浮动以避免p高度受影响

background:background-color || background-image || background-repeat || background-attachment || background-position}

list-style:list-style-image || list-style-position || list-style-type

<dl>
	<dt>一级列表标题</dt>
	<dd>二级列表内容</dd> // dt后面可以跟随多个dd
	<dd>
		<dl> //多级列表不能直接嵌套dl，必须位于dd内
			<dt>二级列表标题</dt>
			<dd>二级列表标题</dd>
		</dl>
	</dd>
</dl>

<div class="site_nav"> //将所有导航标签，包含于容器内
	<h1></h1> //添加导航标题，可用CSS隐藏
	<map id="nav"> //使用map标签，必须带ID属性，有利于SEO
		- 
	</map>
</div>

#nav ul,#nav li{padding:0;margin:0;list-style:none;}
.site_nav{width:100px;} //设置容器宽度
.site_nav h1{display:none} //隐藏标题
#nav li {height:22px} //不对宽度属性调整，使用默认值“auto”
#nav li a {display :block;height:100%;text-align:center;text-decoration:none;background-color:#333:color:#fff;} //1)块状化、2）不设置宽度，使用auto、3）继承父级高度、4）文本居中，无下划线
#nav li a:hover{background-color:#e8e8e8;color:#000}

ul{width:150px;}
ul li {position:relative;}
ul li ul {display:none;position:absolute;left:149px;top:0;}
ul li a{display:block;height:100%}
ul li:hover ul{display:block;}

/* 经过文字时，鼠标变为手型 */
label{cursor:pointer}
 /* 解决复选框玉文字对齐不一致*/
#keepLogin{vertical-align:middle;}

<form method="post" action="">
	<div><label for="userName">用户名：</label>
	<input type="text" id="userName" /></div>
	<div><input type="checkbox" id="keepLogin" />
	<label for="keepLogin">记住我的登录信息</label></div>
	<button type="submit" class="btn_login">登录</button>
</form>

<div class="search_box">
	## 站内搜索
	<form method="post" action="">
		<input type="text" value="" />
		<button type="submit">搜索</button>
		<div class="search_tips">
			### 搜索提示
			
				- <a href="#">文字文字文字</a>
				- <a href="#">文字文字文字</a>
			
		</div>
	</form>
</div>

<div class="feedback">
	## 反馈表单
	<form method="post" action="">
		<fieldset class="base_info">
			<legend>用户信息</legend>
			<div><label for="userName">用户名：</label>
			<input type="text" id="userName" /></div>
		</fieldset>
		<fieldset class="feedback_content">
			<legend>反馈内容</legend>
			<div><label for="up_file">相关图片：</label>
			<input type="file" id="up_file" /><div>
			<div><label for="msg">内容：</label>
			<textarea id="msg"></textarea><div>
		</fieldset>
		<button type="submit">提交</button><button type="reset">重置</button>
	</form>
</div>

table{width:300px;border:1px solid #000;}
caption{text-align:left;}
th{color:#f4f4f4;background-color:#999;}
td{text-align:center;background-color:#e8e8e8;}
tfoot td{text-align:right;background-color:#fff;}
colgroup{width:100px;}
tr>td{color:red;}
tr>td+td{color:green;}

<table>
	<caption>表头信息</caption>
	<colgroup span="1"></colgroup>
	<thead>
		<tr><th>表格标题</th><th>表格标题</th></tr>
	</thead>
	<tbody>
		<tr><td>表格内单元格</td><td>表格内单元格</td></tr>
		<tr><td>表格内单元格</td><td>表格内单元格</td></tr>
	</tbody>
	<tfoot>
		<tr><td colspan="2">表格的页脚</td></tr>
	</tfoot>
</table>

border-collapse:collapse;
th,td{border:1px solid #000;};

<table>
	<caption>今天是2010年9月26日</caption>
	<colgroup span="7">
		<col span="1" class="day_off" />
                <col span="5"/>
                <col span="1" class="day_off" />
	</colgroup>
</table>