项目实践总结——招聘官网

＊划重点： position:absolute 和float 会让元素脱离流文档； 将元素的display变成block, 所以没必要同时使用

 最近做阅文招聘官网，遇到一些有关浏览器兼容性的问题。

1）opacity（ie8开始就不支持）。当有这种背景遮罩的时候，我们就可以用一个小的透明的图片来平铺这个遮罩层，即是用图片而不是透明背景色来实现遮罩。同样字体颜色最好取实际的颜色，不要用透明度来调整字体颜色。 

2)一些小icon 使用svg图像的好处是高清，但是ie8以下同样不支持svg，所以ie8以下还是用图片。具体实现办法如下：

关于svg代码压缩和使用方法：先将icon导出成svg格式，得到一串冗长的代码，然后安装压缩工具（https://github.com/svg/svgo），

命令行：svgo -f  ‘原文件夹名字’  -o  ‘ 压缩到的文件夹’，

最后把压缩好的文件（将要导出的svg代码文件拖到：http://www.zhangxinxu.com/sp/base64.html）,就可以得到一串如上面11行代码那样的占位符，就可以直接用了。

3）关于自适应列表的实现方法：

当容器宽度变化时候，每一个li 的宽度也会随之改变。

实例：http://output.jsbin.com/muhoyeyuzi

4）用css3画一些图形的办法和遇到的问题：

 

<div id="grad2"></div>

1   #grad2 {
2     width:200px;
3     height:200px;
4     border-radius:200px;
5     background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);}

当画复杂的图形的时候，里面所有的元素都必须使用绝对定位，并且以一个基线为中线来定位，实例：http://output.jsbin.com/kutoliwomu

 图形不要用div或者img标签来表示。

5)没事不要将position 和z-index 一起用，就利用元素本身的先后顺序来实现层级关系。

6）关于icon和字体对齐：

1 <div class="job-chat-x">
2        <i class="job-chat-icon"></i>
3        <h3 class="job-chatname">阅文招聘公众号</h3>
4 </div>  

 1  .job-chat-x {
 2      height: 20px;
 3      padding: 25px 0;
 4  }
 5  .job-chat-icon{
 6      display: inline-block;
 7      width: 19px; height: 19px;
 8      margin-right: 10px;
 9      background: url(./images/recruit.png) no-repeat;
10      vertical-align: -3px;
11      *vertical-align: 0;
12  }
13  .job-chatname{
14     display: inline;
15     font-size: 16px;
16     font-weight: 300;
17     color: #465C7E;
18 }

通过display:inline-block;属性让元素在一行显示，如果用vertical-align:middle 实现则在ie7 下位置会有几像素的偏移，

vertical-align 是可以设置数值的。所以可以通过设置具体的数字来调整icon的位置，再给ie7打个补丁就可以了。

7）font-weight 可以改变字重，即字体的粗细，默认是normal。粗细为font-weight:200, 300,400 ..只能是整百数。

8）合并图片时两倍图和一倍图分开合并，并且要改动的图片，如二维码不要合并到其它图片里面。

9）text-indent 属性本身是用来缩进文字的，也可以利用它的属性来隐藏文字，因为它可以赋负值，当使用负值时文字会被向左缩进。

10）搜索表单要用form标签,搜索框里面的选择是通过select里面的值来输出的。

        通过给元素本身加active属性来变化而不是给元素另外再加一个classname；

        实例：http://output.jsbin.com/tovikedave

11)当屏幕分辨率太大或者屏幕过大的时候有些图会模糊，所以我们要使用两倍图或者换一张图片尺寸更大的图，如对logo和banner图的处理如下：

<a href="/" class="ywzp-logo">
    <h1>阅文集团招聘官网</h1>
</a>

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
    .ywzp-logo {
      background-size: 100%;
     background-image: url(./images/yw-logo@2x.png?v);
  }
  .ywzp-logo {
      width: 140px;
      height: 100%;
      background: url(./images/yw-logo.png) no-repeat 0 center;
     text-indent: -99em;
     float: left;
     overflow: hidden;
    }

@media screen and (min-width: 1920px){
     .ill-huge{
        background-image: url(./images/hugebig.jpg);
        position: absolute;
    }
｝

12）邮箱链接要用a标签并且带上链接<a href=”hr@yuewen.com“>hr@yuewen.com</a>

13) 像这样的分割线最好写一个，不要用首页｜社会招聘 这种自带的分割线写，因为还是有细微的边距。

14）清除浮动方法：

在浮动元素的父级上加overflow:hidden; 或者

1  .ywzp-msg-ul:after {
2     content: '';
3     display: block;
4     clear: both;
5 }

做阅文招聘官网关于优化方面的知识总结：

