CSS列表、表格、鼠标、滤镜样式设置

列表属性

    ul{
            list-style-type: circle;
            list-style-position: inside;
            list-style-image: url();
            
            //简写
            list-style: circle outside url();
        }

list-style: 列表标志 列表标志位置 列表项图像;
列表项样式重置:

        ul{
            list-style-type: none;;
        }

表格属性

  1. 单元格之间的间隔:(设置相邻单元格之间的间隔)
    border-spacing:水平间隔 垂直间隔
  2. 边框折叠:border-collapse:collapse | separate
  3. 表格宽高
  4. 文本对齐方式:text-align:center
  5. 背景:background
         table{
            border-spacing: 20px 30px;
            /* width: 50px;
            height: 50px; */
         }

鼠标样式

    //一个简写
    (span{womeb$}+br)*4====
    <span>womeb1</span><br><span>womeb2</span><br><span>womeb3</span><br><span>womeb4</span><br>

cursor:pointer | wait | help | auto
主要应用场景

         #page{
            cursor: pointer;
         }
 <div id="page">点击跳转百度</div>
    <script type="text/javascript">
        document.getElementById("page").οnclick=function(){
            window.location="http://baidu.com"
        }
    </script>

此时当鼠标移至文字处,鼠标会变成pointer形状,指示用户可以执行跳转动作

滤镜属性

定义图形的可视效果

         img{
            filter: blur(2px);
            filter: saturate(100%);
         }

语法: filter:属性值

  1. 高斯模糊:filter:blur(合法的尺寸单位)
    默认值为0,值越大,越模糊,不能设置为百分比
  2. 饱和度设置:filter:saturate(百分比)
    默认值为100%,0%会变成白色图像,可以超过100%,有更高的饱和度
  3. 灰度:filter:grayscale(30%)
    值0%-100%之间,默认值为0,当为100%时,图像变成黑白图像
  4. 对比度:filter:contrast(0%)
    默认值为100%,图像无变化,当值为0时,图像变为全黑,当超过100%时,意味着有更低的对比度
  5. 透明度:filter:opacity(100%)
    0% 完全透明 100%完全不透明
    值在0-100之间
    在老版本谷歌浏览器等需要加前缀,所有的ie浏览器都支持滤镜属性

样式的重置

        ul{
            list-style-type: none;;
        } 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值