布局 一行 自然css
CSS笔记
``` .page-header ul { position: absolute; right: 2vw; top: 50%; transform: translateY(-50%); } ``` 这段代码用来设置 `.page-header` 中 `` 元素的定位及位置。解释如下： - `.pag ......
css常用
CSS中height和line-height的区别 height是元素自身的高度，line-height则是元素内部文字的行高。 比如：height:100px; line-height:20px;表示具有height样式的元素的高度为100像素，里面的文字行高为20像素，就是可以排5行文字。 补充 ......
移动端布局⽅案
移动端布局方案通常有如下几种： 1. 使用百分比布局 百分比布局是一种常见的移动端布局方式，通过设置元素的宽度或者高度为百分比，从而实现自适应效果。例如： ```css .container { width: 100%; } .item { width: 50%; float: left; } `` ......
jquery 给表格添加或删除一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ......
h5表单验证纯css示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ......
【css】calc() 函数
calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规 ......
flex布局
优点 操作 方便，布局简单 移动端应用广泛 PC端浏览器支持情况较差 低版本浏览器不支持 布局原理 flexible box的缩写 “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局 采用flex布局的元素称为flex container，所有子元素自动成为容器成员， ......
【css】@keyframes
一、transform 和@keyframes动画的区别： @keyframes动画是循环的，而transform 只执行一遍. 二、@keyframes CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性—— ......
【css】旋转，亮度变化
先定位 1 position: absolute;//绝对定位(很重要) 2 left: 124px;//定位位置，一般为盒子宽高的一半，可以是50%，50% 3 top: 102px; 4 transform: translate(-50%, -50%);//变换方向 5 //旋转 6 anima ......
html css 实现图片扫描特效
实现这个特效需要做3个层，所以要用到CSS绝对定位和层级z-index以及设置top、left、bottom、right的值。大体结构是一个容器，容器里放3个层，底层是4个角的边框效果容器，中间层是要扫描的图片容器，顶层是扫描线容器，这3个层通过z-index来实现层级，它们的高宽度都取父容器的高宽 ......
CSS三大特性
CSS 的三大特性包括： 层叠性（Cascading） 层叠性是指用于控制多个样式定义同时应用到某个元素时，如何决定哪个样式定义将被应用的机制。CSS 样式表中的规则可以根据其特定优先级与其他规则进行层叠，最终得到应用于元素的样式。常用的应用场景有： 通过应用不同的样式类来覆盖或扩展第三方 CSS ......
css background-image 大小自适应
html设置背景图片，默认情况会按照图片的原始大小显示。 但遇到有些情况要背景图片也要适应页面大小的时候可以使用以下样式 -moz-background-size:100% 100%; background-size:100% 100%; ......
css 样式文件中的特殊符号 - 波浪号(也叫 tilde,squiggle,twiddle)
例子： .check:checked ~ .content { } ~ 选择器实际上是后继同胞组合器（在2017年之前称为一般同胞组合器）： 后继同胞组合器由“波浪号”（U+007E，~）字符组成，它将两个简单选择器序列分隔开。由这两个序列表示的元素在文档树中具有相同的父级，并且由第一个序列表示的元 ......
JS来动态设置CSS样式
用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px'; ......
电商JD商城登录页面html+css
这也太难了吧，怎么连抄咱也不会抄啊QAQ 看了这么久的前端，总是感觉看得懂，写不出来，抄也不会抄 这不，这又抄写了一个京东电商商城的登录页面，本来想好好学习一下页面的布局以及编写结构和思维， 结果html代码还行，至少可以看的懂，到了css上就完全不知道怎么设置样式了，感觉有的样式完全可以不设置， ......
CSS 默认样式
outline: Chrome浏览器默认为-webkit-focus-ring-color auto 1px; webkit-focus-ring-color默认为rgb(16, 16, 16);这个值不会变，但是浏览器可能对其他的属性进行了处理，导致了focus元素时会根据背景色的不同产生不同的对 ......
CSS学习1 认识CSS；三种CSS的编写样式；CSS注释；常见的CSS样式；元素link；CSS颜色表示方法；浏览器开发者工具；浏览器的渲染流程
1_认识CSS what：为网页添加样式（美化界面）；一门样式表语言，不是编程语言 发展历史 css1（两个人合作发布） css2（w3c） css3（模块化持续发展中） 总结：美化HTML，让HTML与CSS分离 方式一：添加样式，例如颜色、字体，大小 方式二：布局，按照某种结构显示 2_三种CS ......
（elementUI）el-cascader级联多选，高宽样式的处理（一行显示）
一、问题：当级联选择器设置多选属性时，输入框的高度会被撑开，如下图所示 二、解决办法1.给el-cascader设置multiple和collapse-tags属性(多选模式下折叠Tag)，如下 <el-cascader :options="options" :props="{multiple: t ......
03-CSS 的基本使用
CSS 的基本使用 学习目标 能够知道css的作用 能够知道 css 的引入三种方式 能够说出 css 选择器的种类 能够知道常用的样式属性 能够说出元素溢出的解决办法 能够说出标签隐藏设置 能够知道盒子模型中的各个属性 一、CSS的介绍 1. css 的定义 css(Cascading Sty ......
字体自适应大小一行展示
字体自适应大小一行展示，最小为12，若还是超出则css的...代替 代码,以300px宽度为例 <template> <div class="comparyname" ref="comparyName"><div class="comparyname2">公司名称:目的地看似课的手机待机时间程VS的 ......
CSS定位方法详解
css概述： 1.css（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式。 2.css语言中有css选择器，在selenium中可以使用这种选择器来进行元素定位。 3.css定位方法比xpath快，而且css语言也非常强大，所以非常推荐这种定位方法 ......
CSS 常用苹方字体
// 苹方-简 常规体font-family: PingFangSC-Regular, sans-serif; // 苹方-简 极细体font-family: PingFangSC-Ultralight, sans-serif; // 苹方-简 细体font-family: PingFangSC-L ......
常用css
单行省略 /* * 强制不换行： white-space: nowrap; * 超出隐藏： overflow: hidden * 超出的文本显示省略号： text-overflow: ellipsis; * 需要设置宽度 */ .t-ellipsis { white-space: nowrap; o ......
css中rem，em
名词解释,rem是使用的重点 1.rem的定义理解： 通过设置 根元素<html>的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等， 2.rem（font size of the root element）是指相对于根元素的字体大小的单位。 em（font siz ......
一行代码搞定 font-size 响应式
前言 公司要做大屏，但是大屏还要有个嵌在系统的版本，屏幕（iframe）小了但字体大了怎么办。网上找了很多代码都很长，个人参考了资料后实现了一个一行代码 font-size 响应式。 TL;DR html { font-size: clamp(12px, calc(7px + 0.390625vw) ......
未知大小的图片适应（保持宽高比且不超出）图片容器的CSS属性
假设我们本地代码中有一个宽*高为100px*100px的图片的容器元素 <div class="img-wrapper" style="width: 100px; height: 100px;"> <img src="..." alt="待展示图片" /> </div> 如果图片不我们本地，而是属于 ......
第一行代码 Android 第三版读后感
《第一行代码Android 第三版》是一本非常好的Android开发入门书籍。本书结合作者的丰富经验和实际案例，通过一步一步的介绍，详细地讲解了Android开发的各个方面，包括Android开发环境的搭建、Android应用程序的结构、界面设计、数据存储、网络通信、多媒体处理等方面。 首先，本书从 ......
FreeCodeCamp-创建一副毕加索绘画来学习中级 CSS
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Picasso Painting</title> <link rel="stylesheet" href="./styles.css" / ......
使用Webstrom自动编译SASS/SCSS为CSS
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!） window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量 ......