sns 基于校园的社交网络服务（三版-1期）小结部分问题

全局部分：

1、全局统筹的，充分考虑样式文件的重复利用，各模块独立却又千丝万缕，前提仔细分析所有的效果图，

一、一般性样式：

1、主题样式：文字、文字颜色，大小，链接效果，出现了几种状态，各自状态效果。

2、reset样式：body、div、p、list、table等的样式重构。

3、链接样式：a标签、图片的链接的外层含a或者有外边线。

4、标题和其他元素：h1-h6

二、辅助样式

表格样式、提示通知样式，相同的条目样式。例如辅助线，虚线，左漂浮，居中等单独会用上的样式或者模块，想头像不同大小尺寸，其实可以放在这部分。

三、页面结构

模块通用导航、标题、页脚、布局、其他页面的结构元素。

960box 、640box、320box  ，200block  ，300block

<h2>title</h2>、foot

四、页面组件

每一个不同页面的样式、，每个页面，不同模块的样式

五、覆盖样式

特殊的有别于之前重复出现过很多次的样式，但是此处又要求不同。

.h300{}

2、相同模块的导航、按钮、需要统一格式和统一结构，有些公共的登陆前后的状态显示，要充分考虑两部分在同一模块内的正常显示。两模块间的上下左右的间距须得保持一致。两人以上的开发需要遵守的一些规则，切忌同一模块代码多人分工写，且结构样式完全不同，增加后续程序完成的难度。

3、前期沟通很重要，与js沟通，减少无用功。另外css 的分支图，公共样式的整理等需要前期规划好，时间是一个因素，全局统筹很重要。

4、样式文件分为公共和非公共的，必须知道哪些模块是公共的哪些不是公共的。

5、前期产品原型一定要沟通到位，需求文档仔细看。尽量相同模块用相同的样式，减少重复劳动及提高代码可维护性。

6、已完成静态图的信息需要核对仔细，重要的联系方式、文案、提示信息要一致。

7、头像的边框、图片的边框是否有，是否统一，以及头像的标准尺寸，不一定哟一设计图为准。

8、如何等高布局，注意。

9、论坛发帖需要先登录，快速登录的做法。绝对定位一个，但是后面的输入框是否需要被遮罩掉呢？

10、有些内容板块前期因为没有数据，可能会空白，该如何填充和显示这些板块，增加默认空白的提示页面。因为某一部分没有数据，而导致其他的部分位置变动，又该如何解决，这里要给每一个漂浮的li都设定好宽高，内容没有的时候，仍然占据空间，同事程序做的时候就只能判断li里面的内容。

11、任何一个元素都要考虑他有和他没有的情况，在没有的情况下又该如何来显示。例如没有社长姓名的时候，社团该如何显示，“暂无社长”。

12、图片不做剪裁，而做等比例的压缩和补白。网盘上传的文件传至单独的服务器，做单独的框架，避免带宽的影响及可能的攻击行为。

 

 

细节部分：

1、给每一个文字区域设置宽度和高度，溢出隐藏。

2、每一个图片在所在模块中的设定最大宽度，最大高度，溢出隐藏，提前考虑，程序提取时的问题：是否要给每一个图片style上写上宽度和高度，以便后期图片数据读取时，图片大小不一的情况下，如何正常美观的显示。

3、给每个元素固定好位置，并思考某些模块没有的时候，页面又会是怎么样的效果。例如，日志、网盘没有的时候，需要默认空白图片的提示，还有，一些元素是浮动的效果一个个罗列的，要考虑，如果部分元素在页面初期没有，该如何使其他元素不受影响正常显示。

4、设计图与完稿的静态文件，必须一一对比，保证一致，允许误差范围在2像素到1像素内。

5、遵循，唯一css、img存放路径。静态页面和模板文件引用的必须保证为同一个。

6、导航的第一个li的hover事件，注意左侧与主页面的对齐，以及运用padding后是否有影响。

7、考虑到png-8和gif无法更好的显示某些png24图片的阴影效果光泽效果，这里统一下，ie6以上的用png-24，ie6统一使用同文件gif格式。

8、强行指定body的或者文字编辑较大的页面的line-height，正文要求1.6倍与文字大小，标题要1.3倍。font-size：12px/1.6.

9、制翻页效果的时候要考虑页数的多和少，一般不能固定宽度。

10、图片未显示，首先考虑是不是文件没有，其次文件名称，在其次是不是position或者其他的原因造成的。每一个图片文件要加alt，无法显示时的提示文字。

11、导航部分的右侧是个人和团体登入的显示地方，要考虑登陆前后以及团体和个人四种不同的情况，做好通用的外层的准备，利于开发和程序调用。

12、有用的，后期制作的psd图，修改后一定要保存，且存放在一个地方，习惯！

13、输入框内与默认的文字，如果用户未填写内容，提交后，会将默认信息显示出来，如何解决？

