CSS基础二

百威

浏览: 711436 次
来自: ...

最近访客更多访客>>

gaozzsoft

A741841403

Liu.Guo.Zhu

mmmzzc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css

<html>
<head>
<title>div 标记范例</title>
<style type="text/css">
<!--
div{
	font-size:18px;						/* 字号大小 */
	font-weight:bold;					/* 字体粗细 */
	font-family:Arial;					/* 字体 */
	color:#FFEEEE;						/* 颜色 */
	background-color:#001166;			/* 背景颜色 */
	text-align:center;					/* 对齐方式 */
	width:300px;						/* 块宽度 */
	height:100px;						/* 块高度 */
}
-->
</style>
</head>
<body>
	<div>
	这是一个div标记
	</div>
</body>
</html>

<html>
<head>
<title>div与span的区别</title>
</head>
<body>
	<p>div标记不同行：</p>
	<div><img src="lotus.jpg" border="0"></div>
	<div><img src="lotus.jpg" border="0"></div>
	<div><img src="lotus.jpg" border="0"></div>
	<p>span标记同一行：</p>
	<span><img src="lotus.jpg" border="0"></span>
	<span><img src="lotus.jpg" border="0"></span>
	<span><img src="lotus.jpg" border="0"></span>
</body>
</html>

<html>
<head>
<title>float属性</title>
<style type="text/css">
<!--
body{
	margin:15px;
	font-family:Arial;
	font-size:12px;
}
.father{
	background-color:#fffea6;
	border:1px solid #111111;
	padding:25px;				/* 父块的padding */
}
.son1{
	padding:10px;				/* 子块son1的padding */
	margin:5px;					/* 子块son1的margin */
	background-color:#70baff;
	border:1px dashed #111111;
	float:left;					/* 块son1左浮动 */	
}
.son2{
	padding:5px;
	margin:0px;
	background-color:#ffd270;
	border:1px dashed #111111;
}
-->
</style>
</head>
<body>
	<div class="father">
		<div class="son1">float1</div>
		<div class="son2">float2</div>
	</div>
</body>
</html>

<html>
<head>
<title>position属性</title>
<style type="text/css">
<!--
body{
	margin:10px;
	font-family:Arial;
	font-size:13px;
}
#father{
	background-color:#a0c8ff;
	border:1px dashed #000000;
	position:relative;
	width:100%;
	height:100%;
}
#block{
	background-color:#fff0ac;
	border:1px dashed #000000;
	padding:10px;
	position:absolute;		/* absolute绝对定位 */
	left:20px;				/* 块的左边框离页面左边界20px */
	top:40px;				/* 块的上边框离页面上边界40px */
}
-->
</style>
</head>
<body>
	<div id="father">
		<div id="block">absolute</div>
	</div>
</body>
</html>

<html>
<head>
<title>position属性</title>
<style type="text/css">
<!--
body{
	margin:10px;
	font-family:Arial;
	font-size:13px;
}
#father{
	background-color:#a0c8ff;
	border:1px dashed #000000;
	width:100%; height:100%;
	padding:5px;
}
#block1{
	background-color:#fff0ac;
	border:1px dashed #000000;
	padding:10px;
	position:relative;		/* relative相对定位 */
	left:15px;				/* 子块的左边框距离它原来的位置15px */
	top:10%;
}
-->
</style>
</head>
<body>
	<div id="father">
		<div id="block1">relative</div>
	</div>
</body>
</html>

<html>
<head>
<title>z-index属性</title>
<style type="text/css">
<!--
body{
	margin:10px;
	font-family:Arial;
	font-size:13px;
}
#block1{
	background-color:#fff0ac;
	border:1px dashed #000000;
	padding:10px;
	position:absolute;
	left:20px;
	top:30px;
	z-index:1;					/* 高低值1 */
}
#block2{
	background-color:#ffc24c;
	border:1px dashed #000000;
	padding:10px;
	position:absolute;
	left:40px;
	top:50px;
	z-index:0;					/* 高低值0 */
}
#block3{
	background-color:#c7ff9d;
	border:1px dashed #000000;
	padding:10px;
	position:absolute;
	left:60px;
	top:70px;
	z-index:-1;					/* 高低值-1 */
}
-->
</style>
</head>
<body>
	<div id="block1">AAAAAAAA</div>
	<div id="block2">BBBBBBBB</div>
	<div id="block3">CCCCCCCC</div>
