CSS、js学习笔记（三）

admin管理员组

文章数量:1794759

CSS、js学习笔记（三）

文章目录

• 一、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 });

本文标签： 学习笔记cssjs