css3
zgh0711
努力让自己变得更有价值
展开
-
H5 实现横向滚动的方法及需要注意的地方
现在的前端开发中,有许多页面上有设计了横向滚动,可以说横向滚动是一个很常见的场景,今天就来说说横向滚动怎么实现以及需要注意的问题。实现横向滚动要实现横向滚动,方式不止一种,这里我只说最简单的一种,其它太复杂的也没说的必要,其实只需要三个 CSS 属性就能搞定/*横向滚动*/.scroll-x{ display: flex; flex-wrap: nowrap; overflow...原创 2019-10-25 14:51:41 · 7330 阅读 · 0 评论 -
用 CSS 写一个向右的箭头
今天在修改别人写的网页的时候发现一个有意思的东西,就是一个向右的箭头,这玩意居然还能用 CSS 来写,让我眼前一亮,就记录下来,原创 2017-06-30 14:24:46 · 53650 阅读 · 1 评论 -
flex布局中,保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题。就是在一个设置了 flex:1 的容器中,如果文字很长,这时候文字就会超出容器,而不是呆在设置好的动态剩余的空间中。原创 2017-10-18 11:00:58 · 74452 阅读 · 31 评论 -
H5 布局 -- 让容器充满屏幕高度或自适应剩余高度
在前端页面布局中,经常会碰到要让容器充满整个屏幕高度或者剩余屏幕高度的需求。一般这时候都会想当然的使用 height:100% 这样的 CSS 来写。这样写的话,当容器内内容很多的时候是没有问题的,可以达到预期的效果,但是如果容器内内容比较少,不足以撑起足够的高度的话,这个CSS 样式实际上是没起作用的。那要怎么解决这个问题呢?让容器高度充满这个屏幕在容器内容很少的情况下,要想让这个容器充...原创 2018-05-15 10:49:12 · 38189 阅读 · 9 评论 -
前端面试总结 -- CSS 中 display 的 block,inline,inline-block 这三个属性有什么区别
这是一个考察 CSS 基础的面试题,话不多说,先上代码<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head>&am原创 2018-08-09 14:39:37 · 2360 阅读 · 0 评论 -
CSS 将文本固定为多行显示,溢出时显示省略号的实现方式及注意要点
平时在开发时,经常会有要求让文字单行或多行显示,多余的文字用省略号代替的需求。文本单行显示很好解决,用如下的 CSS 属性就行了: overflow: hidden; white-space: nowrap; text-overflow: ellipsis;那么多行文本的要怎么处理呢,针对多行文本,有二种处理方式,首先就是对于 webkit 内核的浏览器,处理起来比较简单,使用如...原创 2019-01-18 15:41:44 · 2409 阅读 · 0 评论 -
带输入框的页面在进行布局的时候需要注意的几个点
带输入框的页面在平时开发的时候经常会碰到,最常见的比如登录,注册等页面。今天就拿一个基本的登录页面来讲下在给这类页面做布局的时候需要注意的几个问题。1,靠近底部或者固定在底部的元素不要使用 fixed,absolute 等定位方式如果使用了 fixed ,absolute 等方式将元素固定在底部,在 Android 中,当键盘弹起时,你会发现固定在底部的元素跟着键盘一起被顶上去了,顶上去了不说...原创 2019-07-05 09:39:46 · 1162 阅读 · 0 评论 -
写 CSS3 动画时需要注意的几个点和几个动效 Demo
最近项目中需要做一组宣传的页面,这几个页面上全都是静态图片再加上各种动画,为了做出符合预期效果的页面,我也是恶补了一下 CSS3 动画相关的知识,最后做出来的效果也是达到了设计师的要求。动画相关知识如果以前没有接触过或者写过 CSS 动画,有些动画相关的知识还是需要学一下的,这里我并不会讲这些基础知识。这些资料网上有很多,也都写的很好,这里我贴出一些写的不错的分享出来。CSS3 动画基础C...原创 2019-08-22 13:25:05 · 598 阅读 · 0 评论