容我织梦

        CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

一切皆为框

　　div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容 ，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
　　您可以使用 display 属性 改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如

这是一个很简单的BUG，高手请绕行。

当一个子块浮动的时候，外面的父块高度就不以子块高度为标准了，也就是说，当子块浮动后，它不能够撑开父块，这个问题很容易解决。

方法是在父元素加上
overflow:auto;
zoom:1;  
解释一下：overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6(注：在本人机子上IE6可以不加这句话)，也可以用height:1%;的方式来解决。

最近确实比较忙，也没太多时间来认真写一篇文章了。哎，努力吧，为了生存。

21. 游标手指cursor

cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

22.UL的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

23. FORM标签

这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.

全文阅读 »

前段时间，工作中有用到一个客户分析柱状图，当时实现方法是FLASH+xml实现的，效果确实很绚丽，但是要要加载FLASH，如果有些客户没有安装FLASH播放器的话，（嗯没错，这不是开玩笑，有些客户点鼠标都觉得是很不方便的事）就没法看到这个分析表，这确实是个问题。

无意中看到网页教学网上有这么一个效果，研究了一下，修改了部分代码,添加了更具合理的排列方式。
全文阅读 »

现在相关单位招聘美工，都有DIV CSS布局方面的知识要求，现列举DIV CSS最有可能遇到的八个面试问题，希望对您有所帮助。

一、超链接访问过后hover样式就不出现的问题？
　　被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A

二、IE6的双倍边距BUG

　　浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

三、为什么FF下文本无法撑开容器的高度？
　　标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

div { height:auto!important; height:200px; min-height:200px; }

四、为什么web标准中IE无法设置滚动条颜色了？

　　解决办法是将body换成html

五、为什么无法定义1px左右高度的容器？
　　IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

六、怎么样才能让层显示在FLASH之上呢？
　　解决的办法是给FLASH设置透明:

七、怎样使一个层垂直居中于浏览器中？
这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

八、firefox嵌套div标签的居中问题的解决方法
　　如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。
这样的方法在IE里看起来一切 正常；但是在Firefox中b却会是居左的。
　　解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto.

使用DIV+CSS来设计网站，确实能够对SEO起到一定的帮助。

　　一、减少使用表格

　　表格层层嵌套，确实对SEO与用户体验有不利的影响，这同时也影响网页的下载速度。

　　二、降低网页体积

　　上百K的网页，不利于SEO，不利于搜索引擎的蜘蛛爬行。DIV+CSS设计网页，能够让精简网页HTML代码，让网页体积变得更小。

　　三、重要信息优先让搜索引擎蜘蛛爬取

　　通过DIV+CSS对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎蜘蛛爬取。这对于SEO也有帮助。

　　给广大网编的建议：对于是用DIV+CSS设计网站还是用表格来设计网站，可以根据自己的技术实力来决定。DIV+CSS设计的网站，这个和域名一样，并没有多少先天性的优势，搜索引擎和用户一样，最终看重的是一个网站的内容。

　　提升网站价值，重点是在于后天的培养。
　　不为SEO而SEO，不为DIV而DIV，不会CSS而CSS， 选择适合自己的。做好站才是王道。

CSS命名对于网页的开发管理的重要性往往被人忽略，很多初学者认为，css命名没什么，就是个名字而已，随便根据自己的意愿写就行了，因　　为它对于网页的表现没有任何影响。可是有过网页制作和网站管理经验的人都会知道，css的命名对于网站的清晰和日后的管理很重要，初学者　　应该从一开始就学习和尊重这些规范，形成良好的代码编写习惯，对于以后网站的建设、维护和改造有着至关重要的影响。下面是作者列出的

　　一些css常用的规范性命名，这些名字已经成了网页设计规范，在网页设计中我们应该遵循这些规范性的名字。

站点：site
首页：homepage
导航：nav
布局：layout
搜索：search
网页头部：head/header
二级页面/子页面：subpage
登录条：loginbar
侧栏：side/sidebar
广告：banner
子导航：subnav
当前位置导航：crumb
菜单：menu
子菜单：submenu
滚动：scroll
下拉：drop
表单：form
箭头：arr/arrow
下拉菜单：dropmenu
主题/外观：theme
页面主体：main
内容：content
标签页：tab
列表：list
工具条：tool/toolbar
转角/圆角：cor/corner
提示信息：msg
小技巧：tips
标题：title
特别的：spec
资源：source
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
关于我们：aboutus
网站地图：sitemap
合作伙伴：partner
友情链接：friendlink
网页底部：foot/footer
版权：copyright
提交:submit
搜索框：searchbox
文本框:textbox
统计:count
以上结构就可以组合使用，例如：左列标题lefttitle；底部导航footernav

