省略号css
13 CSS 的position属性
##### 13 CSS 的position属性 就像photoshop中的图层功能会把一整张图片分层一个个图层一样，网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的，然后通过定位属性position对元素进行定位摆放，最终实现网页的布局。 ......
滚动公告栏代码css
滚动公告栏是网页中常见的一种组件，可以在网页头部或者侧边显示最新的消息和活动。下面介绍如何使用CSS来实现一个滚动公告栏。 /* 定义滚动公告栏的样式 */ .news { overflow: hidden; /* 隐藏溢出部分 */ height: 30px; /* 设置高度 */ line-he ......
12 CSS 的float属性
##### 12 CSS 的float属性 - 流动布局 流动模型（Flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。 在正常情况下，HTML元素都会根据文档流来分布网页内容的。 文档流有2大特征： ① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式 ......
webpack5_使用webpack编译scss文件为css文件并实现css文件的兼容性和压缩处理
## webpack5_使用webpack编译scss文件为css文件并实现css文件的兼容性和压缩处理 - 现实问题: 为了编写博客园的博客样式, 我写了一个scss文件, 但是因为博客园的样式编辑里只接受css样式, 所以乘此机会顺便复习一下webpack5实现对scss(sass)文件的处理 ......
关于 SAP UI5 预定义的 CSS Margin class
与 padding 不同，margin 是透明的，`不是`控件可单击区域的一部分，并且它们与相邻边距`折叠在一起`，这意味着它们不会相互添加。 例如，有两个相邻的 32 像素 margin，则结果是仅显示一个 32 像素边距，而不是 64 像素的空间。 SAPUI5 中预定义的所有边距都支持从右到左 ......
什么是 SAP UI5 中的预定义 CSS 响应式边距（Responsive Margins）
SAP UI5是SAP公司的开源前端开发框架，用于构建现代、移动优先的Web应用程序。预定义的CSS响应式边距是UI5框架中的一个重要特性，它可以帮助开发人员轻松管理和控制应用程序中不同元素之间的间距，以适应不同的屏幕大小和设备类型。本文将详细介绍预定义的CSS响应式边距的概念、用途以及通过示例演示 ......
11 CSS盒子模型（重点）
##### 11 CSS盒子模型（重点） 盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。HTML页面上的每个元素都可以看成一个个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。  ## 代码 本文使用react实现，其他同理 index.js ``` import React ......
9 CSS背景属性
##### CSS 背景属性 ##### 1. background-color（背景颜色） 页面的背景颜色有四种属性值表示，分别是transparent（透明），RGB十进制颜色表示，十六进制颜色表示和颜色单词表示。 属性使用： ``` /* background-color: transpare ......
css单行垂直居中，超过两行显示省略号
HTML： <div> <span>单行居中，多行居左单行居中，多行居左</span> </div> <div> <span>单行居中</span> </div> CSS: span { font-size:14px; overflow:hidden; text-overflow:-o-ellips ......
8 CSS文本属性
##### 8 文本属性 font-style（字体样式风格） ``` /* 属性值： normal：设置字体样式为正体。默认值。 italic：设置字体样式为斜体。这是选择字体库中的斜体字。 oblique：设置字体样式为斜体。人为的使文字倾斜，而不是去使用字体库的斜体字。 */ ``` font ......
CSS基础-定位
CSS中通常使用position 属性，决定元素的定位方式。 常用的定位方式通常有 | 值 | 意义 | | | | | relative | 相对定位 | | absolute | 绝对定位 | | fixed | 固定定位 | ## 相对定位 position 设置为 relative。 相对定 ......
7 CSS选择器优先级
##### 7 选择器优先级 所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。 ``` /* !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 1 内联样式表的权值最高 style ......
6 CSS样式继承
##### 6 样式继承 CSS的样式表继承指的是，特定的CSS属性向下传递到子孙元素。总的来说，一个HTML文档就是一个家族，然后html元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成了一张以下的家族谱。  |a:link |选择所有未被访问的链接。 | | | | | |[:visi ......
css 右上角三角形标签样式
<style> .box{ position: relative; height: 100px; width: 300px; border: 1px solid gray; box-sizing: border-box; } .sanjiao{ position: absolute; top: 0; ......
css 右上角标的效果
右上角 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>制作角标的方法</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/j ......
4 CSS属性选择器
##### 4 属性选择器 属性选择器是通过元素的属性及属性值来选择元素的。下面介绍属性选择器的用法。 1. 第一种用法 ``` 作用：选择含有指定属性的元素。 语法：[属性名]{} ``` 示例如下： ```html 属性选择器 用户名： 密 码： 数据量： ``` 运行结果： ![image]( ......
CSS 实现一个带弧边的区域
一、需求描述 在移动端的开发中，经常遇到下图这样的弧边设计 弧边其实有很多方案，但像上图这样的情况更适合用 border 实现，因为这样更方便封装为组件 二、初步实现 可以将页面顶部的区域看做一个大圆与页面的交集，基于这个思路就能开发出一个基本的 html 结构 <body> <div classN ......
webpack压缩 CSS 文件
转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack压缩 CSS 文件 压缩 CSS 文件需要使用到 optimize-css-assets-webpack-plugin插件 一、压缩 css 文件的核 ......
webpack的css 兼容性处理
转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack的css 兼容性处理 处理 css 兼容性需要使用到 postcss-loader 和postcss-preset-env 两个插件 一、css 兼容 ......
webpack提取 CSS 成单独文件
转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack提取 CSS 成单独文件 提取css 成单独文件需要用到 mini-css-extract-plugin插件 一、提取 css 的核心配置 // we ......
CSS – Houdini
介绍 简单说这个 Houdini 是一系列 CSS 底层 API，它可以让我们扩展 CSS，做出一些 Polyfill。 举一个例子，让大家有个画面。 我们可以通过 CSS + JS + Canvas 语法来自创 CSS 语法，游览器解析 CSS 时它会跑我们的 JS，而 JS 用类似 Canvas ......
博客园css与目录导航
默认配置： 皮肤：BlueSky ## 页面定制css代码 ``` :root { --accent-color: #696969; /* nice */ --primary-colour: #306797; /* */ --background-color: white; --background ......
CSS实现文字描边效果
一、介绍最近在一个项目的宣传页中，设计师使用了文字描边效果，之前我确实没有实现过文字的描边效果，然后我在查阅资料后，知道了实现方法。文字描边分为两种：内外双描边和单外描边，也就是指在给文字加上描边效果后，描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。 二、具体代码1、文字内外双描边 ......