</body>
</html>

<html>
<head>
<style type="text/css">
<!--
body {
	margin:0px;
	font-size:13px;
	font-family:Arial;
} 
#container{
	position:relative;
	width:100%;
}
#banner{
	height:80px;
	border:1px solid #000000;
	text-align:center;
	background-color:#a2d9ff;
	padding:10px;
	margin-bottom:2px;
}
#content{
	float:left;
	text-align:center;
	padding-right:200px;	/* 内容往回挤200px */
}
#links{
	float:right;
	width:200px;
	border:1px solid #000000;
	margin-left:-200px;		/* 强行往左拉回200px */
	text-align:center;
}
#footer{
	clear:both;				/* 不受float影响 */
	text-align:center;
	height:30px;
	border:1px solid #000000;
}
-->
</style>
<title>CSS排版</title><body>
<div id="container">
	<div id="banner">banner</div>
	<div id="content">
		<div class="blog">
			<div class="date">date</div>
			<div class="blogcontent">
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
			</div>
		</div>
		<div class="others">others</div>
	</div>
	<div id="links">
		<div class="calendarhead">links<br>links<br>links<br>links</div>
		<div class="calendartable">links<br>links<br>links<br>links</div>
		<div class="side">links<br>links<br>links<br>links</div>
		<div class="syndicate">links<br>links<br>links<br>links</div>
		<div class="friends">links<br>links<br>links<br>links</div>
	</div>
	<div id="footer">footer</div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>我的博客</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
	<div id="globallink">
		<ul>
			<li><a href="#">个人首页</a></li>
			<li><a href="#">控制面板</a></li>
			<li><a href="#">我的文章</a></li>
			<li><a href="#">我的相册</a></li>
			<li><a href="#">我的圈子</a></li>
			<li><a href="#">给我留言</a></li>
		</ul>
		<br>
	</div>
	<div id="parameter">
		<div id="author">
			<p class="mypic"><img src="mypic.jpg"></p>
			<p>艾萨克的BLOG</p>
		</div>
		<div id="lcategory">
			<h4 class="category"><span>我的文章分类</span></h4>
			<ul>
				<li><a href="#">个人随笔</a></li>
				<li><a href="#">美术设计</a></li>
				<li><a href="#">CSS样式风格</a></li>
				<li><a href="#">Ajax学习心得</a></li>
				<li><a href="#">新疆甘肃游记</a></li>
				<li><a href="#">学生节</a></li>
				<li><a href="#">职业生涯</a></li>
			</ul>
			<br>
		</div>
		<div id="llatest">
			<h4 class="latest"><span>最新文章列表</span></h4>
			<ul>
				<li><a href="#">又是一年银杏黄</a></li>
				<li><a href="#">迎新小记</a></li>
                <li><a href="#">beep饭局</a></li>
				<li><a href="#">夜访中戏小记</a></li>
				<li><a href="#">植物园看郁金香</a></li>
				<li><a href="#">玉渊潭看花</a></li>
				<li><a href="#">学校的春天</a></li>
				<li><a href="#">美术馆小记</a></li>
				<li><a href="#">巧学巧用Flash</a></li>
			</ul>
			<br>
		</div>
		<div id="lcomment">
			<h4 class="comment"><span>最新评论</span></h4>
			<ul>
				<li><a href="#">[beep] 勘误</a></li>
				<li><a href="#">[fresheggs] re一下</a></li>
				<li><a href="#">[licc] 哇，第一张尤其zan！</a></li>
				<li><a href="#">[beep] 挺好挺好 :)</a></li>
				<li><a href="#">[bingri] 来总导这里挖坑~~</a></li>
				<li><a href="#">[inming] 博士加油</a></li>
			</ul>
			<br>
		</div>
		<div id="lfriend">
			<h4 class="friend"><span>友情链接</span></h4>
			<ul>
				<li><a href="#">闪客帝国</a></li>
				<li><a href="#">自由空间</a></li>
				<li><a href="#">一起走到</a></li>
				<li><a href="#">从明天起</a></li>
				<li><a href="#">纸飞机</a></li>
				<li><a href="#">下一站</a></li>
			</ul>
			<br>
		</div>
	</div>
	<div id="main">
		<div class="article">
			<h3><a href="#">又是一年银杏黄</a></h3>
			<p class="author">isaac @ 2007-10-31 14:19:36</p>
			<p class="content">
