WEB前端开发

IE下如果包含锚点并且包含Flash元素title会被追加锚点的问题

练习 — Mon, 26 Mar 2012 09:53:01 +0000

在IE下，如果页面的URL包含锚点（#abc），并且页面包含Flash元素（现在大多数页面都会有）。

当Flash加载的时候，会把页面的title（document.title）给改变，变成 “原title#锚点”。如果有多个Flash就会变成“原title#锚点#锚点#锚点#锚点”。

找了半天解决办法，需要在每次Flash加载后都重设title，这个肯定不行，页面那么多元素，不能挨个控制。

同事提供了解决方法：

var originalTitle = document.title.split("#")[0];
document.attachEvent('onpropertychange', function (evt) {
evt = evt || window.event;
if(evt.propertyName === 'title' && document.title !== originalTitle) {
setTimeout(function () {
document.title = originalTitle;
}, 1);
}
})

但是这样有个问题，就是以后修改不了页面title了，因为每次修改都会被重置。

function changeTitle(newTitle)
{
originalTitle = newTitle;
document.title = newtitle;
}

当inline-block和text-indent遇到IE6,IE7

练习 — Wed, 21 Mar 2012 03:59:21 +0000

在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如：

Button

css我习惯写成这样

.btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-image:url(img.jpg);}

在标准浏览器下是没问题的，但是在IE6和7下会触发A标签消失的bug。

解决方法1：

display:inline-block;

改为

display:block;

然后再做布局处理。

解决方法2：

text-indent:-9999px;

改为

font-size:0; line-height:0;

或者各种可以隐藏掉内容元素的方法。

解决方法3：

Button

在按钮前面增加任何元素，都可以让消失的按钮重新出现。

解决方法4：
给元素加 position:absolute;

PS：inline或inline-block元素设置text-indent在IE6/IE7中显示不正常的bug致使text-indent会传递到父及元素，也就出现了上文中的结果。

造成这种情况的原因应该是IE6/IE7并没有真正实现inline-block,而是通过设置display:inline-block触发了IE的layout,从而使内联元素拥有了inline-block属性的表症。

考察元素的默认样式，可知：input、select、button、textarea的默认display皆为inline-block,所以在布局时应加以注意…

A Simple Scene Animated with CSS3

练习 — Fri, 09 Dec 2011 03:15:23 +0000

A Simple Scene Animated with CSS3 (requires Chrome, Safari, Firefox 5+, or IE10 PP3)

