• html不透明度(rgba)与手势(cursor)与自适应宽高度写法


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
    <!--         
     不透明度
            rgba(0,0,0,0):给父元素设置rgba,子元素不会使用该属性
            000 分别代表红绿蓝(2550 不透明度
            opacity:给父元素设置opacity,子元素也会默认使用该属性
                0 完全透明(占控件)
                0.5 半透明
        手势
            opcity     鼠标的状态
            
        最大高度/宽度  最小高度/宽度,
            应用于:>=,<=
             max-height min-height
             max-width  min-width
             值要是设置%,则会根据以父元素的宽度/高度为准
             屏幕适应屏幕高度/宽度,父元素 body{100%} ,子元素 height{100&}
                 -->
            <style>
                #div1{
                     100px;
                    height: 100px;
                    background: rgba(255,0,0,0.5);
                }
                #div2{
                 100px;
                height: 100px;
                background-color: #0000FF;
                opacity: 0.5;
                cursor: help;
                cursor: url(file:///D:/Hbuilder/基础练习-html/1.jfif),auto; //鼠标划入,显示自定义图片
                }
                 body{
                    height: 100%;
                } 
                #div3{
                     100px;
                    max-height: 100%;
                    background-color: #00FFFF;
                    margin-top: 10px;
                    
                }
            </style>
        </head>
        <body>
            <div id="div1">
                <p>rgba</p>
            </div>
            <div id="div2">
                <p>opacity</p>
            </div>
            <div id="div3">
                最小高度/宽度,最大高度/宽度
                最小高度/宽度,最大高度/宽度
                最小高度/宽度,最大高度/宽度
                最小高度/宽度,最大高度/宽度
            </div>
        </body>
    </html>
  • 相关阅读:
    Linux 软件安装
    大型网站架构设计原理(书的目录)
    Spring Cloud 学习笔记(二)——Netflix
    Spring Cloud 学习笔记(一)——入门、特征、配置
    RocketMQ与Kafka对比
    分布式开放消息系统(RocketMQ)的原理与实践(转)
    JavaScript Event Loop
    双向链表
    MutationObserver()观察者构造函数用法
    jsonp跨域
  • 原文地址:https://www.cnblogs.com/wsx123/p/15782980.html
Copyright © 2020-2023  润新知