问题描述:
百度空间CSS入门，请问高手是怎么运用自如的，入门该看些什么书？我不要金子，我要点金的手指头！
解析:
要入门，先来这里看看：
w3pop/tech/school/css/default
那里有丰富的实例演示，可以直观地理解代码并运用到空间去。
左边是目录，右边是讲解，点击英文标题就有演示。
小提示：在演示时试着修改代码里的数值，比如把5px改为100px，数值要有一定的差距，才容易看到效果和区别。
CSS入门知识-图片水平对齐技巧
在CSS中，图片怎么水平对齐，有哪些技巧呢？我们一起来学习一下吧！
一、图片水平对齐text-align
在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住，text-align一般只用在两个地方：文本水平对齐和图片水平对齐。也就是说，text-align只对文本和img标签有效，对其他标签无效。
语法：
text-align:属性值
说明：
text-align属性取值如下表：
表1 text-align属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片水平对齐</title>
<style type="text/css">
p
{
width:300px
height:80px
border:1px solid gray
}
.p_img1{text-align:left}
.p_img2{text-align:center}
.p_img3{text-align:right}
img{width:60pxheight:60px}
</style>
</head>
<body>
<p class="p_img1">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img2">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img3">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
</body>
</html>
在浏览器预览效果如下：
分析：
很多人都以为设置图片水平对齐是在img标签设置，其实这是错误的。大家记住，图片是要在父元素中进行水平对齐的。在这个例子中，img元素的父元素是p，img元素是相对于p元素进行水平对齐的。因此要想对图片进行水平对齐，就要在父元素（p元素）中设置text-align属性。
我自己总结了一些：1，在td无特殊控制时，body控制td内部样式。
2，超链接样式要不就直接写 a{} a:hover{} ,
要不就写完整的 a:link,a:visited{} a:hover{} 或者a:link{} a:visited{} a:hover{} a:active{}
否则没有预期效果。
3，要变换表格内文字的样式，比如颜色，大小可以直接给td一个样式，定义color和font-size即可。
4，图片样式中<span class="icon6"> </span>其中间的 不能省去，否则有些浏览器看不到图片。
5，在span内部再定义样式，只需要在span语句里面加上style代码，例如：
<td ><span onclick="window.location.href='01.html' " style="cursor:pointer" >作个简单的超链接</span></td>
6，在静态页面中，有时也需要用到java事件，比如给定义好样式的图片一个超链接，这需要用到onclick语句，用法如下：
<span class="icon6" onclick="window.location.href='02.html'" > </span>其中icon6为图片样式。链接地址为本地地址。
7，对于服务器按钮控件（即<asp:Button>类型的按钮）：
服务器响应事件：OnClick
客户端响应属性：OnClientClick
对于html按钮控件（即<input type="button" runat="server">）
服务器响应事件：OnServerClick
客户端响应事件：onclick
8，列表定义由ul{}和li{}组成。当一个文件需要用到几个列表样式时，定义用li.l1,li.l2和ul.l1,ul.l2，调用时在li和ul里面使用class=" "。
把垂直列表换成水平列表一般有两种方式，一个是控制列表在同一行，display:inline另一个是左侧浮动，加上代码ul li{float:left}，有多个列表时，
可选择定义，无需转换的加上代码ul.u1 li.u2{float:none}即可。
9，网页左右侧浮动代码
<div id="divLeft" style="left:2pxtop:20pxposition:absolute">/*页面滚动但是动画保持不动*/
<embed src="images/left.swf" quality="high" bgcolor="#ffffff"
width="105" height="475" name="swfMap" align="middle"
type="application/x-shockwave-flash" />
</div>
<div id="divRight" style="left:897pxtop:20pxposition:absolute">
<embed src="images/right.swf" quality="high" bgcolor="#ffffff"
width="105" height="475" name="swfMap" align="middle"
type="application/x-shockwave-flash" />
</div>
10，静态页面框架代码
<iframe width=780 height=120 align="center" frameborder=0 scrolling=no src=top.htm></iframe>
11，图片跑马灯代码：从右向左滑动<td>
<marquee behavior="scroll" direction="left" width="575" loop="-1" /*无限循环*/ scrollamount="2" /*控制速度*/ scrolldelay="1" style="font:12px" >
<a href="pictures.htm" target="_blank">
<img src="images/pictures/1.jpg" width="162" height="122" border="0"></a>
<img src="images/line.gif">
<a href="pictures.htm" target="_blank">
<img src="images/pictures/2.jpg" width="162" height="122" border="0">
</a>
</td>
12,在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class="divID"时，则在CSS中对应的设置语法是.divID。
如果id="divID"这个层中包括了一个<img></img>，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在class="divID"这个层中时，则设置语法应该是.divID img {}.
13,通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden就可以解决这个问题。
