DIV+CSS商业案例与网页布局精讲读书笔记（6-2）

 

（2）当块一块二均设有float属性，且其值相反时， 块一块二在同一行上并分部于外部层的左右。

 

（3）当块一和块二均设float属性并且属性值同样时，块二跟块一在同一则，同一行上。而块一跟块二之间的间隔等于块一的margin和块二的margin之和，

 

（4） 当块一块二设置宽度时， 块一块二的宽度之和不能超出外层宽度减去两个外层的内边距之和，再减去两个块一的外边距之和，再减去两个块二的外边距之和。否则块一跟块二分部在不同的行了。

 

3 清除CSS的浮动属性

清除浮动属性	clear
相关属性值	Left, right, both, none

 清除左，右浮动对元素的影响。

 

4 CSS字体属性

分为字体属性，字体颜色属性，字体大小属性，字体粗细属性，字体格式属性，字体装饰属性，字体大小写属性。

 

 

 

 

5 制作文本导行栏

涉及到的CSS元素：Span/li，A，ul

（1）<span> 标签仅是一个行内元素，没有结构上的意义，所以对文字添加<span>标签起作用仅相当于对文字块本身其作用。所以一些CSS属性在,<span>标签中是不起作用的，所以在实际应用中往往需要添加display:block属性将其转换成块级元素。以使得更好地控制样式。对文本导行栏中的文字就可以控制其属性，字体、大小、颜色等。

（2） a 元素

/A:link 是有连接的文字的颜色

/A:visited 已经访问的连接的颜色

/A:active 活动连接的颜色

/A:hover 鼠标经过的颜色 

CSS对a有上述4种情况对应的CSS元素。

 

（3） ul元素

（4） li元素跟span元素效果一样。

 

6 制作图片导航栏

跟制作文本导航栏一样，只是在a元素后加上IMG元素，并针对鼠标事件添加一个JavaScript事件。

<img src=”图片地址” οnmοuseοver=”javascript:this.src=’鼠标移动到图片上所显示的图片’;”

Onmouseout=”javascript: src=’鼠标移出时所显示的图片’;”

 

7 制作横向自由伸展的导行栏。

（1）九宫格技术原理

 

（2）横向自由伸展的导行栏。

仅是将导航栏整体块，#nav的宽度设为100%.其背景图片水平重复repeat-x., a元素则display:block.显示而已。