Use the button above to start and reset the animation.
Use the tabs at top right to view the code for each element of the animation. No images, no JavaScript. The only JavaScript on this page is for the button that starts and resets the animation, and for the tabs.
This demo was created for this article on Smashing Magazine.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS3 Keyframe Animation Demo</title> <style> 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,font,img,ins,kbd,q,s,samp, small,strike,sub,sup,tt,var, dd,dl,dt,li,ol,ul, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; text-align: left; } table { border-collapse: collapse; border-spacing: 0; } ol,ul { list-style: none; } q:before,q:after, blockquote:before,blockquote:after { content: ""; } #container { width: 1080px; margin: 0 auto; overflow: hidden; padding: 50px 20px 0 20px; } h1 { font-size: 30px; padding: 0 0 20px 0; } h1 span { font-size: 18px; } #left { overflow: hidden; float: left; } #left p { width: 470px; padding: 20px 0 0 0; font-family: Arial, Helvetica, sans-serif; } #sky { width: 500px; height: 500px; position: relative; z-index: 1; overflow: hidden; background-color: #525252; } #sky.animate { -webkit-animation-name: sky; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: sky; -moz-animation-duration: 10s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: sky; -ms-animation-duration: 10s; -ms-animation-timing-function: ease; -ms-animation-iteration-count: 1; -ms-animation-direction: normal; -ms-animation-delay: 0; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: sky; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @-webkit-keyframes sky { 0% { background-color: #525252; } 33% { background-color: #6293e5; } 66% { background-color: #6293e5; } 100% { background-color: #525252; } } @-moz-keyframes sky { 0% { background-color: #525252; } 33% { background-color: #6293e5; } 66% { background-color: #6293e5; } 100% { background-color: #525252; } } @-ms-keyframes sky { 0% { background-color: #525252; } 33% { background-color: #6293e5; } 66% { background-color: #6293e5; } 100% { background-color: #525252; } } @keyframes sky { 0% { background-color: #525252; } 33% { background-color: #6293e5; } 66% { background-color: #6293e5; } 100% { background-color: #525252; } } #ground { position: absolute; bottom: 0; left: 0; width: 500px; height: 154px; background: #6c5228; z-index: 4; } #ground.animate { -webkit-animation-name: ground; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: ground; -moz-animation-duration: 10s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: ground; -ms-animation-duration: 10s; -ms-animation-timing-function: ease; -ms-animation-iteration-count: 1; -ms-animation-direction: normal; -ms-animation-delay: 0; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: ground; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @-webkit-keyframes ground { 0% { background: #6c5228; } 33% { background: #48a037; } 66% { background: #48a037; } 100% { background: #6c5228; } } @-moz-keyframes ground { 0% { background: #6c5228; } 33% { background: #48a037; } 66% { background: #48a037; } 100% { background: #6c5228; } } @-ms-keyframes ground { 0% { background: #6c5228; } 33% { background: #48a037; } 66% { background: #48a037; } 100% { background: #6c5228; } } @keyframes ground { 0% { background: #6c5228; } 33% { background: #48a037; } 66% { background: #48a037; } 100% { background: #6c5228; } } #sun { background: #ffd630; width: 130px; height: 130px; position: absolute; border-radius: 70px; z-index: 2; bottom: 0; left: 340px; } #sun.animate { -webkit-animation-name: sunrise; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: sunrise; -moz-animation-duration: 10s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: sunrise; -ms-animation-duration: 10s; -ms-animation-timing-function: ease; -ms-animation-iteration-count: 1; -ms-animation-direction: normal; -ms-animation-delay: 0; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: sunrise; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @-webkit-keyframes sunrise { 0% { bottom: 0; left: 340px; background: #f00; } 33% { bottom: 340px; left: 340px; background: #ffd630; } 66% { bottom: 340px; left: 40px; background: #ffd630; } 100% { bottom: 0; left: 40px; background: #f00; } } @-moz-keyframes sunrise { 0% { bottom: 0; left: 340px; background: #f00; } 33% { bottom: 340px; left: 340px; background: #ffd630; } 66% { bottom: 340px; left: 40px; background: #ffd630; } 100% { bottom: 0; left: 40px; background: #f00; } } @-ms-keyframes sunrise { 0% { bottom: 0; left: 340px; background: #f00; } 33% { bottom: 340px; left: 340px; background: #ffd630; } 66% { bottom: 340px; left: 40px; background: #ffd630; } 100% { bottom: 0; left: 40px; background: #f00; } } @keyframes sunrise { 0% { bottom: 0; left: 340px; background: #f00; } 33% { bottom: 340px; left: 340px; background: #ffd630; } 66% { bottom: 340px; left: 40px; background: #ffd630; } 100% { bottom: 0; left: 40px; background: #f00; } } #cloud { position: relative; top: 50px; left: -100px; opacity: 0; z-index: 3; } #cloud.animate { -webkit-animation-name: cloud; -webkit-animation-duration: 12s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: cloud; -moz-animation-duration: 12s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: cloud; -ms-animation-duration: 12s; -ms-animation-timing-function: ease; -ms-animation-iteration-count: 1; -ms-animation-direction: normal; -ms-animation-delay: 0; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: cloud; animation-duration: 12s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @-webkit-keyframes cloud { 0% { opacity: 0; left: -100px; } 50% { opacity: 1; left: 60px; } 75% { opacity: 1; left: 100px; } 100% { opacity: 0; left: 500px; } } @-moz-keyframes cloud { 0% { opacity: 0; left: -100px; } 50% { opacity: 1; left: 60px; } 75% { opacity: 1; left: 100px; } 100% { opacity: 0; left: 500px; } } @-ms-keyframes cloud { 0% { opacity: 0; left: -100px; } 50% { opacity: 1; left: 60px; } 75% { opacity: 1; left: 100px; } 100% { opacity: 0; left: 500px; } } @keyframes cloud { 0% { opacity: 0; left: -100px; } 50% { opacity: 1; left: 60px; } 75% { opacity: 1; left: 100px; } 100% { opacity: 0; left: 500px; } } .cloud { border-radius: 90px / 30px; width: 160px; height: 50px; background: #fff; position: absolute; top: 10px; } .cloud-2 { left: 50px; top: 0; } .cloud-3 { left: 110px; top: 20px; } #moon { position: relative; opacity: 0; top: 50px; left: -100px; } #moon.animate { -webkit-animation-name: moon; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: moon; -moz-animation-duration: 10s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: moon; -ms-animation-duration: 10s; -ms-animation-timing-function: ease; -ms-animation-iteration-count: 1; -ms-animation-direction: normal; -ms-animation-delay: 0; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: moon; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @-webkit-keyframes moon { 0% { opacity: 0; left: -100px; } 50% { opacity: 0; left: -100px; } 90% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 50px; } } @-moz-keyframes moon { 0% { opacity: 0; left: -100px; } 50% { opacity: 0; left: -100px; } 90% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 50px; } } @-ms-keyframes moon { 0% { opacity: 0; left: -100px; } 50% { opacity: 0; left: -100px; } 90% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 50px; } } @keyframes moon { 0% { opacity: 0; left: -100px; } 50% { opacity: 0; left: -100px; } 90% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 50px; } } .moon { width: 100px; height: 100px; border-radius: 50px; background: #fff; position: absolute; } .moon-2 { background: #525252; position: absolute; top: -20px; left: 20px; } #code { float: left; margin: 0 0 0 20px; width: 494px; } ul.headers { overflow: hidden; } ul.headers li { float: left; width: 85px; border: dashed 1px #ccc; margin: 0 4px; } ul.headers li a { display: block; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; padding: 10px; } ul.headers li a:hover, ul.headers li a:active { background: #ccc; color: #fff; } #tab_content { border: #ccc 1px dashed; margin: 20px 0 20px 3px; padding: 0 0 20px 10px; width: 456px; } div.tab { font-family: Arial, Helvetica, sans-serif; margin: 30px 0 0 10px; } div.tab pre { font-family: "Courier New", Courier, monospace; font-size: 13px; } input[type="button"] { margin: 20px 0 0 165px; padding: 5px; } </style> </head> <body style="width: 98%;"> <div id="container"> <h1>A Simple Scene Animated with CSS3 <span>(requires Chrome, Safari, Firefox 5+, or IE10 PP3)</span></h1> <div id="left"> <div id="sky" class="target"> <div id="cloud" class="target"> <div class="cloud cloud-1"></div> <div class="cloud cloud-2"></div> <div class="cloud cloud-3"></div> </div> <div id="sun" class="target"></div> <div id="moon" class="target"> <div class="moon"> </div> <div class="moon moon-2"> </div> </div> <div id="ground" class="target"></div> </div> <input type="button" value="ANIMATE THE SCENE" id="startbutton"> <p><strong>Use the button above to start and reset the animation.</strong></p> <p>Use the tabs at top right to view the code for each element of the animation. No images, no JavaScript. The only JavaScript on this page is for the button that starts and resets the animation, and for the tabs.</p> <p>This demo was created for <a href="http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/">this article</a> on Smashing Magazine.</p> </div> <div id="code"> <div id="sidebar_tabs"> <ul class="headers"> <li><a href="#" class="tablink">Sun</a></li> <li><a href="#" class="tablink">Sky</a></li> <li><a href="#" class="tablink">Ground</a></li> <li><a href="#" class="tablink">Cloud</a></li> <li><a href="#" class="tablink">Moon</a></li> </ul> <div id="tab_content"> <div class="tab tab1"> <pre> #sun.animate { animation-name: sunrise; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @keyframes sunrise { 0% { bottom: 0; left: 340px; background: #f00; } 33% { bottom: 340px; left: 340px; background: #ffd630; } 66% { bottom: 340px; left: 40px; background: #ffd630; } 100% { bottom: 0; left: 40px; background: #f00; } } </pre> </div> <div class="tab tab2"> <pre> #sky.animate { animation-name: sky; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @keyframes sky { 0% { background-color: #525252; } 33% { background-color: #6293e5; } 66% { background-color: #6293e5; } 100% { background-color: #525252; } } </pre> </div> <div class="tab tab3"> <pre> #ground.animate { animation-name: ground; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @keyframes ground { 0% { background: #6c5228; } 33% { background: #48a037; } 66% { background: #48a037; } 100% { background: #6c5228; } } </pre> </div> <div class="tab tab4"> <pre> #cloud.animate { animation-name: cloud; animation-duration: 12s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @keyframes cloud { 0% { opacity: 0; left: -100px; } 50% { opacity: 1; } 75% { opacity: 1; left: 100px; } 100% { opacity: 0; left: 500px; } } </pre> </div> <div class="tab tab5"> <pre> #moon.animate { animation-name: moon; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @keyframes moon { 0% { opacity: 0; left: -100px; } 50% { opacity: 0; left: -100px; } 90% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 50px; } }</pre> </div> </div> </div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script> $(function () { var s = null, AnimationSpace = { settings: { tabHeaders: null, tabSections: null, currentIndex: null, speed: 800, collection: null, i: null, j: null, startButton: $("#startbutton") }, init: function () { s = this.settings; s.tabSections = $("div.tab"); $(s.tabSections[0]).slideDown(s.speed); $(s.tabSections[1]).slideUp(s.speed); $(s.tabSections[2]).slideUp(s.speed); $(s.tabSections[3]).slideUp(s.speed); $(s.tabSections[4]).slideUp(s.speed); this.getClickedTab(); this.startAnimation(); }, getClickedTab: function () { s = this.settings; s.tabHeaders = $("#sidebar_tabs ul.headers a"); s.collection = $("#tab_content div.tab"); $(s.tabHeaders).click(function () { s.currentIndex = $(this).parent().index(); for (s.i = 0, s.j = s.collection.length; s.i < s.j; s.i += 1) { if (s.i !== s.currentIndex) { $(s.tabSections[s.i]).slideUp(s.speed); } else { $(s.tabSections[s.i]).slideDown(s.speed); } } return false; }); }, startAnimation: function () { s = this.settings; s.startButton.click(function() { $("div.target").toggleClass("animate"); if (s.startButton.attr("value") === "ANIMATE THE SCENE") { s.startButton.attr("value", "RESET THE ANIMATION"); } else { s.startButton.attr("value", "ANIMATE THE SCENE"); } }); } }; AnimationSpace.init(); }); </script> </body> </html>

