看图： 看例子： 注释有些是这里没得 认真看注释即可！ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href
2.1 字体相关属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>字体属性演示</h1> <p> <label>字体体系：</label> <span style="font-famil
目录 一、CSS思维导图 二、注释 /*.......*/ 三、选择器 （一）标签选择器 （二）类选择器 （三）ID选择器 （四）通配选择器 （五）包含选择器 （六）选择器分组 （七）示例 四、背景 （一）背景颜色 background-color （二）背景图片 background-image （三）图片位置 background-position 五、
文章目录 style中变量作为属性值分析 style中变量作为属性值 <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="XianShiXiangQing" >
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TODOList</title> <style type="text/css"> body{ margin: 0; background-color: #f5f5f5;
.flex{ display: flex; } .align-center{ align-items: center; } .justify-center{ justify-content: center; } .padding{ padding: 10px; } .margin{ margin: 10px; } .margin-lr{ margin:0 10px; } .margin-tb{ margin: 10px 0; } .padding-l
边框与圆角 border的三要素 border: 1px solid red; border-width（线型） dotted-点状线 dashed-虚线 solid-实线 border-style（线宽度） 如：1px border-color（线颜色） 如：red 四个方向的边框 border-top: border-right: border-bottom: border-left: 也可以使用： border-top: 1px solid
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： width和height：内容的宽度、
<html> <div class="sanjiao active"> <i class="el-icon-star-on"></i> </div></html> <style> .sanjiao{ border: 30px solid #ccc; border-left: 30px solid transparent; border-botto
<head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; } div { width: 150px; height: 150px; background-color: #f00; padding:
[css] 请用css写一个扫码的加载动画图 @Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .donut { display: inline-block; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #7983ff; border-radius: 50%; width:
伪类选择器我们以超链接为例。 当给某文字设置了超链接后，可以看到访问该网站之前和访问该网站过后，其颜色是不一样的。这个时候如果我们要自主设计颜色，可以通过伪类选择器进行。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title
用到的知识点：水平垂直居中、定位、层级等。 <div class="line-icon"> <p></p> <span>标题</span> </div> .line-icon{ position: relative; height:50px; width:100%; border:1px solid black; } .line-ic
效果展示： html： <div class="test55"> <div class="test5"> <div class="box1">菜单</div> <div class="box2"
上下两个div容器在没有加文字的时候还是紧靠的，为什么一加入文字就会有距离，产生间隙！！！！ 全部代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>容器</title> <style> body{ font-size:30px; padding:0px;
top、left为负——当前元素盖别人 bottom、right为负——后面元素盖过来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
一个简单的广告框 实现了延迟显示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>广告框</title> <style> *{ padding: 0px; margin: 0px; } #Ad{ width: 300px; height: 350px; background: bla
一，什么是外边距折叠？ 在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。 关键字：毗邻、两个或多个、垂直方向和普通流 毗邻 毗邻说明了他们的位置关系，没有被padding、borde
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title>
学css的第一天【笔记】 rem是相对根元素的字体大小而言 纠正:rem是相对于html的字体大小而言 【字体】 电脑上没有的字体，会使用默认的字体 {normal 默认值 也成为正常字体 {bold 加粗 font-weight {bdder 更粗 {light
案例分析： 1 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码； 2 一个按钮，两个状态，点击一次，改为文本框，继续点击一次变成密码框； 3 算法：利用一个flag变量，来判断flag的值，如果是1就切换文本框，flag设置为0，如果是0就切换为密码框，flag设置为1； 代码如下（大佬勿喷）： <!DOCTYPE
本地存储技术： localStorage(IE8以下不兼容） 1. 永久存储 2. 最大可以存储5M 客户端的一个微型数据库 3. 只能存储string cookie 1.可以设置过期时间 2. 最大可以存4KB 3. 每一个域名下面最多可以存储50条数据 sessi
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib
雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件： 合成雪碧图后是这样拼在一起的一张图： 2.雪碧图的使用 首先确定要使用的图标的位置和大小（可以通过ps测量）， 如下
网格 html { background: #58a; background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0), linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