学校的四季都是那么的美丽，转眼间金色的银杏就成了秋天园子里的主角，而忙碌在校园里匆匆的人们，依旧骑车飞驰在这东西干道上，不曾抬头。<br><br>

周日清晨，一缕阳光撒在刚刚下过大雨的二校门前，急忙赶往考场的人们询问着三教的方向。我和舍友偶有小闲，端着相机捕捉着光影下的一个个瞬间。想想去年此时还在为学生节忙碌得没日没夜，而如今找工作焦头烂额的同时，却依旧期待着大礼堂那晚精彩的演出。人，真的是这么一步步走下来的。<br><br>

正当拍摄得起劲，视野中出现了一对中年的夫妇，笑容满面的在银杏叶中穿梭、拍照、打闹。上前一问果然是校友，和我们一样，看着昨晚下雨，料想今天是个好天气，便早早的来了，还一边乐呵呵的劝清洁的大师傅晚点再打扫。他们，已经在这条路上拍照了十年。“以前这条路还没怎么修的时候，泥土的感觉更好”，一边说着一边坐到栏杆上微笑的继续拍照。<br><br>

我离开的时候清洁车已经全面出动了，将满地绚烂的银杏打扫得干干净净，这也是他们的职责，或许某位老大爷也扫了十年了吧，我不知道。<br><br>

那对校友依旧在远处低头看着刚刚拍好的相片，周围忙碌的人们骑来飞去。“某天奔波于各教学楼间时，记得放慢匆匆的脚步，抬头望一眼蓝天映衬下清华的秋。”
<br><br>
......
			</p>
			<p class="show">浏览[151] | 评论[5]</p>
		</div>
        <div class="article">
			<h3><a href="#">迎新小记</a></h3>
			<p class="author">isaac @ 2007-08-22 23:47:35</p>
			<p class="content">
以前从来没有迎过新，昨天晚上忽然听闻新生入学的消息，加上reconzansp发文，看看这家伙都连续迎了3、4年了，想想今年也去凑凑热闹吧，顺带见见各位老朋友。于是早上早早就到紫荆园吃过早饭，到达紫操南面的时候咱系还没有多少人，放眼望去都是陌生的面孔，以为来早了，后来才听说reconzansp早晨6点就在1号楼前搬桌子了，真是自愧不如啊。<br><br>

骑车围着紫荆转了一圈，回来的时候紫操就已人山人海，发条短信给RedDevils，问问熟人都在哪。再四周望望看到香老师，依旧那么的年轻。跟她打招呼她已经不记得我了，一个劲的说“你好面熟啊，可我就是想不起来了”，我笑笑“您忙您的吧”，转身便看到reconzansp，已经带完一个学弟归来，准备带第二个了，真是reconzansp啊。香老师看到他一脸惊喜：“你今年又来了...”<br><br>

离开紫操南面，顺路去了躺9食堂拍IC卡相片的地方。由于今年迎新只有1天，人非常多，当时估计也就8点半刚过，外面已经排起了长队开始分批进入。我挤到前面端起相机“我是学校记者”就混进去了。一进门，里面的温度就有让人有窒息的感觉，可是负责照相的阿姨们却非常的耐心，不断的让同学调整姿势，还时不时的询问是否要跟换眼镜。整个食堂也秩序井然，很多志愿者虽都大汗淋淋，可也尽职尽责。<br><br>

从食堂出来收到RedDevils的回信，便急忙赶到8号楼前，果然如集市.. <br><br>

......
			</p>
			<p class="show">浏览[879] | 评论[0]</p>
		</div>
		<div class="article">
			<h3><a href="#">beep饭局</a></h3>
			<p class="author">isaac @ 2007-06-27 18:47:29</p>
			<p class="content">
很久没有动笔写点什么了，就简单流水一下beep的饭局吧。<br><br>