提示：您可以先修改部分代码再运行

高薪招人了 Java工程师架构师 WEB开发搜索

练习 — Thu, 03 Nov 2011 14:06:24 +0000

北京搜狐为了构建一个重要互联网产品, 打造一支精英化队伍, 特招聘有理想有抱负的同学, 来实现我们共同的理想!

具体邮件联系 299564@sohu.com

目前正在招聘 Java工程师, 架构师, 搜索工程师, 开放平台工程师 , JS前端开发工程师, WEB页面制作工程师

以下要求仅供参考!
__________________________________________________

· Java WEB开发工程师

岗位职责：
1. 负责相关产品的设计开发维护工作, 实现高效稳定的应用
2. 能够根据产品需求，设计产品数据模型, 工作流程, 并实现
3. 与产品、前台开发人员保持良好沟通，能快速理解、消化各方需求；
4. 系统的相关发布, 维护等

任职资格：
1. 用心工作, 有责任心, 对事情有自己的思考
2. 大学本科学历以上，有2年以上Java开发经验, 对Java熟练掌握
3. 良好的编码习惯，较强的沟通、协调、理解能力和良好的责任心和团队合作能力；
4. 熟悉各种开发技术, 例如Spring, Struts2等, 并了解其原理.
5. 熟悉各种数据库, 如Oracle, Mysql的常用SQL
6. 了解各种大型互联网产品的设计, 架构, 对大数据量应用有一定经验
7. 对产品, 用户体验等有一定的理解