　　规范不是说要所有人照一个样子来命名css，我们可以根据自己的需要定制命名规则，只要记住命名的规则，就可以根据网站本身的特点来创造具有自己风格的命名方式。
　　一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class，我们可以使用f即foot的头字母为前缀进行命名，如：
　　f-blue:表示蓝色字体样式
　　f-blod:表示粗体字体样式
对于网页中如新闻频道的一些新闻的现实样式，可以用n作为前缀进行样式设计，如：
　　n-title:新闻标题
　　n-list:新闻列表
　　二、我们还可以将代表各个部分的名字组合起来使用，如　，对于上面的例子，我们可以这样命名：
fontBlue: 表示蓝色字体样式
newsTitle:表示新闻列表
　　这样的命名方式同样清晰明了，为大多网页设计师所接受，只不过要特别注意大小写的区分，css中是区别大小写的．开始时容易出错，多加注意便可．
　　按照这样的一些命名方式，我们可以非常明确的知道css中的每一个class的用途，便于使用和设计、维护。
想一想，你要想出很多名字来命名css也很麻烦的，是吧？

————————-另外一个规范——————-

1.CSS ID 的命名
外　套：　　wrap
主导航：　　mainnav
子导航：　　subnav
页　脚：　　footet
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainbav（globalnav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsidebar
右导航：　　rightsidebar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1 content
菜单容量：　menu container
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadcrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　Login
功能区：　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：
< – Footer –>
内容区
< – End Footer –>

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

现在相关单位招聘美工，都有DIV CSS布局方面的知识要求，现列举DIV CSS最有可能遇到的八个面试问题，希望对您有所帮助，在52CSS.com上，有很多相关的知识，大家可以多多学习。

一、超链接访问过后hover样式就不出现的问题？
　　被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A

二、IE6的双倍边距BUG
　　例如:

　　浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

三、为什么FF下文本无法撑开容器的高度？
　　标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

div { height:auto!important; height:200px; min-height:200px; }
四、为什么web标准中IE无法设置滚动条颜色了？
　　原来样式设置：

　　解决办法是将body换成html

五、为什么无法定义1px左右高度的容器？
　　IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

六、怎么样才能让层显示在FLASH之上呢？
　　解决的办法是给FLASH设置透明:

:

七、怎样使一个层垂直居中于浏览器中？


　　这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

八、firefox嵌套div标签的居中问题的解决方法
　　假定有如下情况：

 


　　如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切 正常；但是在Firefox中b却会是居左的。
　　解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto;。

Div即父容器不根据内容自适应高度，我们看下面的代码：
[code]

[/code]
当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。

　　我们可以通过三种方法来解决这个问题。
　　一，增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。
[code]

[/code]
　　二，增加一个容器，在代码中存在，但在视觉中不可见。
[code]

[/code]
　　三，增加一个BR并设置样式为clear:both。
[code]

[/code]

本人最近在学CSS，但是有蛮多疑问。我现在在这里列出来。

　　1.请问如何设定在不对的客户端都能正常的浏览（不变型）网页。你用CSS定位，你要怎么设定最外面的层宽？假如设定为。宽800
　　那这有一矛盾，你知道客户是用什么？他如果用PDA上网他的浏览器，怎么去适应？如果对方的分辩率是用 1024宽？或是用 1280。再是用现在的1440这种的。我们自己设定个固定宽，不怕造成，对方的设备，不好正常显示器吗？

　　2.假如用百分比定位。OK，应该可以解决适应问题，但又有一疑问出来，你用的是自适应，请问，那你内部的区域块的宽高，你要怎么设？因为你不知道你最大值不能超过多少。（不过CSS可以设定自动加长加宽区域，这个我觉得不错，不用像以前表格那样，不够用，只好再加，不够用再加，那样也累。）
本人阐述一些自己的拙见：

1、关于分辨率的使用：

　　一般考虑800分辨率的使用，兼容1024。现在开始流行直接做成1024的分辨率了。一般可以设置水平居中对齐。可以兼顾大分辩率的浏览。如果考虑PDA等移动掌上设备访问的话，问题就大了去了。而且对于美工的要求就更高了，为了兼容会丢失很多细节表现。暂不建议这样做。

2、关于百分比自适应布局：

　　如果用百分比进行制作，那么势必让页面的装饰图片尽量的少，因为你得兼顾最小的情况与最大的情况。而装饰性图片很多是不能这样进行适应的。有得必有失。呵。如果你用百分比进行三列式部局，顶部可以用100%，下面三列可以分别是：15%+70%+15%。（但请注意有时候需要适当缩减，因为显示器可能会让15%+70%+15%大于100%）