css

vue cli3适配所有端方案的实现

vue cli3适配所有端方案的实现

应用场景页面需要在pc端和移动端同时兼容,以前我的方案都是使用媒体查询来判断当前设备大小,然后写两套或者三套css代码来兼容他们,能达到目的,并且效果不错,但是感觉还是稍微麻烦了一丢丢。到此这篇关于vue cli3适配所有端方案的实现的文章就介绍到这了,更多相关vue cli3适配所有端内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网! »

小程序中使用css var变量(使js可以动态设置css样式属性)

小程序中使用css var变量(使js可以动态设置css样式属性)

使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语法,so,可以使用css变量来使用开发工作变简单。 »

jquery css实现流程进度条

本文实例为大家分享了jquery css实现流程进度条的具体代码,供大家参考,具体内容如下方案1:方案2: 流程进度条 .div_home .div_button{ width: 100%; background: rgba(249, 214, 81, 1); »

javascript+css实现进度条效果

javascript+css实现进度条效果

本文实例为大家分享了javascript+css实现进度条效果的具体代码,供大家参考,具体内容如下 主要是以样式实现进度条的效果,JavaScript控制显示的百分比 html模板 <div class="progress_area"> <span id="progress" class="progress_bac"></span> </div> &... »

javascript实现拖拽碰撞检测

javascript实现拖拽碰撞检测

本文实例为大家分享了javascript实现拖拽碰撞检测的具体代码,供大家参考,具体内容如下拖拽碰撞检测碰撞改变颜色css: .div1 .div2html: js: »

vue学习笔记之Vue中css动画原理简单示例

本文实例讲述了Vue中css动画原理。分享给大家供大家参考,具体如下:当transition包裹了一个元素之后,vue会自动分析元素的css样式,构建动画流程。vue中的css动画,其实就是某一个时间点,给元素再增加了一个css样式体现的。v-if、v-show、动态组件 都可以实现过渡效果。如果没有给transition定义name,vue中默认是.v-enter、.v-leave-to。Vue... »

基于html+css+js实现简易计算器代码实例

使用html+css+js实现简易计算器, 效果图如下: html代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">... »

vue-cli设置css不生效的解决方法

我们有的项目使用的是老的vue-cli脚手架生成的,今天想写点东西,发现.vue文件里面 style 里面写的样式都不生效了,很自然就想到是不是loader的问题。 在这种项目的webpack.base.config.js一般设置loader的 rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test:... »

Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)

