分类：css

2021
01-03

JS+CSS实现过渡特效

JS+CSS实现过渡特效 最近在玩一个叫Babaisyou的游戏，很羡慕里面的一个转场特效，所以试着做了一下。主要使用了JS和CSS，特效主要是用CSS实现的。HTML代码<!DOCTYPEhtml><htmllang="en"dir="ltr"><head><metacharset="utf-8"><title>开始导航</title><linkrel="stylesheet"href="style.css"></head><body><divclass="text"><p><aid="bottom">点击进入</a></p></div></body><scripttype="text/javascript">//执行代码window.onl... 继续阅读 >
2020
12-05

三剑客：offset、client和scroll还傻傻分不清？

在学习前端的过程中，我们经常会碰到offset,client与scroll，所以我就把它们称作为‘三剑客'。01 offset-偏移量定义：元素在屏幕上占用的所有的可见的空间。元素可见的大小由其高度、宽度决定，包括所有内边距，滚动条和边框大小四个属性offsetcss的样式：<style>.son{width:100px;height:100px;padding:10px;border:10pxsolid#ccc;}.father{width:140px;height:140px;padding:10px;borde... 继续阅读 >
2020
10-28

JavaScript如何操作css

原本应该是由css进行控制html中的div的宽高和背景颜色，但是在下方使用了JavaScript进行重新调用了div盒子，并且覆盖了css原本的属性内容。需求目标:由100像素的粉色背景色的div盒子变成了300像素的橘黄色效果的div盒子代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equi... 继续阅读 >
2020
10-08

Vue3新特性之在Composition API中使用CSS Modules

在Vue3CompositionAPI最近的一次beta升级中，无论是Vue3本3库vue-next，还是面向Vue2过渡用的@vue/composition-api库中，都同步更新了一个useCSSModule函数--用来在使用了CompositionAPI的Vue实例中，支持CSSModules语法。首先来看看什么是CSSModules：CSSModulesCSSModules是一种CSS的模块化和组合系统。vue-loader集成CSSModules，可以作为模拟scopedCSS的替代方案。启用CSSModule... 继续阅读 >
2020
09-30

jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】

本文实例讲述了jQuery+css实现的点击图片放大缩小预览功能。分享给大家供大家参考，具体如下：要求点击一张图片，图片就会放大，查看大图，点击空白处就会隐藏大图，回到缩略图。技术要点主要是Jquery进行元素的显示与隐藏。代码<!DOCTYPEhtml><html><head><title>qqq</title><metacharset="utf-8"><styletype="text/css">*{margin:0;padding:0;}h1{text-align:center;margin:2... 继续阅读 >
2020
09-25

JavaScript检测浏览器是否支持CSS变量代码实例

JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。有三种方法可以实现这样的效果：控制样式表—可以添加、删除、修改样式表。控制样式规则—可以添加、删除、修改样式规则。控制DOM中的单个元素—可以不依赖样式表来修改元素样式。JavaScript检测浏览器是否支持CSS变量：constisSupported=window.CSS&&window.CSS.supports&&window.CSS.supports('--a',0);if(isSupported){/*su... 继续阅读 >
2020
09-25

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

小程序中使用css var变量(使js可以动态设置css样式属性) 使用sass,stylus可以很方便的使用变量来做样式设计，其实css也同样可以定义变量，在小程序中由于原生不支持动态css语法，so，可以使用css变量来使用开发工作变简单。基本用法基础用法<!--web开发中顶层变量的key名是:root，小程序使用page-->page{--main-bg-color:brown;}.one{color:white;background-color:var(--main-bg-color);margin:10px;}.two{color:white;background-color:black;margin:10px;}.three{... 继续阅读 >
2020
09-24

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

visual studio code 编译运行html css js文件的教程 运行html文件1、添加插件扩展2、安装openinbrowser3、在对应的html文件处右击，选择openindefaultbrowser或者直接总结到此这篇关于visualstudiocode编译运行htmlcssjs文件的教程的文章就介绍到这了,更多相关visualstudiocode运行htmlcssjs文件内容请搜索自学编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学编程网！... 继续阅读 >
2020
09-24

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

vue css 引入asstes中的图片无法显示的四种解决方法 这里主要针对的是vuecli2中的一些问题。vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1.static，2.assets关于这两者之间的区别，和如何选择这里就不多说了！这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！这是因... 继续阅读 >
2020
09-23

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

基于html+css+js实现简易计算器代码实例 使用html+css+js实现简易计算器，效果图如下：html代码如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>calculator</title><linkrel="stylesheet"type="text/css"href="style.css"rel="externalnofollow"><scripttype="text/javascript"src="contain.j... 继续阅读 >
2018
12-03

总结：如何修改美化radio、checkbox的默认样式

总结：如何修改美化radio、checkbox的默认样式 现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给<input>元素设置为透明，然后通过定位让用户看到的是<label>元素，利用css的原生属性来判断用户的操作，设置选中后的label样式，即input[type=checkbox]:checked+labe... 继续阅读 >
2018
08-08

CSS 的空格处理

CSS 的空格处理 一、空格规则HTML代码的空格通常会被浏览器忽略。<p>◡◡hello◡◡world◡◡</p>上面是一行HTML代码，文字的前部、内部和后部各有两个空格。为了便于识别，这里使用半圆形符号◡表示空格。浏览器的输出结果如下。helloworld可以看到，文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。如果希望空格原样输出，可以使用<pre>标签。<pre>◡◡hello◡◡world◡◡</pre>另... 继续阅读 >
2018
04-25

一个HTML元素和五个CSS属性的魔力

一个HTML元素和五个CSS属性的魔力 假设我告诉你，我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码，也没有使用图像（只是在html元素上使用了background设置了一个背景图片，只是为了表明这个元素有一些透明的部分），同样也没有使用JavaScript代码。你一定会觉得很神奇，对吧！有好奇之心，对于我们做前端的同学而言，应该一直都有，只有这样才能做出很多我们一直以为实现不了的效果，比如接下来要介绍的内容。... 继续阅读 >
2018
02-21

前端性能优化小纪

前端性能优化小纪 天下武功，无坚不破，唯快不破。对前端而言，快意味着要求资源体量更小、数量更精简、内容更早呈现、交互更加人性化。当项目做到一定程度，就应该考虑性能的问题，前端的性能优化有诸多有迹可循的理论和方法，比如Yahoo！性能军规、GooglePageSpeedInsightsRules。我们团队一个比较老的项目首屏加载大概需要20多秒，这严重影响了用户体验，于是进行了一次首屏加载的性能优化。浏览器渲染过程首先，稍微了解一下... 继续阅读 >