vGuYi-CSDN博客

原创 JavaScript基础01

JavaScript是什么？JavaScript 是一种运行在客户端（浏览器）的编程语言JavaScript组成是什么？ECMAScript( 基础语法 )、web APIs （DOM、BOM）JavaScript入门JavaScript 书写位置内部 JavaScript 直接写在html文件里，用script标签包住规范：script标签写在</body>上面外部 JavaScript 代码写在以.js结尾的文件里.

2022-05-21 21:55:48 327

原创 CSS添加盒子触碰光效

给如下盒子添加触碰光效效果如下:触碰后隐藏在盒子左边的透明亮光盒子向右移动实现效果html部分:  <div class="row"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <a href=""> <img src="./imag

2022-05-19 21:11:25 574

原创 bootstrap及删格系统

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。 bootstrap中文官网首页 → BootStrap3中文文档 → 下载BootStrap使用步骤 1. 引入： BootStrap提供的CSS代码 <link rel="stylesheet" href="./bootstrap/css/b..

2022-05-19 20:52:34 226

原创媒体查询之响应式布局

什么是响应式布局?1.网页可以根据不同的设备或窗口大小呈现出不同的效果2.使用响应式布局可以使一个网页适配所有设备3.响应式布局的关键就是媒体查询4.通过媒体查询可以为不同的设备、设备的不同状态来分别设置样式。媒体类型(media type) ：类型解释 all 所有设备 braille 盲文 tty 传真 print 文档打印 tv 电视 screen 彩电屏幕 handheld 手持设备媒体特性

2022-05-18 20:32:20 6194 1

原创媒体查询(rem)配合less使用

屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好百分比布局特点宽度自适应，高度固定Flex布局更多的解决了盒子的排列方式，高度很难适配所以都不能实现需要配合 rem 单位设置元素的尺寸（宽度/高度）最终适配那么什么是rem了?rem是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小rem的使用场景：我们只需要修改html 的文字大小，就可以完成元素大小的等比例缩放媒体查询设置差异化CSS样式..

2022-05-16 21:02:46 1126 1

原创 Flex布局知识

FLex布局优点:1.是一种浏览器提倡的布局模型 2.布局网页更简单、灵活 3.避免浮动脱标的问题设置方式:父元素添加 display: flex，子元素可以自动的挤压或拉伸主轴对齐方式:使用justify-content调节元素在主轴的对齐方式属性值作用 flex-start 默认值, 起点开始依次排列 flex-end 终点开始依次排列 ce.

2022-05-14 21:13:10 146 1

原创 Flex圣杯布局(简易)

就像圣杯一样无论中间的内容大小如何改变(自适应)两边的盒子都是不变的圣杯布局原理效果图如下html部分<body> <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div&gt

2022-05-14 19:54:34 315 1

原创设置VScode背景图(无需代码)并解决[不受支持]问题

在插件里找到background-cover进行下载点击右下角中间文件图片按钮选择插入的图片和设置透明度上方显示的[不受支持]和右下角显示的[文件损坏]不受影响可以正常使用

2022-05-13 10:16:55 701 1

原创 css实现图片在页面中的动画特效

使图中的云朵,热气球,长颈鹿和中间文字实现动画特效动画名字参照css类选择器命名动画时长和延迟时间别忘了带单位 s infinate 无限循环动画（重复次数） alternate 为反向就是左右来回执行动画 forwards 动画结束停留在最后一帧状态，不循环状态使用 linear 让动画匀速执行 html部分<body> <div class="box"> <span>

2022-05-12 21:10:02 2802

原创 css实现简易轮播图

效果图html部分<body> <div class="box"> <ul> <li> <a href="#"><img src="./images/1.jpg" alt=""></a> </li> <li> <a href

2022-05-12 20:41:16 213

原创 css实现nav3D导航栏

css制作nav3D导航栏

2022-05-12 14:32:34 411 1

原创 Iconfont字体图标

字体图标-Iconfont iconfont-阿里巴巴矢量图标库中保存到项目中,可进行下载和复制代码引入字体图标样式表1 ./fonts/iconfont.css2 http://at.alicdn.com/t/font_3391737_dxdl2h1bb34.css使用法1 <i class="iconfont"></i>2 <i class="iconfont icon-account-fi...

2022-05-11 21:19:38 302

vGuYi的博客