CSS Glassmorphism 按钮悬停效果 CSS Glassmorphism 按钮悬停效果免费下载 在 HTML 和 CSS 中 HTML： <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con
css实现精致的角标 参考：视觉还原小技巧！CSS 实现角标效果 纯色角标 -> 有白色到透明渐变的角标 -> 更精致有微弱高光的角标 .ribbon1 { margin: 0 60px; font-size: 34px; line-height: 70px; color: #fff; text-align: center; width: 200px; height: 70px; /*
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>固定定位</title> <style> body{ height: 1000px; } div:nth-of-type(1){ width: 3
在实际开发中管理端经常用到 easyUI layout 加 iframe 方式管理多页面，如下图： 解决办法 ： 在所有要在Iframe中显示的页面 body标签中 添加style 设置 style="margin-bottom:30px;padding-bottom:30px;" 效果如下图：
<style> .showTotal{ width: 100%; //must set overflow: auto; } .outter{ width: 98%; min-width: 60vw; height: auto; overflow: auto; display: flex;
【现象描述】 当text组件的内容较多多行显示的时候，相邻的div样式会显示异常，会从正常的圆形变为椭圆。 代码如下： <template> <div class="container"> <div style="align-items: center;"> <div class="typscolor" style="background-color: bl
运行代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>音乐排行榜</title> <link rel="stylesheet" type="text/css" href="style05.css"> <style> /*清除浏览器默认样式*/ *{mar
<div class="love"></div> .love { position: relative; top: 30px; left: 50%; width: 30px; height: 30px; background-color: pink; } .love:before { content: ""; position: absolute; top: -14px; left: 0; w
<div class="show-box"> <div class="show-top"> <span>头部</span> </div> <div class="show-content"> XXXXXX </div&
前言 之前的文章 CSS – W3Schools 学习笔记 (3), 这篇独立出来写, 作为整理. 参考: Youtube – Advanced CSS Border-Radius Tutorial 正文 以长方形作为例子比较容易理解. normal use border-top-left-radius: 40px 30px; 设定 top-left (左上角)变圆角. horizontal 4
<!--css--> .border { background: #099; width: 60px; height: 30px; position: absolute; right: 0; } .border::after { position: absolute; content: ""; top: 30px; right: 0; border-bottom: 10px
vue基础知识梳理（二） 1. vue中v-bind:class动态添加class 总结：动态添加class，需要给：class=“对象”，对象中value为true，则key作为class名添加；value为false，则添加失败 方案一：直接在html结构中给class一个对象 //html <div class="btn" :class="{wordColor:false,wordSize:true}" >
01-CSS3图片模糊处理filter <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
边框（三要素） 宽度 border-width 单位是px 线型 border-style solid实线 dashed虚线 dotted点状线 颜色 border-color 就是普通的颜色 transparent（透明色） 书写小属性的好处是可以层叠通用属性，用于调个别样式 四个方向的边框 border-top border-right border-bottom border-le
原图效果： 效果图： 实现代如下： HTML代码： <ul> <li>大道至简</li> <li>菩提</li> <li>只可意会</li> <li>不可言</li> </ul> CSS样式： ul{ float: left; } ul li{ width:80px; height:30px; list-st
1知识点 2.效果图 3.代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { width:100px; height: 30px;
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding:0;margin:0;} li{list-style:none;} .left{float:left;padding:3
<extend name="Base/common_new"/> <block name="style"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </block> <block nam
BFC（Block formatting context）：块级格式化上下文。BFC是一个独立的布局环境。 可以利用BFC解决两个相邻元素的上下margin重叠问题。 BFC的特性：属于同一个BFC的两个相邻容器的上下margin会重叠 <div> <div class="a"></div> <div class="b"></div> </div> a设置margin-
用css3做一个三角形 <style> .up { width: 0; height: 0; border-width: 0 30px 30px; border-style: solid; border-color: transparent transparent cyan; margin-top: 10px; } .down { width: 0; height: 0; border-width: 30px 30px 0;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件： 合成雪碧图后是这样拼在一起的一张图： 2.雪碧图的使用 首先确定要使用的图标的位置和大小（可以通过ps测量）， 如下
CSS CSS 内边距 CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。 div { padding-top: 50px; 上内边距是 50px padding-right: 30px; 右内边距是 30px padding-bottom: 50px; 下内边距 50px padding-left: 80px; 左内边距80px }http
<div></div> <style> div{ position:relative; width:150px; height:300px; background-color:#fff; border-left:150px solid #000; border-radius:50%; } div::before{ content:''; position:absolute; top:0; left:-75px; w
目录 思路结果代码HTML部分CSS部分JavaScript部分 说明 思路 蛇拥有的行为： 能移动、吃食物、变长(加尾巴) 1、蛇身： 编写蛇头、蛇身 通过计时间隔向某方向移动 检测有没有吃到食物，吃到则加尾巴 判断碰撞(蛇吃食物) 2、食物： 编写食物 随机出现 通过计时间隔某时间段出现
