css学习提高篇文档格式.docx
《css学习提高篇文档格式.docx》由会员分享，可在线阅读，更多相关《css学习提高篇文档格式.docx（35页珍藏版）》请在冰豆网上搜索。
而margin:
20px0;
则和margin:
20px020px0;
是等价的哟~只不过是更加精简而已，这样写
CSS加载速度会更快。
我们接着将问题延伸，怎样才能让红色区域水平定位于浏览器的正中间，无论浏览器窗口的大小，显示器分辨率的大小。
也很简单，刚刚加的两句话"
"
修改为
0auto;
怎么样，有意思吧，红色区域是不是位于浏览器的正中间了~
好~！
到这里第一节课结束，是不是很简单，或者太简单了!
!
KwooJan可以保证,后面的课程照样很简单，当你看完教程，肯定会说XHTML+CSS就这么简单！
easy！
如果你有看不懂的，赶紧点击文章最上面的课程关键词，只要你看了这些关键词，相信你绝对能明白！
第一次写教程，不知道大家能不能看懂，能不能接受，如果你觉着不错，就顶我吧，如果你有建议或者想法，就直接留言，我会在下节课改进！
第二节，浮动
页面布局有两种方式
1）浮动Float
2）定位Position
今天就来一个小小的练习，让大家理解Float的含义
1）两个方块，一个红色#900，一个蓝色#009；
2）红色方块宽度和高度均为200像素，蓝色方块
宽度为300像素，高度为200像素；
3）红色方块蓝的上外边距（margin-top）和左外边距（margin-left）均为20像素；
页面效果如下：
源代码：
大家应该注意到了，虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行，这就是块状元素比较“霸道”的一点，（即使块状元素的宽度不是100%，它也不允许其他元素和他同在一行）为了消除这种“霸权”，让红色和蓝色方块都处在一行，如图
此时就需要拿出我们的利器Float！
只需要在红色方块的CSS里面加上“float:
left;
”，这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了，但是在FireFox中却变成了如下效果：
这时候就需要注意了，FF中如果前面的区域浮动了，后面的那个区域很有可能就会和前面的区域发生重叠并错位。
怎么才能解决这个问题，解决这个浏览器兼容的问题，很容易，只需要在蓝色方块的
CSS代码中也加入“Float:
”，问题就解决了，加上试试，看看在FF中蓝色方块是不是和红色方块处于一行了~
到这里，大家应该明白Float的作用了吧，就是为了消除块状元素“霸权主义”的一把利器！
在布局页面的时候有时候是需要消除块状元素霸权主义才能布局好哟，比如KwooJan的博客中间内容部分，分为左边（LEFT）和右边（RIGHT），就是要用上面这个方法布局的哟，如下图
细心的同学会注意到，在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素，而是40像素，如下图：
其实这是IE6的一个BUG，（IE6双倍边距BUG），只要满足下面3个条件才会出现这个BUG:
1）要为块状元素；
2）要左侧浮动；
3）要有左外边距（margin-left）；
解决这个BUG很容易，只需要在相应的块状元素的
CSS树形中加入“display:
inline;
”，代码如下：
#redBlock{
width:
200px;
height:
background:
#900;
float:
display:
现在再看看，是不是IE6和FF显示一样了呢~
呵呵，这节课也比较容易吧，如果大家有不明白的可以留言，我会做进一步解释。
下节课，我们讲讲“浮动清除（Clear）”问题！
最终代码：
精简后的代码CSS加载更快，大家一看就明白了^_^
第三节，清除浮动
还记得第二课我们做的例子的效果么？
最后效果是，红色方块和蓝色方块都处于一行，我们使用“Float:
left”，打击了块状元素的“霸道”即块状元素不允许其他元素和它处于同一行。
我们将红色方块的CSS代码中加入了“Float:
”后，红色方块终于允许蓝色方块和它处于同一行。
如图：
我们换一种方法表达上面的意思，因为红色方块的“左侧浮动”，才导致蓝色方块上移至红色方块的尾后；
在上个例子中，为了达到浏览器兼容性，我们分别在红色蓝色方块CSS代码中分别加了“Float:
”，这样IE和FF中显示效果一样，如果此时我们还想放一个宽度400像素，高度100的绿色方块，并让其处于第二行，效果如下图：
可是这时候不管怎么放，在IE中的效果始终是
导致绿色拍到蓝色的后面这种情况就是因为蓝色方块
CSS代码中含有"
Float:
，但是为了浏览器兼容性，又不能去掉（什么？
这句话看不明白，只能说明第二节课你没有好好学，好好品味！
），怎么办？
好办~！
只要在CSS代码中加入下面这段代码：
.clear{clear:
both;
并在HTML代码中加入下面代码：
<
divclass="
clear"
>
/div>
上面这句话究竟加在那个位置呢，要加在蓝色方块和绿色方块中间，然后看看效果是不是我们想要的了~^_^
divid="
redBlock"
博客的左侧<
blueBlock"
博客的右侧<
greenBlock"
博客的版权信息<
目的就是为了清除蓝色方块的浮动对下面绿色方块的影响！
是影响哟~是清除影响，而不是清楚蓝色方块的浮动，或者说清除蓝色方块的浮动对下面区域块产生的作用！
（仔细品品我说的这句话！
）
如果还是不明白，你就在红色方块和蓝色方块中间加上“<
”，看看效果变成什么样子，然后再品品我刚才说的话！
前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟~，厉害吧~！
其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY
！
OK！
我们要做的导航条的效果如下：
鼠标移动上去背景变黑，并且字体颜色变成白色
其实做这款导航条很容易的，你只需要动动鼠标敲敲键盘，跟着KwooJan做就是了，呵呵
【第一步】我们要先做一个容器（要求：
ID为“nav”，宽度为960px，高度为：
35px，位于页面水平正中，与浏览器顶部的距离是30px；
）,这个容器就是放我们的导航的哟~代码如下：
HTML代码：
nav"
#nav{
960px;
35px;
#CCC;
/*为了便于查看区域范围大小，故而加个背景色*/
/*水平居中*/
30px;
/*顶部30px*/
还有一点需要提醒的是，为了页面在浏览器的兼容性，不要忘记在
CSS文件顶部加入标签重置代码哟~
代码：
这里就不多说了，不明白的就看，课程顶部的课程关键词
怎么样，作出来了没有，效果是不是一个灰色条，位于页面的正中间，并且所有浏览器效果一样呢~呵呵
（如果没有做出来证明你没有认真看教程哟~用这种态度看教程会学不好的，本身我把整个XHTML+
CSS的理论都压缩到教程里了，或者说教程的“知识点浓度”很高，有时需要你一字不漏的去品我说的话，不要一目十行的去看哟~只要你把我写的教程逐字逐句的研究透了，KwooJan保证你以后只要做出个页面就很Easy的兼容各种浏览器，并且代码绝对的精简！
CSS文件加载速度大大提升哟~）
【第二步】
盒子做好了，我们就要往里面放导航条中的内容了“
CSS学习学前准备入门教程提高教程布局教程精彩应用”，如果我们把这内容（目前有6个），当成酒杯的话，如果直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有，但是我们平时会用一个隔板将每个酒杯隔开，这样就是酒杯很有序的放入盒子，并且牢稳而且防震，方便使用！
现在我们把这个隔板叫做“有序列表”起个英文名字叫：
ul,里面的每个单元格我们也给起个英文名字叫“li”，大家想想里面的这个ul是不是和盒子里面的空间一样大，小了，酒杯放不进去，大了杯子就会不稳，所以我们定义UL的时候大小一定也要和外面的盒子一样大哟~,所以呢，我们的代码就知道怎么写了吧
HTML代码
<
ul>
li>
CSS学习<
/li>
学前准备<
入门教程<
提高教程<
布局教程<
精彩应用<
/ul>
#navul{
效果作出来了没有，下面是在IE6和FF中显示效果（其他浏览器效果大家自己测试，总结规律）：
效果不一样吧，没关系，IE6中盒子被撑大，FF中却没有，但是我们的“酒杯”却出来了，还有我们不希望我们的酒杯纵向排列，而是横向排列，怎么办呢？
给大家一分钟时间想~~~
想出来了没有？
什么没有？
没关系，我带着大家想想，因为<
标签也是块状元素，所以他也有块状元素的“霸道”，不允许其他元素和自己处于同一行，总共六个<
所以他们六个就像台阶似的纵向排列起来了，我提示到这里，大家应该知道怎么做才能让这些“酒杯”横向排列了吧！
^_^
对喽~用浮动Float！
可是让谁浮动呢，当然是<
标签喽~代码如下：
#navulli{float:
效果是不是和下面的一样呢
大家会发现虽然“酒杯”横向排列了，但IE6和FF中的效果还是不一样的
1）盒子（#nav）高度不一样
2）在FF中“酒杯”前面有个大黑圆点，而IE6中却没有！
解决上面这两个问题，也很容易，如下
1）做到这里标签ul和li有没有进行重置？
只要我们在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中“body,div,ul,li{padding:
}”
2）“酒杯”前面的大黑圆点，是FF给li标签定义的默认样式，我们只需要将li的默认样式去掉就是了，在li标签的CSS属性中加入“list-style:
none;
”就OK了
现在在瞅瞅，两种浏览器的显示效果是不是和下图一样了呢~
如果你做到这里的效果和我说的不一样，没关系，我把做到目前第二步的代码发出来，你对着上面说的再看看，绝对可以学会
【第三步】
第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴着前面的文字。
我们现在就将他们分开！
设置<
标签的宽度为100像素：
#navulli{
100px;
list-style:
为了便于观察我们暂且将<
标签的背景设置成红色（设置背景色，是页面布局中一个很重要的方法，便于查看块状元素区域范围）
效果如下：
瞧瞧，发现问题了吧，我们的<
标签的高度并没有和我们的盒子的高度一样，这就是为什么在布局页面的时候，经常会设置一下背景色，就是这个道理，不然的话，你是发下不了隐藏的问题，但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降低哟~
现在暂不把<
标签的背景色去掉，当我们把它调成我们需要的效果的时候再去掉！
继续，我们把li的高度设置成盒子的高度35像素，代码自己写，怎么样，高度一样了吧，但是文字却位于顶端，如何将它设置成居中呢，对喽~设置行距（如果你不会，建议你看看这篇文章《两种方法实现垂直居中》），在<
的
CSS代码中再加入下面这句代码：
line-height:
效果是不是和下图一样呢
好垂直居中解决了，轮到水平居中了，这个就容易了吧，直接在<
的CSS代码中再加入下面这句代码：
text-align:
center;
怎么样，效果有点意思了吧~到这里我再发一次代码，保证大家每个步骤都学会！
做到这里，大家有没有想过一个问题，因为我们的<
标签是设置了宽度为100像素，已经限定了它的宽度，如果文字多了它不会自动伸缩的自适应的，那这时候我们就需要去掉其宽度，这时候<
的宽度就会缩小至文字的宽度，也就是说，如果我们再添加一些文字（把我们的酒杯换成一个大个的），这个<
也会跟着变大，大家去掉宽度后试试，是不是这个样子，这样我们的导航条就比较灵活了，不会对“酒杯”的大小有所顾忌了！
此时的代码：
虽然这个宽度自适应解决了，但是给文字的空间太少，视觉上感觉不舒服，那么我们就帮它扩大一下空间，但是又要保证宽度自适应，解决方法很容易，加上左右内边距就ok了，这里设置边距为10px，在<
标签加上下面代码，顺便把背景颜色去掉
padding:
010px;
效果是不是这样
无论你的“杯子”是增大还是缩小，<
不但宽度会随之增大缩小，但是杯子和杯子之间的距离永远不变！
怎么样有点意思吧~！
做到此时的源代码
上节课我们将导航条做成了下面的效果
但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条
【第四步】
我们需要将上面的导航条做以下几个修改
1）给上面的导航加上链接；
2）链接文字大小修改为12px;
3）并且规定链接样式，鼠标移上去和拿开的效果
修改方法如下
1）导航加链接，HTML代码如下：
ahref="
#"
CSS学习网<
/a>
入门教程下载<
布局基础教程<
2）文字大小12像素，CSS代码如下
a{font-size:
12px;
3）鼠标移动上面和拿开效果
#navullia{color:
#333;
text-decoration:
#navullia:
hover{color:
#fff;
underline;
效果是不是和下面一样，鼠标移上去变成白色的有下划线的链接
到这里，基本上一个导航条就出来了~不过为了能让大家再提高一个层次，KwooJan就帮大家对上面的导航条进行一下修改，算是抛砖引玉！
我希望鼠标移上去后，链接的背景变成黑色的，下面是我的步骤
首先把链接a加上一个背景，以方便看出来链接a的区域
background:
#0FF;
怎么样，知道a的区域了吧
现在我要将a的高度设定为35px和盒子一样高度，这样我在把刚才的亮蓝色背景就可以完全覆盖下面盒子的灰色了
于是我插入下面红色的代码：
#navullia{height:
color:
可是不管我怎么刷新浏览器，高度都没有任何变化，这是为什么呢？
原因就在于a属于内联元素，内联元素是无法设置宽度和高度的，width和height只是针对块状元素，说道这里，解决办法就出来了，只要我们把内联元素a转化成块状元素就可以了，我们用“display:
block;
”将内联元素转化成块状元素。
大家先不要加这段代码，闭上眼想想界面会变成什么样子？
#navullia{display:
height:
浏览器支持
所有主流浏览器都支持display属性。
注释：
任何版本的InternetExplorer（包括IE8）都不支持"
inherit"
、"
inline-table"
run-in"
table"
table-caption"
table-cell"
table-column"
table-column-group"
table-row"
、以及"
table-row-group"
属性值。
可能的值
值
描述
none
此元素不会被显示。
block
此元素将显示为块级元素，此元素前后会带有换行符。
inline
默认。
此元素会被显示为内联元素，元素前后没有换行符。
inline-block
行内块元素。
（CSS2.1新增的值）
list-item
此元素会作为列表显示。
run-in
此元素会根据上下文作为块级元素或内联元素显示。
compact
CSS中有值compact，不过由于缺乏广泛支持，已经从CSS2.1中删除。
marker
CSS中有值marker，不过由于缺乏广泛支持，已经从CSS2.1中删除。
table
此元素会作为块级表格来显示（类似<
table>
），表格前后带有换行符。
inline-table
此元素会作为内联表格来显示（类似<
），表格前后没有换行符。
table-row-group
此元素会作为一个或多个行的分组来显示（类似<
tbody>
）。
table-header-group
thead>
table-footer-group
tfoot>
table-row
此元素会作为一个表格行显示（类似<
tr>
table-column-group
此元素会作为一个或多个列的分组来显示（类似<
colgroup>
table-column
此元素会作为一个单元格列显示（类似<
col>
table-cell
此元素会作为一个表格单元格显示（类似<
td>
和<
th>
table-caption
此元素会作为一个表格标题显示（类似<
caption>
inherit
规定应该从父元素继承display属性的值。
实际效果：
IE6和FF显示效果居然大相径庭，IE6中为什么所有链接纵向排列了呢？
其实这个也很简单，IE认为a既然转化成块状元素，就拥有块状元素的特性---霸道，它是不允许其他元素和它同一行，再加上也没有对a的宽度进行设定，所以才导致IE6中这么显示，不过FF中为什么不这样呢，和我们想象的一样，那是因为FireFox认为a即使为块状元素，也应该受到外面<
元素的影响，所以如此现实，究竟以谁标准，因为大家都认为FF是标准浏览器，所以大家可以以FF为标准，不过KwooJan认为，不用管谁标准不标准，那都是相对的，我认为IE标准，FF就不标准了呢，我不愿意在这个问题上浪费精力，我更喜欢将精力用在思考如何提高页面的浏览器兼容性！
看到这里我想大家应该知道如何让页面在IE6中显示的和FF中一样，很简单，只需要在a的CSS代码中加入“float:
”
float:
问题迎刃而解，这还是用到前三节的课程内容，如果你想不起来如何解决，说明前面的课，特别是第二节的课，你没有真正理解！
怎么做，你应该知道....回去再品品去
但是这样你不觉着，每个连接的左边和右边是不是太挤了，紧贴着a区域的左侧和右侧，应该怎么做？
还是很简单，只需要再加上一句话“padding:
padding:
现在再瞅瞅，是不是下面的效果
这样看看是不是不挤了吧，哈哈，看着舒服了吧，但是这离我们的想要的效果只有一步了，因为现在看到的连接效果是，鼠标移上去和拿开背景都是蓝色的，我们现在只需要将，a链接中的背景去掉，移到a:
hover的CSS代码中，并
升级会员 