———————————————–

· Java 运维开发工程师

工作经验： 2年以上
职位月薪：面议
工作性质：全职

1. 熟练使用linux操作系统: 系统管理（负载性能监控）, 日志分析处理, 熟悉脚本编写
2. 2年以上JAVA WEB项目开发经验
3. 熟练使用RESIN，对RESIN和JVM配置有深刻了解
4. 熟练使用项目部署相关软件（MAVEN，SVN，ANT等）
5. 熟悉mysql，oracle等常用数据库的管理
6. 用心工作, 有责任心, 对事情有自己的思考
7. 与产品、前后台开发人员保持良好沟通

————————————————–

· Java架构工程师

工作经验： 2年以上(初级), 4年以上(高级)
职位月薪：面议
工作性质：全职

岗位职责：
1. 负责大型系统或产品的架构设计, 基础类库设计等
2. 负责相关产品的设计开发工作, 实现高效稳定的应用
3. 能够根据产品需求，设计产品数据模型, 工作流程, 并实现
4. 与产品、前台开发人员保持良好沟通，能快速理解、消化各方需求；

任职资格：
1. 熟悉大型互联网产品的设计, 架构, 对大数据量应用有一定经验
2. 用心工作, 有责任心, 对事情有自己独特的思考
3. 大学本科学历以上，有2年以上Java开发经验, 对Java熟练掌握
4. 熟悉各种开发技术, 例如Spring, Struts2等, 并了解其原理.
5. 熟悉各种数据库, 如Oracle, Mysql的常用SQL
6. 对产品, 用户体验等有一定的理解

