随笔分类 - CSS
摘要：我酷爱模块化设计。长期以来我都热衷于将网站分离成组件，而不是页面，并且动态地将那些组件合并到界面上。这种做法灵活，高效并且易维护。 但是我不想我的设计看上去是由一些不相关的东西组成的。我是在创造一个界面，而不是一张超现实主义的照片。 很幸运的是，已经有一项叫做 CSS 的技术，就是特意设计用来解决这
阅读全文
posted @ 2020-05-14 16:14
前端一点红
摘要：在我们平时布局网站的时候，想要把div进行隐藏，但是很多人不知道css控制div显示隐藏？下面我们来讲解一下css如何让div隐藏。 1、使用display:none来隐藏div 我们可以使用display:none属性来隐藏所有的信息，包括文本和图片，语法为： <div>这里你是看不到的</div
阅读全文
posted @ 2020-05-14 16:06
前端一点红
摘要：CSS Sprites是一种性能优化技术，一种网页图片应用处理方式：将多个图像组合成单个图像文件以在网站上使用的方法，以提高性能；也被称为css 精灵图。 网页通常包含多个图像。这些包括图标，按钮，徽标，相关图片和其他图形。当页面中加载图像时，浏览器向服务器发出HTTP请求。分别加载每个图像需要多次
阅读全文
posted @ 2020-05-14 14:56
前端一点红
摘要：灵魂三问： 标签语义化是什么？为什么要标签语义化？标签语义化使用场景有哪些？ 下面让我们跟着这三个问题来展开一下本文的内容。 一、标签语义化是什么？ 标签语义化就是让元素标签做适当的事情。例如 p 标签就是代表文本，button 标签代表按钮，nav 标签代表导航等等。 二、为什么要标签语义化？ 其
阅读全文
posted @ 2020-05-14 14:03
前端一点红
摘要：普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义实现时，如何解决不同域问题并实现页面中图片资源的安全下载呢？本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。 本文分为以下七个部分： 利用 <a> 标签下载任意
阅读全文
posted @ 2020-05-14 13:49
前端一点红
摘要：CSS3 主要可以分为几个模块：边框和背景，渐变，文字特效，字体，2D/3D转换，动画(过渡动画和动画)，选择器，盒模型，多列布局，用户界面。 css3动画有2类：一种是transition的，另一种是@keyframes的。 两者的区别就是，transition的动画表达是从一种状态到另一种状态，
阅读全文
posted @ 2020-05-14 12:49
前端一点红
摘要：我们在网页设计中，通常会使用ps工具来达到图片或者边框阴影、立体等效果。但是如果一些基础效果都需要用p图来完成那就显得效率比较低了。其实可以使用CSS来设置边框阴影，下面本篇文章来给大家介绍一下。 在css中，我们可以通过box-shadow属性来设置边框阴影。 box-shadow属性可以向边框添
阅读全文
posted @ 2020-05-14 11:55
前端一点红
摘要：什么是CSS Modules？ 官方的介绍是： 所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。所以 CSS Modules 不是一个官方的规范，也不是浏览器的一种机制，它是一种构建步骤中的一个进程。（构建通常需要 webpack 或者 browserify 的帮助）。通过
阅读全文
posted @ 2020-05-14 11:49
前端一点红
摘要：先看看效果 【 方法一：截图模拟实现 】 原理：先截一张相同位置的图片，创建一个遮罩层，然后把图片定位在相应的位置上。 优点：原理简单；兼容性好，可以兼容到IE6、IE7；可以同时实现镂空多个。 缺点：此方法只适合静止页面，不适合可以滚动的页面。也不适合页面内容会发生变换的页面。 代码如下： 1 <
阅读全文
posted @ 2020-05-13 17:52
前端一点红
摘要：父级元素包含几个行内元素 <div id="box"> <p> <span>按钮</span> <span>测试文字文字文字测试文字文字文字</span> <span>看这里</span> </p> </div> #box p{ width: 800px; font-size: 30px; } #b
阅读全文
posted @ 2020-05-13 16:42
前端一点红
摘要：1 #box{ 2 width: 600px; 3 } 4 .inner-box{ 5 display: flex; 6 width: 100%; 7 height: auto; 8 background-color: #eee; 9 overflow: auto; 10 } 11 p{ 12 13
阅读全文
posted @ 2020-05-13 16:37
前端一点红
摘要：在HTML网页中通常一段文字都需要设置首行缩进两个文字，使页面更加美观，我们可以通过css实现这一效果，下面我们就来看一下使用css设置首行文字缩进的方法。 css可以使用text-indent属性来设置首行文字缩进，我们可以通过设置text-indent属性的属性值来设置缩进的大小。 示例： 设置
阅读全文
posted @ 2020-05-13 16:36
前端一点红
摘要：超链接a标签大家都应该很熟悉，这篇文章主要的讲的是a标签的基础css样式设置，下面我们来看一下css修改超链接颜色的方法。 css可以使用下面几个伪类来设置超链接： a:link ：是未被访问的样式，可以在里面加很多东西，比如说去掉下划线，换颜色等功能都能在这里实现； a:visited ：是已被点
阅读全文
posted @ 2020-05-13 16:18
前端一点红
摘要：在CSS中，可以使用background（背景）属性来添加图片，默认图片是向x轴和y轴重复。那么css如何将图片横向平铺？下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法，希望对大家有所帮助。 在CSS中，可以使用background-repeat属性来将图片横向平铺。backgroun
阅读全文
posted @ 2020-05-13 16:06
前端一点红
摘要：在网页中，元素有三种布局模型：流动模型（Flow） 默认的、浮动模型 (Float)、层模型（Layer）。下面我们来看一下这三种布局模型。 三种布局模型介绍： 1、流动模型（Flow） 流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网
阅读全文
posted @ 2020-05-13 16:01
前端一点红
摘要：css怎么样设置透明度？下面本篇文章就来给大家介绍一下使用css设置透明度的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 在CSS中想要设置透明度，可以使用opacity属性和rgba()来设置。opacity属性用于设置元素的不透明级别，rgba()用于对颜色值设置透明度
阅读全文
posted @ 2020-05-13 15:50
前端一点红
摘要：什么是CSS Modules？ 官方的介绍是： 所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。所以 CSS Modules 不是一个官方的规范，也不是浏览器的一种机制，它是一种构建步骤中的一个进程。（构建通常需要 webpack 或者 browserify 的帮助）。通过
阅读全文
posted @ 2020-05-13 15:43
前端一点红
摘要：一个网页有时会使用两种CSS，那发生css样式冲突要怎么解决？下面本篇文章就来给大家介绍一下发生css样式冲突的解决方法，希望对大家有所帮助。 css冲突怎么解决？ 解决方法有很多，如果可以对html改动的话，就给你需要细化的页面元素加多一个class或者ID就行了，当然这种方法应该不是你想要的。那
阅读全文
posted @ 2020-05-13 15:28
前端一点红
摘要：一、塌陷 1.当position设置为：absolute或者fixed时，元素的display会转换为block。（设置float也会产生这样的效应）2.正常情况下，div会被内容撑开，但是如果设置了1.的情况下，父元素就会产生塌陷，失去高度。 解决办法： 给父元素设置高度。给父元素设置overfl
阅读全文
posted @ 2020-05-13 15:26
前端一点红
摘要：在CSS中，可以通过white-space属性来实现文字不换行显示；只要将white-space属性的值为nowrap就可强制文字不换行。 white-space属性指定元素内的空白怎样处理。它有以下属性值： normal：默认。空白会被浏览器忽略。 pre：空白会被浏览器保留。其行为方式类似 HT
阅读全文
posted @ 2020-05-11 14:18
前端一点红
浙公网安备 33010602011771号