当前位置:首 页>> 百 宝 箱

DIV+CSS 学习心得<7>:布局中我的些许疑惑 微信扫一扫
分享给朋友

  在没有知道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 笑傲江湖]

CP+2011:Camera & Photo Imaging Show 微信扫一扫
分享给朋友

作 者:笑傲江湖分 类: 数码&IT 发布于:2011年-2月-10日 8:34 星期四


  2011年2月9日,一年一届的CP+展会(Camera & Photo Imaging Show), 在日本神奈川县日本横滨PACIFICO会展中心隆重开幕。作为全亚洲最大的影像行业展会,CP+吸引了几乎所有日本相机生产厂商参展,而2011年CP+的主题是“世界首映——引领照片成像新时代”。

  CP+是由CIPA(Camera & Imaging Products association即相机与影像产品协会)主办。旗下的成员包括佳能、尼康、富士、奥林巴斯、宾得、理光、索尼、适马、腾龙、三洋、卡西欧等日本著名相机和镜头生产厂商。因此CP+在业内有着非常重要的地位。2010年,CP+正式取代PIE展会,成为和photokina、PMA以及中国P&E展会并肩其名的四大世界级影像盛会。
官方网站:http://www.cpplus.jp/en/index.html

[TVSHOW]Spartacus:Gods of the Arena-竞技场之神 微信扫一扫
分享给朋友


  《斯巴达克斯:竞技场之神》[Spartacus: Gods of the Arena]是StarZ剧集《斯巴达克斯:血与沙的传说》[Spartacus: Blood and Sand]的前传,是一部六集迷你剧。原剧中的主要演员Lucy Lawless(扮演Lucretia)、John Hannah(扮演Quintus)、Peter Mensah(扮演Oenomaus,后成为角斗士训练师Doctore)、Manu Bennett(扮演角斗士Crixus)将在该剧中继续演出。来自澳大利亚的演员Dustin Clare在该剧中扮演Batiatus家族训练的第一位角斗冠军Gannicus。正是凭借Gannicus的出色表现,Quintus Batiatus和他的家族才在群雄纷立的卡普阿角斗场上崛起,成为罗马帝国的一个传奇。
  来自《双面法医》(Dexter)、《天使红娘》(Valentine)和《第十三号仓库》(Warehouse 13)的Jaime Murray在该剧中扮演卡普阿的社交名流、淫荡贵妇Gaia,她为了达到攀龙附凤的目的不惜动用一切手段。肥皂剧演员Marisa Ramirez扮演Melitta,一个美丽的女奴,她将面临人生中最艰难的抉择。Jeffrey Thomas扮演Quintus Batiatus的父亲Titus,一个老于世故的奴隶主。
  斯巴达克斯到来之前,Batiatus家族在角斗场上面临着残酷竞争。本剧开始时,Quintus Batiatus的父亲Titus正向西西里方向旅行,Quintus临时代管家里的「角斗士主人」一职。野心勃勃的Quintus不满足于一时、一日的胜利,他想要统治整个角斗场。他对政治、权力及名誉充满了向往,一心要成为卡普阿最受尊敬的人物。但是对当时的Batiatus家族而言,他们还没有资格派人参加最高级别的角斗。为此,Quintus决定走上层路线,一面玩弄权术,一面结交卡普阿的社会名流。但是在当时的罗马,政治是一件敏感而危险的东西,Quintus不得不处处留心。与此同时,渐露锋芒的角斗士Gannicus表现出盲目乐观情绪,Quintus不得不亲自教育他:给Batiatus家族带来至高无上的荣誉才是最重要的。





[Edit on 2011-2-10 0:01:38 By 笑傲江湖]

