关注
分享
标梵互动
这个作者很懒，什么都没留下…
展开
-
山东标梵带你了解这几个CSS概念
❝前沿: 聊起css，印象最深刻的就是刚毕业那会刚开始从事前端开发岗位工作的时候，身为一名cut picture boy（切图仔），在页面布局及还原设计图中广泛使用css来开发页面，我记得刚开始接触最多的就是Bootstrap（用于开发响应式布局、移动设备优先的 WEB）。然而随着前端突飞猛进的编进，诸如element，ant design等优秀的ui库出现，在对比中感到审美疲劳。言归正传，css近年来了也催生了蛮多新的解决方案，比如CSS Modules、styled-components（cs...原创 2021-03-12 10:25:08 · 377 阅读 · 0 评论 -
山东标梵CSS介绍NetCore/Net5 Web应用开发基础
Cascading Style Sheets (CSS)层叠样式表css主要作用就是定义控制页面的布局，如何格式化显示HTML元素css为控制页面HTML样式节约了大量时间，因为css可以同时作用于多个HTML元素及多个HTML页面CSS语法CSS规则由选择器及声明块组成如下图：p就是选择器，意义就是只需要设置应用css样式的HTML元素花括号就是一个声明块，每个声明块包含一条或者多条声明声明包含属性和属性值用冒号分割，多条声明用分号分割实际应用还记得上一节介绍HTML..原创 2021-03-09 11:39:27 · 330 阅读 · 0 评论 -
标梵互动讲解CSS 负值技巧与细节分享
写本文的起因是，一天在群里有同学说误打误撞下，使用负的outline-offset实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-offset 实现加号呢？使用负值 outline-offset 实现加号假设我们有这样一个简单的结构：<div></div>div{width:200px;height:200px;outline:20pxsolid#000;outline-offset...原创 2021-03-05 11:46:39 · 144 阅读 · 1 评论 -
标梵教你使用 CSS 选择器定位网页元素
css选择器在 web 领域应用非常普遍，不管是前端工程师还是 ui 自动化测试，使用 css 选择器都能精准快速定位到自己想要的元素。css 选择器的内容不是很多，稍微花一点时间就可以直接上手，在应用中就能逐渐掌握，当遇到一个表达式不是很熟练的时候，可以再回来查一下这篇文章。先来看一下怎么使用 css 选择器。写一个简单的登录界面 HTML ：<div class="container"><h2 class="title">登录</h2><form i原创 2021-03-04 17:13:50 · 1387 阅读 · 6 评论 -
山东标梵分享一些css知识的总结
一.css 盒模型介绍css盒子模型分为标准盒子模型，IE盒子模型。盒子模型主要的属性：width、height、padding、border、margin； width：内容的宽度 height：内容的高度（不是盒子的宽度、高度） padding：内边距 border：边框 margin：外边距 1.1 标准盒子模型 1.2 IE盒子模型 ...原创 2021-02-26 11:03:06 · 71 阅读 · 0 评论 -
山东标梵分享的这些写 CSS 的新姿势你该知道喽
现在大部分搞前端的应该还是这样写 CSS 的：.mock{margin:auto;font-size:16px;//...}<divclass='mock'>mock</div>以上代码就是举个例子，大部分情况应该都是写一个类，然后整一堆样式进去。但是这种方式写多了以后，你应该会感受到一些痛点，比如说： 取名困难，节点结构一多，取名真的是个难事。当然了，我们可以用一些规范或者选择器的方式去规避一些取名问题。 ...原创 2021-02-21 13:52:19 · 153 阅读 · 0 评论 -
标梵分享使用CSS生成loading样式组件干货
为什么使用CSS做图片使用CSS生成svg矢量图，可以随着CSS文件一起缓存，减少请求图片的次数。在React中可以使用svgr将svg转换为组件，支持按需加载等功能。使用CSS实现了几种简单的loading样式。CSS实现使用<svg>标签直接写。<svgversion="1.1"xmlns="http://www.w3.org/2000/svg"width="40px"height="40px"viewBox="004040"...原创 2021-02-21 11:54:10 · 147 阅读 · 0 评论 -
标梵分享利用背景创造各种精彩的背景
将介绍一些利用 CSS 中的background、mix-blend-mode、mask及一些相关属性，制作一些稍微复杂、酷炫的背景。通过本文，你将会了解到 CSS background 中更为强大的一些用法，并且学会利用 background 相关的一些属性，采用不同的方式，去创造更复杂的背景图案。在这个过程中，你会更好的掌握不同的渐变技巧，更深层次的理解各种不同的渐变。同时，借助强大的 CSS-Doodle，你将学会如何运用一套规则，快速创建大量不同的随机图案，感...原创 2021-02-20 16:21:49 · 208 阅读 · 0 评论 -
【Web前端战斗】网站开发第一步的CSS初始化文件
考虑到不同浏览器对有些标签的默认值是不同的，在实际开发中为了确保HTML页面效果与设计图一致，减少不同浏览器之间的页面差异，我们需要初始化CSS样式的属性，使得我们开发网页内容时更加方便简洁，减少CSS代码量，节约网页下载时间。在做一些简单的demo练习时，我们可以用最简单、直接的方法，具体如下：*{padding:0;margin:0;}在正式的项目中可以按照如下的基础内容进行初始化（CSS初始化文件命名为reset.css，实际情况可根据团队或个人...原创 2021-02-04 11:09:12 · 103 阅读 · 0 评论 -
标梵分享面试整理之CSS部分
css挺有趣的一门学问，但是好些个自认为“逻辑清晰，能言善辩”的后端程序员，他就是学不会~hhh……狂笑web前端面试 —— CSS部分1.csssprite是什么,有什么优缺点概念：将多个⼩图⽚拼接到⼀个图⽚中。通过background-position和元素尺⼨调节需要显示的背景图案。优点：a-减少HTTP 请求数，极⼤地提⾼⻚⾯加载速度b-增加图⽚信息重复度，提⾼压缩⽐，减少图⽚⼤⼩c- 更换⻛格⽅便，只需在⼀张或⼏张图⽚上修改...原创 2021-02-02 10:43:19 · 198 阅读 · 0 评论 -
你可能不知道的 CSS 阴影技巧与细节
关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧[1]，介绍了一些关于 box-shadow 的用法。最近一个新的项目，CSS-Inspiration[2]，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖到的新内容，而且有一些很有意思，遂打算再起一篇。本文的题目是 CSS 阴影技巧与细节。CSS 阴影，却不一定是 box-shadow 与 filter:drop-shadow，为啥？因为使用其他属性也可以模拟阴影，而且是原创 2021-01-29 11:25:54 · 294 阅读 · 0 评论 -
css如何创建文件及样式?-标梵分享
css创建小编：阳光就好当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。如何插入样式表插入样式表的方法有三种:外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：<head><l原创 2021-01-29 11:23:31 · 456 阅读 · 0 评论 -
Biaofun教你css书写位置到底在哪里呢？
css的书写位置内联样式(行内式)在HTML元素中添加style属性，在style属性中编写CSS属性。在p中添加了一个style属性，编写了段落的首行缩进 嵌入样式（内嵌样式）在HTML的头部head元素中添加一个style标签，将CSS属性编写在style标签中。<!DOCTYPE html><html> <head> <meta charset=”UTF-8”>原创 2021-01-26 16:44:34 · 210 阅读 · 1 评论 -
标梵互动信息解说关于CSS-in-JS: 使用及优缺点
CSS-in-JS的工具库让我们可以以一种新的方式来写css，支持动态函数、css作用域并且可移植。但是对于开发者来说，这会使得前端开发的复杂性更高，是否值得使用是具有争议的。这篇本章主要是为了让你从更高的层面去了解CSS-in-JS工具库，从原理上来看它们解决了什么问题，以及在项目中该不该使用它们。什么是CSS-in-JS前端主流框架React、Vue、Angular都是基于组件开发的，因此组件化开发也是主流的前端开发方式。一个组件通常是像按钮button、弹窗pop-up、导航栏这样的一个UI元素，原创 2021-01-26 16:43:21 · 560 阅读 · 0 评论 -
Biaofun标梵讲解CSS 文本属性
给web前端营加星标，提升编程技能CSS 文本属性CSS 文本属性可定义文本的外观，如文本颜色、文本缩进、文本对齐方式、字符间距、装饰文本、阴影效果等。CSS 文本颜色“color”属性用于设置文本颜色。例子：p{ color: #ff0000; }p{ color: red; }CSS 文本行高“line-height”属性用于设置文本行高。取值为由浮点数字和单位标识符组成的长度值或百分比，如果不设定该属性则采用默认行高。例子：p{ line-height:1.5em;..原创 2021-01-20 10:05:51 · 171 阅读 · 0 评论 -
标梵详解CSS去除浮动的方法
作为一名前端的开发者，都会有一段让人喜欢的书写代码的方式。以前，小D刚开始接触网站程序设计与制作这个课程时，每当要让一个div向左移动或者向右移动，左对齐或者右对齐，小D都特别喜欢使用float:left或者float:right。以至于当时无法自拔，深爱浮动（float）样式。但是，这个float真的那么香吗？后面，小D吃了float的小亏，以至于寻找到方法誓要将它除掉。首先，我们先来介绍什么是浮动？float属性指定一个盒子（元素）是否应该浮动,其设置就是允许你将...原创 2021-01-19 15:42:10 · 241 阅读 · 0 评论 -
山东标梵讲解如何在HTML文档中使用CSS样式表？
在HTML中，我们可以通过以下三种不同的方法将CSS样式表链接到Html文档：使用内联样式使用嵌入样式或内部样式使用外部样式使用内联样式这是将CSS样式添加到HTML文档或代码中的最简单方法。但我们无法重用此方法，因此可重用性是此方法的缺点。如果使用内联样式将CSS添加到HTML文档中，可以参考以下步骤。步骤1：首先，在文本编辑器中输入HTML代码，或者打开现有的HTML文件。<!DOCTYPE html><html> <head>原创 2021-01-15 10:51:12 · 322 阅读 · 1 评论 -
关于css3动画性能一点点优化之will-change的学习理解
我们都知道，动画都是相对比较耗电脑性能的，复杂动画会导致电脑卡顿甚至风扇加速，如果在手机上，那最突出的问题可能就是导致你设备发热+电池电量消耗过快，所以如果有机会去尝试优化一些动画，我们何不看看相关解决方案呢？在css中有这么个will-change，为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。will-change取值 will-change:原创 2021-01-14 14:27:04 · 311 阅读 · 0 评论 -
山东标梵之CSS弹性盒子
弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。本文将解释所有的基本原理。前提: HTML 基础 (study Introduction to HTML)，和了解CSS如何工作的(study Introduction to CSS.)目标: 学会如何使用弹性盒子布局系统来创建Web布局。为什么是 弹性盒子?长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning。这两个工具大部分情况下都很好使，原创 2021-01-14 14:26:42 · 152 阅读 · 0 评论 -
标梵微博解说CSS布局
CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节：正常布局流display属性弹性盒子网格浮动定位CSS 表格布局多列布局每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。正常布局流(Normal flow)正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我原创 2021-01-13 14:32:52 · 183 阅读 · 0 评论 -
标梵互动讲解CSS为文档添加样式
在这篇文章中，我们将会拿一个简单的HTML文档做例子，并且在上边使用CSS样式，期待你能在此过程中学会更多有关CSS的实战性知识。前置知识在开始本单元之前，您应该：基本熟悉计算机操作。基本工作环境的设置（详见安装基本软件），基本的文件操作，详见处理文件。熟悉 HTML概述 章节中提到的基本HTML知识.目标理解 HTML文档链接CSS文档的几个基本套路，并能运用所学的CSS，做些文字上的格式化操作。先从HTML开始吧我们先以HTML文档展开叙述。如果想在自己电脑试一试，可以copy下面的原创 2021-01-12 16:01:21 · 168 阅读 · 0 评论 -
Webpack 教程之出 CSS 到文件-标梵互动
默认情况下，css 会被打包到 JavaScript 中，在生产环境这么做有一些问题，比如会导致页面闪动。因为浏览器需要加载完 js 以后才能加载样式，此时已有的 html 只能使用浏览器的默认样式。我们需要将 css 导出到单独的文件中。通过 mini-css-extract-plugin 插件我们可以实现将 css 导出到单独的 css bundle 中。mini-css-extract-plugin 插件还可以将多个 css 文件合并成一个 css 文件。出于这个原因，mini-css-extrac原创 2021-01-11 10:36:44 · 192 阅读 · 0 评论 -
教你用CSS画蓝胖子-山东标梵
Html代码<div class="duola">//哆啦，整体盒子没什么用 <div class="tou">//头 <div class="yanjing">//眼睛 <div class="yan"> <div></div> </div>//左眼 <div class="yan">原创 2021-01-06 11:55:15 · 236 阅读 · 0 评论 -
入门全栈Java程序员——CSS
我们刚刚学习完Html，没学完的看上一篇，趁热打铁，下面我们学习CSS，先用一张‘思维导图’，看看我们都要学习什么2CSS简介CSS 是什么CSS 是层叠式样式表，负责控制网页的外观，是为了改变 Html 的默认外观，使网页更美观而引进的一种技术CSS 和 CSS3 的关系C3 一般说的是相对于 Css 新增加的内容，也就是说，Css 是基础，学完才能学 C3Css 的引入方式外部样式表内部样式表行内样式表3.1 外部样式表这种方式是实际开发中，最常用的方式，意思就是说，原创 2021-01-06 11:53:42 · 195 阅读 · 0 评论 -
分享介绍两种 CSS 方法论-标梵
说起 CSS 命名规范，大家应该都很熟悉，或者应该听说过 BEM 。BEM 是由 Yandex 团队提出的一种 CSS Class 命名方法，旨在帮助开发人员创建更好的且结构一致的 CSS 模块。BEM 将页面的类名分为块（Block）、元素（Element）、修饰符（Modifier）。块（Block）：一个块是视觉上或者语义上的一个整体，它是一个具体且唯一的一个元素，例如，页面上的一个弹窗，或者是一个搜索框；元素（Element）：一般认为是块的组成部分，元素比较用它父级的块名称做为前缀，例如，弹原创 2021-01-06 11:47:29 · 166 阅读 · 0 评论 -
山东标梵解说DOM进阶——CSS属性操作
CSS属性操作，指的是使用JavaScript来操作一个元素的CSS样式。CSS属性操作有获取CSS属性、设置CSS属性。 获取CSS属性用法：第一种：getComputedStyle(obj).attr第二种：getComputedStyle(obj)[“attr”]obj是DOM对象，attr是属性名。注意： （1）因为attr是作为元素对象的变量，所以变量中是不能用“-”，因此font-size、font-weight、border-top等是不正确的，需要将“-”去掉，并原创 2021-01-04 13:16:25 · 129 阅读 · 0 评论 -
标梵带你了解css z-index(重叠顺序)
div cssz-index层重叠顺序div层、span层等html标签层重叠顺序样式z-index，平时CSS使用较少，但也会难免会碰到CSS z-index使用。从基础语法到应用案例教程讲解学习z-index。一、z-index语法与结构z-index 跟具体数字div{z-index:100}注意：z-index的数值不跟单位。z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）。二、z-index使用条件z-index在使用绝对定位 position:absol原创 2020-12-31 11:17:19 · 259 阅读 · 0 评论 -
标梵如何让你的文章布局更好看之CSS3多列布局
为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。多列布局一、多列布局columns原创 2020-12-31 11:14:12 · 153 阅读 · 0 评论 -
标梵分享如何用纯CSS实现文字单行居中,多行居左
实现功能如何用纯CSS实现文字单行居中,多行居左例如我目前有一个这样子的HTML结构和基本的CSS代码 PIC 我是文字 渲染出来的效果如下可以发现的是, 目前文字是在左对齐的, 而我们文字如果比较少的时候,我们肯定是希望文字是居中对齐的, 实现方式就是给文字添加 text-align-center 属性 .p-center { text-align: center; }但是如果添加了这个属性之后, 文字少量的时候居中的需求就实现了. 但是大量文字的时原创 2020-12-31 11:05:22 · 214 阅读 · 0 评论 -
标梵互动干货之进阶学习CSS变量
CSS基本用法在前端领域，标准的实现总是比社区协议慢很多，前端框架最喜欢的$被Sass变量用完了。最常用的@也被Less用完了。为了在Sass和Less中使用CSS变量，一般只能采用折中的方式使用。 red blue /** * css-media-vars * BSD 2-Clause License * Copyright (c) James0x57, PropJockey, 2020 */html { --media-print: initial;原创 2020-12-29 17:30:03 · 143 阅读 · 1 评论 -
山东标梵Biaofun详解CSS3新特性
CSS3 新特性CSS 盒模型设置一个元素的背景颜色，背景颜色会填充哪些区域margin/padding 设置百分比是相对谁的link 和 @import 的区别CSS 选择器的解析规则CSS 选择器优先级::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用伪类与伪元素的区别关于伪类 LVHA 的解释CSS 中哪些属性可以继承CSS 清除浮动的方式清除浮动的原理BFC的概念, 哪些元素可以触发BFC脱离文档流的方式position 的值定原创 2020-12-28 17:08:38 · 242 阅读 · 0 评论 -
山东标梵进阶之玩转 CSS 变量
如果当年的 CSS 预处理器变量对于初入前端的我来说是开启了新世界的大门，那么 CSS 变量对于我来说无疑就是晴天霹雳。其功能不但可以优雅的处理之前 js 不好处理或不适合的业务需求。更在创造力无穷的前端开发者手中大放异彩。基础用法在前端的领域中，标准的实现总是比社区的约定要慢的多，前端框架最喜欢的 $ 被 Sass 变量用掉了。而最常用的 @ 也被 Less 用掉了。官方为了让 CSS 变量也能够在 Sass 及 Less 中使用，无奈只能妥协的使用 --。<style> /* 在原创 2020-12-08 18:22:59 · 134 阅读 · 0 评论 -
标梵互动教你巧妙使用CSS变量使您的CSS更有吸引力
标梵互动教你巧妙使用CSS变量使您的CSS更有吸引力2020-11-19 私有「CSS变量」又叫「CSS自定义属性」，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上「CSS变量」，可能其自身隐藏的魅力，让笔者对它刮目相看。谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。/* 不使用CSS变量 */.title { background-color: red;}.desc { background-col原创 2020-11-23 18:18:50 · 193 阅读 · 0 评论 -
Biaofun用CSS-画一个iPhone12
iPhone12发布一个月了，作为还没有拥有过一个苹果设备的穷B程序员。这次，依旧还是买不起。于是，使用css给自己画了一个。先看效果：需求分析：1、分别画出6个面，然后组成一个立方体。2、圆角部分使用多个div依次旋转一个角度，组成圆弧一、画iPhone背面先画一个圆角长方形；左下到右上渐变；增加border和内阴影使得看起来更立体。.back { position: absolute; width: 307px; height: 633px; background: l原创 2020-11-19 13:39:37 · 848 阅读 · 5 评论 -
标梵CSS3中的图片模糊切换UI特效展现
今天我们来分享一款利用CSS3技术让图片模糊的效果，我们只需要将鼠标滑过图片，就可以让图片产生模糊的特效，利用CSS3实现图片模糊效果也非常简单，用CSS3中的filter属性即可，针对不同浏览器用-webkit-filter、-moz-filter、-o-filter和-ms-filter。<!DOCTYPE html><html><head><title>css3图片过滤效果 </title><style>body{b原创 2020-11-17 18:00:13 · 203 阅读 · 0 评论 -
Biaofun标梵互动关于CSS居中的那些事
关于CSS居中的那些事行内元素DOM结构<div class="parent"> <span class="child">content</span></div>水平居中text-align.parent { background-color: red; text-align: center;}fit-content.parent { background-color: red; width: fit-content原创 2020-11-17 17:56:50 · 180 阅读 · 0 评论