css
关注
分享
扫一扫
文章平均质量分 67
githubcurry
githubcurry
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS中如何设置单行或多行内容超出后，显示省略号
CSS中如何设置单行或多行内容超出后，显示省略号原创 2024-03-16 13:20:28 · 3788 阅读 · 0 评论 -
响应式导航栏和响应式底部
使用Semantic UI实现响应式的导航栏和底部区域原创 2022-01-22 21:54:31 · 2215 阅读 · 0 评论 -
如何使用CSS给一个区域的背景加透明度
我们是无法直接给区域透明度的，这样会改变本来的文字等内容的透明度，我们只能通过伪元素来实现。单纯的在CSS中无法直接给背景图片加 opacity 属性，我们可以使用下面的方法来实现仅仅背景透明的效果：div { width: 200px; height: 200px; display: block; position: relative;}div::after { content: ""; background: url(image.jpg); opacity: 0.5;原创 2022-01-17 22:00:22 · 1540 阅读 · 1 评论 -
css中的position详解
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。fixed 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。relative 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。stati原创 2021-05-28 19:29:07 · 538 阅读 · 0 评论 -
Bootstrap如何实现勾选协议才能上传表单
我们可以用js在前端做判断，使type=submit的那个提交按钮无法被选中，就可以实现这个功能了！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title></head><body> <input type="checkBox" onclick="if (this.ch.原创 2021-03-24 10:11:16 · 404 阅读 · 1 评论 -
表格(table)中td根据内容长度自动换行
在一些前端的demo中，我们经常会用到表格（table）。因为有的内容比较长，所以需要列宽大一些，有的内容比较短，列宽就小一些。但是我们会遇到一个问题，在学校联系方式表里面，联系人电话/电子邮件这两列（这两个所占的行宽很大），无论我加多大的宽度，内容总是会把表格列撑的很宽，百度了一下，发现原因是这样的：一般字母的话会被浏览器默认是一个字符串或者说一个单词，所以不会自动换行所以我们需要设置一下，让表格内容自动换行。1.在中设置样式style为word-wrap:break-word;word-brea.原创 2021-03-04 20:06:09 · 2154 阅读 · 5 评论 -
前端炫酷的动画效果库--AOS使用详解
导入<link rel="stylesheet" href="dist/aos.css" /><script src="js/jquery.min.js"></script><script src="dist/aos.js"></script>HTML<div aos="animation_name">属性aos-offset 是立刻触发动画还是在指定时间之后触发动画 200 120aos-duration 动画.原创 2021-01-07 09:39:00 · 4848 阅读 · 3 评论 -
textarea取消右下角的两道斜线和聚焦显示的线框（input也一样）
我们先来看看一开始不取消的样子：我们可以加入下面的的css属性取消默认的样式： resize: none;/* 取消默认的右下角的两道斜线 */ outline: none;/* 取消默认聚焦的蓝色线框 */加入之后就是这个鬼样子：PS：不加入resize: none，我们可以拖动改变文本框的大小：...原创 2020-12-25 13:15:26 · 1526 阅读 · 5 评论 -
CSS的动画特效（animation）
今天来讲一下css中很实用的一个效果-动画（animation）。动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数（很官方的回答）。为了方便大家和我自己理解这个概念，我们可以想像一下准备拍电影的时候，我们需要一个电影名吧，需要设置电影的时间吧。而且拍电影就是一帧一帧，叫做关键帧。所以我们设置动画的时候要讲清楚电影名（animation-name），电影时长（animation-duration），电影啥时候开始（animation-delay），播放或者暂停（a.原创 2020-12-09 19:22:25 · 19141 阅读 · 5 评论 -
CSS3的过渡效果
今天来讲的是很重要的一个CSS属性-过渡（transition），有了这个属性，你的页面将会变得特别美观，用户体验感极强，来让我们看看怎么使用！首先来看看过渡究竟是什么CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：规定您希望把效果添加到哪个 CSS 属性上规定效果的时长其次来看看有哪些属性可以使用：transition 复合属性，用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的 CSS 属性的名称tra.原创 2020-12-09 14:28:17 · 990 阅读 · 3 评论 -
CSS3 转换、文本阴影
突然发现以前的CSS特效用到了很多转换过渡什么的，今天集中来讲一下！喜欢CSS特效的可以点这里CSS 2D转换转换是使元素改变形状、尺寸和位置的一种效果。您可以使用 2D 转换来转换您的元素。通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸，有以下这些属性：translate() 方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数transform: translate(50px,100px).原创 2020-12-08 11:49:08 · 2436 阅读 · 13 评论 -
CSS特效十：信息提示框
今天来讲一个信息提示框，可以在上下左右四个方向展示，先给大家看看效果图（文末有彩蛋！！！）：其中的重点就是一个尖角的展示：我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。注意：border-width 属性指定了箭头的大小。如果你修改它，也要修改 margin-left 值。这样箭.原创 2020-12-02 21:05:40 · 2771 阅读 · 14 评论 -
CSS特效九：小图下拉查看大图和信息
今天来讲一个淘宝京东等商城里面经常用到的小图hover查看大图和信息的css特效，先来看图片展示：如果可以的话，还可以设置阴影和延迟特效啥的，想看的话可以看之前的几个css特效案例！设计思路也很简单，就是先隐藏下面的大图，然后小图hover的时候显示就好了！详细的注解也在源码里有。附上源码：<!DOCTYPE html><html><head> <title>下拉图片</title> <meta char.原创 2020-12-02 20:33:32 · 1020 阅读 · 20 评论 -
CSS特效八：开关按钮
今天来讲下css中的开关按钮这个特效，在实际开发和平常的网页中都很常见。大家先来看看实现的效果：这是开关按钮全部选中的时候这是开关按钮全部关闭的时候，其中切换的时候会有一些动画特效。实现的原理步骤如下：1.先设置一个label包裹一个checkbox元素和一个子div，其中checkbox设置为不显示2.子代div有一个before元素：这里要注意下！3.虽然checkbox不显示，但是当点击的时候还是会有属性改变，因此我们可以利用这个属性改变设置一些值。详细的步骤都在源码里，源码有.原创 2020-12-02 19:35:04 · 3655 阅读 · 29 评论 -
CSS特效五：动态搜索框
今天来实现一个很简单的动态搜索框，效果图如下在搜索框聚焦之前是这样的：聚焦之后是这样式的：实现思路如下：先写一个input输入框，placeholder="搜索.."。记得嵌套在form表单中。第二步设置input输入框的样式当input聚焦的时候设置宽度为你想要的宽度即可，一般建议为百分比设置，这是考虑到后期加入响应式会更好改。最后附上源码：<!DOCTYPE html><html lang="en"><head> <met.原创 2020-12-01 07:44:54 · 3219 阅读 · 17 评论 -
CSS属性—居中对齐篇
为了网页的样式美观，我们经常要用到居中对齐来调整布局，所以特意整理了常用的居中对齐所需要的css属性。元素居中对齐：要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。(切记要设置width)元素通过指定宽度，并将两边的空外边距平均分配.div { margin: auto; width: 50%;}文本居中对齐文本在元素内居中对齐，可以使用 text-align: center;原创 2020-12-01 00:03:22 · 6129 阅读 · 17 评论 -
CSS中你不知道的小细节
anchor伪类a:link {color:#FF0000;} /* 未访问的链接 */a:visited {color:#00FF00;} /* 已访问的链接 */a:hover {color:#FF00FF;} /* 鼠标划过链接 */a:active {color:#0000FF;} /* 已选中的链接 */其中要注意的是，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才.原创 2020-12-01 00:03:02 · 1909 阅读 · 13 评论 -
border-box 改变盒子的布局方式
今天来聊一个我们在前端开发中很常见的属性box-sizing: border-box如果声明了一个元素且该元素是盒子模型，那么该元素默认的盒子模型是以border（边框）为边界，border里面是content（内容）。外边的是padding（填充），再外边的是margin（边距）：一旦声明了box-sizing: border-box，则盒子内容区就包含content和padding。盒子外边只有margin。如果不太清楚，自己可以写几个盒子模型在开发者工具里好好琢磨琢磨。！！！默认的盒子.原创 2020-12-01 00:01:55 · 832 阅读 · 12 评论 -
Flex布局详细讲解
学习了这么多天的css，我们势必要有一个清晰的目标，就是熟练地掌握网页基本布局，其中flex是一个很好用的布局方式，就拿layui来说，他们的这种布局方式就很实用，广泛地应用在后台网页布局。其中分为header头部main内容部分，内容部分又分为左边的侧边栏和右边的内容区，左边和右边的都有滚动条在自己的内容区滚动。footer底部声明栏（有的会有，有的没有）大致的样子可以用这样的图片来概括：做出来的效果图（网页布局）是这样式的：布局思路是这样的：1 首先给header和footer一个固定原创 2020-11-28 11:00:32 · 2251 阅读 · 29 评论 -
flex弹性盒子模型翻转问题
学习前端的css过程中，我们经常设计网页，其中最经典的原生设计就是flex和grip两个设计模式，bootstrap就是基于grip这种网格布局设计的，今天来说的是另外的一个flex布局模式。我们知道flex布局模式中，声明一个父级元素的display为flex之后，其后代的布局方式可以通过justify-content和align-items分别调节横向和纵向的布局方式。现在要说的是当子代元素排列为row排列和column排列的属性设置：当flex-direction为row的时候，我们想设置横向和纵原创 2020-11-27 23:33:37 · 3189 阅读 · 18 评论 -
input标签中添加一个图标
在input标签中添加一个icon图标基本可以分为两种1.将icon图标存储为本地图片，然后设置为input的背景图，然后通过background-position来调整图标在输入框的位置2.使用一个div包裹两个子div，其中第一个div里面包裹icon图标，另一个div包裹input标签，并设置input的border为none，然后让input标签撑满div，设置div的border，然后使用flex布局使两个子div成行排列，并让两个div撑满父div（height，width）第一种实现方原创 2020-11-27 17:36:29 · 9846 阅读 · 25 评论 -
CSS特效七：Hover下拉菜单
老规矩，今天来讲一个很实用的css效果，当鼠标移到按钮的时候就会自动显示下拉菜单。效果如下：很简单的一个小demo，实现步骤如下：首先定义一个大的div包裹一个button和一个a链接组分别设置div下面两个元素的样式。a连接组隐藏起来设置每部分的hover效果，这里注意/* .dropdown的hover效果，作用在.dropdown-content上 */ .dropdown:hover .dropdown-content { display: blo.原创 2020-12-01 00:04:22 · 4719 阅读 · 16 评论 -
CSS特效六：加载动画
今天来说一个css特效，在我们搜索东西时，等待的时间很长的时候会有加载动画，其实就是一个css动画。现在我们来实现一个简单的加载动画。先来看看效果：它是会转动的那种！接下来说说实现思路：首先设置一个圆角为50%（就是一个圆环），设置上下左右的颜色不一样，然后设置animation动画属性，并设置动画名称。不懂的点这里。很快学会炫酷的CSS的animation动画效果。设置动画的旋转角度为360度就可以了。最后附上源码：<!DOCTYPE html><html l原创 2020-12-01 00:03:45 · 1095 阅读 · 19 评论 -
CSS特效四：四个方向的淡入效果（B站常用效果）
今天来说下一个很拉风同时也很实用的css效果，B站同款哦！下面是在小破站截取的效果图：这个效果称为淡入淡出效果，可以从上下左右淡入淡出，今天直讲一种，其余三种自己可以动手做，效果图：实现思路：设置一个div包含一个img图片和一个子div。子div包含一个文本div。设置图片上的文字隐藏且居中，overflow为hidden。在子div设置一个hover效果即可最后加上一些动画效果修饰即可最后附上代码：<!DOCTYPE html><html lang="原创 2020-11-30 00:04:43 · 6419 阅读 · 12 评论 -
CSS特效三：简单的便签效果
今天是来实现一个很实用，很炫酷的便签效果。写一个放到自己的网站上肯定增光不少。实现的效果如下鼠标放到便签上之前：鼠标放上去之后：实现思路如下：写好一个div，这个div包含了4个a标签，设置a标签的left: -80px;,这样a标签就会隐藏起来。然后设置a的hover效果为left: 0;,想更加炫酷的小伙伴也可以加一点transform效果。最后附上源码：<!DOCTYPE html><html lang="en"><head> .原创 2020-11-30 00:04:20 · 1933 阅读 · 17 评论 -
CSS特效二：按钮动画效果
今天来实现一个按钮的动画效果：全部为css动画前的效果为：动画后的效果为：接下来讲一下怎么实现这个小效果：首先是一个button，button里面包含一个span标签，span里面写一个“hover”然后设置button为行内块级元素，设置圆角，设置一个transtion转换效果设置span标签为行内块级元素，position: relative;，transform的转换效果在span标签后设置一个after，after是可以在此元素后追加一个content，并且可以设置样式，透明度为0原创 2020-12-01 00:04:04 · 2641 阅读 · 14 评论 -
css基本属性汇总
由于之前一段时间后端的学习导致前端开发基本靠框架，从ui框架（bootstrap、semantic、Mint UI 等等）到vue，react等，最近开始了实训，重拾了前端的HTML和css。复习了一遍前端知识，收获了很多，也有很多之前没发现的只是盲区，现在整理好了前端的css属性，供大家参考（没有一个不拉，但是基本用到的都可以看到）：文后附有链接浏览链接：css属性图片链接：图片链接最后还是提醒大家，不能说只是依赖框架，我们也应该熟悉原生的东西，框架只是一个工具，但是有些时候原生的东西也有自己的长原创 2020-11-30 00:00:16 · 521 阅读 · 8 评论 -
css特效一：文字覆盖图像悬停效果
接下来是一个系列，就是css中常用的特效，都是css写的，在网站开发中很常用。今天来实现一个文字覆盖图像悬停效果：鼠标停到图片上的时候：实现原理：1.首先设置好一个盒子包裹一个图片和文本域2.设置一个文本，然后opacity=0隐藏起来3.设置文本的hover效果opacity=1遮盖了图片4.最后背景颜色和文字显示的时候可以设置一些动画效果技术难点：将container设置为position: relative是为了将下一级的overlay设置为position: aboslute原创 2020-11-29 09:57:37 · 1770 阅读 · 11 评论