首页 > > 网页制作 > css >

2017年10月21日 CSS常用样式&鼠标样式 …

2018-06-24 00:01:33来源：未知阅读 ()

css代码

背景与前景

background-color:#0000;                           //背景色,样式表优先级高

background-image:url(路径);                     //设置背景图片

background-attachment:fixed;                   //背景固定,不随字体滚动

background-attachment:scroll;                  //背景是随着字体滚动的

background-repeat:no-repeat ;                 //no-repeat   不平铺   repeat  平铺  repeat-x  横向平铺    repeat-y   纵向平铺

background-position:center;                     //背景图居中, 设置背景图位置的时候一定把repeat设为no-repeat

重要部分

全部透明度

opacity:0.7;

过渡效果

transition:设置秒数;

圆角

border-radius:设置像素值;

阴影

box-shadow: 5px(向右) 5px(向下) 5px(虚化)加颜色;

text-shadow:sew(如上加像素值);文字阴影

转动角度

tramsform:skew(可以选择转动方式)(加转动的角度)

无序列表

<ul><li><li></ul>

顶部:top

底部:bottom

左:left

右:right

padding+方向可以只改一侧(input用的多一些)

margin(边距)

鼠标移入触发

    a:hover{

          }

访问时候样式

    a:link{

          }

访问后样式

     a:visited{

          }

被选择的链接样式

     a:active{

         }

JQuery代码

鼠标移入事件触发

       mouseover()

鼠标移出事件触发

        mouseout()

鼠标点击事件触发

        click()

鼠标双击事件触发

       dbclick()

按下鼠标事件触发

    mousedown()

松开鼠标事件触发

       mouseup()

JQuyer代码实例

微信、微博、授权、注册商标鼠标点击淡入淡出效果

如果想换鼠标移入就有效果的话就把click（）换成mouseover（）

每个都要有个按钮，比如<div></div> <input type="button" />...

也可以不取值,不取值的话就在每个<div></div>中加入id,可以直接用"#"来取id名

eq()为参数,注:(eq()是从零开始)

 weixin = $(".weixin")
    weibo = $(".weibo")
    shouquan = $(".shouquan")
    zhuce = $(".zhuce")
    baseb = $(".base-b")
    baseb.eq(3).ready(function() {
        baseb.eq(3).click(function() {
            zhuce.fadeToggle("slow")
        })
    })
    baseb.eq(4).ready(function() {
        baseb.eq(4).click(function() {
            shouquan.fadeToggle("slow")
        })
    })
    baseb.eq(5).ready(function() {
        baseb.eq(5).click(function() {
            weibo.fadeToggle("slow")
        })
    })
    baseb.eq(6).ready(function() {
        baseb.eq(6).click(function() {
            weixin.fadeToggle("slow")
        })
    })




     图片轮播代码
   首先要设置几张图片,我这里设置的是三张图片

    按钮设置的是轮播或者自己点击时背景颜色会变
   代码如下:

 

 toplogo = $(".top-logo");/ / toplogo 为图片,注:(前面的名字不要加"-",不要成top-logo)
    gap = $(".gap-b");/ / gap 为按钮
    ws = 1; / / 从第一张开始循环
    gap.eq(0).css("background-color", "#A52A2A")

    function move() {
        if(ws != 3) {
            toplogo.stop();
            toplogo.animate({
                    marginLeft: ws * (-1349) + "px"
                },
                500,
                function() {
                    ws++;
                })
        }
        if(ws == 3) {
            toplogo.stop();
            toplogo.animate({
                    marginLeft: 0 + "px"
                },
                500,
                function() {
                    ws = 1;
                    gap.css("background-color", "white")
                    gap.eq(0).css("background-color", "#A52A2A")
                })
        }

        if(ws == 0) {
            gap.css("background-color", "white")
            gap.eq(0).css("background-color", "#A52A2A")
        }
        if(ws == 1) {
            gap.css("background-color", "white")
            gap.eq(1).css("background-color", "#A52A2A")
        }
        if(ws == 2) {
            gap.css("background-color", "white")
            gap.eq(2).css("background-color", "#A52A2A")
        }

    }

图片自动轮播代码

代码如下:

  window.setInterval(move, 2500)/ / move后面设置毫秒
    gap.eq(1).mouseover(function() {
        gap.css("background-color", "white")
        gap.eq(1).css("background-color", "#A52A2A")

    })
    gap.eq(2).mouseover(function() {
        gap.eq(2).css("background-color", "#A52A2A")
        gap.eq(1).css("background-color", "white")
        gap.eq(0).css("background-color", "white")
    })
    gap.eq(0).mouseover(function() {
        gap.eq(0).css("background-color", "#A52A2A")
        gap.eq(1).css("background-color", "white")
        gap.eq(2).css("background-color", "white")
    })
    gap.eq(0).mouseover(function() {
        toplogo.animate({
                marginLeft: 0 + "px"/ / 第一次轮播为0像素
            },
            500,
            function() {

            })
    })
    gap.eq(1).mouseover(function() {
        toplogo.animate({
                marginLeft: (-1349) + "px"/ /第二次就是这张图片的宽度
            },
            500,
            function() {

            })
    })
    gap.eq(2).mouseover(function() {
        toplogo.animate({
                marginLeft: (-2698) + "px"/ / 这是到第三张图片后的宽度
            },
            500,
            function() {

            })
    })