95%的中国网站需要重写CSS网页设计整理3篇(css网站设计中技术要点)
下面是范文网小编分享的95%的中国网站需要重写CSS网页设计整理3篇(css网站设计中技术要点)，以供借鉴。
【说明】：本文所有截图源于网络，与本身截图的产品无关，仅为举例说明，同时本文讲的很浅显，改天从技术层面讲一下行业网站怎么应用。
昨天和一个朋友聊起网站在线客服的事情，即：
要不要在线客服功能？就是这个：
弹出的时候，好恶心!
要不要电话通话功能？就是这个：输入手机或电话后接通电话，对方公司付费。
在线电话，真的要在首页弹出吗？
好了，图看完了，说正事吧。网站，需要这个功能吗？可以肯定的一点就是，存在就是有价值的，但问题是这个价值对网站有多少意义呢？坦白的讲，我个人观点，在线客服可以有，在线通话也可以有，但必须有限制的去使用这两个功能。网站存在的意义，就是希望用户可以自行查看内容，然后做出自己的选择判断，从而降低客服人员成本。如果花大价钱做个网站，然后马上让用户电话咨询，那么请问，你做出来的网站还有什么意义呢？
相信大家都会碰到这样的问题，正在看网页的时候，突然弹出一个对话框，然后提示你要不要帮助，要不要在线咨询。当时的你是什么感觉？是不是有一种被强迫购买（恩，和谐的词汇，自己理解！）的感觉？
事实上这种感觉就和大家去超市购物一个道理，本身超市商品罗列已经有了一定的规则，而我们在购物时也习惯自己先做判断，如果有需要的时候在看看说明来决定要不要买。但是超市有导购吗？有的。聪明的导购会在你选择为难时帮你选择，这个时候你也会很欣慰有人能帮你。但，如果你刚走进超市的大门，就冲上来一群导购拉着你问你有什么需要，你又作何感想？
这个道理，凡是用过互联网的人都知道。可是为什么还要在网站首页弹出呢？这让我想起早年的工具条，甚至更早期的无限网站弹窗。很恶心！当看到这样的网站时，我有一种说不出来的感觉，而且一旦发现这样的弹窗，我直接关闭网站，管你是啥。
而事实上，我们也会发现，凡是用这样做法的网站，都是一些传统企业网站。很伤感，也很无奈。就比如这家我无意中发现的企业网站：
可怜的老板，你的钱浪费在什么地方你都不知道！
当我看到这个网站时，我只能悲哀的说，老板，你太可怜了。你不仅被忽悠去了N多钱，而且失去了N多本来你可以得到的客户！
然后我又打开了某提供这种功能的公司网站，惊喜的发现，他们所有客户的首页都有这种弹窗，可偏偏他们公司的首页没有弹窗！老板们，花自己钱的时候好好想想吧。而且，我发现了一个很巧合的事情，他们首页的这个数字大概4-5秒钟自动增加一个，真是神奇的事件！就是这个数字：
每隔4-5秒钟加1的神奇数字
其实这种事情完全可以避免，比如：在线客服固定位置，电话帮助只在特定位置出现等等。只可惜的是，传统企业老板根本不知道。他们只知道这个功能很炫，很酷，但最终结果呢？甚至于如果我填了一个信息台的电话应该怎么办呢？对方无语！
在线客服的应用
在线客服的形式：
1、基于IM工具的在线客服，如QQ,阿里旺旺；
优点：无需再次开发，只要拥有客户端软件即可；同时后续客户管理容易。
缺点：与客户端的安装数量有密切关系，与用户是否注册有关（运营出来的人为障碍，不在本文评论范围）。
2、第三方的在线客服工具，如53客服，live800等；
优点：无需客户端软件支持，点击即可使用，
缺点：后续客户管理异常困难。
在线客服的原理：
1、IM工具本身就是聊天、在线沟通用的，开发在线客服只是将IM窗口转变为web窗口而已。
2、第三方客服工具的原理是早期的网页聊天室原理，只是变成了1对1的聊天而已，这种技术N年前就已经实现了。
谁要用在线客服？
1、首先需要明确网站的产品是销售驱动还是产品驱动。
销售驱动就是需要业务员电话外呼，行业网站多属于这种情况。为销售网站会员或广告或其他产品，需要人为销售的行为，称为销售驱动。——举例：你不想买东西，然后有人使劲和你说，最后你也许就会买了。
产品驱动就是不需要更多的介绍，全靠网页内容介绍来促使用户完成交易。为销售产品，基本脱离人为销售，依靠网站产品介绍为主的销售行为，称为产品驱动。——举例：你看中某一产品，看完介绍后就买了，中间无销售人员。
2、其次再对“在线客服”做一个细化，即分为售前支持和售后服务。
售前支持指用户在未完成产品购买前的咨询，即用户有很多的为什么，需要你来解决。——B2C,C2C网站经常需要。（我的总结是网站产品说明做的很垃圾，客户看不到想要的资料，只能问客服。参见等下的第4条。）
售后服务指用户完成了购买以后，产生的使用困惑或者需要的帮助。——这个只要是产品都需要。
3、接下来需要对网站用户群做一下细化，简单分为网络应用不熟练和网络应用熟练两种，仅此而已。（恩，读者请不要在这里和我较真，要对用户细分是很困难的事情，我这里只是简单的区分。这个要分的非常清楚很难，也和用户的知识结构、学习能力等等有很大的关系。）
网络应用不熟练指对网络一点不懂或者说对电脑都不懂，或者只懂得一点点的。——举例，我见过一个销售人员指导一个完全不懂得网络，甚至打字都很困难的人使用自己网站，是通过在线客服工具完成的，不停的截图加文字指引来帮助客户使用网站。
网络应用熟练指相对网络操作、应用等都比较懂的。——举例，依靠网络发展客户或谋生或购物的人等等。相对来说他们已经非常熟悉购物流程。但他们还在不停的找客服问来问去，又为了什么呢？
4、你的网站将产品说明都列清楚了吗？
直接举例：昨天我想在网上买一个锡制茶叶罐，对于这种茶叶罐，我需要知道的是茶叶罐的大小尺寸、盒盖方式、内部做工、密封性、锡含量、单体重量、外部花纹这几个关键指标。但是郁闷的是没有找到一家网店可以把这几个指标说的清楚的。要么缺这个要么缺哪个，总之没有一家店能让我看完以后就能马上下单的，因为我有太多的疑问不得不通过在线交流来寻找答案。
开始总结吧：
销售驱动型产品，是需要在线售前支持和售后服务的。
产品驱动型产品，还是不要用了，你需要用你的网站来减少客服的工作，当然，前提是你的产品要货真价实。赚钱诚可贵，诚信价更高！
如果是企业网站，我是真的建议你不要做在线客服了。
本文出自“我是webplanner” 原文链接：.cn/?p=147?和 .cn/?p=162
随着互联网的快速发展，越来越多的网站面临着改版的需求，当我们隔一段时间再上某网站时，有时会惊讶的发现该网站已经改版了，其实网站改版就像是做整容手术一样，在焕发另一春的同时，也可能面临着手术失败而导致毁容的结局。整容是因为对自己的相貌不满意或者是想让自己变得更漂亮才去做的手术，而网站改版却不仅仅只是因为相貌的原因，还有很多其他的因素影响着，在这些略显杂乱的关系中需要理清几个问题：
是否真的需要改版？
这是在网站改版之前最需要也是最必要处理的一个问题。究竟网站改版只是一时的兴起，还是经过深思熟虑的事情。决策层是最重要的层面，决策层的任何一个决策都会影响到整个网站。所以在网改版之前请确保这次改版并不是因为一时兴起。
究竟是为了什么而改版？
既然已经决定了要对网站做一个改版，那么接下来就需要明白的一个问题是，究竟是为了什么而改版？
通常情况下，网站改版有两种情况：一是因为网站本身的内容扩充导致现在的网站架构承载不下更多的内容，二是基于网站用户需求的转变而导致网站转型。当然也不能排除纯粹是为了网站的相貌而做出改版的决策。
改版后的期望是什么？
当然这也是在网站改版之前所需要面对的一个重要问题。网站改版之前，就需要对改版后的网站做出一个期望，期望改版完成后的网站能给网站带来什么？需要评估改版过程中投入的时间、人力、物力以及其它方面的资源能否在改版后的网站中得到体现，也就是说改版后的网站能否带来此前投入的同等价值或者是最大的价值（这个当然是最好的了）。
改版时网站的架构是否需要重建？
由于网站本身内容的扩充而产生的改版需求是最为常见的，因为网站的设计并不是在一开始就是定性的，网站的设计是具有一定的流动性的，随着网站在发展中对于用户以及内容的积累，网站的运营方向需要做出阶段性的调整。这个阶段性的调整可以是大到整站的信息架构重建，也可以小到仅仅只是修改页面中的某一处细微的地 方。但是不管这个阶段性的调整是大是小，都会涉及到网站的改版，只是这个改版也是随着调整力度的大小而改变。
如果是做出大的调整，那么无疑就需要重新梳理网站原有的信息架构，并且设计出更加合理的升级版的信息架构，而这也是网站改版成功与否最为关健的一点，
改版时是否需要引入最新技术？
如果把这个问题问上十个人，相信有六个或者以上的人会认为应该引入最新的技术，因为对新技术的追求是永无止境的，而且如果能在新网站中引入最新的技术，从另一方面上也证明了网站的技术实力。
但技术实力仅仅只是网站的一部分，一个完整的网站需要的是各方面的资源综合发展，技术强运营弱或者是运营强技术弱都是不行的，“短板效应”是很多人都知道的原理，决定最终储水量的往往是木桶上那块最短的木板。
对新技术的追求本身没有错，但在这个追求过程中所投入的成本是否能有效的控制是个很大的疑问。如果不能控制这个成本，那选择适合网站目前的技术无疑是最明智的作法。
改版时需要什么样的数据支持？
有句话叫做“有钱并不是万能的，但没钱是万万不能的”，数据之于网站也是最样的道理，有数据支持并不是万能的，但没有数据支持无疑会使网站的改版陷入很被动的境地。
用户使用网站的习惯？页面上哪些内容是用户最常点击的？用户访问网站的一般路径？用户在网站的平均停留时间？以及用户的忠诚度等一系列的数据都是需要做出正确合理的分析的，因为改版后的网站肯定会引起这些数据的波动，而引起的这些波动是否会导致网站的用户流失？以及如何尽可能平缓的减少这些波动性？
改版后给用户带来的影响？
虽然网站改版的前提大部分都是为了让用户在使用网站时有更佳的体验，但事物皆有两面性，有利必然就有弊。面目全非给用户带来的影响远远大于某一处细节的修改，无论这个影响是好是坏。
如前面所说的数据的波动性，用户如何使用网站就是这些数据当中重要的一环，改版时需要尽可能的提取出数据中不能被影响到的部分，如果必须影响到用户的使用，那应该是让用户有一个平缓的过渡还是快速的过渡呢？如果改版后是一个更好的设计，当然可以使用户快速的过渡到新网站中去；但如果用户在使用网站时已经积累了长期的习惯，并且短时间内很难更改的话，那选择给用户一个平缓的过渡时间无疑是最合适的。
本文出自：/interaction/1134
上一篇我们谈到了移动网站中的标签，想必很多人也很想了解Mobile CSS的情况吧，本文将和大家一起探讨移动网站中的CSS标准，
介绍
Mobile css的标准也是有些复杂的，与前一篇文章中提到的类似，之前存在着一个W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0，事实上它们都是CSS 2.1的子集，而且内容非常接近，不同的是，WAP CSS 1.0针对移动设备加入了一些扩展，这些扩展通过-wap-前缀来实现。
后来，W3C将二者进行了整合，吸收了WAP CSS1.0的一些优点，推出了CSS Mobile Prifile 2.0规范，它也是CSS 2.1的一个子集。我们本文将主要讨论这个规范。
CSS Mobile Profile 2.0中的CSS支持
因为这是CSS 2.1的一个子集，那么我们对这个规范的内容应该不会陌生，我们通过这个表格可以很直观的看到CSS MP对CSS的支持情况：
支持的不支持的选择器全局选择器(*)、类型选择器(比如h1, div, p等)、子选择器(p>span)、链接伪类 (:link,:visited)、动态伪类(:active, :focus)、类选择器、id选择器、分组(h1,h2,h3{}…):first-child、:hover 、:lang 伪类， :first-letter 、:first-line 伪元素， 兄弟选择器(比如h1 + p)，属性选择器 (比如 a[href], a[target=”_blank"])背景和边框background, background-color, background-image, background-repeat, background-attachment, background-position, border, border-width, border-color, border-style(注1)无定位position, top, right, bottom, left, z-index无列表list-style, list-style-image, list-style-typelist-style-position基本的盒模型display(注2), margin, padding, height, min-height, max-height, width, min-width, max-width, float, clear, visibility, overflow(注3), overflow-style(注4)无色彩color无字体font, font-family, font-style, font-variant, font-weight, font-size(注5)无文字text-indent, text-align, text-decoration(注6), text-transform, white-spaceword-spacing, letter-spacing, unicode-bidi线形vertical-align(注7)line-height基本的用户界面utline, outline-color, outline-style, outline-widthcursor滚动marquee-style, marquee-direction, marquee-play-count, marquee-speed无@规则@charset, @import, @media(注8), @namespace@page注1：border-style只支持常用的none、dotted、dashed、solid和inherit，其它的几个并没有被列入规范。
注2：display仅限于inline、block、list-item、none和inherit，不支持run-in和inline-block
注3：overflow只支持auto
注4：overflow-sytle只支持marquee值
注5：font-size只支持大小关键词，比如small、medium、bigger等，px、pt和百分比等不被支持，
注6：text-decoration只支持none、blink、underline和inherit等，overline、line-trough不被支持。
注7：vertical-align 只支持top, middle, bottom, baseline 和inherit。sub, super, text-top, text-bottom, 百分比和长度不被支持
注8：@media规则只支持 handheld 和all 媒体类型。
就像之前文章里面提到的那样，目前绝大多数的手机是支持XHTML Basic 1.0和XHTML MP 1.0标准的，这就意味着在某种程度上移动网站的HTML/XHTML代码是可以与桌面版的相兼容甚至完全一致的。甚至有些网站的移动版直接使用HTML 4/5或者XHTML 1.0的DTD。这样移动版网站可以直接通过handheld的media type来制定一个移动页面专用的CSS文件：
1
绝大多数传统手机上的浏览器都支持handheld媒体类型，包括opera mini和windows mobile中的IE。
其实考虑到传统手机的自身的限制和移动网络速度的限制，通过media type来加载外部样式是不可取的，通常用于移动版页面的样式不多，而多加载一个外部样式的代价是巨大的。所以，大部分的网站的移动版采用在head中嵌入样式表的方式。
如果，你一定要采用外部样式的话，最好不要用@import，因为有些手机浏览器并不支持。
特别值得一提的是，mobile webkit(包括iphone safari和android chrome lite等)不支持handheld。
而在视觉上的差异，主要是字体的表现差异，这和各个手机浏览器有关，想要做的像素完美，不是件容易的事情。
总结
虽然，移动网站貌似不用考虑太多的功能，布局简单，功能简单，但是现实并没有想象中的那么简单。移动网站面临的最大的问题是浏览器众多，手机终端差别又很大，开发的时候，会遇到这种细节问题。
目前国内移动网站的前端开发，还处于起步阶段，随着iPhone和Android等智能手机的流行，针对高端智能手机设备的网站开发将逐渐盛行，对于这个相对较新的领域，我们还有很多事情要做。
其实本文仅仅涉及到Mobile CSS的一些非常基础的方面，希望可以抛砖引玉，引起更多的人研究和分享移动网站开发的前端技术和技巧，如果你有较深入的研究，欢迎通过前端观察与大家分享。
www.w3.org/TR/css-mobile/
Mobile style. – CSS Mobile Profile 2.0
Complete css guide Mobile profile
本文来自：/mobile-web-development-css.html