接着咱卷三的来说，这个卷四就说一些综合的实例了，其实我自己也就这几天看看，过段时间说不定就忘记了，所以都是要常用常练习的，多总结，没事返回头来看一看。
首先我们说我自己练习过的两种导航的写法，导航我们随处可见，每个网站上肯定都有这个东西，我就说一下我在写着两个导航，觉得注意的东西吧。
说到导航就又涉及到一个问题，CSS中元素有块状元素（block element）和内联元素（inline element），它两之间是可以互相转化的。这个具体定义我就不说了，一查，出来的比我说的详细，按我，我就理解为，块状就是不给附加条件不能再同一行的，内联就是可以再同一行的。详细什么意思，大家自己去查，顺便可以看一下，块状元素有哪些，内联元素有哪些？
先看我做下的东西吧，有点简陋，主要领悟精神。
1.
这个导航，我就是用到了，块状转内联（display:inline;），【PS：内联转块状（display:block;）】。
（1）都知道在写<li>标签的时候会留下各种编号或者各种代替编号的符号，而在网站导航上我们也没看到这些东西，这些该怎么去呢，就是这句代码就可以搞定，
list-style-type:none;——删除圆点。导航栏不需要列表项标记
margin:0;padding:0;——把外边距和内边距设置为 0 可以去除浏览器的默认设定，
这段代码写到<ul>里面就可以解决符号和浏览器默认的一些边距问题。
（2）li{display:inline;}这段代码就是上面我们说到的，要把上下叠着的块状转化成内联放到一行内。
（3）就是我们经常看到网站的导航，平时是灰色的，可能鼠标一放上去就变成和其他几个不一样的亮一点的颜色，和别的几个就区分开来了，这个怎么实现呢，这里就用到了<a>标签里面的几个属性了，
a:link,a:visited——这两个就是普通的、未被访问的链接和用户已访问的链接，这两个的CSS当中，我们把他的颜色弄成淡一点的。
a:hover,a:active——这两个是鼠标指针位于链接的上方和链接被点击的一瞬间，这两个的CSS当中，我们把颜色弄成亮一点的。
这样，当我们鼠标没有点链接的时候，它是淡一点的，当我们鼠标放到上面或者点击的时候，标签就会换成亮一点的颜色了。
（4）<li><a href="#che" title="单人游戏"><img src="1.jpg"/></a></li>有些网站可能标签会用图片来代替，这段代码完全可以搞定，只要把文字地方，换成图片的链接就好了。
其他的样式就靠大家自由发挥了。
2.
而这第二种，我用到的是float这个属性，这个属性就是浮动的意思，常用的值有left（向左浮动）、right（向右浮动）、none（默认，不浮动）、inherit（规定应该从父类继承float的属性值）。
（1）和上面那种方法一样，去掉<li>前面的编号，圆点之类的和边距。
（2）li{float:left;}，而这里我们不用块状转内联了，而是用到了浮动，让上一个块状元素向左浮动，自己也向左浮动，就会使两个块状元素到达一行上去。
（3）（4）点就和上面的完全一样了，上面那个图看不清，这个可以了，绝对是高清大图。
个人比较喜欢用这种方法，看着舒服，容易理解。还是那句话，多练习，多来几遍就记住了。
3.就谈一个这个效果的东西在一张图片中加入一个半透明的框，里面可以写一些文本之类的。
就是在一张图片中加入一个半透明的可以自定义大小的框，里面可以写一些文本之类的，用到的代码很简单，filter:alpha(opacity=60); opacity:0.6;就这两句话，就是用到了filter（滤镜）的属性，而opacity说的就是透明的程度，还有很多更好玩的属性，大家不妨自己去开发，研究。
TAG:PHPCMS菜鸟成长记（卷四）
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-21-313-1.html
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-21-313-1.html
