html中的定位以及透明属性笔记和实现骰子点数例子

笔记 专栏收录该内容
27 篇文章 1 订阅

定位

给定元素
实现侧边导航栏 以及网页中的广告
语法:
position: fixed 固定定位+边偏移量才能达到想到达的位置
实现效果:div或者某些元素固定在页面的某个位置
移动时的参照物:浏览器当前窗口
可以让内容脱离标准文档流(文字图片都可以被覆盖)
position:sticky 粘性定位
实现效果(移动时的参照物):如果前面有元素并且元素有高度,那么他会划过元素高度之后再执行定位,如果前面元素没有货高度小于top后面的属性值 他直接开始固定定位
可以做吸顶效果,兼容不好
可以让内容脱离标准文档流(文字图片都可以被覆盖)
position:absolute 绝对定位
实现效果(移动时的参照物):如果父级元素有定位,则根据父级元素位置进行移动,如果没有则逐级向上看,如果找不到就根据浏览器窗口进行定位
可以让内容脱离标准文档流(文字图片都可以被覆盖)
position:relative 相对定位
实现效果(移动时的参照物):根据自身的位置开始定位

例子:用position:relative相对定位制作一个三个点面向的骰子
body部分:

<div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

css部分:

		.box {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: auto;
             border-radius: 20px;   /*边框的圆角程度 */
        }
        .box1,.box2,.box3 {
            width: 100px;
            height: 100px;
            background-color: black;
            border-radius: 50%;   /*边框的圆角为50%就是圆 */
        }
        .box1{
            position: relative;  /*相对定位,按自己的位置定位 */
            left: 400px;  
        }
        .box2{
            position: relative;
            left: 200px;  /*向右移200px */
            top: 100px;  /*向下移100px */
        }
        .box3{
            position: relative;
            top: 200px;
        }
    实现效果图(只是简单定位,没有考虑美观效果):

在这里插入图片描述
在这里插入图片描述

透明属性设置

opacity:0.value; (value取值范围:0-1 如0.3)

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值