【三月之春】CSS问题笔记之一

 

网站导航是通栏的，但是也没主体居中，是固定长度，而导航中的分屏切换按钮arrow却不在主体区域，这样如果定位不对在IE浏览器下存在不显示按钮的问题，

[CODE]

<div class="nav">
 <div class="navin">
  <a title="美丽如花" href="#tag-c01" class="selected">美丽如花</a><a title="情感天地" href="#tag-c02" class="">情感天地</a><a title="血拼购物" href="#tag-c03" class="">血拼购物</a><a title="聪慧女人" href="#tag-c04" class="">聪慧女人</a><a title="休闲时光" href="#tag-c05" class="">休闲时光</a><a title="美眉游戏" href="#tag-c06" class="">美眉游戏</a>
  <div class="arrow" style="background: url(&quot;img/20120303/arrowUp.png&quot;) no-repeat scroll 0pt 0pt transparent;"></div>
 </div>
</div>

[/CODE]

 

为此注意CSS的定义方式：

.navin a{
 font-family:Microsoft YaHei;
 font-size:24px;
 color:#b24097;
 padding:32px 0 39px;
 height:24px;
 line-height:24px;
 text-align:center;
 width:158px;
 display:inline-block;
 /*此处采用 display:inline-block;不能用浮动 float:left;，否则.arrow消失，用float则需要.navin的IE6 hack：_width:>950px; 撑开 或者给.arrow清除浮动clear:float;*/
}

.arrow {

     background :  url("../img/20120303/arrowDown.png") no-repeat scroll 0 0 transparent ;

     cursor :  pointer ;

     height :  60px ;

     position :  absolute ;

     right :  -80px ;

     top :  18px ;

     width :  60px ;

}

 

2.jQuery的滑动滚动效果可以用扩展插件jquery.easing.还有一些阴影效果、圆角效果除了用图片实现外，可以考虑用PIE插件，使IE6-8支持html5/CSS3 部分新特性。

3.熟悉锚点定位方式，如果要实现滑动定位锚点的效果，可以先阻止默认事件，再用jQuery动画函数呈现。

[code]

$(window).load(function() {
 
 times = 0;
 //get content container positions
 bk01_top = ($('.bk01').offset().top );
 bk02_top = ($('.bk02').offset().top );
 bk03_top = ($('.bk03').offset().top );
 bk04_top = ($('.bk04').offset().top );
 bk05_top = ($('.bk05').offset().top );
 bk06_top = ($('.bk06').offset().top );
 
 //main menu fixed position on scroll
 $(window).scroll(function () {
  moveMenu();
 });
 //anchor smooth scrolling
 function filterPath(string) {
   return string.replace(/^\//,'').replace(/(index|default).[a-zA-Z]{3,4}$/,'').replace(/\/$/,'');
 }
 var locationPath = filterPath(location.pathname);
 $('.navin > a').each(function() {
   var thisPath = filterPath(this.pathname) || locationPath;
   if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'')) {
     var $target = $(this.hash), target = this.hash;
     if (target) {
       $(this).click(function(event) {
         event.preventDefault();
         var targetOffset = $target.offset().top;
         $('html, body').animate({scrollTop: targetOffset}, 2000, 'easeInOutSine', function() {     
           location.hash = target;
         });
       });
     }
   }
 });

 //put menu in the right place
 moveMenu();
});

 

[/code]

说明：JavaScript location 对象

location.host 与 location.hostname 的区别：

location.host 包含端口，比如是 127.0.0.1:81。如果端口是 80，那么就没有端口，就是 127.0.0.1。

location.hostname 不包含端口，比如是 127.0.0.1。

location -- location用于获取或设置窗体的URL，并且可以用于解析URL，是BOM中最重要的对象之一

• location，中文"位置"的意思
• 引用网址:http://www.dreamdu.com/javascript/window.location/
• location既是window对象的属性又是document对象的属性
• location包含8个属性，其中7个都是当前窗体的URL的一部分，剩下的也是最重要的一个是href属性，代表当前窗体的URL
• location的8个属性都是可读写的，但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL，而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有)，而且页面不会被重新加载

详细：http://www.dreamdu.com/javascript/window.location/

 

4.定位的时候，难免遇到兼容性问题，如果不得不用hack方式解决，那么jQuery代码不能直接操作样式，可能是因为jQuery不认识hack吧。所以涉及到hack的样式操作，最好先放到CSS类中，然后通过jQuery操作该类，来实现需求。

比如下列js代码操作scrolltop类，

[code]

function moveMenu(){
 var scroll_top = $(document).scrollTop();
 var window_height = $(window).height();

 if(scroll_top >= window_height - 95 ){
  $(".arrow").css("background","url('img/20120303/arrowUp.png') no-repeat scroll 0 0 transparent");
  sign = false;
  //为兼容IE6，不可直接写css方法
  $(".nav").removeClass("bt");
  $(".nav").addClass("scrolltop");
  $('.head').css('margin-bottom', '95px');
  
 } else {
  $(".arrow").css("background","url('img/20120303/arrowDown.png') no-repeat scroll 0 0 transparent");
  sign = true;
  $(".nav").removeClass("scrolltop");
  $(".nav").addClass("bt");
  $('.head').css('margin-bottom', '');
 }
 
 if(scroll_top < window_height){
  resetMenu();
 }

 scroll_top = scroll_top+1;
 if(scroll_top > bk01_top){resetMenu();$('.navin a:nth-child(1)').addClass('selected');}
 if(scroll_top > bk02_top){resetMenu();$('.navin a:nth-child(2)').addClass('selected');}
 if(scroll_top > bk03_top){resetMenu();$('.navin a:nth-child(3)').addClass('selected');}
 if(scroll_top > bk04_top){resetMenu();$('.navin a:nth-child(4)').addClass('selected');}
 if(scroll_top > bk05_top){resetMenu();$('.navin a:nth-child(5)').addClass('selected');}
 if(scroll_top > bk06_top){resetMenu();$('.navin a:nth-child(6)').addClass('selected');}

}

[/code]

//CSS code

.scrolltop{
 position:fixed;
 top:0;
 _position:absolute;
 _top:expression(documentElement.scrollTop + 0 + "px"); 
}

同时使用js操作的CSS样式属性，最好事先不在CSS文件写死。需要设置的，可以写在html文件中，方便js操作增删、修改属性值，保证页面用户体验的稳定性。

我的专题页面分屏涉及到导航在顶端和底端的切换效果，这里定位用的是position:fixed; 而这一属性在IE6下是不兼容的，需要通过Hack方式或js解决。 我是通过CSS hack保持各浏览器兼容的。如：：.bt的属性不写在scrolltop内部，而单独分离出来自成一类，方便js调用修改该属性。

.nav {
 width:100%;
 background:url("../img/20120303/bgnav.png") repeat-x scroll 0 0 transparent;
 z-index:6;
 position:fixed;
 _position:absolute;
 _top:expression(documentElement.scrollTop + 560 + "px");

}
.bt{
 bottom:0;
}

 

好了。ok，到此为止，标记。