![](https://img-blog.csdnimg.cn/20200111224819861.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
文章平均质量分 60
分享实用的CSS开发干货
黄河爱浪
一个热爱分享又普通的web前端开发者,uView UI框架开发组成员。
展开
-
CSS 居中定位的弹窗效果(源码超详细解释)
这是一个超详细的 CSS实现居中定位弹窗效果源码解析,如果看完这篇文章还没学明白,小编劝你趁年轻赶紧改行!弹窗一般有两种情况:弹窗的尺寸是已知的(宽高都是固定的);弹窗尺寸是未知的(内容不固定,弹窗高度随内容改变);本篇文章会对这两种情况,各给出2种解决方法。每一种方法的实现源码解释都超详细!!原创 2022-10-14 00:51:01 · 3239 阅读 · 7 评论 -
iphoneX的safari浏览器操作栏隐藏时兼容底部Home键
iphoneX系列手机底部都有一个home键(横杠),safari浏览器会在页面滚动时隐藏底部的操作栏,许多应用都有在底部放置导航栏的需求。网上的帖子一般都是通过给底部导航栏元素添加内补34像素来处理,问题能够解决,但是safari浏览器在没有隐藏操作栏时又有影响美观。...原创 2019-08-11 21:11:00 · 4464 阅读 · 0 评论 -
一篇文章教你弄懂CSS背景图
在网络中经常看到大家写出如下这段示例的CSS代码,说是为了处理图片完全平铺页面。这代码不知道是那个没水平的在网络上广播出来的,而且还大受“好评”,简直离谱!!!原创 2021-12-12 21:11:49 · 5954 阅读 · 1 评论 -
CSS 时间轴样式效果
效果预览源码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale原创 2021-07-31 11:38:31 · 612 阅读 · 0 评论 -
移动端 line-height 文字不居中问题解决方案
在移动端中使用 line-height=容器高度实现文字垂直居中时,在安卓手机会发现文字偏上的问题。小编总结了两个比较合理且简单的解决方案;上效果图从以上的效果图中,能感觉到 “按钮三”的文字会有轻微的向上偏移的问题(不同字号和浏览器的偏移大小不同)。小编觉得 flex方案和 padding方案较为简单与合理,下面是源码。源码中有优缺点和特殊属性的说明;<!DOCTYPE html><html lang="en"><head> ...原创 2021-01-10 15:18:03 · 2982 阅读 · 2 评论 -
怎样学好CSS?这篇文章教会你
一说到CSS那就是大部分后端开发者有噩梦,称得上是一门迷之语言。若正在阅读该文章的你只从事后端开发,即可关闭该页面,好好写后端会更有出息。原创 2020-12-13 17:45:40 · 848 阅读 · 1 评论 -
CSS flex布局通用库(小程序/H5/uniapp都可用)
/* * uni-app flex 布局盒子 * 作者:helang * 邮箱:helang.love@qq.com*//* 分列式弹性盒子,以X轴从左到右排列 */.h-flex-x{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: center; /* 水平左对齐 */ &.原创 2020-11-14 00:06:02 · 965 阅读 · 0 评论 -
sass px转vw
如今移动端对 vw/vh 的尺寸单位基本兼容,对代码有洁癖的开发者们不想用js去计算rem的值了。网上有许多有关在 sass 中 px转rem的文章了,今天小编带来一个简单实用的 px转vw的方法sass方法源码/* 750:设计稿宽度 $px:元素在设计稿上的宽度*/@function px2vw($px) { @return $px/750*100vw;}...原创 2019-12-11 16:32:09 · 2479 阅读 · 0 评论 -
CSS 布局之魂 display (一切布局的开始)
在文章开篇之前抛出一些常见的问题:text-align: center;为什么内容不居中? width: 100px;为什么宽度不生效?带这上面最常见的两个问题,也是令无数后端开发者抓狂。为什么CSS这么难学?为什么百度无数次都是同样的答案,还是解决不了我的布局对齐问题?为什么上一个页面还有效,换一个页面同样的代码就是代码不生效?经过上面的灵魂三问之后,将进入本篇文章的...原创 2019-11-01 23:58:30 · 542 阅读 · 0 评论 -
CSS 移动端 1px(线条/边框) 解决方案
由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px,所以在高清瓶下看着1px总是感觉变胖了小编阅读过其他作者的文章中有写 0.5px的写法,在理论上最小的单位是 1px。 所以会出现有的设备写 0.5px无效(没有边框)的情况。如何使用正确的 1px单位 又能在移动设备上显...原创 2019-10-14 15:14:50 · 2966 阅读 · 0 评论 -
CSS 文字两端对齐
最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果。预览效果源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS 两端对齐</title> <style type=...原创 2019-10-14 14:28:14 · 442 阅读 · 0 评论 -
纯CSS/CSS3 导航合集(原创)
小编自己的个人原创纯CSS CSS3水平导航合集导航一:源码地址:http://www.jq22.com/jquery-info20013示例图:导航二:源码地址:http://www.jq22.com/jquery-info20263示例图:导航三:源码地址:http://www.jq22.com/jquery-info20098示例图:导...原创 2019-04-27 12:43:11 · 3415 阅读 · 0 评论 -
css 按钮按下样式
在项目开发中,按钮通常需要添加按钮的获得焦点状态,电脑端用 :hover 移动端用 :active。多个按钮需要添加时,就得添加多个获得焦点样式。可通过添加背景图片的方式来给所有的按钮添加样式,该样式会给当前按钮添加一个白色的透明层。background-image: linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0....原创 2019-04-12 16:35:57 · 15499 阅读 · 0 评论 -
修改浏览器滚动条样式(兼容IE)
通常为了满足页面整体的风格的情况下,需要修改滚动条的颜色,各大视频网站都是以添加自定义滚动条的方式来满足,其实也可以理解,毕竟好像就只要添加一两个而已。如果是做管理系统或者其它需要多处修改浏览器滚动条的地方,通过自定义的方式显然不是个好办法。修改浏览器滚动条样式,请看下面的源码:源码对每个属性都有详细的解释,并附有个人的释义助于更好的理解<!DOCTYPE html>&...原创 2018-10-30 10:22:28 · 30239 阅读 · 8 评论 -
CSS 圣杯布局
圣杯布局,不要被名字所迷惑只是一种简单的布局方式,也不知道从何时起,这种布局方式有了这么响亮的外号。CSS+DIV 最常见的分栏布局就是浮动布局啦,以Bootstrap框架的栅格系统为代表,现广大框架的布局基本都是这种浮动布局方式。圣杯布局有一个非常好的特点就是减少计算。设现在做一个三栏布局,那么要计算左-中-右三个盒子的宽度,使用圣杯布局只需要左-右两个盒子的宽度(是减少计算,不是不要计...原创 2018-10-23 16:22:06 · 345 阅读 · 0 评论