早早就听说beep回国来举行婚礼了，还特别隆重的在校园里拍婚纱pp，可惜一直没能见到。终于在6月16日这个周末的傍晚，beep招呼着bg，让大家见到了久违的碧婆。引用以前blog中的一段：“beep，8字班师兄，胖乎乎圆溜溜的，当年的山西高考状元，考前一个礼拜从零开始学习就拿到微所NO.1，中文名字看上去跟linear是两口子，硕士阶段修完了所有社会学课程去了伯克利读社会学，自由空间前任站长，站规的起草者，电子系nb的学生节创始人之一……”<br><br>

还没走上大厅的楼梯，就远远的看见身着蓝色T恤的硕大身躯，笑盈盈的向大伙走来。地点虽然不像大饭店那样气派，但足足坐了6桌子人，从上一个2字班（wissen等）一直到最近的2字班（tuonene等）都有人前来捧场，而且各行各业工作的人事也都远道而来，不乏从上海专程前来的bxc等人，其人面之广真是让人叹服。<br><br>

饭局中beep忙前忙后，招呼这伙应付那伙，大家都乐呵呵的谈论着那些永远让人回味无穷的beep专有话题。小小回忆如下：<br><br>

1. beep是mm还是gg？（立马十大，而且我印象中就好多次）<br>
2. beep叫什么名字？（同上）<br>
3. “听说有个电子NO.1，读社会学了，哇塞，大牛啊”....<br>
4. 山西某哥们：“靠，我们学校都不愿意提beep”<br>
5. 26#楼下一个哥们..<br><br>
......
			</p>
			<p class="show">浏览[98] | 评论[2]</p>
		</div>
		<div class="article">
			<h3><a href="#">夜访中戏小记</a></h3>
			<p class="author">isaac @ 2007-05-01 12:34:35</p>
			<p class="content">
终于决定五一前将学生节的光盘拿去中戏给咱们的灯光设计师zl，并bg之。反复约时间，不是她忙就是我没空，前两天最后决定晚上10点去一趟，夜宵咯只能，想着那附近反正也热闹。<br><br>

约摸晚上10点半公车来到北兵马司，沿着东棉花胡同远远就见中戏灯火通明，依然是一辆辆重磅级名车驶入驶出，男男女女好不热闹。或许是夏天一点点的接近，也或许就是中戏本身的氛围，奔放、豪迈、爽朗、洪亮....<br><br>

见到zl一通客套话后，发现她第二天还要早起帮老师设计灯光方案，于是取消了到周围小店夜宵的计划，改成到她们宿舍楼地下小喝一杯。中戏人不多，地盘也就大礼堂前面草坪那么大，所有学生只有这栋男女混住的小宿舍楼，情侣们进进出出，管理员熟视无睹。<br><br>

进入这栋传说中出过无数名演员的小楼，首先映入眼帘的便是橱窗里的一板照片，贴的是脏乱差宿舍的写真，据zl说每个礼拜都更新，把上礼拜脏乱差宿舍的相片公开，时不时的还能听到女生大吼：“这相片上明明没写我的名字，怎么大家都知道我又上榜了！”我一直回味着这个生活气息浓浓的创意，想象着相片中那些天花板上挂满衣钩，吊满衣裤的宿舍现场，啥时候建议咱zx也试试~~<br><br>

zl感觉人缘很广，一路上的同学她都认识，互相打招呼：“hi，一块来喝点东西？”“下回下回，我刚约了人出去玩。”我一看时间，都快11点了，时不时还.. <br><br>

......
			</p>
			<p class="show">浏览[1073] | 评论[4]</p>
		</div>
	</div>
	<div id="footer">
		<p>更新时间: 2008-06-24 &copy;All Rights Reserved </p>
	</div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>颜色渐变的文字</title>
