CSS
史上最强大的40多个纯CSS绘制的图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯 CSS 绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。 Square (正方形) #square { width: 100px; height: 100px; background: red; } Rectangle (矩形)
日期 2023-10-12 18:19:40
css中 vertical-align 属性的应用和案例
📋 个人简介 💖 作者简介：大家好，我是阿牛😜📝 个人主页：馆主阿牛🔥🎉 支持我&#
日期 2023-10-12 18:19:40
【CSS】CSS基础认知【CSS基础知识详解】
🌸大家好，我是花无缺，一枚热爱生活的新时代青年，感谢你的阅读🥰~ 👨💻个人主页：@花
日期 2023-10-12 18:19:40CSS – Icon
前言 Icon 并不容易搞. 市场有许多平台支持 Icon, 有些收费有些免费. 有些 icon 很丰富, 有些很缺失. 尤其是在做网站的时候寻找 icon 是一个挺累的事情. 这篇就来聊聊 icon. 各大平台 1. Material Icons Google 出的, 免费, 缺点是少, 它有 Font, SVG, PNG. 2. f
日期 2023-10-12 18:19:40
html+css实现幻灯片自动轮番代码
众所周知自动轮播会使用户烦恼并降低可见度 ，因此很多网页都会有用到 自动轮播效果如下： 源码下载地址：html+css实现幻灯片自动轮播代码-点击下载
日期 2023-10-12 18:19:40CSS – Transform
前言 之前写的 W3Schools 学习笔记 (3) – CSS 2D Transforms. 这篇作为整理. 参考: Youtube – Learn CSS Transform In 15 Minutes Demo Structure <div class="frame"></div> <div class="bo
日期 2023-10-12 18:19:40
推荐大家使用的CSS书写规范及顺序
@设计达人网 写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里我总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。 CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2
日期 2023-10-12 18:19:40CSS系列：CSS常用样式
1. 通用样式 Base.css * { margin: 0; padding: 0; } body { width: 1000px; margin: 0 auto; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #969696
日期 2023-10-12 18:19:40【Html + Js + CSS——电流壁纸（源码+特效）】
目录 一、效果 二、代码 一、效果 二、代码 index.html <!DOCTYPE html> <html lang
日期 2023-10-12 18:19:40CSS进阶之模拟Bootstrap网格布局
目前暂时实现效果，容后面整理心得，先贴上源代码。 源码 <!DOCTYPE html> <html> <head> <title>demo bootstrap</title> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"
日期 2023-10-12 18:19:40
全网最详细的less教程(为什么使用less和less的语法)以及 解决css的兼容性问题，并解决NameError: variable ## is undefined的问题
目录 1. 为什么使用less1.1 CSS的兼容性问题1.2 解决兼容性问题 2. less简介3. 如何使用less3.1 安装less3.2 less编译3.3 less基本语法3.4 less语言
日期 2023-10-12 18:19:40如何用纯 CSS 创作一个记事本翻页动画
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/qKOPGw 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/p/pEgDAM/c6GV2Ay 源代码下载 本地下
日期 2023-10-12 18:19:40【再学CSS】CSS属性（文本属性、字体属性）
【再学CSS】CSS属性（文本属性、字体属性） 文章目录 【再学CSS】CSS属性（文本属性、字体属性）一、文本属性==1.text-d
日期 2023-10-12 18:19:40webpack4.0各个击破（2）—— CSS篇
webpack作为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者自己的学习记录，比较基础，希望通过问题 + 解决方式的模式，以前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。（本篇中的参数
日期 2023-10-12 18:19:40css案例学习之父子块的margin
两边还会有些距离，这是body默认的。 代码： <head> <title>父子块的margin</title> <style type="text/css"> /* body{ margin:0 0; } */ div.father{ /* 父div */ background-c
日期 2023-10-12 18:19:40css修改scroll的默认滚动条样式
1、首先我们要给div一个固定的高度或者最大的高度（height）2、设置overflow为scroll（如果只想保留横向或者竖向的滚动条的话，直接设置overflow-x或overflow-y）3、给改div或者整个页面添加css，就可以了 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { w
日期 2023-10-12 18:19:40extractCSS – 帮助你从 HTML 中快速分离出 CSS
extractCSS 是一个免费的基于 Web 的应用程序，能够从 HTML 中提取风格相关的信息，包括 id、class 和内联样式，而且输出可以定制（缩进和括号的用法）。该工具非常有用，当我们快速创建一个使用了内联样式的 HTML 文件时，如果要分离就会很方便。 您可能感兴趣的相关文章 那些让人惊叹的的国外创意404错误页面设计 让人爱不释手的精美 Web 应用程序图标素材 赞！10
日期 2023-10-12 18:19:4022个必备的CSS小技巧
http://jrainlau.github.io/2016/07/03/%E3%80%90%E8%AF%91%E3%80%9122%E4%B8%AA%E5%BF%85%E5%A4%87%E7%9A%84CSS%E5%B0%8F%E6%8A%80%E5%B7%A7/?hmsr=toutiao.io&utm_medium=touti
日期 2023-10-12 18:19:40CSS之切出横幅
简述 上节分享了clip-path来实现一个剪切横幅，本节通过另外一种方式来实现一个更经典的横幅。 简述 最终效果 小三角 效果 源码 阴影分割 效果 源码 合并 最终效果 我们先看一下最终要实现的效果。 我们要实现这样一个效果，首先需要将其进行上下分割，上面为一个红色背景右边有剪切三角且下边带阴影效果的样式，下面是一个黑色小三角。 为了
日期 2023-10-12 18:19:40css给span加float:right右浮动后内容换行下移
转自:https://www.jb51.net/css/67309.html在div css布局中 当span标签右浮动时会产生换行狭义的现象<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "&g
日期 2023-10-12 18:19:40jQuery和CSS 3定制HTML 5视频播放器
目前，随着越来越多的浏览器开始支持更多的HTML5新特性，开发者也逐渐关注HTML5的开发。在众多HTML5的新特性中，视频方面的新特性是 很值得开发者和用户关注的。现在，只需要有支持HTML5的浏览器，不需要FLASH或其他插件，都可以轻松的观看视频了。然而，由于各浏览器在对 HTML5的支持上，会有少许的差异，因此为了有更好的兼容性，需要进行定制开发，这样才能更兼顾各类的浏览器。在本文中，将
日期 2023-10-12 18:19:40css 自定义鼠标默认样式
body { cursor: url("../../assets/images/mouse.png"),auto; }
日期 2023-10-12 18:19:40CSS直接实现的响应式
http://www.mahaixiang.cn/wzsj/278.html 不只是用JS 判断屏幕大小 ，实现总体的BODY再调整rpx。 还有CSS直接控制的阑珊格和自动隐藏部分元素的 屏幕响应式。如layui https://www.zhihu.com/question/20732368 大神表示：响应式不是某种技术，而是一种设计思想或者说设计策略。 简单说呢就
日期 2023-10-12 18:19:40CSS * *:before, *:after
*, *:before, *:after { box-sizing: inherit; } * 代表所有 针对所有得元素都添加 box-sizing: inherit; 属性 *:before 如果*很难理解可以看下p标签 after就是在后面 不做赘述 在每个 <p> 元素的内容之前插入新内容
日期 2023-10-12 18:19:40IE7,6与Fireofx的CSS兼容性处理方法集结
CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声明. 一、CSS 1、vertical-align:middle文字垂直居中，对于某些元素如div{width
日期 2023-10-12 18:19:40css-3列布局
三列布局的步骤是,先定义左右两侧,然后定义中间,并设置'中间'部分的'margin'属性.并且'中间'部分不用设置'width'.例如: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g
日期 2023-10-12 18:19:40CSS – Clip Path
前言 我是在搞 1 side box-shadow 发现这个功能的. 平常很少做特效, 所以对这个好功能缺乏认识. 这篇大概记入一下先, 以后有认真用再补上细节. 参考 Youtube – Awesome UI Interactions with the CSS Clip Path Property Stack Overflow – How can I add
日期 2023-10-12 18:19:40css：顶部按钮固定，上面内容滑动
这种需求我们平时见到很多的，实现方法也多的参差不齐，下面我说一种简单的。如图： 可以看到只有红线部分滚动，底下按钮是固定的。 代码 <div class&#
日期 2023-10-12 18:19:40让CSS里div上下左右绝对居中几种方式
1、绝对定位（常用于登录模块）备注：前提条件div需要有宽高 1 <div class="box"></div> 2 #css 3 .box{ 4 position:absolute/fixed; 5 left:0; 6 right:0; 7 top:0; 8 bottom:0; 9 margin:auto; 10 } 2、margin负值备注：前提
日期 2023-10-12 18:19:40【转载】CSS Sticky Footer: 完美的CSS绝对底部
下面是我找到的一个比较完美的方法，来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。 <div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div>
日期 2023-10-12 18:19:40使用grep 解析出css中的地址
从css 中取出地址这是再平常不过的事情了, 使用grep来完成就是一个最简单的事情了 不说二话,上命令 grep -o "(.*)" style.css 这个命令行的意思是:-o 只输出匹配的字符, 模式是()中的所有内容 复刻解析一个流光溢彩炫到掉渣的 CSS 动画按钮 最近在看 next.js 官网是被引流到 conf 页面，发现上面有一个炫酷的按钮，按钮的边框色
日期 2023-10-12 18:19:40CSS & JS Effect – 画三角形 Triangle
前言 画三角形有什么用? 可以做这样的 Design 参考 5 Ways To Create A Triangle With CSS Border Triangle 用 border 做 三角形应该是最远古的招数了. HTML <div class="box"></div> CSS .box { border-style: soli
日期 2023-10-12 18:19:40CSS血轮眼动画
1、效果预览 需要文件的话不多说 : 点击下载 2、实现过程 ① html 部分 : <div class="eye"> <!-- 外眼眶 、内眼框 --
日期 2023-10-12 18:19:40CSS中超链接的4种伪类
1、 :link 用来表示未访问过的链接（正常链接） 2、 :visited 用来表示访问过的链接，由于隐私的原因，所以visited只能改颜色 3、:hover 用来表示鼠标移入的状态 4、:active 鼠标点击后的状态 总结：link和visited是a标签独有的状态&#x
日期 2023-10-12 18:19:40CSS之使用display:inline-block来布局
css之display:inline-block布局 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有
日期 2023-10-12 18:19:40CSS 有关Position = absolute (绝对定位 是相对于谁而言)
CSS 有关Position = absolute (绝对定位 是相对于谁而言) css中有绝对定位法，以前一直搞不懂绝对定位是相对于谁而言的绝对定位。 现在搞清楚了，不是相对于父元素，也不是相对于BODY。 而是相对于所属元素树中，相邻最近的那个显示标识了position属性的元素。 比如 div id="a" div id="b" div
日期 2023-10-12 18:19:40Sublime text 3 格式化HTML/css/js/json代码 插件
JsFormat： 这里下载这插件包 https://github.com/jdc0589/JsFormat ，点油下角的zip就能下载 插件包放到sublime安装目录的Data\Packages目录中 重新打开sublime就能使用js格式化插件 使用方法： 1、快捷键：ctrl+alt+f 2、先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “F
日期 2023-10-12 18:19:40CSS border-style 属性
CSS 参考手册 实例 设置 4 个边框的样式： p { border-style:solid; } 亲自试一试 浏览器支持 IEFirefoxChromeSafariOpera 所有浏览器都支持 border-style 属性。 注释：任何的版本的 Internet Explorer
日期 2023-10-12 18:19:40CSS基础：block，inline和inline-block
css的display属性是前端开发中非常常见的属性，本文简单介绍下其中比较常用的属性值，即block、inline和inline-block。 HTML组件中呈现一片空白区域的组件都可当盒模型（box modal），而CSS则提供了display属性来控制盒模型的外观。 1. block类型（块） 这种盒模型的组件默认占据一行，允许通过CSS设置宽带、高度。 例如：<div .../&g
日期 2023-10-12 18:19:40css最多显示两行
overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
日期 2023-10-12 18:19:40webpack learn1-配置项目加载各种静态资源及css预处理器2
继续在webpack.config.js中配置loader { test:/\.css$/, use: [ 'style-loader', 'css-loader' ] },{ test:/\.(jpg|svg|jpeg|png|gif)$/, use: [ { loader: 'url-loader', options: { limit: 1024, name: '[name]-aa.[e
日期 2023-10-12 18:19:40HTML & CSS – Styling Table
前言 Table (表格) 历史悠久, 它有许多独特的默认样式, 它也是最早的布局方案方案哦 (现在依然有用 table 来做布局的, 比如 email template). 这篇来介绍一下基本的 table styling. 参考 Youtube – Styling HTML tables with CSS - Web Design/UX Tutorial Youtube –&n
日期 2023-10-12 18:19:40CSS元素居中多种方法
一.行内元素 1、水平居中 1）text-align:center; <div class="box"> <span class="child">content</span> </div> <style> .bo
日期 2023-10-12 18:19:40less可以做什么？less详解！(less嵌套选择器实现纯CSS二级导航)
前端技术众多，作为一名前端工程师，我们每接触新技术首先要懂得此技术的优势和劣势，这是最基本的。往深入了说还需要懂得技术的应用场景，与之配合的技术等，方便为以后架构做准备。而less作为一门CSS预处理语言，拥有函数式变成的特点，主要优点就是高效。主要适用于包含众多CSS的大型项目。主要体现在：项目公共样式的定义，如页面主色、固定数值（宽、高、时间等）、公用样式模板、封装省略浏览器兼容前缀的函数等
日期 2023-10-12 18:19:40HTML+CSS样式设置——CSS一学就会
HTML+CSS样式设置 CSS：（Cascading Style Sheets）层叠样式设置表。 网页的展示效果跟其排版有非常大的关系。排版则主要依靠CSS来设置、调节。 以下说CSS与HTML的联合使用的过程： （1）新建CSS文件（一般放在与HTML文件同一路径下的css目录中）。 （2）在
日期 2023-10-12 18:19:40CSS – Float
前言 Float 是上古时代的东西, 它的效果已经基本被 Flex, Grid 取代了. 但是还是可以了解它一下. 就当学习历史呗. 参考 Youtube – HTML & CSS for Beginners Part 18: How Floats and Clears work 图片和文字 horizontal 排版 (Flex) 想把图片和文字并排像上图
日期 2023-10-12 18:19:40css 去掉i标签默认斜体样式
font-style: normal;
日期 2023-10-12 18:19:40css：两栏三栏布局
两栏布局左边固定右边自适应 1、浮动方式 <!DOCTYPE html> <html lang="en"> <head> <style>
日期 2023-10-12 18:19:40css零星进阶知识点
display: inline-block: 可设置宽高的行级元素，如果inline-block元素本行无法显示完全的话则整个换行而不是里面的单词换行 position: 设置参照物，top,left,right,bottom就是相对于参照物的偏移量 poistion relative: 仍在文档流，tlrb都是相对它自身原来的位置说的，往往relative position作为绝对定位子元素的
日期 2023-10-12 18:19:40【经典面试题】css如何画一个三角形？
引言： 我们在网页中经常会见到一些小的三角形，比如对话框上的小角等。我们可以用css来画出这样的三角形 css画三角形 — 用盒子的边就可以画出来。 一、步骤 设置一个盒子 ，宽高为0 给盒子的边设置宽度，并添加颜色 <div></div> <style
日期 2023-10-12 18:19:40