弹出框

YYY1920

于 2019-08-23 11:04:14 发布

阅读量130

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/YYY1920/article/details/100033720

本文详细解析了一个使用HTML和CSS实现的弹窗组件样式，包括固定位置、背景颜色、宽度、高度等属性设置，以及内部元素的定位和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分

  <div class="bounced" v-show="ycshow">
        <div class="bouncedone" >
          <p class="yc_p"><span style="color: #fff;position: absolute;left:20px;font-size: 13px">例如代办任务</span><i style="color: #fff;position: absolute;right:20px;top: 9px;font-size: 13px" class="el-icon-close"></i></p>
        </div>
      </div>

css部分

.bounced{
  position:fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(22,22,22,0.5);
}
.bouncedone{
  width:700px;
  height:450px;
  background-color: #f9f9f9;
  position: relative;
  left:calc(50% - 350px);
  top:calc(50% - 225px);
  border-radius: 3px;
}
.yc_p{
  background-color:#173F70;
  height: 30px;
  width: 100%;
  margin: 0;
  position: relative;
  line-height: 30px;
}

在这里插入图片描述