__________________________________________________

· Java搜索架构工程师

工作经验： 2年以上(初级), 4年以上(高级)
职位月薪：面议
工作性质：全职

岗位职责：
1. 负责大型系统或产品的搜索架构设计
2. 负责相关搜索产品的设计开发工作, 实现高效稳定的应用
3. 能够根据产品需求，设计产品数据模型, 工作流程, 并实现
4. 与产品、前台开发人员保持良好沟通，能快速理解、消化各方需求；

任职资格：
1. 熟悉大型互联网内容搜索产品的设计, 架构, 对大数据量搜索应用有一定经验
2. 用心工作, 有责任心, 对事情有自己独特的思考
3. 大学本科学历以上，有2年以上Java开发经验, 对Java熟练掌握
4. 熟悉各种搜索开发技术, 例如lucene, sphinx等, 对分布式搜索有一定经验
5. 熟悉各种数据库的基本应用
6. 对产品, 用户体验等有一定的理解

__________________________________________________

· Java开放平台工程师

工作经验： 4年以上(高级)
职位月薪：面议
工作性质：全职

岗位职责：
1. 负责大型系统或产品的架构设计, 基础类库设计等
2. 负责相关开放平台产品的设计开发工作, 实现高效稳定的应用
3. 能够根据产品需求，设计产品数据模型, 工作流程, 并实现
4. 与产品、前台开发人员保持良好沟通，能快速理解、消化各方需求；

任职资格：
1. 熟悉大型互联网产品的开放平台设计, 架构, 对大数据量接入应用有一定经验
2. 熟悉各种服务接入技术, 如Web Service, Rest 以及相应的路由/负载均衡/监测技术
3. 大学本科学历以上，有4年以上Java开发经验, 对Java熟练掌握
4. 熟悉各种开发技术, 例如Spring, Struts2等, 并了解其原理.
5. 用心工作, 有责任心, 对事情有自己独特的思考
6. 对产品, 用户体验等有一定的理解

———————————————–

· JS前端开发工程师

招聘人数： 5
学历要求：本科
工作经验： 2年以上
职位月薪：面议
工作性质：全职

岗位职责：
1. 负责搜狐相关产品的前端开发工作，使用Javascript实现高性能的交互效果；
2. 能够根据产品需求，熟练运用(x)HTML,CSS产出兼容于目前主流浏览器的前端页面；
3. 负责相关产品的需求以及前端程序的实现，提供合理的前端架构；
4. 与产品、后台开发人员保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作；
5. 了解服务器端的相关工作，在交互体验、产品设计等方面有自己的见解。

任职资格：
1. 大学本科学历以上，有2年以上web前端开发经验；
2. 熟悉各种Web前端技术（XHTML/XML/CSS/Javascript/Ajax等），精通XHTML/CSS/Javascript；
3. 对Javascript面向对象编程具有深入的了解；至少熟悉目前主流的Javascript库中的一种，如：Jquery,mootools,prototype等；
4. 熟悉W3C标准和各主流浏览器在前端开发中的差异，能熟练运用(x)HTML、CSS，提供针对不同浏览器的前端页面解决方案；
5. 对用户体验，交互设计等有深入的理解；对前端页面代码结构及前端交互性能有深入的理解；
6. 良好的编码习惯，较强的沟通、协调、理解能力和良好的责任心和团队合作能力；
7. 熟悉Web服务器端编程语言优先考虑（Java/JSP优先）；

———————————————–

· 前端页面制作工程师

招聘人数： 3
学历要求：本科
工作经验： 2年以上
职位月薪：面议
工作性质：全职