DIV+CSS 学习心得<6>:度量单位和颜色值 微信扫一扫
分享给朋友

  前面几回就已经说到定义样式的过程中会使用到单位和颜色值的问题,这里还是专门梳理一下吧,哦,还有字体的设置。
  先说字体,其实做网页也挺郁闷的,即便是你电脑里有很多漂亮的字体,要真用到网页上,您还的三思而后行,如果某种字体,不管是英文还是中文的,很特别,不是操作系统中默认就有的字体,那么,你要是想用这种字体到网页上,有两个办法,一是让看你网页的人先下载安装这种字体到他的电脑上,这样他就能看到你网页上的文字使用的字体了,二是你把文字用图片的方式表现在网页上,啊?这不是要搞死人了,嗯,确实,你总不能满网页全都是图片啊。所以,做网页之前,你得考虑好用什么字体,中文的,英文的,默认情况下,是使用你操作系统默认的那种字体,中文操作系统的话,那就是宋体,你的网页里的中文和英文都用宋体来显示。英文系统的没仔细研究,俺也不晓得。毕竟咱们做的是中文网页,给中国人看得多。字体的定义可以一次指定多个,浏览器会按照前后顺序在浏览网页者的电脑里去匹配,如果匹配到了你定义的字体,就是你定义的字体,浏览者电脑里也有,那好,那就用这种字体显示了。如果一个都没有匹配到呢?那就用浏览者电脑操作系统里系统默认的字体显示。所以字体这是咱也不要纠结了,是中文网页,咱就老老实实用宋体,要想用其他的漂亮的字体,呵呵,对不起,翠花,麻烦上图片。Vista和windows7系统出来有段时间了,系统自带的除了宋体,还多了一种微软雅黑的中文字体,显示效果不错,可以用在网页中,当然,只能是系统中有这字体的才会用这种字体显示,否则还是用默认字体,本博客博文内容的标题就定义了三种字体,微软雅黑,黑体,宋体。按顺序匹配,如果您是Windows7的系统,那恭喜你了,可以看见的。其他系统的话,如果未安装微软雅黑,那就用黑体,或者宋体显示了。
  字体说完了,还有个网页编码的问题,咱中国的编码是gb2312,就是网页里的这一行:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  你用的是简体中文操作系统,用的是简体中文版的DW,那你新建一个网页的时候默认就是这个。如果你要通用一点,charset=utf-8吧,就是老外访问你的网页时,不至于网页上全都是乱码。至于网页编码的更多解释,麻烦还得您自己去研究,不懂就学吧,Google之。
  下面就是定义样式的时候要用的度量单位和颜色值的问题了,度量单位和颜色值都有很多表示方式,见下面的代码,点击运行按钮查看。具体用什么,怎么用,就仁者见仁智者见智吧。



[Edit on 2011-2-9 20:37:37 By 笑傲江湖]

DIV+CSS 学习心得<5>:Style大刀开耍! 微信扫一扫
分享给朋友

  这回说的Style是基于网页内容的,也就是前面说的块中内容区里的东西,比如文字的颜色、大小、粗细,图片、列表、链接的样式,网页背景,块的背景等。耍刀之前,先说一下和样式有关的一些样式值的单位,关于颜色:1、name,2、RGB,3、Hex;name就是颜色的英文名了,比如red,blue,yellow等等,我就记住这么几个,至于css到底支持多少英文名还得自己个琢磨。RGB是一个眼色的RGB三色的值,比如“rgb(255,255,255)”,这就表示纯白色,具体用什么值,根据自己需要,有很多可以取色的工具可用。最后Hex是十六进制的颜色值,比如“#ff0000”,这表示红色,DW里默认就是使用这种十六进制数来表示颜色的。具体使用看下面列子,虽然是三种写法,但都把样式的背景色设置成红色了。只要牵扯到设置颜色的地方,用这三种颜色表示方式都可以,看你自己。

