文章目录

• 一、CSS部分
• • 1、有序列表、无序列表标记设置
  • 2、最小或最大的宽度或者高度
  • 3、标签内容溢出问题
  • 4、优先级设置
• 二、js部分
• • 1、当页面滑动时事件（onscroll）
  • 2、鼠标移到某个位置时需要的效果

一、CSS部分

1、有序列表、无序列表标记设置

list-style-type:none; /*列表项前没有标记*/

以及一些其他的属性，截图自菜鸟教程

还可以将标记设为图片

list-style-image:url(""); /*url是图片的路径*/

2、最小或最大的宽度或者高度

因为每台计算机的分辨率可能不同的问题，有时我们需要设置最大或最小的宽度或者高度

min-width:;/*最小宽度*/
min-height:;/*最小高度*/
max-width:;/*最大宽度*/
max-height:;/*最小宽度*/

3、标签内容溢出问题

当一个标签的内容溢出时，我们需要相应的效果时，我们可以设置overflow的属性值，属性值效果如下：

当我们设置外边距时标签不移动时，设置父标签的border时又能成功移动时，也可以设置父标签overflow:hidden;来实现效果；

4、优先级设置

position:relatiove;
z-index:1;

需先设置定位。
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
默认z-index为0。

二、js部分

1、当页面滑动时事件（onscroll）

// 当页面的滚动条发生滚动的时候,会执行function这个函数(方法)
window.onscroll=function(){
	var x=document.documentElement.scrollLeft;// 获取用户水平滚动条的距离
	var y=document.documentElement.scrollTop;// 获取用户垂直滚动条的距离
	var header=document.querySelector("#header");// 获取header这个div节点
	var className=header.className;// 获取这个节点的类样式的名称
	if(y>0 && className=="big_bg"){
	    header.className="small_bg";
	}
}

要实现滑块滑动后出现一些效果，只要获取节点，然后在写需要实现的效果就行，其他的用于需要时参考。

2、鼠标移到某个位置时需要的效果

此处需要用的jquery框架
①引入jquery框架
②

// 鼠标移入id=menu_li_two的节点时,执行function中的代码功能
$("#menu_li_two").mouseover(function(){
	// 延迟0.3秒用30毫秒的时间滑出header_sunblind
	$("#header_sunblind").delay(300).slideDown(30);
});
// 鼠标移出id=header_sunblind的节点时,执行function中的代码功能
$("#header_sunblind").mouseleave(function(){
	$("#header_sunblind").hide(); // 隐藏header_sunblind
});