岗位职责：
1. 负责搜狐相关产品的前端页面制作工作，使用Div+css方式制作高效简介的页面；
2. 能够根据产品需求，熟练运用(x)HTML,CSS产出兼容于目前主流浏览器的前端页面；
3. 负责相关产品的需求以及前端程序的实现，提供合理的前端架构；
4. 与产品, JS开发,后台开发人员保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作；
5. 了解服务器端的相关工作，在交互体验、产品设计等方面有自己的见解。

任职资格：
1. 大学本科学历以上，有2年以上web前端开发经验；
2. 熟悉各种Web前端技术（XHTML/XML/CSS/Javascript/Ajax等），精通XHTML/Html/CSS；
3. 对Javascript面向对象编程具有了解；
4. 熟悉W3C标准和各主流浏览器在前端开发中的差异，能熟练运用(x)HTML、CSS，提供针对不同浏览器的前端页面解决方案；
5. 对用户体验，交互设计等有深入的理解；对前端页面代码结构及前端交互性能有深入的理解；
6. 良好的编码习惯，较强的沟通、协调、理解能力和良好的责任心和团队合作能力；

Aptana Studio3的汉化

练习 — Mon, 31 Oct 2011 01:42:55 +0000

点击 “Help” > “Install New Software”；

在弹出的“install”窗口中的“Work With”的输入框中填上如下网址：

http://archive.eclipse.org/technology/babel/update-site/R0.8.1/helios

然后，点击“add”按钮，正文会出现语言包列表，选择中文简体，接着的大家都知道了，一路“next”，直到“finish”；

“install”窗口关闭后，Aptana 3 会自动下载语言包并安装，安装完毕后，它会提示你重启Aptana，至此，你的Aptana 3 就是可爱的中文版啦。

IE6下相对定位的块在展开收回的结构里滞留原地

练习 — Sat, 15 Oct 2011 02:23:39 +0000

IE6下所有需要展开收回的布局里只要有position，就会造成position的块无法跟随滞留在原地。解决的办法是精确的找到其不动的父容器使其relative，如找不到完全不动的父容器就让body获得。嗯

Firefox 7正式支持 text-overflow: ellipsis终于赶上IE6的脚步

练习 — Sun, 09 Oct 2011 07:15:23 +0000

Summary

The text-overflow CSS property determines whether an ellipsis (“…”) displays when text content has overflowed its given layout area. To force overflow to occur and ellipses to be applied, the author must apply some additional properties on the element. See example below.

Syntax

text-overflow: ellipsis | clip

Values

ellipsis

Display ellipses … (U+2026, …) to represent clipped text.

clip

Default value, clips text.

p {
white-space: nowrap;
width: 100%; /* IE6 needs any width */
overflow: hidden; /* "overflow" value must be different from "visible" */
-o-text-overflow: ellipsis; /* Opera 9-10 */
text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
}

关于IE6下绝对定位元素莫名消失的问题

练习 — Tue, 16 Aug 2011 04:50:39 +0000

这是个很老的bug了，我想一般大家都遇到过，以前我是纯凭经验，让绝对定位的元素不挨着浮动元素就OK了，不过一直没去研究它形成的原因。今天做页面又遇到了这个可爱的BUG，本着一探究竟的心态google了一下。在蓝色理想发现了这样的几条解释：

1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时，以及没有清除浮动时，IE6/7，FF中显示一致；

2.当绝对定位层的邻近浮动层的宽度不等于父层宽度时，有清除浮动时，IE6/7不显示绝对定位层，FF显示；

3.当绝对定位层的邻近浮动层的宽度等于父层宽度时，以及没有清除浮动时，IE6不显示绝对定位层，IE7/FF显示；

4.当绝对定位层的邻近浮动层的宽度等于父层宽度时，有清除浮动时，IE6/7不显示绝对定位层，FF显示；

就目前来说我个人的解决办法有两条，第一取消浮动，第二让绝对定位的元素不要挨着浮动的标签。蓝色上那位哥们提出了另一个办法，就是在绝对定位的层跟浮动层中间插个空的标签。

关于article,section,div,以及figure标签

练习 — Wed, 06 Jul 2011 01:51:27 +0000

写到现在还是不太精于这几个标签的使用,大体上明白div,section,article从语义上由弱到强.看了一下淘宝等几个网站的用法也不尽一样.淘宝貌似把section类似于