<script language="javascript">
function Delta(sHex1,sHex2,iNum){
	//计算每个字的变化量
	var iHex1 = parseInt("0x"+sHex1);
	var iHex2 = parseInt("0x"+sHex2);
	return (iHex2 - iHex1)/(iNum-1);
}
function Colorful(sText,sColor1,sColor2){
	if(sText.length<=1){
		//如果只有一个字符，渐变无从谈起，直接输出并返回
		document.write("<font style='color:#"+sColor1+";'>"+sText+"</font>");
		return;
	}
	//RGB三色分离，分别获取变化的小量delta
	var fDeltaR = Delta(sColor1.substring(0,2),sColor2.substring(0,2),sText.length);
	var fDeltaG = Delta(sColor1.substring(2,4),sColor2.substring(2,4),sText.length);
	var fDeltaB = Delta(sColor1.substring(4,6),sColor2.substring(4,6),sText.length);
	var sColorR = parseInt("0x"+sColor1.substring(0,2));	
	var sColorG = parseInt("0x"+sColor1.substring(2,4));
	var sColorB = parseInt("0x"+sColor1.substring(4,6));
	for(var i=0;i<sText.length;i++){
		document.write("<font style='color:rgb("+Math.round(sColorR)+","+Math.round(sColorG)+","+Math.round(sColorB)+");'>"+sText.substring(i,i+1)+"</font>");
		/*每输出一个字符，颜色的三个分量都相应的变化
		当字符输出完成时，正好由sColor1变成sColor2*/
		sColorR += fDeltaR;
		sColorG += fDeltaG;
		sColorB += fDeltaB;
	}
}
Colorful("春节(Spring Festival)中国民间最隆重最富有特色的传统节日，它标志农历旧的一年结束和新的一年的开始 。春节一般指除夕和正月初一 。但在民间，传统意义上的春节是指从腊月初八的腊祭或腊月二十三或二十四的祭灶，一直到正月十五，其中以除夕和正月初一为高潮。在春节期间，我国的汉族和很多少数民族都要举行各种活动以示庆祝。这些活动均以祭祀神佛、祭奠祖先、除旧布新、迎禧接福、祈求丰年为主要内容。活动丰富多彩，带有浓郁的民族特色。","FF3300","3366FF");
</script>
</head>
<body>
</body>
</html>

<html>
<head>
<title>文字跟随鼠标</title>
<style type="text/css">
<!--
body{
	background-color:#004593;
}
.spanstyle{
	color:#fff000;
	font-family:"Courier New";
	font-size:18px;
	font-weight:bold;
	position:absolute;		/* 绝对定位 */
	top:-50px;
}
-->
</style>
<script language="javascript">
var x,y;		//鼠标当前在页面上的位置
var step=10;	//字符显示间距，为了好看，step=0则字符显示没有间距
var flag=0;
var message="Cascading Style Sheet";		//跟随鼠标要显示的字符串
message=message.split("");	//将字符串分割为字符数组

var xpos=new Array()		//存储每个字符的x位置的数组
for (i=0;i<message.length;i++) {
	xpos[i]=-50;
}
var ypos=new Array()		//存储每个字符的y位置的数组
for (i=0;i<message.length;i++) {
	ypos[i]=-50;
}

for (i=0;i<message.length;i++) {  //动态生成显示每个字符span标记,
	//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位
	document.write("<span id='span"+i+"' class='spanstyle'>");
	document.write(message[i]);
	document.write("</span>");
}

if (document.layers){
	document.captureEvents(Event.MOUSEMOVE);
}

function handlerMM(e){ //从事件得到鼠标光标在页面上的位置
	x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;
	y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
	flag=1;
}

