![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 86
淘淘是只狗
努力码代码,给我的淘淘挣狗粮
展开
-
CSS 经典布局(两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局)
两栏布局(左列定宽, 右列自适应)DOM结构<div class="box"> <div class="box-left"></div> <div class="box-right"></div></div>float + margin.box { height: 200px;}.box > div { height: 100%;}.box-left { width: 200px; .原创 2021-11-17 23:25:29 · 541 阅读 · 0 评论 -
Vue 项目安装 scss 以及报错的解决方法 --- Window10 系统 和 Mac OS 系统
1.安装sass依赖npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass如果运行之后项目报错Module build failed: TypeError: this.getResolve is not a function at Object.loa...原创 2020-02-28 16:55:13 · 6234 阅读 · 0 评论 -
CSS 的 Position
定位类型相对定位元素(relatively positioned element)是计算后位置属性为 relative 的元素。绝对定位元素(absolutely positioned element)是计算后位置属性为 absolute 或 fixed 的元素。粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素。大多数情况下,height和width 被设定为auto的绝对定位元素,按其内容大小调整尺寸。但是,被绝对定位的元素可以通.原创 2021-11-13 20:20:14 · 774 阅读 · 0 评论 -
元素居中的方式总结大全
水平居中父元素是块级元素,子元素是行内元素,给其父元素设置text-align:center.father { width: 200px; height: 200px; background-color: antiquewhite; text-align: center;}.son { background-color: aqua;}<div class="father"> <span class="son">son</span>&原创 2021-11-04 23:09:40 · 136 阅读 · 0 评论 -
视区单位vw, vh简介以及可实际应用场景
基本概念vw和vh:视口单位中的“视口”,桌面端指的是浏览器的可视区域,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。1vw等于视口宽度的1%。1vh等于视口高度的1%。vmin和vmax:vmin为当前vw 和vh中较小的一个值;vmax为较大的一个值。怎么证明你猜是浏览器内部宽度大小(window.innerWidth)?是整个浏览器的宽度大小(window.outerWidth)?还是显示器的宽度大小(screen.width)?上代码<!DOCTYPE html>.原创 2021-10-26 22:27:18 · 1900 阅读 · 0 评论 -
如何将多个动画应用于一个元素上,今天让我来告诉你
场景:一个三角形从透明到实体,持续一秒,然后匀速前进五秒,然后变大持续两秒第一种:CSS + JS这一种比较麻烦,而且不好控制,写起来也费劲。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co原创 2021-10-10 15:26:33 · 255 阅读 · 0 评论 -
CSS 小知识点之伪元素的应用
伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过::before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。CSS3规范中的要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类,比如::before和::after等伪元素使用双冒号(::)...原创 2021-10-08 14:21:31 · 283 阅读 · 0 评论 -
3万字总结 HTML + CSS,还不赶紧学起来✔️
HMTL + CSS1. DIV+CSS布局的好处代码精简,且结构与样式分离,易于维护代码量减少,减少了大量的带宽,页面加载更快,提升了用户的体验对SEO搜索引擎更加友好,H5新增了许多语义化标签允许更多炫酷的页面效果,丰富了页面符合W3C标准,保证网站不会因为网络应用的升级而被淘汰缺点: 不同浏览器对web标准默认值不同,所以更容易出现对浏览器的兼容性问题。2. HTML 标签语义化2.1 HTML语义化背景介绍HTML结构语义化,是最近几年才提出来的,以前的html结构,一打开.原创 2021-10-06 09:06:14 · 507 阅读 · 0 评论 -
纯 CSS,原生 JavaScript,jQuery,Vue,React 实现轮播图, 一篇文章帮你全部搞定
平常开始都是使用组件库进行开发,里面的轮播图都是组件库封装好的,今天我们就来自己实现一个轮播图。体验一下原生开发,操作 dom 带来的快落吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=0">原创 2020-10-15 19:56:54 · 547 阅读 · 0 评论 -
CSS 属性 ----- overflow:auto 的使用
overflow 属性规定当内容溢出元素框时发生的事情。定义当一个元素的内容太大而无法适应 块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflowauto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。<!DOCTYPE html><html lang="en"><head> .原创 2021-06-14 13:23:17 · 9184 阅读 · 0 评论 -
感恩节如何使用 HTML + CSS 绘制火鸡(Turkey)
上效果图!!!!快点学起来!!!(代码来自 codepen,已附上链接)先来一道香喷喷的火鸡吧再看萌萌的火鸡跳舞<!DOCTYPE html><html lang="en"><!-- https://codepen.io/BlackPug/pen/gDqjx --><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi原创 2020-11-26 14:14:22 · 33398 阅读 · 0 评论 -
H5 移动端开发知识及解决方案
移动开发基本知识点1、基础Meta基础知识:H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<!-- 设置缩放 --><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />// width 设置viewport宽度,为一个正整数,或字符串‘device-width’// height 设置viewport高度,一般原创 2020-11-24 16:18:46 · 1004 阅读 · 0 评论 -
温故而知新的 CSS3 新特性学习
text-shadowtext-shadow:阴影1,阴影2…text-shadow: x y z color(x: 表示 x 轴的偏移,y:表示 y轴的偏移,z:表示模糊度,color:阴影的颜色)<style> #box1 { font-size: 100px; text-align: center; margin-top: 200px; color: aliceblue; text-shadow: 4px 4p.原创 2020-11-23 21:37:10 · 183 阅读 · 0 评论 -
11-11光棍节,用CSS如何画dog
为了狗狗不孤单,我们就画两只吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://s3.p..原创 2020-11-11 08:36:29 · 344 阅读 · 0 评论 -
Flex 实现可伸缩的图片墙
效果演示:CSS 部分CSS 在这个过程中占了重点,运用 flex 可以使各个元素按一定比例占据页面。在调试的时候,可以把边框显示出来方便查看效果。(border: 1px solid #f00;)将 .panels 设置为 display:flex设定每个子 panel 的 flex 值为 1针对每个子 panel,设为 display:flex,设置其 flex 主轴方向控制 .panle 的子元素 <p> 中的文字垂直、水平居中(单独看每个 panel,其中的文字也可以原创 2020-11-09 17:25:25 · 989 阅读 · 0 评论 -
CSS实现万圣节可爱鬼和南瓜专辑
科普一下 万圣节,在每年的11月1日,是西方的传统节日;而万圣节前夜的10月31日是这个节日最热闹的时刻为庆祝万圣节的来临,小孩会装扮成各种可爱的鬼怪向逐家逐户地敲门,要求获得糖果,否则就会捣蛋。而同时传说这一晚,各种鬼怪也会装扮成小孩混入群众之中一起庆祝万圣节的来临,而人类为了让鬼怪更融洽才装扮成各种鬼怪。百鬼夜行,我们混入其中,比鬼还要开心下面为大家展示五个使用 CSS 编写的万圣节页面。(代码均来源于codepen,笔者只做收集),大家快来欣赏大佬的杰作吧 (由于代码太多,所以均放在笔者的 g.原创 2020-11-02 10:58:23 · 446 阅读 · 0 评论 -
Flex布局学习
Flex布局1. flex 布局的概念 flexible box: 弹性盒状布局 容器控制内部元素的布局定位 CSS3引入的新布局模型 伸缩元素,自由填充,自适应2.flex布局的优势 可在不同方向排列元素 控制元素排列的方向 控制元素的对齐方式 控制元素之间的等距 控制单个元素放大与缩放比例,占比,对齐...原创 2020-02-02 21:13:46 · 515 阅读 · 0 评论 -
前端那些好看的视觉效果集合
1.视觉滚动差https://www.bilibili.com/video/BV1Yt4y127Ds<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t原创 2020-07-28 21:46:50 · 1501 阅读 · 0 评论 -
CSS实现新拟态效果
新拟态是一种图形样式,其原理是为界面的UI元素赋予真实感。原生名词有几个叫法,Neumorphism / soft ui,翻译过来是新拟态或者是软ui。国内的翻译叫,新拟物风格。Neumorphism,是New +Skeuomorphism的组合词。不得不说,这样的效果确实很不错,那么使用 CSS 该如何实现呢?推荐一个网站,https://neumorphism.io/#e6eef4在这个网站可以非常方便实现新拟态。我自己实现的效果????????????????????<!DOC原创 2020-07-21 21:09:35 · 4225 阅读 · 1 评论 -
前端酷炫效果之那些惊艳你的 hover
https://gitee.com/suiboyu/codes/s5avrqt2bf74e96wx8dgz28原文链接:https://codepen.io/jouanmarcel/pen/NLgVjmhttps://gitee.com/suiboyu/codes/26fa0c3r9idnohv5uexl162原文链接:https://codepen.io/littlesnippets/pen/dGVQvBhttps://gitee.com/suiboyu/codes/kifpcxl79n2h.原创 2020-07-04 08:22:52 · 459 阅读 · 0 评论 -
前端酷炫效果之那些漂亮的登录界面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m.原创 2020-05-21 10:57:39 · 30939 阅读 · 29 评论 -
HTML+ CSS实现动态背景渐变
B站地址 https://www.bilibili.com/video/BV1St411P7ef/?spm_id_from=333.788.videocard.6<!DOCTYPE html><html lang="en" dir="ltr" style="width: 100%; height: 100%;"> <head> <meta ...原创 2020-04-23 20:56:03 · 4038 阅读 · 0 评论 -
HTML + CSS 实现炫彩 3d 盒子
B站地址https://www.bilibili.com/video/BV1jC4y14739?from=search&seid=14906173926344311066看完之后,总有一种自己 CSS 白学的感觉,太卑微了,向大佬低头????????????????????????????????下面的评论有链接,里面有素材,(真是太贴心了)<!DOCTYPE html><html lang="en">...原创 2020-04-23 19:59:06 · 1215 阅读 · 0 评论 -
前端酷炫效果之你一定需要的 Button 样式
jQuery 实现萤火虫效果(我在B站看到的,地址忘记了,感兴趣的小伙伴可以去找找)????????<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...原创 2020-04-22 11:10:53 · 18416 阅读 · 0 评论 -
CSS实现高固定,左右宽固定,中间自适应的三栏布局
header标签<head> <meta charset="utf-8"> <title>Layout</title> <style media="screen"> html *{ padding: 0; margin: 0; } .layout...原创 2020-04-10 16:41:50 · 388 阅读 · 0 评论 -
filter-css属性
各种大型网站为了纪念今天这个特殊的日子,配色都变为了灰白色,那么这些网站是怎么实现的?通过查看元素,百度淘宝阿里云腾讯京东今日头条csdn使用 filter 过滤器filter MDN 里面对 filter 的解释是: filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。修改所有图片的颜色为黑白 (100% 灰度)...原创 2020-04-04 13:19:55 · 228 阅读 · 0 评论