来使用了.
我在读到的文档里提过一条 section 应该至少有一个H标题,如果section里没有用到H标题,那么也许这个标签并不适合使用section.而我看到的大部分实例里边,section都是一个布局块而已.

figure的手册说明里是用来整理标签,我看现在大多实例的用法是框缩略图或者标题,另外加上描述.

….求各种指教开导…

[转]不要告诉我你懂margin(标题好嚣张啊)

练习 — Wed, 22 Jun 2011 02:10:04 +0000

你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用 padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？……

写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章，一来是自己工作中的总结，也是对自己知识的一次梳理。

Margin是什么

CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School

边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

Margin的特性

margin始终是透明的。

margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。

外边距的 margin-width 的值类型有：auto | length | percentage

也可以使用简写的外边距属性同时改变所有的外边距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。

并且规范还提供了省略的数值写法，基本如下：

1、如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;

2、如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

4、如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px 20px 30px 40px;

在实际应用中，个人不推荐使用三个值的margin，一是容易记错，二是不容易日后修改，一开始如果写成margin:10px 20px 30px;日后需求改动为上10px，右30px，下30px，左20px，你不得不还是得把这个margin拆开为margin:10px 30px 30px 20px;费力且不讨好，不如一开始就老老实实的写成margin:10px 20px 30px 20px;来的实在，不要为了现在节省俩个字节而让日后再次开发的成本上升。

垂直外边距合并问题

别被上面这个名词给吓倒了，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3Shool CSS外边距合并了解这个基本知识。

