网络设计的原理--桧山佐知子

这本书大致的翻了一遍,个人觉得书中所涉及的知识面较广,就书中所涉及的知识,我来阐述一下我觉得有意思的地方。

一、小知识

1、link 里的 media 是用来指定输出设备,all表示在所有显示,handheld表示在移动端显示,screen表示在普通pc端,print表示打印机输出

2、一般,选择器相同的情况下,越在后面的样式越优先,以下情况除外:

id 选择器 100

class 选择器 10

.a,.b,.c{} 群组选择器 1

* 全局选择器 0

后代选择器

3、块级元素:address blockquote d div dl fieldset form h1-h6 menu noscript ol p pre table ul

内联元素:a abbr acronym b bdo big br button cite code dfn em i frame img input kbd label map object q ruby samp select small apn strong sub sup textarea tt var

4、单位用em的时候,相对的是母元素的尺寸,起始状态以body为基准

5、限制文本的最大最小宽度和高度:min-width,max-width,min-height,max-height。。。。。。text-align:justify强制左右对齐

可见行高:1.5em 150%

二、易于理解的版面要遵守以下几点:

第一视点的意识 —— 根据屏幕分辨率

滚动条的技巧 —— 尽量别有滚动条,或者可视区域与下半部分有衔接,让用户知道并看到下半部分的内容

使用其他环境进行验证 —— 别的浏览器

信息的整理 —— 信息归类

实现移动的射击 —— 人眼睛的习惯走势

配置的平衡 —— 保证页面不会失去平衡,不要一边倒,颜色的深浅也决定了页面的重量,粗大文本也比细小文本重

留白的设计 —— 有空隙感,通气,可保持平衡管,段落行间距也要统一

三、版面构成:

页面分割-竖栏 —— PS、AI里的网格,一般把网页分成912个竖栏,黄金比例1:1.618≈5:8

网站统一

页眉与页脚统一

链接颜色的统一,CSS事先定好样式,还有一些性质用途相同的按钮形状也要统一

留白的统一,要考虑板块间的留白要统一,可设置通用的样式加进所有html

便于理解的导航

全局导航,第一视点,醒目

局部导航,可用作下拉菜单

补充导航

四、有代表性的排版模式:

2竖栏排版

3竖栏排版 —— 1:3:1

倒L字形排版 —— 常用语深层次或多页面的网站

水平型排版

垂直I字形排版,纤细感

网格型排版

图像为主型:直接,有冲击力,图像旁边其他的元素要设计的简单,可以突出图像

重视留白的排版,给人平静的感觉

五、速记属性的使用

margin:0;    四边都是0

margin:10px 20px;    上下是10,左右是20

margin:10px 20px 0;    上是10,左右是20,下是0

margin:10px 20px 0 30px;    上是10,右是20,下是0,左是30

六、需要掌握的CSS特别处理

使用css的特殊处理,但是这不是标准规范,最好不用

IE6 的代表CSS特别处理是“星号处理”和“下划线处理”,(IE6 MUST DIE,以后不需要考虑了)

星号处理是在选择器之前添加 *html,下划线处理是 _height:1%;

例如:    

div#wrapper{   

width:900px;       

margin:0 auto;   在IE5、IE6中这个不能实现居中   

 

*html body{  

texr-align:center;   所以要在body里设置来达到目的的错误   

}  

*html div#wrapper{  

text-align:left;   body了设置了居中,所有子元素就都居中了,所以要用#wrapper还原左对齐   

}

只适用于IE7CSS特别处理是在选择器之前加  “  *:first-child+html 

div#col{       

margin:5px 0 0;       

}      

ie7ie6怎么写呢?       

*:first-child+html div#col,*html div#col{      

margin:10px 0 0 ;       

}上面的这两个选择器写到一起是不对滴,要分开写,

如下:

*:first-child+html div#col{       

margin:10px 0 0;       

}       

*html div#col{       

margin:10px 0 0;       

}

七、内部元素超出整体的解决办法

方法一after是可以经过指定的元素内容之后追加内容的伪元素,

content属性来指定内容,(before)

.col01:after{

content:".";   点是在divcol01之后生成的内容,可以使别的什么都行

display:block;   让这个点变成块

height:0;   高度为0,必须设置

visibility:hidden;   可见设为隐藏

clear:left;   清除左浮动

}

方法二:div里最后的地方加个空的span标签,cssdisplay:block;clear:left但是一般html里不放空标签,所以不推荐

方法三:div class=clearfix,css里.clearfix{overflow:auto;_height:1%}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,219评论 0 8
  • 简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输...
    wengjq阅读 1,999评论 2 15
  • 听说了校园中有两只兔子的到来,一下课,我便从五楼冲下一楼,上课自然没了心思,满脑子都在想两只兔子长什么样子,甚至连...
    知足常乐张蕴之阅读 395评论 0 0
  • A朋友工作独立,负责任,基本任劳任怨,表现一直很受好评。最近来了新老板,大到工作分配,小到日常的一句对话,都令A很...
    蜜思梁阅读 256评论 0 0