web标准解决方案

web 标准解决方案篇一：web 标准我总是对每一个想学 CSS 的朋友说: “学 CSS 真的很简单，一个星期就搞定。 ” 但真的这么简单吗？魔方也很简单，拿到手里就知道怎么玩了，但最高境界却不是几天或几个月就能修成的，甚至根本就不可能达到，永远需要提高，看似痛苦，同时也享受升华的乐趣，CSS 也一样，痛并快乐指的就是这些东西吧。 本文里面收集一些有关 CSS 的技巧、教程、工具和观点等，其中一些你也许早就运用的炉火纯青，也可能有的你听都没听说过。不管是新手还是高手，大家都继续学习吧。 一，Web 标准 要玩游戏，就得先了解规则。要学 CSS，就应该先了解一下 Web 标准。尽管看上去不是必须的(我在学 CSS 之前，根本不知道也不想知道 Web 标准是个啥玩意儿)。应该说，你是否学 Web 标准，跟你是否能学会 CSS 没有什么关系，但跟你能写出什么样的 CSS，以及 Xhtml 或其它代码，跟你能做出什么质量的网页有很大的关系。 其实我自己对 Web 标准也不甚了解，尽管我看过不少关于 Web 标准的文章和书。(我总是这样，对学术性的概念名词永远都似懂非懂的)，所以每次谈到 Web 标准，我头里就会有一堆问号: Web 标准真的有利于吗？ Web 标准的动机难道就是SEO? 出于 SEO 动机的 Web 标准是否会失去一些 Web 标准真正的本质? ? 如何才算符合 Web 标准? 仅仅是通过 W3C 的代码验证，你就觉得自己符合 Web 标准了 ? ?Web 标准是为了提升用户体验，而一个对用户友好的网站其代码应该写得非常简洁实用，而一个使用简洁实用代码的网站是有利于 SEO 的。这个逻辑似乎合情合理，但在实际运用中却又总有这样那样的冲突? ? ? 我们应该把 Web 标准看成一份”道德约束”还是”法律强制”呢? 我个人比较乐意看成前者，努力靠拢就好了，但没必要为了标准而标准，自己为难自己。 你已经花了 50%的时间完成了一个项目的 90%，如果余下的 10%又需要你花 50%的时间去弄，是否值得? 尤其是这种情况发生在: 你的 90%已可以让用户在各个浏览器下正可常浏览，而那 10%仅仅是为了通过 W3C 代码验证。这时候你或许该考虑下，你千辛万苦的通过 W3C 验证是为了符 合Web 标准还是为了满足自己小小的虚荣心? ? 特喜欢跟别人争论”DIV+CSS”的说法是错误的，应该是”XHTML+CSS” ，你有没有做过类似这样的事儿? 还打心里为自己科学家般严谨的态度而感到自豪。 但事实上，叫”DIV+CSS”的人，没有哪个傻到整个页面的元素都使用DIV。这就像当你说”吃饭”时，你也不光是吃白花花的大米。 ? 呃，本来只是想随便写点文章引语，闲扯太多了，还是看看下面这些有关 Web 标准的东西吧，有助于你了解这个东西。 一些有 Web 标准的文章 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 什么是 Web 标准?对 Web 标准的理解 | CSS 森林 ) |Web 标准和网站重构 (PDF 文档) Web 标准要求一览表， 验证 HTML，CSS 及 RSS 源的 14 个免费工具这篇译文里介绍了 14 个工具可以方便的验证你的 CSS以及 HTML 和 RSS 源。你别看我上面说了一堆看似反验证的话，其实我也挺在乎这个东西的，我也每次都玩验证，只是当碰到很难解决无关痛痒的东西时，我不会为难自己。我只是想告诉你，别对自己太苛求了，别让自己太累。 二， CSS 布局和定位 我不是什么 Web 前端观察家，我个人发现的两个可能并不正确的网页布局趋势是: 两栏和水平条。 说两栏是趋势似乎有点唬烂，两栏本身就是最基本最常用的布局，但之所以成为更加流行的网页设计趋 势得益于 Web 的流行，你很少会看到一个 Web 网站把自己做成门户般的杂志型布局，大家都力求简洁。当然，在国内，还是有很大一部份个人站长和企业喜欢把自己的网站挤得密密麻 麻，Magazine 的非常厉害。这恐怕也不能说谁前卫谁落后，好的 Magazine 布局确实能让人产生一个感觉或错觉: 这个网站很专业，做的很大，很优。我个人是希望简洁两栏真的能成为趋势，每次进入门户型布局的非门户级网站时，就感觉自己掉进了一堆链接的海洋里。 水平条成为趋势则源于宽屏浏览器的普及，它能让你的网页不管在各种宽屏分辨率下显得协调美观。比如帕兰映像的网页主体是 960 像素固定宽度，我的电 脑分辨率是1440*990 像素，如果没有水平条，总感觉网页太空，尽管留白也是一种设计技巧，但并不是这样的留白。尽管还有另一种解决方案是自适应宽 度，但我个人觉得，对于大多数网站来说，自适应宽度并不是一个好方法，它解决了宽度的问题，却又让网页产生了很大其它破坏视觉的问题。 还是让我们看一些关于 CSS 布局的技巧吧。 15 款网格布局生成器 网格布局的页面能给人简洁明快、层次分明的感觉。之前帕兰映像里面也介绍过一些网格布局相关的文章: 探索极简派设计/Minimalist Design，32 个网格布局的网页设计欣赏和 960 网格系统等。如果你也想制作一个网格布局，可以看看这些在线生成器。 9 个永不过时的 CSS 3 栏布局技巧 我喜欢 3 栏布局的网页设计，尽管时下正火的似乎很少采用 3 栏布局。但没关系，我们是非非非主流。 但是 3栏布局相对来说就比较复杂，有些难以控制，Noupe 发表一篇文章，收集了 9 个号称永不过时的三栏布局设计技巧(9 Timeless 3 Column Layout Techniques)。 五种方法让 CSS 实现垂直居中 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。本文里介绍了使对象垂直集中的 5 种不同方法，以及它们各自的优缺点。 CSS 布局口诀 网络上有朋友把 CSS BUG 编成了顺口溜了！是否有效不好说，但至少是蛮有趣的。 使用 CSS 创建三列固定布局结构 讲解如何通过设计一个 HTML/CSS 的基本结构，来创造一个简单且常用的三列式固定页面布局。 使用 CSS 完美实现垂直居中的方法 使用 XHTML+CSS 来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题，作为网页设计师或前端开发工程师，这个垂直居中问题也是 必须掌 握的技巧之一，一些互联网公司面试题中也会出现这类题目。本文分享一个由 aka Yuh?发明完美通过 CSS 实现垂直居中的方法。 渐进增强式布局探讨（上） 、 （下）经典得一塌糊涂的表格布局，在渐进增强面前落花流水表格布局要求书写 HTML 代码时，首先考虑布局，而不是内容。不啰嗦，直接枪毙。 CSS 布局大全 这份列表收集一些比较优秀的 CSS 布局，这些布局都免费供个人和商业使用。当然，你使用之前还是得看版权说明，也许会发生许可协议变更。 Layout Gala- 这个网站收集了 40 多个专业的 CSS 布局，每个布局都通过了 CSS和 HTML 验证，且不需要 Hack，兼容各大主流浏览器。 43 个 PSD 转 xHTML+CSS 网页布局及导航教程 推荐 43 个实例 xHTML+CSS(DIV+CSS)网页及导航布局教程，在国外也可以叫做 PSD2XHTML。如果你是以为网 页设计师，可能会对将自己的效果图实现成语义化的 xHTML页面感到头痛，还有一些 CSS 初学者对于 xHTML+CSS 处于懵懂状态，希望大家通过这 43 个”DIV+CSS”实例教程学习到语义化 xHTML+CSS 布局的精髓，即使你已经成为高手，我也相信其中有你值得学习的地方。 CSS Position 这篇文章详细介绍了 CSS 定位属性 Position 的各个值的用法，和一些实例说明，以及相关的绝对定位布局和清除浮动列等 CSS 技巧。 详解 css 定位与定位应用 定位一直是 WEB 标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。 跨浏览器的 CSS 固定定位position:fixed 使用 Position:fixed 属性可以实现固定元素于窗口某位置，比如帕兰映像的头部工具栏和底部工具栏就是使用这种效果, 但 IE6 并不支持这个属性，帕兰映像里使用的方法是利用 IE 的条件注释让 IE6 下非固定，显示不同样式。如果你想实现高度统一，可以看看这篇文章教你如何实现。 32 个网格布局的网页设计欣赏 篇二：WEB 应用扫描平台解决方案WEB 应用安全扫描平台解决方案 1 安全背景与现状 在国内，据国家计算机网络应急技术处理协调中心的统计数据显示，XX 年上半年中国的互联网安全状况仍不容乐观，各种网络安全事件与去年同期相比都有明显增加、被植入木马的主机数量大幅攀升。攻击者的目标明确、趋利化特点明显，针对不同网站所采用的攻击手段不同，对于政府类或安全管理相关网站，攻击者主要采用篡改网页、放置恶意代码等攻击形式，干扰正常业务的开展（如利用网络钓鱼和网址嫁接等对金融机构、网上交易等站点进行网络仿冒） 、蓄意破坏政府或企业形象，严重的导致网站被迫停止服务。 Internet 发展到今天，基于 WEB 和数据库架构的应用系统已经逐渐成为主流，广泛应用于企业内部和外部的业务系统中。在网络高速公路不断拓展、电子政务、电子商务和各种基于 WEB 应用的业务模式不断成熟的今天，却有报道称全球电子商务的发展正在下滑。究其原因，根源在于近两年关于网络钓鱼、SQL 注入、木马和跨站脚本等攻击事件带来的严重后果，影响了人们对 WEB 应用的信心。根据 Gartner 的报告，目前网络中常见的攻击已经由传统的系统漏洞攻击逐渐发展演变为对应用自身弱点的攻击，其中最常见的攻击技术就是针对 WEB 应用的 SQL 注入和跨站攻击。 中国移动通信集团公司某省公司作为某省最大的综合信息运营商，某省移动不仅为客户提供语音业务、短信业务、手机银行、手机证券、移动传真、虚拟专网、自由呼、秘书服务、手机上网、移动 QQ、IP 电话等业务，与大众生活息息相关，被各个行业、各类用户所广泛使用，并且随着时间的推移，用户对服务的依赖性越来越强。而且随着3G 的推出，向社会推出更多贴身的服务。 2 安全需求分析 移动公司从市场营销、渠道管理、业务受理、业务开通、帐务结算、经营分析、故障申告、综合查询等各个环节均需要相应的业务系统给予支撑，比如：营业系统、CBOSS 系统、BBOSS 系统、终端管理系统、统一开通系统、结算系统等，而所有这些业务支撑系统均采用 B/S 架构设计。B/S 架构的应用一方面企业 客户带来了便利，另一方面使得企业所面临的风险在不断增加，比如网上营业厅、用户通过互联网就可以查询可在在某省移动内部系统的相关数据、订购某省移动不断推出的新业务。但是，通过互联网直接访问的运营模式，对某省移动内部系统的安全将是极大的挑战，主要表现为：一是随着 WEB 应用程序的增多，这些 WEB 应用程序所带来的安全漏洞越来越多；二是随着互联网技术的发展，被用户进行攻击的黑客工具越来越多，黑客活动越来越猖獗。 3 方案设计依据 ? ISO/IEC 17799 ? BS7799 ? ISO13335 ? ISO27001 ? GB178591999 计算机信息系统安全保护等级划分准则 ? 信息安全等级保护管理办法 ? 互联网安全保护技术措施规范 （公安部令第 82号） ? OWASP 组织相关建议标准 ? GAO/AIMD-00-33信息安全风险评估 ? ISO15408（CC） ? GB/T17859 4 解决方案介绍 采用明鉴 WEB 应用弱点扫描器建设某省移动的应用安全扫描平台。 安全扫描技术是重要的信息安全技术，与防火墙、入侵检测系统、WEB 应用防火墙互相配合，能够有效提高网络及应用的安全性。如果说防火墙、网络监控系统是被动的防御手段，那么安全扫描技术就是一种主动的防范措施，可以有效避免黑客攻击行为，做到防患于未燃。 我们认为无论是 WEB 应用的开发人员，还是维护管理人员，由于其缺乏安全经验、安全知识，WEB 应用的开发与维护过程中难免存在着这样、或那样的安全隐患。如何有效地防范安全事件的发生，其中最积极、有效的方法就是：主 动防御。即对 WEB 应用进行全面、综合的风险评估，在此基础上实施有针对性的安全加固。同时考虑到业务发展的持续性、创新性，WEB 应用的内容及功能等等不断的变化，这些变化势必引起相应的 WEB 应用程序的更新、网络环境的调整，因此，有必要建设一个 WEB 应用弱点扫描平台，将 WEB 应用弱点扫描、风险评估纳入日常工作流程，定期检查 WEB 应用本身的安全性和网页上链接的可靠性。发现风险应立即采取防范措施，减少因 WEB 应用风险给某省移动带来的有形资产、无形资产的损失。5 客户收益 基于国内领先的 WEB 应用弱点扫描软件，帮助某省移动业务系统安全管理员全面认识各个业务系统存在的应用安全风险，最大限度地保证某省移动业务系统的应用安全性，从而确保各项业务的可持续性，提升企业形象。 同时，通过 WEB 应用安全基础、WEB 应用攻击技术（SQL 注入攻击、跨站攻击、自动化攻击） 、核心防御技术、漏洞发现、常见漏洞分析、服务器攻击详解等方面的技能培训，使得业务系统源代码的安全性大大提升、维护人员的安全意识及安全防范能力迈进了一步，从技术和管理两个层面为某省移动应用安全保驾护航。 篇三：WEB 前端开发必备之浏览器兼容性处理方法大全浏览器兼容性处理方法大全 1、居中问题 div 里的内容，IE 默认为居中，而 FF 默认为左对齐，可以尝试增加代码 margin: 0 auto; 2、高度问题 两上下排列或嵌套的 div，上面的 div 设置高度(height)，如果 div 里的实际内容大于所设高度，在 FF 中会出现两个 div 重叠的现象；但在 IE 中，下面的 div 会自动给上面的 div 让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;但当这个 div 里面一级的元素都 float 了的时候，则需要在 div 块的最后，闭和前加一个沉底的空 div，对应 CSS 是：.float_bottom clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden; 3、clear:both; 不想受到 float 浮动的，就在 div 中写入clear:both; 4、IE 浮动 margin 产生的双倍距离 #box float:left; width:100px; margin:0 0 0 100px; /这种情况之下 IE 会产生200px 的距离 display:inline; /使浮动忽略 5、padding 问题 FF 设置 padding 后，div 会增加 height 和 width，但 IE 不会（* 标准的 定义 dtd 好像一致了）高度控制恰当，或尝试使用 height:100%;宽度减少使用 padding 但根据实际经验，一般 FF 和 IE 的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div 写全 width 和 padding，width 用实际想要的宽减去 padding 定义。 6、div 嵌套时 y 轴上 padding 和 marign 的问题FF 里 y 轴上子 div 到父 div 的距离为父 padding + 子 marign IE 里 y 轴上子 div 到父 div 的距离为父 padding 和子 marign 里大的一个 FF 里 y 轴上父 padding=0 且 border=0 时，子 div 到父 div 的距离为 0，子 marign 作用到父 div 外面 7、padding，marign，height，width 的傻瓜式解决技巧 注意是技巧，不是方法： 写好标准头 “xhtml1/DTD/” 高尽量用 padding，慎用 margin，height 尽量补上100%，父级 height 有定值子级 height 不用 100%，子级全为浮动时底部补个空 clear:both 的 div 宽尽量用 margin，慎用 padding，width 算准实际要的减去 padding 8、列表类 1. ul 标签在 FF 中默认是有 padding 值的，而在 IE中只有 margin 有值 先定义 ul margin:0;padding:0; 2. ul 和 ol 列表缩进问题消除 ul、ol 等列表的缩进时，样式应写成: list-style:none;margin:0px;padding:0px; 9、显示类（display:block,inline） 1. display:block,inline 两个元素 display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的的效果 display:table; /for FF,模拟 table 的效果 display:block 块元素，元素的特点是： 总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的 100%，除非设定一个宽度 ， ， ， ，和是块元素的例子 display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。， ， ， ， ，和是 inline 元素的例子2.鼠标手指状显示 全部用标准的写法 cursor: pointer; 10、背景、图片类 1. background 显示问题 全部注意补齐 width，height 属性 2.背景透明问题 IE: filter: progid: (style=0,opacity=60); IE: filter: alpha(opacity=10); FF: opacity:; FF: -moz-opacity:; 最好两个都写，并将 opacity 属性放在下面 11、min-height 最小高度的实现（兼容IE6、IE7、FF） 作用是：当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或 UI 设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。 #mrjin background:#ccc; min-height:100px; height:auto !important; height:100px; overflow:visible; 12、著名的 Meyer Reset（重置） html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td margin: 0; padding: 0;border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; :focus outline: 0; body line-h