实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>垂直外边距合并</title> <style> .top{width:160px; height:50px; background:#ccf;} .middle{width:160px; background:#cfc;} .middle .firstChild{margin-top:20px;} </style> </head> <body> <div class="top"></div> <div class="middle"> <div class="firstChild">我其实只是想和我的父元素隔开点距离。</div> <div class="secondChild"></div> </div> </body> </html>

提示：您可以先修改部分代码再运行

如果按照CSS规范，IE的“良好表现”其实是一个错误的表现，因为IE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。好了，如果你读过了上面W3Shcool的CSS外边距合并的文章后，就很容易讨论这个问题了。这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

一般说来这个问题解释到这里，大多数文章就不会再深入下去了，但作为一名实战开发者，最求的是知其然知其所以然，原本使用margin-top就是为了与父元素隔开距离，而按照你这么一个解法，其实是一种“修复”，为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”，而强制在父元素上使用border-top和padding-top，不舒服，也不容易记住，下次再发生这样的情况还是会忘记这条准则，而且在页面设计稿里如果不需要 border-top加个上边框，这么一加反而画蛇添足，为以后修改留下隐患。

为什么一定要用border-top,padding-top去为了这么一个所谓的标准规范而多写这么一行代码呢？答案你可以参考另外一篇文章用Margin还是用Padding里找到答案。

用Margin还是用Padding

何时应当使用margin：

需要在border外侧添加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：

需要在border内测添加空白时。

空白处需要背景（色）时。

上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

个人认为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

这里我截取了部分另外一篇文章的内容，详细内容请见用Margin还是用Padding

margin在块元素、内联元素中的区别

HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。顾名思义，block元素就是以”块”表现的元素（block-like elements），inline元素即是以”行”表现的元素（character level elements and text strings）。二者表现的主要差别在于，在页面文档中block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。

block元素（块元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进，一些元素将被废除，而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是 block，像table这种display:table的元素也是block元素。

inline元素（内联元素）大致有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON

或许有朋友对非置换元素（non-replaced element）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义：

“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

从定义中我们可以理解到，置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。

margin在块级元素下，他的性能可以完全体现，上下左右任你设定。且记住块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离（但第一个元素相对于父元素margin-top而父元素又没有设定 padding-top/border-top的话要需要印证上面的垂直外边距合并的知识）

margin也能用于内联元素，这是规范所允许的，但是margin-top和margin-bottom对内联元素（对行）的高度没有影响，并且由于边界效果(margin效果)是透明的，他也没有任何的视觉影响。

这是因为边界应用于内联元素时不改变元素的行高度，如果你要改变内联元素的行高即类似文本的行间距，那么你只能使用这三个属性：line- height，fong-size，vertical-align。请记住，这个影响内联元素高度的是line-height而不是height，因为内联元素是一行行的，定一个height的话，那这到底是整段inline元素的高呢？还是inline元素一行的高呢？这都说不准，所以统一都给每行定一个高，只能是line-height了。

margin-top/margin-bottom对内联元素没有多大实际效果，不过margin-left/margin-right还是能够对内联元素产生影响的。应用margin:10px 20px 30px 40px;，左边这个css如果写在inline元素上，他的效果大致是，上下无效果，左边离他相邻元素或者文本距离为40px，右边离他相邻元素或者文本距离为20px。你可以自行尝试一番。

总结下来margin 属性可以应用于几乎所有的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，而且垂直外边距对非置换内联元素（non-replaced inline element）不起作用。

常见的浏览器下margin出现的bug

林林总总写了那么多，最后总结一些浏览器中常见的margin Bug吧，以后遇到margin下的布局问题可以查看这里找到解决的方案，如果你还发现其他关于浏览器下margin的Bug你可以发表留言，核对采纳后我会及时添加进去，感谢你的分享：

IE6中双边距Bug：

发生场合：当给父元素内第一个浮动元素设置margin-left（元素float:left）或margin-right（元素float:right）时margin加倍。

解决方法：是给浮动元素加上display:inline;CSS属性；或者用padding-left代替margin-left。

原理分析：块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”？因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而之后对象是相对第一个对象的，所以之后对象在设置后不会出现问题。为什么display:inline可以解决这个双边距bug，首先是 inline元素或inline-block元素是不存在双边距问题的。然后，float:left等浮动属性可以让inline元素 haslayout，会让inline元素表现得跟inline-block元素的特性一样，支持高宽，垂直margin和padding等，所以div class的所有样式可以用在这个display inline的元素上。

IE6中浮动元素3px间隔Bug：

发生场合：发生在一个元素浮动，然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug。

解决方法：右边元素也一起浮动；或者为右边元素添加IE6 Hack _margin-left:-3px;从而消除3px间距。

原理分析：IE6浏览器缺陷Bug。

IE6/7负margin隐藏Bug：

发生场合：当给一个有hasLayout的父元素内的非hasLayout元素设置负marin时，超出父元素部分不可见。

解决方法：去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;

原理分析：iE6/7独有的hasLayout产生问题。

IE6/7下ul/ol标记消失bug：

发生场合：当ul/ol触发了haslayout并且是在ul/ol上写margin-left，前面默认的ul/ol标记会消失。

解决方法：给li设置margin-left，而不是给ul/ol设置margin-left。

原理分析：IE6/7浏览器Bug

IE6/7下margin与absolute元素重叠bug：

发生场合：双栏自适应布局中，左侧元素absolute绝对定位，右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。

解决方法：把左侧块级元素更改为内联元素，比如把div更换为span。

原理分析：这是由于IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。属于IE6/7浏览器渲染Bug。

IE6/7/8下auto margin居中bug：

发生场合：给block元素设置margin auto无法居中

解决方法：出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决，但根据本人亲测，加 with此种方法是无效的，如果没有Doctype即使给元素添加width也无法让block元素居中。

原理分析：缺少Doctype声明。

IE8下input[button | submit] 设置margin:auto无法居中

发生场合：ie8下，如果给像button这样的标签（如button input[type="button"] input[type="submit"]）设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。

解决方法：可以给为input加上宽度

原理分析：IE8浏览器Bug

IE8百分比padding垂直margin bug：

发生场合：当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin一样。

解决方法：给父元素加一个overflow:hidden/auto。

原理分析：IE8浏览器Bug

原文链接：http://www.hicss.net/do-not-tell-me-you-understand-margin

WEB前端开发

IE下如果包含锚点并且包含Flash元素title会被追加锚点的问题

当inline-block和text-indent遇到IE6,IE7

A Simple Scene Animated with CSS3

高薪招人了 Java工程师 架构师 WEB开发 搜索

Aptana Studio3的汉化

IE6下相对定位的块在展开收回的结构里滞留原地

Firefox 7正式支持 text-overflow: ellipsis终于赶上IE6的脚步

关于IE6下绝对定位元素莫名消失的问题

关于article,section,div,以及figure标签

[转]不要告诉我你懂margin(标题好嚣张啊)

高薪招人了 Java工程师架构师 WEB开发搜索