关于网页制作和浏览器再来吐槽一下

[ 作者:笑傲江湖 发布于:2011年-10月-30日 0:24 星期日  分类:百 宝 箱 ]

  近一段时间都在和DIV+CSS打交道,还是一如既往的浏览器老问题,兼容,还是兼容,尤其是盖茨大叔家出产的IE浏览器,版本虽然不是太多,但是之间的差距太大,6、7、8、9还有个10,IE10暂时还没用,9还行,算是和其他诸如Chrome、Firefox、Opera、Safari步伐一致了,虽然小问题有一点,但是大问题没有了。IE8还算凑合,IE6和7就是毒瘤啊,靠吧,头疼。
  小小总结一下头疼的地方,当然是些自己遇到的比较烦人的地方:
  1、CSS的部分属性,IE6、7不支持或者有Bug,害人不浅,需要另辟蹊径。
  2、很多Javascript的特效代码不支持,Fuck,这才是恼人的地方。
  3、最起码的PNG图片的透明不能直接支持,还得Fix一下才行,GIF也就256色。

  所以,盖茨大叔,您能不能行行好,当初若是IE6留下的有啥后门,开启吧,全都强制升级到IE9,最差IE8也行啊,不升级的都开机就死机。前几天Windows XP都十岁了,IE6也不小了,可是用户群还是一大把,这都是盖茨的功劳,怪不得欧洲的同仁们要打击盖茨大叔捆绑IE呢,现在看来还是有道理的。也希望天朝的网民们,没事的时候把您的IE6浏览器升级到IE8吧,当然IE9更好,如果能使用其他诸如Chrome、Firefox、Opera、Safari浏览器那是最好不多了,都很好使。如果要用网银、支付宝什么的时候再临时把IE请出来单独用一下也是可以的,谁让咱们国情如此呢,没有和国际接轨,革命尚未成功,还得努力啊。


DIV+CSS 学习心得<9>:Position和Float

