界面优化--动态背景

HTML

script标签

  1. scipt标签用于链接一个外部脚本文件
  2. 2.src属性规定外部脚本文件的URL
  3. 若在html文件引用脚本可以直接
  4. <!--script src="脚本.js" type="text/javascript"></script-->
    

css

CSS在网页制作时,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

定位

1.position:absolute
2.absolute参数:将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距,但仍有补白和边框 。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。

动态响应式背景

  1. npm i vue-canvas-nest
  2. 在所需的vue中添加组件,引用脚本
  3. <vue-canvas-nest ></vue-canvas-nest>
    
  4. import vueCanvasNest from 'vue-canvas-nest'
    
  5. components: { vueCanvasNest }
    
  6. const config = {
        color: '0,0,255',
        opacity: 0.7,
        zIndex: -2,
        count: 99,
        };
    
  7. 在这里插入图片描述
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值