h1 {background-color:red;}
p {background-color:#ff0000;}
div {background-color:rgb(255,0,0);}

  下面就一一介绍一下具体网页内容的style了,分为:background/text/fonts/link/list。先说background,每个HTML元素(俺说的块,以或者是box)基本都可以设置背景色,当然,有些特殊功能的除外,比如<br /><b><i>等。关于background的属性看下面:

background-color 块的背景色
background-image 块的背景图片(这里是图片地址,又有传说中的相对和绝对地址问题。)
background-repeat 块的背景图片重复方式,可以repeat-x(横向)/repeat-y(纵向),默认是双向重复。
background-attachment 块的背景图片是固定的还是随页面滚动。
background-position 块的背景图片开始位置和对齐方式

  可以给一个块定义的背景参数就是上面这些了,每种参数都有很多值可以使用,具体有哪些值可用,还得你在DW里定义样式的时候查看,DW里会根据你选择参数不同而提示相应参数有哪些值可用,看下图,左边13行结束后回车,DW就会提示你设置其他参数。右边13行就是你选择了background-attachment之后,自动提示可以设置的值供你选择,你要能全都记住当然更好了,直接手写更NB。我也只是记住了部分常用的,不常用的还得靠DW提示。至于每个参数有啥具体表现,请自行在DW定义,然后用浏览器测试,俺就不一一细说了,关键的事情还得自己动手啊,这样才记忆深刻。

  background的定义还可以直接使用简洁方式定义,如下:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

  用简洁方式定义的时候,顺序依照上面background的属性列表的顺序,不是每个值都需要定义,你需要什么就定义什么,只要按照顺序即可。
  然后是text文字相关的样式定义了,这个得和fonts一起说。常用的属性就是下面列表的这几个:

color 文字的颜色(颜色值使用方式同上所说三种都可以)
line-height 文字的行高
text-align 文字水平方向对齐方式
vertical-align。文字垂直方向对齐方式

font-family 文字的字体
font-size 文字的大小 (文字大小的单位有什么px,em,百分比,看个人喜好,我喜欢px)
font-style 文字的风格(斜体还是正常,和<i></i>这个效果一样)
font-weight 文字的重量,这样翻译看得有点别扭,其实就是粗细了。

  和文字有关的样式定义也可以使用简洁方式,如下:


p.ex2{
font:italic bold 12px/30px Georgia, serif;
}

  简洁方式定义时顺序:“font-style font-variant font-weight font-size/line-height font-family”这样定义时,font-size和font-family必须要写,其他的不定义的话用默认值。
  下面说说Links,也就是咱们平时说的网页上的链接,有文字链接,有图片链接等等。链接的样式可定义的很多,也可以把它看成一个块来定义样式。但是链接比较特殊,它有四个状态:


a:link {color:#FF0000;}      /* 未访问链接 */
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 当鼠标停留在链接上 */
a:active {color:#0000FF;}  /* 激活的链接(鼠标点击链接的那一刻) */

  上面的样式定义了链接的文字颜色,不过是四个状态的,上面都一一说明了,具体效果可以自己实验一下,当然,除了颜色参数可以定义,其他还有更多参数可以定义哦,链接文字大小,粗细,是否有下划线,链接背景颜色,背景图片都可以,要搞什么花样就看你折腾的程度了^_^
  最后就是列表了,这玩意也很常用,基本分两种,有序<ol>(ordered lists)和无序<ul>(unordered lists)。不管有序还是无序,列表里的项目前面都有个mark,就是list-style-type,具体值看下图:

  实际使用代码如下,什么效果自己复制粘贴到DW里,保存文件然后F12就可以预览了。或者直接点击运行代码按钮即可查看。




  另外,这个mark是可以自己指定用图片代替的,看下面代码,效果自己测试,mark小图标的图片自己准备好替换掉即可。


ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

  最后说一下list的属性吧,不多,就三种:list-style-type/list-style-position/list-style-image。每种属性对应的值有什么,还是需要你自己去DW里面看看自动提示。属性的值也可以简洁定义,顺序就上面列出的顺序,按需定义,不是三个都要给定值,没给的就用默认值。见下面代码:

ul
{
list-style: square url("sqpurple.gif");
}

  此回书就着落与此吧,最后给一个<ul>做的导航菜单吧,代码如下,复制粘贴到DW里,保存然后F12。或者直接点击运行代码按钮查看。自己感觉一下<ul>和<li>是怎么工作的,然后你自己可以折腾出更给力的导航菜单,因为能设置的样式还有很多,就看你自己怎么把大刀耍的更给力了。



[Edit on 2011-2-9 20:29:22 By 笑傲江湖]

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。