[ 作者:笑傲江湖 发布于:2011年-2月-11日 8:07 星期五  分类:百 宝 箱 ]

  Position的意思比较多,我理解成定位,就是用于给块来安排位置用的,一个块怎么放,放哪里,什么方式,当块内的内容超出了块定义的宽和高后怎么个表现方式(是覆盖其他块,还是被其他块覆盖)等,都是可以定义的。定位用的属性有四个:top, bottom, left, right,就是上下左右了,但必须是先定义了定位的方式,这四个属性才会起作用,否则无效。属性具体的效果也根据定位方式的不同而有差别。
  Position的方式:Static/Fixed/Relative/Absolute,按照字面意思翻译就是静态/固定/相对/绝对,我是这么翻译的。下面就一个一个唠叨一下。
  Static:HTML的元素,缺省情况下都是这个定位方式, A static positioned element is always positioned according to the normal flow of the page.这句英文我确实不知道怎么翻译才好,尤其是最后的页面的标准流这个概念,我理解是页面的逐行方式,页面的自然位置安排。由此可知,默认情况下,定位的方式是static,所以上面说的的四个属性top, bottom, left, right是没有的,即便是你定义了值也是和没定义一样。暂且咱就把这种状态称作一个块的原始状态。
  Fixed:这个固定,是相对于浏览器窗口而言的,如果一个块被position:fixed,那这个块的位置的宽高的起点是浏览器显示网页内容区域的左上角,具体显示的位置是你定义的top, bottom, left, right的值。同时,这个块是不会随着浏览器的滚动条滚动发生位置变化的,说白了,这块就已经被钉死在那里了。所以这个fixed方式一般是用作页面上浮动面板,导航等等需要固定位置显示的内容用的。
  Relative:相对定位,这里的相对,是说的相对与这个元素本身在Static方式时的位置,就是上面说的原始状态,下看下图:

  图中有9个块,假如都是按照static状态排列的(实际可能不可能,只是为了说明问题),用中间的编号为5的块来举例,现在把5这个块的position:relative;top:100px;left:100px之后,块的位置会发生变化,变化见上图,其中的top和left的起点是该块原始位置的左上角标注X的地方,位置变化后,块的左上角同样我标注了一个X,这样就好理解位置是如何发生变化的了。既然位置发生变化了,是要和其他块发生位置重叠的,图中的块5和块6、8、9产生了位置重叠,这样就有个块内容谁覆盖谁的问题,也就是哪个块显示在上,哪个在下。假如9个块是按照编号依次放置,那后放置的会覆盖前面块的内容,这个我在图中没有表示出来,按照前面说的都是按照static状态排列的话,块5位置变化后,和块6、8、9重叠的部分,应该是被块6、8、9的内容覆盖的,这个实验留给你自己去体会吧。当然,你要是不想让块6、8、9的内容覆盖块5的内容,可以给块5指定一个大于块6、8、9的z-index的值,这个z-index的值用于控制各个块在垂直于屏幕的方向上的显示顺序,类似于Photoshop里层的概念,就是哪个块在上面,哪个块在下面。如果都没有指定,那就按照块的自然顺序,越靠后的块会覆盖前面的块。
  Absolute:绝对定位,这里说的绝对是说对于一个块的父级元素、父级块而言的,如果没有父级元素、父级块,那默认的父级块是<html>,同时父级元素、父级块必须是除static之外的position定位方式,也就是父级块、父级元素需要有position为Fixed/Relative/Absolute的定位方式才有效。如果一个合适的父级都没找到,那父级块就又成了<html>了。用下面我写的代码测试一下吧,先直接点击运行代码按钮查看效果,修改了值以后再次点击运行代码按钮看看修改后的效果:




  最后说一下Float,说白了就是一个HTML元素的左对齐和右对齐的问题,跟在这个元素之后的内容将会环绕包围着它,之前的元素不受影响,Float一般应用于图片,当然,也可以用在其他元素,或者用于块。所以,float是水平方向的移动,上下是不行的。至于一个块或者元素能向左和向右float的程度,是依据它的父级元素、块给留下的空间有多大。如果有多个元素或块是float的,且这多个元素和块都在同一个父级元素或块中,它们会一个挨一个的排成一排,顺序吗当然就是元素或块出现的先后顺序。
  上面也说了,一个float的元素或块之后的元素或块是环绕它周围的,如果之后的元素或块你需要从新开始一行,那就需要在从新开始一行的元素或块的css定义clear一下,clear:both;就这句了,both表示左右都不环绕了,也可以单独clear left或者clear right。具体的例子我就不说了,自己动手实验一下吧。
  到这里,俺个人的DIV+CSS之旅心得算是讲的差不多了,以后就是零零星星一些具体细节上使用的东西了,活到老学到老吗,整个这九回的心得,也花了我不少时间和精力,当然,我知道这对我自己是有好处的,等过段日子,再回过头来看看那自己写的东西,估计还会有新发现,到时候会补充进来。如果哪里说的不对,或者有问题,还请高手高抬贵手留言指出,俺万分感谢。如果也有初学的,大家可以多交流,至于怎么找到我,博客最下面关于我&博客的页面里有联系方式,欢迎骚扰^_^
[Edit on 2011-2-12 0:40:55 By 笑傲江湖]

标签: CSS DIV

评论0 引用0 浏览3703


DIV+CSS 学习心得<8>:分组,嵌套,伪类,伪元素

[ 作者:笑傲江湖 发布于:2011年-2月-11日 8:05 星期五  分类:百 宝 箱 ]

  这次说的东东,基本是CSS样式里写法的一些细节和技巧问题了,因为我也只初学,也不一定说的就全是对的,具体问题具体对待,您还得自己研究之后消化了才行。
  样式相同的定义是可以分组的,下面例子中,两种写法效果是一模一样的,使用分组的方法可以简化css代码,只需要将不同的样式定义名称(官方叫selector选择器)用逗号(英文状态下的逗号)隔开。

h1{
color:green;
}
h2{
color:green;
}
p{
color:green;
}


h1,h2,p{
color:green;
}

  当然,分组也有不好的地方,如果你后来只想修改其中的一个,那不是麻烦了,所以还是看实际应用情况,这里只是告诉你有这么一种可以分组的写法。
  然后是样式定义的嵌套,英文说法是Nesting Selectors,我英文不是很好,不知道这个Nesting(nest是巢的意思)在这里该翻译成什么好,所以我理解就是嵌套吧,或者叫级联?。官方解释是可以给一个选择器(比如A)内的选择器(B)定义样式,这样的话,在A作用的元素中如果出现了B所定义的元素,那这个元素就只使用B定义的样式,看例子,说的有些拗口,容易绕晕:

