锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / 网站前端开发 / 网站前端开发语法 / CSS研究心得
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883

CSS研究心得


第六章 链接与导航

a:link是超链接的普通样式,即正常浏览状态的样式。

a:visited是被点击过的超链接的样式。

a:hover是鼠标指针经过超链接上时的样式。

a:active是在超链接上单击时,即“当前激活”时,超链接的样式。

当项目列表的list-style-type属性值为“none”时,制作各式各样的菜单和导航条便成了项目列表的最大用处之一。

导航条不只是竖直排列,很多时候需要页面的菜单能够在水平方向显示,这时我们就需要创建一个横竖自由转换菜单。

第七章 竖直排列的导航菜单

竖直排列的导航菜单里主要列举了双竖线菜单、双斜角横线菜单、立体菜单、箭头菜单和带说明信息的菜单这五种菜单。

以下有几个CSS基础知识和技巧:

(1)相邻盒子的margin在竖直方向相遇时的“塌陷”现象,水平方向则没有该现象。

(2)在一系列盒子排列后,如何对头尾盒子进行单独的样式设置,可以为它们单独设置类别,或者是伪类,但需要注意浏览器对伪类的支持情况。

(3)通过粗边框的颜色设置可以产生出斜角效果,如果充分利用可以产生有趣的效果。

(4)为了防止鼠标指针经过时造成边框的跳动,可以在通常状态添加与背景色相同的边框。

(5)相对定位的含义是以自身原来所在位置为基准进行偏移。

(6)“包含块”的定义方法,绝对定位是以包含块为基准进行偏移的。

(7)为了使某个盒子绝对定位,它的上一级元素可以设为相对定位,从而变成“包含块”。

第八章 水平导航菜单

在水平导航菜单里我们主要讲了自适应的水平菜单、自适应的斜角水平菜单、应用滑动门技术的玻璃效果菜单、三状态玻璃效果菜单、不使用图像的圆角菜单、会跳起的多彩菜单这六种水平导航菜单。

注意:想要实现这六个水平方向的菜单,我们需要掌握以下几个基本要点:

(1)设置浮动方式,以及是否适应宽度的设置方法。

(2)不使用图像,实现斜角和圆角的方法。

(3)使用背景图片的滑动门技术。

(4)理解本章案例中“钩子”和“垫子”的用途。

第九章 下拉菜单

dl被称为“定义列表”,在使用方法上相当于ul;dt和dd分别定义为“定义标题”和“定义描述”,它们在使用方法上相当于li。

我们通常使用的列表是ul和ol,ul就是无序列表Unordered list和Ordered List也就是有序列表。如果使用有序列表,每个列表项的前面有个数字编号;如果使用无序列表,每个列表项的前面会有个圆点。这两个列表都是我们经常使用的。

第十章 表格也精彩

1、<table>用于定义整个表格,<tr>定义一行,<td>定义一个单元格。

2、<caption>标记,它的作用和它的名称一样,就是用于定义表格的大标题,该标记可以出现在<table>于</table>之间的任意位置,不过通常习惯放在表格的第一行。

3、<th>标记,它是“table header”的缩写,即表头的意思,在表格中主要用于行或者列的名称。

4、比较有名的例子有Excel方式二维变色提示的表格和三种显示模式的日历,其中三种显示模式的日历包括小模式、中模式和大模式。

5、要实现大模式的日历,最困难的一点是,在原本的HTML中,表格是一个二维结构,而在大模式中,希望它成为一线的线性结构,所有单元格从上到下依次排列。

6、想要制作大模式日历,我们可以通过display属性改变盒子的类型。

附:现在我们来讲一下总结的经验。

当一个效果在Firefox和IE6中显得不一样时,一般来说Firefox显示的是“正确”的效果。这里说正确,并不是指主观希望的效果达到了就是正确效果,而是说按照真正的CSS规则,应该显示的效果才叫作正确的效果。也就是说,如果Firefox中显示的效果和希望的效果吻合,而与IE显示不吻合,那么是IE有错误的可能性更大;而反之则说明很可能是为了迁就IE6的错误,而写了错误的代码。不以IE浏览器为标准是因为CSS的规则本身是严格符合逻辑的,是可以计算和预测的,而在IE中的很多错误是没有道理的、无法预测的,只是用一个小的错误修正了另一个小的错误,在局部看起来可能效果是正确的,但是很可能在其他地方,或者更大范围内带来不可预知的麻烦,从而严重影响效率。因此,比较好的做法是以Firefox作为正确的效果,想办法让IE来适应它。

测试的时候,不要在一个浏览器中完全做好后,再用另一个浏览器测试。对于一个很复杂的页面,如果先在Firefox中制作并完全测试好了,然后用IE查看时,可能很多地方都是混乱的,此时再针对IE进行一系列调整,等调整好了,回到Firefox查看时,肯定又乱了。如此往复,结果可想而知。因此,应从空白页面开始,每做一小步,就同时在各种浏览器中查看,一旦发现显示效果不同,就立即查找原因,寻找解决办法。这样做到最后就可以同时满足各种浏览器了。

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内