function makesnake() {  //重定位每个字符的位置
	if (flag==1 && document.all) { //如果是IE
		for (i=message.length-1; i>=1; i--) {
			xpos[i]=xpos[i-1]+step;  //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔，
            //这样随着光标移动事件，就能得到一个动态的波浪状的显示效果
			ypos[i]=ypos[i-1];  //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动
		}
		xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
		ypos[0]=y
		//上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置
		// 该算法显示字符串就有点象人类的yx队伍一样， 
	
		for (i=0; i<=message.length-1; i++) {
			var thisspan = eval("span"+(i)+".style");  //妙用eval根据字符串得到该字符串表示的对象
			thisspan.posLeft=xpos[i];
			thisspan.posTop=ypos[i];
		}
	}
	else if (flag==1 && document.layers) {
		for (i=message.length-1; i>=1; i--) {
			xpos[i]=xpos[i-1]+step;
			ypos[i]=ypos[i-1];
		}
		xpos[0]=x+step;
		ypos[0]=y;
		for (i=0; i<=message.length-1; i++) {
			var thisspan = eval("document.span"+i);
			thisspan.left=xpos[i];
			thisspan.top=ypos[i];
		}
	}
	var timer=setTimeout("makesnake()",10)  //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document.onmousemove = handlerMM;
</script>
</head>
<body onLoad="makesnake();">
</body>
</html>

body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0px;
	padding:0px;
	text-align:center;			/* 居中且宽度固定的版式，参考11.2节 */
	background-color:#000000;
}
#container{
	position:relative;
	margin:1px auto 0px auto;
	width:760px;
	text-align:left;
	background-color:#FFFFFF;
	border-left:1px dashed #AAAAAA;		/* 添加虚线框 */
	border-right:1px dashed #AAAAAA;
	border-bottom:1px dashed #AAAAAA;
}
#globallink{
	width:760px; height:163px;	/* 设置块的尺寸，高度大于banner图片 */
	margin:0px; padding:0px;
	/* 再设置背景颜色，作为导航菜单的背景色 */
	background: #9ac7ff url(banner.jpg) no-repeat top;
	font-size:12px;
}
#globallink ul{
    list-style-type:none;
	position:absolute;			/* 绝对定位 */
	width:417px;
	left:400px; top:145px;		/* 具体位置 */
	padding:0px; margin:0px;
}
#globallink li{
	float:left; 
	text-align:center;
	padding:0px 6px 0px 6px;	/* 链接之间的距离 */
}
#globallink a:link, #globallink a:visited{
	color:#004a87;
	text-decoration:none;
}
#globallink a:hover{
	color:#FFFFFF;
	text-decoration:underline;
}

#parameter{
	position:relative;
	float:left;
	width:210px;
	padding:0px;
	margin:0px;
}
#parameter div#author{
	text-align:center;
	margin-top:5px;
}
div#author p{
	margin:0px 10px 0px 10px;
	padding:3px 0px 3px 0px;
	border-bottom:1px dashed #999999;
	border-top:1px dashed #999999;
}
div#author p.mypic{
	border:none;
	padding:15px 0px 0px 0px;
	margin:0px 0px 8px 0px;
}
div#author p.mypic img{
	border:1px solid #444444;
	padding:2px; margin:0px;
}
#parameter div{
	clear:both;
	margin-top:25px;
	position:relative;
}
#parameter div h4{					/* 统一设置 */
	background:url(leftbg.jpg) no-repeat;
	font-size:12px;
	padding: 6px 0px 5px 27px;
	margin:0px;
}
#parameter div ul{
	list-style:none;
	margin:5px 15px 0px 15px;
	padding:0px;
}
#parameter div ul li{
	padding:2px 3px 2px 15px;
	background:url(icon1.gif) no-repeat 8px 7px;
	border-bottom:1px dashed #999999;		/* 虚线作为下划线 */
}
#parameter br{
	display:none;
}
#parameter div ul li a:link, #parameter div ul li a:visited{
	color:#000000;
	text-decoration:none;
}
#parameter div ul li a:hover{
	color:#008cff;
	text-decoration:underline;
}
div#lcategory{
	position:relative;
	top:10px;
	margin-bottom:35px;
}

#main{
	float:left;
	position:relative;
	font-size:12px;
	margin:0px 20px 5px 20px;
	width:510px;
}
#main div{
	position:relative;
	margin:20px 0px 30px 0px;
}
#main div h3{
	font-size:15px;
	margin:0px;
	padding:0px 0px 3px 0px;
	border-bottom:1px dotted #999999;			/* 下划淡色虚线 */
}
#main div h3 a:link, #main div h3 a:visited{
	color:#662900;
	text-decoration:none;
}
#main div h3 a:hover{
	color:#0072ff;
}
#main p.author{
	margin:0px;
	text-align:right;
	color:#888888;
	padding:2px 5px 2px 0px;
}
#main p.content{
	margin:0px;
	padding:10px 0px 10px 0px;
}
#footer{
	clear:both;			/* 消除float的影响，排版相关的章节已经大量涉及 */
	text-align:center;
	background-color:#daeeff;
	margin:0px; padding:0px;
	color:#004a87;
}
#footer p{
	margin:0px; padding:2px;
}