CSS进阶内容——布局技巧和细节修饰
CSS进阶内容——布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然,如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园。 元素的显示与隐藏 ...
CSS进阶内容—浮动和定位详解
CSS进阶内容—浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布局流派 网页布局的本质就是用CSS控制盒子的摆放来形成页面 CSS提供了三种流派来控制盒子: 普通流 ...
sass 导入@import详解
@import Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。 例如: public.scss $font-base-co ...
利用噪声构建美妙的 CSS 图形
在平时,我非常喜欢利用 CSS 去构建一些有意思的图形。 我们首先来看一个简单的例子。首先,假设我们实现一个 10x10 的格子: 此时,我们可以利用一些随机效果,优化这个图案。譬如,我们给它随机添加不同的颜色: 虽然利用了随机,随机填充了每一个格子的颜色,看着有那么点意思,但是这只是一幅杂乱无章的 ...
Css3入门详解
一、Css基本语法 1.Html和Css没分开 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <!--规范,<style>可以编写css的代码,每一个声明,最好使用分号隔开 语法: 选择器{ 声明1; 声明2; 声明3; } --> <meta cha ...
CSS样式
css概述 层叠样式表(cascading style sheet) 层叠是指==将多个样式施加在一个元素(标签)上== 作用: 美化页面 将html代码与样式代码分离 好处: 功能强大 分离代码,降低耦合性,提高重用性,提高维护性,提高开发效率 使用方法 1、在HTML标签的style属性书写,这 ...
前端之CSS介绍(层叠样式表)
Cascading Style Sheets(CSS) 1.CSS就是在HTML文档中,如何显示HTML标签,元素,以及他们的样式布局,前端页面的展示形式均由CSS来布局. 2.如何使用CSS 内部样式表 head标签里<style></style> 内联样式,在HTML标签里面直接写style 外 ...
sass 混合指令 (Mixin Directives)详解
混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class,比如 .float-left。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。 ...
超酷炫的转场动画?CSS 轻松拿下!
在 WeGame 的 PC 端官网首页,有着非常多制作精良的基于滚动的动画效果。 这里我简单截取其中 2 个比较有意思的转场动画,大家感受感受。转场动画 1: 转场动画 2: 是不是挺有意思的,整个动画的衔接是基于滚轮的滚动触发的。我猜测是使用了类似 TweenMaxJS 的动画库实现。 当然,这两 ...
前端周刊:2022-12 期
前端周刊:2022-12 期 前端开发 Vue2.7 正式发布! Vue3 的官方跳板 完成第一个 vue3.2 项目后,这是我的技术总结 Vue3 的响应式变量 API 设计的挺难用 Vue2 升级到 Vue3 到底是不是一个正确的选择? 个人感觉 Vue3 是个失败的版本 【前端面试题】—30 ...
ant design vue, ant-design-vue 安装, ant-design-vue 使用
Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库,用于开发和服务于企业级中后台产品。 ...
圆角大杀器,使用滤镜构建圆角及波浪效果!
本文,将另辟蹊径,介绍一种使用滤镜去构建圆角的独特方式。 首先,我们来看这样一个图形: 一个矩形,没什么特别的,代码如下: div { width: 200px; height: 40px; background-color: #000; } 如果,我们现在需要给这个矩形的两端加上圆角,像是这样,该 ...