ss

css用Flex布局制作简易柱状图的实现

以下是一个用Flex布局的柱状图: HTML: <div class="his_box"> <div>成绩分布直方图</div> <div class="histogram"> <div><div>10</div></div> <div><div... »

css实现3d立体魔方的示例代码

今天来做一个简单的3d魔方先看效果图吧!二、添加css样式*div.top.bottom.left.right.after.before好了到了这一步就相当与把地基打好了,我们开始盖楼了你看到的必须是这个效果注意我这里是缩小了,你应该也是和我一样方块都是挨着的,像柱子一样堆着的。 »

postcss-pxtorem移动端适配的实现

执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -Dpostcss.config.js 新建package.json同一个目录下,文件内容如下module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= »

css实现导航切换的实例代码

css导航切换效果图如下:  代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title>css实现导航切换</title> <style type="text/css"> .clothes{width:1170px;margin:0 auto;border... »

css浮动(float/clear)使用讲解

css浮动(float/clear)使用讲解

这时候就要用到清除浮动,如果单纯根据官方定义,读者可能会尝试这样写:在div1的CSS样式中添加clear:right;,理解为不允许div1的右边有浮动元素,由于div2是浮动元素,因此会自动下移一行来满足规则。 »

在这里插入图片描述

java 反射Reflection;Class类

1.反射机制概述 java能够反射的前提:已经加载过这个类 反射可以通过类名来寻找这个类的所有相关信息、类似于人类的记忆,事先在记忆中有了这个事物的信息,人就可以通过名字来在记忆中寻找事物的具体信息。 Reflection(反射) 是被视为动态语言的关键,反射机制允许程序在执行期借助Reflection API取得任何类的内部信息并能直接操作任意对象的内部属性及方法。 java反射机制所提供的功能... »

利用css样式实现表格中字体垂直居中的方法

利用css样式实现表格中字体垂直居中的方法,具体代码如下所示: 有一个自定义表格如下所示,当所返回数据改变时,文字都能自动居中  //html //用两个div做容器 <el-col :span="3" class="col_row1"> <div class="grid-content1 "> <... »

css实现不同浏览器下兼容文本两端对齐

在 form 表单的前端布局中,我们经常需要将文本框的提示文本两端对齐,例如: 比较粗暴的做法是在需要隔离边距的文本中加标签,然后分别控制每个文字的边距,这种方法比直接加空格或者占位符更精准,我之前也都是这么做的。但是写的多了之后开始思考能不能抽象出来用于更多的场景?让代码更好看一些?维护成本更低一些? 1、首先想到是能不能直接靠 css 解决问题 css .test-justify { text... »

css3动画 小球滚动 js控制动画暂停

CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。 CSS3 @keyframes 规则 要创建 CSS3 动画,你需要了解 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 @keyframes myfirst /* myfirs... »

css遮罩全屏居中对齐的实现方式

具体代码如下所示: <style> #toastLoaderFullScreen { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; background-color: rgba(224, 38, 38, 0.5); } #toastLoader { posi... »

css实现的交互小三角箭头图标

复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/... »

在这里插入图片描述

css的z-index权重问题【最简洁,没有废话】

文章目录一、跟笔者一起看下面实战中z-index的几种情况:二、设置基本的dom结构与样式,准备测试三、开始测试测试问题1:测试问题2:测试问题3:测试问题4:测试问题5:四、结论五、笔者致广大读者的话今天笔者就与大家分享一下css的z-index权重问题。一个父级盒子定位,一个不定位,不定位的子级设置定位,并给定位的子级元素加z-index,谁在上面?俩个都定位,一个设置z-index为1,谁在... »

css overflow: hidden 的用法(溢出隐藏及清除浮动)

溢出隐藏 就是隐藏超出规定高度的文本或者图像信息。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css&q... »

css3使用animation属性实现炫酷效果(推荐)

animation-name 动画名称,可以有多个值,用逗号隔开,表示绑定了多个动画 animation-name属性为动画指定一个名称 animation-name兼容主流的浏览器,不过还是需要加前缀去兼容 animation-name有两个属性值,分别是keyframename和none <!DOCTYPE html> <html lang="en">... »

详解如何修改el-select的样式:popper-append-to-body和popper-class

如何修改elementUI提供的el-select组件的样式 网上有很多关于这个的解决方式: 1、找到下拉框的类名,写个全局样式覆盖掉就行了 2、修改.el-select-dropdown__item的样式 3、通过官网提供的popper-class进行样式修改 然而,上面的方法并没有说到点子上,覆盖全局样式的方法肯定不友好,修改样式和添加类也都不起作用。于是,我看了下下拉框的样式,它并没有在el... »

利用css3径向渐变做一张优惠券的示例

在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过。那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术这么先进再用背景做平铺是不是已经out了,那么今天给大家介绍一个用css3径向渐变做的优惠券。 CSS3 径向渐变和线性渐变是很相似的,首先来看其语法: -moz-radial-gradient([&... »

完美解决调用上级目录中的css样式文件的路径问题

问题:我的.html 在uploads/jhsy/zyzd这个文件夹下,我想调用uploads/css下的.css样式,那是不是该这样写link href="uploads/css/liebiao.css"? 怎么没效果啊! 回答:你的目录应该是向向级吧href="../../uploads/css/liebiao.css" 补充:  &... »

在这里插入图片描述

nodejs入门之Express进阶

Express进阶 一.Request Request 对象表示 HTTP 请求。Express 在现在基础上做了一层封装添加了一些简单好用的属性与方法。 1.req.query:获取query参数(问号传参) const express = require('express'); const app = express(); app.get('/', (req, res) => { //h... »

css实现抖音订阅按钮动画效果

前段时间刷抖音,觉得关注时的按钮动画很好看,加上自己本身最近也在学习前端知识。所以就想怎么自己实现出来,最终效果还可以,但是感觉自己做的还不够好。仅供参考。 🍻最终效果 💡思路 使用jQuery的toggleClass()方法,添加删除类active 分别为原本的和active的元素设置样式,使用css的transition属性,定义变化时间,速度等 使用css的a... »

Css和JS实现下划线动效的方法示例

本文主要讲述两种下划线动效效果,第一种悬停时 X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左!! 实现的主要效果是利用伪类标签,以及hover,利用transfromm trition实现动画效果 x轴由内向外展开 利用贝塞尔曲线利用横线的动画实现,具体代码如下: ul { display: flex; padding: 0; margin: 0; list-style-... »

webpack加载css文件及其配置方法

webpack加载css文件及其配置 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去,但是如果我们的css文件有很多的话,一个个的导入是不推荐的;而现在我们学了webpack,我们希望的是通过打包bundle.js文件,将所有的依赖文件全部导入进去。 我们要知道的是,如果在入口函数main.js文件中如果没有导入css文件,那么打... »

css3 边框、背景、文本效果的实现代码

css3 边框、背景、文本效果的实现代码

一、边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 spread:阴影的尺寸 color:阴影的颜色 inset(outset):内部阴影/外部阴影 <br>box-shadow: 5px 0 5px ... »

利用css @viewport 做设备适配

在需要调整设备浏览器的viewport时,我们通常在HTML中使用来解决。但是令人意想不到的是,viewport meta标签并不具有“规范性”,即它不是W3C的正式标准,也非Web标准。 Apple公司率先在其iPhone中的Safari浏览器中实现了viewport meta标签,其他浏览器厂商也快速采纳了它。由于IOS、Android及类似平台在平板电脑和智能手机设备... »

在这里插入图片描述

用css3属性如何来做一个动态螺旋丸

效果图: 这里用到的css3属性: transform animation transform-style *{ margin: 0; padding: 0; } body,html{ height: 100%; width: 100%; background: url(images/xk.jpg); } #box{ width: 400px; height: 400px; position: f... »

通过css动画实现一个表格滚动轮播效果

css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下 <template> <section> <div class="box"> <ul class="header"> <li class="cell">序号</li> <li... »

Page 1 of 210123»