p{
color:blue;
text-align:center;
}
.marked{
background-color:blue;
}
.marked p{
color:white;
}

  上面的css样式定义,第一个定义了所有p这个元素的样式为文字颜色蓝色,文字居中显示,marked这个class定义了元素的背景色是蓝色,.marked p则表示:如果p元素的父级元素的样式如果是.marked,那么这个p元素内的文字颜色就是白色,会脱离第一个p的样式定义。这第三个.marked p的写法就是Nesting Selectors,自己有时间在DW里写好可以测试一下具体是怎么玩的。
  Pseudo-classes,直译就是伪类,我也没搞明白这个伪到底是啥意思。假的?冒充的?忽悠用的?What ever!下面是伪类的语法:

selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}

下面是咱能用的伪类的列表:

Pseudo name    Description
:active        Adds a style to an element that is activated 
:first-child        Adds a style to an element that is the first child of another element
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang        Adds a style to an element with a specific lang attribute
:link            Adds a style to an unvisited link
:visited        Adds a style to a visited link

  咱们用的最多的伪类估计就是给链接定义四个不同状态样式的时候了,其他的用的不多。你可以给其他HTML元素,比如DIV,定义一个:hover的样式试试看,很给力哦。
  Pseudo-elements,直译就是伪元素,同上,不是很明白。下面是伪元素的语法:

selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}

下面是咱能用的伪元素的列表:

Pseudo name    Description
:after        Adds content after an element
:before        Adds content before an element
:first-letter    Adds a style to the first character of a text
:first-line        Adds a style to the first line of a text

  其中first-line只能作用于block级别的元素,能用的属性property有:

font properties
color properties 
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

  其中first-letter也只能作用于block级别的元素,能用的属性property有:

font properties
color properties 
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

  :after和:before的写法如下,具体有啥效果,烦请自己准备好图片在DW里实验。

h1:before{
content:url(smiley.gif);
}

h1:after{
content:url(smiley.gif);
}

  这回就说到这里了,还是那句老话,我说的你不一定能看懂,还得靠你自己Google去研究,如果我理解错了,还麻烦您给指点一下,别让俺一错再错哦。
[Edit on 2011-2-11 0:06:21 By 笑傲江湖]

标签: CSS DIV

评论0 引用0 浏览4491


DIV+CSS 学习心得<7>:布局中我的些许疑惑

[ 作者:笑傲江湖 发布于:2011年-2月-10日 10:48 星期四  分类:百 宝 箱 ]

  在没有知道DIV这个东西之前,我是知道CSS的,在知道CSS之前俺都是用TABLE的,布局网页无非就是几行几列的一个表格,上下左右,配合前期PS里面做好的整体页面效果图,来布置具体的表格该怎么分割和组合。因为折腾了时间长了,人就懒了,TABLE+CSS也倒是用的很欢,然后慢慢也知道了DIV这个东东,但是已经习惯了表格,所以就没有去深究DIV这个事情。趁着春节前没什么事,所以还是打算把DIV这个玩意好好的收拾一下。前面也说了,要折腾,就要找个东西开刀,所以就先拿博客试水了,博客程序用的比较早,虽然是ASP+ACCESS的,也够用了,就一直也没换,顶多是一年半载空闲了换个风格,就这么一直用了下来。
  博客页面的模板架构是TABLE+CSS的,最原始的情况是每个栏目都可以单独弄一个模板,我也懒得折腾,就整个博客不管啥栏目都用了一个,基本布局就是上[页头:header,顶部登录信息+图片展示区],中[左:博客导航内容,右:博客正文列表],下[页尾footer],大框架就是这样了,很简单明了。于是就动手在DW里开始DIV+CSS的折腾了,根据大框架布局的话,基本也就是5个DIV定乾坤。头部是通栏,登录区和中间左右结构还有尾部是指定宽度的,如下图:

  大局已定,开工了。DW点火,5个DIV速度码好,结果,嗯,不是我想象中的那样哦,一头雾水,NND怎么都千篇一律的各占一行呢!第三和第四个必须左右排练啊,剩下三个你满行了也就算了,我也就不先惦记了,但是中间左右排列的部分,得想办法让他归位,先看看原始状态没有CSS哦。

  于是乎放Google,爬吧,肯定有前人也有我这种疑问,找啊找,摇啊摇,试啊试,总算到了外婆桥!功夫不负有心人吗。可以上CSS了,当然是外部CSS链接了,main.css开始入场。header通栏的好办,先不管他默认就是通栏的。第一个问题来了,登录区login part部分是有宽度的,要居中显示哦,放Google得知css里该怎么写,margin-left:auto; margin-right:auto;这两刀就安了,意思是让左右两边自动适应浏览器的宽度。第二个问题接踵而至,要让横行的两个DIV改左右排排坐吃果果啊。继续放Google吧,得知还得在他俩外在整个大的DIV[id=center_content],因为要居中,left nav和blog content list得套进去,且这两display:inline,就是前面说的让这两块在同一行排排坐,一个float:left,一个float:right,要不然这一左一右是搞不定的。好了,css布置完毕,点击下面的运行代码按钮就可以看到布局已经完成。




