zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    c3p0死锁
    空间分析过程
    UUID.randomUUID().toString() 的作用
    ajax做的一些总结
    vue3组合式api
    引入高德地图
    高德地图做标记
    页面刷新回到顶部
    高德地图如何只显示中国地图,不显示国外地图
    vue使用高德地图错误 ‘AMapUI‘ is not defined , ‘AMap‘ is not defined 问题及解决。
  • 原文地址:https://www.cnblogs.com/wsx123/p/15782980.html
Copyright © 2011-2022 走看看