14、最后一个重复的元素不需要margin-bottom。

15、不要给div的内层的某一个类型的标签写样式，尽量给每一个元素设置特定的样式名称，作用在每一个元素上面，避免后期样式冲突。

16语义化页面很重要。

 

技巧部分：

1、注意表格部分，tr的margin无效，且tr的边线ie6、ie7不支持。如果预览table，发现背景颜色上出现边框的白色线框，第一时间，要想到是否是：cellspacing和cellpadding是否设为了0,到只有默认的边线。

2、css文件编码格式需要与htm模板文件编码格式一致，utf-8.编码格式不同会导致文字类型例如：“微软雅黑”“宋体”，这样的字眼后面的代码无法识别。如果发现页面突然一下没有了样式，则首先判断是否加载了样式文件，如果加载了而没有效果，怀疑是不是编码格式的问题，然后在挨个分模块排除法，找到最终的原因，标签括号也一定要检查仔细，成对出现。

3、若其他浏览器都没有问题，在ie6里面出现死机的情况，则首先想到是不是写了css表达式，这个表达式是否是个死循环，导致页面无法打开。

4、给特殊的input加外层的div时，须给外层的div给与特殊的class，js检索是从下级往上一级一层层筛选的，给与calss，便于快速找到该input的外层，并且不会附属其他的样式。

5、ie浏览器QUIRKS（文档怪异模式）模式。如果模板文件开始没有加DOCTYPE申明，在ie内核的浏览器默认会以怪异模式出现,严格按照3wc标准来。

6、不要用top middle bottom foot 等等名字单独定义一个类，如果恰好有一个这样的div的名字在最外层，内层若也有类似名称，会有样式影响。注意样式作用的权重，以及后续各个模块的多样式重复组合。

7、class和id的值在HTML和XHTML中也是区分大小写的，如果出现；额大小写混合写，一定确认你在CSS的定义和XHTML里的标签是一致的。建议都用小写。

8、去掉浏览器自带的a标签或者input button的点击后的虚线：ie浏览器hide-focus：expression（this.hideFocus=true）;标准浏览器：outline：none；

9、让input提交按钮，在火狐浏览器下面文字垂直居中：input[type="submit"]::-moz-focus-inner{padding：0；border:0;}

10、对于图片翻页，上下的效果，最好用浮动，不要用绝对定位，因为没有一个参照物是固定的，按钮也浮动，浮动的过程中注意 上下边距的抵销，统一的设置为下边距。

11、在ie6下面，ul li漂浮的最后一个会往上偏移，这个时候需要给li加一个正对ie6的样式，*zoom：1。注意：去掉他的漂浮样式，改为：display:inline；用于其他浏览器。

12、select option标签的行高无效，想要设置标量的下拉列表，一般会用div模拟，结合js。

13、ie6下面表格的tr没有背景颜色，如果某一个单元格设置有背景图片，在背景里面要加上默认颜色，例如：background:#eeee url(/images/bg.png) no-repeat。

14、ie6里面如果设置元素为横向滚动条隐藏，竖向滚动条显示，如果该原始内有元素设置position:relative;或者position:absolute;样式，那么ie6里面的竖向滚动条就会失效。如果设置该元素为position:relative;top:0;left:0;即可解决次BUG。

15、有可能有和有可能无的模块，在他的上面写margin-top强过在他的上一个模块写margin-bottom。将可变性距离元素放在那个变动的元素上面。

16、a标签默认还是要加target，<a target="_blank"></a>,不可省略，在新的窗口打开。如果是隐藏了字符的，需要加title，提示用户全部的名称。

17、a标签下面的img 在ie6下面会有蓝框，重置时要将border设为0；

18、ctrl+shift+del清缓存。shift+tab还原退格。

19、弹出框的外层想要起居中不能用margin：0 auto；会无限制的拓宽弹出框的大小。或者外层加一个宽度，抑制器的宽度变化。

20、富文本编辑框内的图片，不能固定大小，因为有可能为表情，应用max-width和max-height控制，而不是单纯的宽度和高度。程序在读取日志内容，显示成日志列表时，取第一个图片应该考虑他不能为表情。否则显示出来的为放大的头像，失真。

 

整理各处的规范

1、页面宽度保证在一屏以内，宽度960px，长度保证不超过三屏，瀑布流不包含在内。

2、每一张图片不能超过15kb，html代码在15kb以内。

3、编码格式统一为utf-8，

4、图片都要定义高、宽、alt属性，防止ie6下面有空隙，需加上style=“display：block；”防止ie6下面有边框，需要加上style=“border：none；”

5、不要使用map功能链接图片。

6、不使用特殊的字符来命名，程序那边可能会无法解析。

7、同一个td里面只放一张图片

8、做完样式后，用firefox去除样式看下效果。