以一个toggle按钮控制p元素显隐为例,如果不使用过渡效果,则如下所示 <div id="demo"> <button v-on:click="show = !show">Toggle</button> <p v-if="show">蓝色理想</p> </div> <script> new Vue({ el: '... »

解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了

1.今天网上下载一个博客项目,发现本地访问,js,css加载不了.我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下在settings.py里面编辑添加STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'),)另外把STATIC_ROOT = os.path.join(BASE_DIR, 'st »

jQuery实现的移动端图片缩放功能组件示例

本文实例讲述了jQuery实现的移动端图片缩放功能组件。 »

Vue + Scss 动态切换主题颜色实现换肤的示例代码

根据预设的配色方案,在前端实现动态切换系统主题颜色。 大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。 一、首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev ... »

Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

今天,我们使用Vue CLI3 做一个移动端适配 。   前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配... »

Scss和sass的学习前的准备

Scss和sass的学习前的准备

官网地址: https://www.sass.hk/ 我选择官方推荐最简单方案,最靠谱那个方案。 方案:写一个scss文件,实时编译生成一个css文件,一个html引进去再开个服务,浏览器中看的见写的效果。 这样子后就可以继续学习了。否则看不到效果一切白搭。 首先安装个Visual Studio Code  下载地址 https://code.visualstudio.com/ Visual St... »

html web前端css基础(7)

html web前端css基础(7)

html web前端css基础CSS选择器作用:规范了页面有哪些元素能够使用声明好的样式。 »

通过css3的filter滤镜改变png图片的颜色的示例代码

本方法是通过CSS3滤镜 filter 中的 drop-shadow 将png图片的非透明部分生成任意颜色的投影,然后将原始图片隐藏起来,从而达到改变图片颜色的目的 先看效果图 接下来是代码 <p><strong>原始图标</strong></p> <i class="icon icon-del"></i>... »

深入浅析CSS3中的Flex布局整理

深入浅析CSS3中的Flex布局整理

Flexbox布局模块旨在提供一个更有效的方式,在一个容器里面去布局分配空间。Flex 容器扩展项以填充可用的空闲空间或缩小它们以防止溢出。请看一下规范中的这个图,解释一下 flex 布局背后的主要思想。顾名思义,grow意味着增长,用于控制flex item的尺寸的伸展。 »

CSS实现聊天气泡效果

一、效果图 京东效果模拟的效果二、原理准备一个高度和宽度为0的盒子将这个盒子设置一个边框将边框不需要的地方用 transparent 来代替,需要显示的地方设置对应的颜色如果需要改变其大小,直接设置边框的宽度 border-width将字体 font-size 和行高 line-height 设置为0,以免影响显示最后使用定位将其设置到需要的位置三、代码 H »

css3 实现元素弧线运动的示例代码

如何使用CSS控制元素弧线运动 我们都知道,CSS3的新属性transfrom过渡效果可以实现元素位移、旋转、缩放。结合animation属性,就可以实现元素的动画效果。但是如何通过css实现元素实现弧线运动呢: 如上图动画效果所示,圆球弧线运动,分析运动: 将小球的运动拆分成X轴和Y轴两个运动来看,此时X轴的小球是以 (慢—快) 这样的速度运动; 而Y轴的方向小球是以(快&mdash... »

css3中less实现文字长阴影(long shadow)

本文主要介绍了css3中less实现文字长阴影,分享给大家,具体如下: 问题 实现如下图效果 主要知识点 css中的字体阴影 text-shadowless 语法中的 loops 和 merge代码 <div class="long-shadow">屮艸芔茻</div> .loop(@counter) when (@counter > 0) { .... »

解决css中的匹配问题

解决css中的匹配问题

问题描述 众所周知在写 css的时候,会根据html 中类的定义或者 id 的定义来写相应的 css代码。给不同的类定义不同的样式,当然为了能够少写一些代码,大家就会在css 中引用匹配。匹配有模糊匹配和全局匹配。匹配的方式有几种。当然也可以在 html 中写不同的类名,或者写相同的类名,就能够实现所有的样式的匹配。但有时候类名不能够写到相同,这样就会出现冗余的代码,就会造成代码复杂度的增强。为了... »

用CSS播放声音的几种技巧方法

CSS 是样式、布局和表示的领域。实际上它并不是真正的 hack,而是针对 HTML 和 CSS 的严格实现。窍门用 CSS 播放声音有好几种方法,但是其基本思想是相同的:将音频文件作为网页中的隐藏对象或文档插入,并在有操作发生时显示它。Firefox 会在页面加载时立即播放所有声音,但是在隐藏并再次显示后,将不再播放。 »

visual studio code 编译运行html css js文件的教程

运行html文件1、添加插件扩展2、安装 open in browser3、在对应的html 文件处右击,选择open in default browser或者直接总结到此这篇关于visual studio code 编译运行html css js文件的教程的文章就介绍到这了,更多相关visual studio code 运行html css js文件内容请搜索软件开发网以前的文章或继续浏览下面的... »

css 实现小尖角聊天对话框带尖角的说话泡泡效果

一、css 绘制实现小尖角聊天对话框,带尖角的说话泡泡,先给大家展示下效果图,感觉不错请参考实例代码。 二、效果 三、代码 css;toolbar:false"><style> #talkbubble { width: 160px; height: 80px; background: red; position: relative; border-radius: 10p... »

vue css 引入asstes中的图片无法显示的四种解决方法

vue css 引入asstes中的图片无法显示的四种解决方法

这里主要针对的是vuecli2中的一些问题。 vue项目中,常常会有很多的图片资源,这样的资源存放位置,通常我们有两个选择:1. static,2. assets 关于这两者之间的区别,和如何选择这里就不多说了! 这里我们来说说assets目录下存放图片时,在vue组件的css样式中引入图片时将会遇到的一些问题! 正常情况,我们在本地开发调试的时候,无论什么样的方式引入图片都不会有问题。但是,一大... »

Page 1 of 230123»