CSS样式表内容:


body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-image:url(images/bgimg.jpg);
    background-attachment:fixed;
    color: #333333;
    margin: 0px;
    padding: 0px;
}
p.demotext{font-family:'微软雅黑','黑体','宋体',Verdana, Arial, Helvetica, sans-serif; font-size:20px;}

/*     header      */
#masthead{
    background-image:url(images/blog_top_back.png);
    background-repeat:repeat-x;
    height:126px;
    margin-bottom: 10px;
    padding: 0px 0px 0px 0px;
    width: 100%;
}

/*     Login part      */

#login_part{width:1088px; height:100px;background-color:#FFFFFF;margin-left: auto; margin-right: auto;}

/*     left nav      */
#center_content{background-color:#FFFFFF;width:1088px;overflow:auto;margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px;}
#left_nav{display:inline;float:left;width:210px;background-color:#D1D1D1; padding:5px;}

/*     blog content list      */
#blog_content_list{display:inline;float:right;width:820px;background-color:#DFDFDF;padding:10px;}

/*     footer      */
#footer{width:1088px; height:100px;background-color:#FFFFFF;margin-left: auto; margin-right: auto;}


  上面还有个问题,就是左右排排坐的两部分,因为内容的高度会不同,所以牵扯到一个背景自动加高适应的问题,就是id=center_content这个div的背景,不管里面左右两个内容块谁高了,id=center_content这个div的背景色都会自动向下延伸,他的css里要加上overflow:auto,我Google的结果是overflow:hidden,按字面意思理解超出了一个是自动,一个是隐藏,我也不知道具体啥差别,反正都可以,我就用auto吧,比较符合我想的那种自动适应向下延伸。
  既然大框架的布局已经搞定,各个部分的细节问题就问题不大了,无非是在每个大块里添加若干个子块嵌套进去,再逐个定义好各个具体内容部分显示的class即可,之前也专门说了关于ID和Class的区别了,大框架唯一的部分我就用ID了,大框架里面的子块,子内容全都用class。还有就是html代码和css样式表文件中的注释行的问题,最好养成习惯,加上必要注释,你能看懂的,好记性不如烂笔头啊,有了注释内容,一年半载后你再来修改更新你的样式表或者修改html将会非常方便,事半功倍哦。即便是你不干了,接你班的后来者也会从心底里感谢你的,如果你换了一个地方,接手别人的东西之后要是看到同样的注释,你的心里也会豁然开朗的,我为人人,人人为我。
  关于HTML代码里注释行还得注意一点,注释行的注释方法,必须按照W3C的标准注释行来,<!--注释内容-->这种,这就是标准!切记,如果你那短线多了或者少了,Firefox这种极其W3C的浏览器,会把你的页面解释得一塌糊涂不堪入目,不信你试试看,除了Firefox之外其他的浏览器到是没有问题,对这个注释行的兼容都很好。所以为了适应所有的浏览器,还是按照标准去注释吧。另外还得再唠叨一个事情,如果你的网页是gb2312编码的,那你的css文件也是gb2312编码,默认的话不需要改动。如果你的HTML页面是utf-8的编码,那你的css文件也一定要是utf-8编码,否则你设定的样式会莫名其妙的失效,比如font-family设置的字体失效,虽然在DW里显示无问题,但是用浏览器查看的时候字体设置无效。
  在初步折腾DIV+CSS布局的过程中,基本我就碰到这么多问题,也基本都能Google之解决。如果你有什么新鲜问题需要交流也可以留言,咱们一起耍。
[Edit on 2011-2-10 3:05:22 By 笑傲江湖]

标签: CSS DIV

评论0 引用0 浏览2829