15）关于video播放，jq里面是没有$(“#id”).play()；这个方法的，正确的播放应该是$(“#id”).trigger(‘play’);

16）当通过锚点从一个页面跳到另一个页面的时候会定位到第二个页面锚点处，但是其实我们是想定位到页面的顶部而不是锚点处的时候我们就可以让页面滑倒顶部，而这段时间很短，是看不出来的。贴代码：

page01 to  page02 :

<p class="ywzp-msg-li-msg" id="jobpage">
　　<a href="./social.html#sojob1" class="ywzp-minnav">技术</a>
　　<span class="line">|</span>
　　<a href="./social.html#sojob2" class="ywzp-minnav">设计</a>
　　<span class="line">|</span>
　　<a href="./social.html#sojob3" class="ywzp-minnav">产品</a>
　　<span class="line">|</span>
　　<a href="./social.html#sojob4" class="ywzp-minnav">版权编辑</a>
　　<span class="line">|</span>
　　<a href="./social.html#sojob5" class="ywzp-minnav">其他</a>
</p>
<ul class="job-kind-ul" id="menujob">
　　<a id="sojob1" class="job-kind-a active"><span class="tech-icon active"></span>技术开发</a>
　　<a id="sojob2" class="job-kind-a"><span class="user-icon"></span>用户体验</a>
　　<a id="sojob3" class="job-kind-a"><span class="support-icon"></span>产品运营</a>
　　<a id="sojob4" class="job-kind-a"><span class="product-icon"></span>版权编辑</a>
　　<a id="sojob5" class="job-kind-a"><span class="other-icon"></span>其他</a>
</ul>

 

js代码：

//点击首页的职位搜索的时候跳到社会和校园招聘相应的职位
var location=window.location.href;   
var arrJobid=location.split("#");
var idjob=arrJobid[1];
//console.log($("#" + idjob));
$("#" + idjob).trigger("click");
$('body,html').animate({scrollTop:0}); 

在这里用了一个animate属性，让页面滚回到顶部。

附加：当从一个页面跳到另一个页面某处锚点的地方时。被跟随页面滑动的顶部导航占了位置，可以在此锚点的上面再加一个空的DIV，然后跳到这个空的div处就可以啦完美~

17)在做首页的时候有个图片轮播，之前用animated动画的时候，safari浏览器打开时居然发现footer底部的文字不停的闪烁，因为我图片轮播用的是opacity属性，于是我就将底部改成动画了，并且设置了一个淡入淡出的效果，代码如下：

$pics.animate({opacity:'0'},2000), 
$pics.eq(i).stop().animate({opacity:'1'},2000),

18) 在写邮箱链接的时候记住在a标签里面加 mailto属性。如：<a href=”mailto:hr@yuewen.com”>hr@yuewen.com</a> 这样用户用鼠标单击一下该超级连接的话，浏览器会自动调用系统默认的邮件客户端程序，同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址，而其他的内容都是空白，留给访问者自行填写。

19)图片记得压缩。颜色少的用PNG.颜色多的压缩成JPG。在线压缩图片工具（http://www.tinypng.com/）;

20)当给元素添加样式的时候要将行为和样式分离：如当点击职位标题的时候字体要变蓝色，并且打开对应的职位信息。如图:

1                     <a class="socialjob-box Jsjobindex">
2                         <h3 class="socialjob-name">Android开发工程师</h3>
3                         <h5 class="socialjob-part">技术部</h5>
4                         <span class="socialjob-arrow JsArrow"></span>
5                         <h4 class="socialjob-adr">上海／北京</h4>
6                     </a>

1 .socialjob-name{
2     font-size: 18px;
3     color: #2E4C7B;
4     font-weight: normal;
5 }
6 .active > .socialjob-name {
7     color: #0FB1FA;
8 }

1 var elIndexJob = $(".Jsjobindex");
2 var ACTIVE = 'active';
3 elIndexJob.click(function(){
4     elIndexJob.removeClass("ACTIVE");
5     $(this).addClass("ACTIVE");
6 });

 若是给它追加一个class的话还要再取一个样式名，这样写更加方便日后维护和修改，不用更改js里面的东西只要改css 元素的active 属性里面的内容了。

若是本身active添加样式而不是其子元素的写法：

.active .socialjob-name {
     color: #0FB1FA;
}

21)关于页面太短，footer背景图和白色背景冲突的解决办法，在footer底部再画一个和背景色一样的矩形。使用outline属性来画矩形的好处是不占据任何的空间，

outline: 1500px solid #415874;

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

然后再用clip：rect (top, right, bottom, left) 属性来裁去footer的部分让footer露出来，并且被裁剪的元素要使用绝对定位才能起效，裁剪的点以被裁剪元素左上角的点为参考来裁剪。clip: rect(0 3000px 3000px -3000px) 从距离元素的顶部0像素的地方开裁剪，向右裁剪的宽度要大于footer的宽，向下裁剪要大于footer的高。并且clip属性ie6就支持了。

.ywzp-footer-msg{
background-color: #415874;
    height: 166px;
}
.ywzp-footer {
    position: absolute;
    width: 902px;
    height: 126px;
    left: 50%;
    margin-left: -451px;
    font-size: 12px;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: inherit;
    outline: 1500px solid #415874;
    clip: rect(0 3000px 3000px -3000px);
}

22)消息提示的气泡框可以用:after属性写，效果：

.job-kind-a:after {
    content: '1';
    position: absolute;
    margin: -4px 0 0 4px;
    width: 16px; line-height: 16px;
    border-radius: 16px;
    background-color: #ff4062;
    color: #fff;
    font-size: 12px;
    text-align: center;
}