css实现水平对齐,如图有人会说css实现这种水平对齐要兼容ie8还不简单吗?使用float: left,或者display: inline-block,不就可以了吗?是的,最常用的最简单方式就是上面这两种,但还有一种方式也可以实现,那就是使用display: tabl
198 2018-10-10 0 198
最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的结果出现了这样的情况页面的html是这样的 <div class="block"> <div></div> </div> <div class="bl
64 2018-10-10 0 64
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚
115 2018-10-10 0 115
效果思路 用css的animation属性做动画代码wxml:<view class="container"> <view class='anit {{show == 1?"show":(show == 2?"hide":"")}}'>请选择商品</view> <view bindtap='anniu'>点击弹出提示</view&
113 2018-10-10 0 113
移动端的屏幕大小各异,尤其是安卓机,千奇百怪,各种尺寸的机型都有,而且有1倍屏,2倍屏,3倍屏之分,作为精益求精的前端,我们希望找到一种完美适配各种机型的方案。rem是现在主流的移动端自适应布局方案,本文主要介绍了rem布
48 2018-10-10 0 48
两端对齐效果如上图中红色的9个div它们中间有间距,而最左边和最右边是没有间距的,这种布局如果使用css3的flex来实现是非常简单的,而如果要使用float布局就需要一些特殊的技巧了。实现原理红色的9个div左浮动,左右margin
57 2018-10-10 0 57
1. 实现一个简单的三角形使用CSS盒模型中的border(边框)即可实现如下所示的三角形:CSS实现简单三角形实现原理:首先来看在为元素添加border时,border的样子;假设有如下代码:<div></div>div { width: 50px; height: 50p
102 2018-10-10 0 102
前言本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例,文中涉及到 CSS3 的动画(animation)、2D 转换(transform: scale)css3中新增了一个animation的属性,该属性类似于创建一个animation对象如:an
96 2018-10-10 0 96
1. 元素的 width/height/padding/margin 的百分比基准设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么?举个栗子:.parent { width: 200px; height: 100px;}.child { width: 80%; h
74 2018-10-10 0 74
我们一般在打开相机的时候有个扫描框,然后静态二维码有时候为了聚焦和利于扫描也会加一个框框,下面介绍一下如何通过css 来实现一个框框实现效果:代码如下:html:<div class="img-box"> <img class="code" src="http
94 2018-10-10 0 94
什么是margin-top塌陷margin-top塌陷是在CSS的盒子模型中出现的一种现象,描述的是当父元素包裹着一个子元素的时候,当给子元素设置margin-top属性时,此时只是想让子元素的边框距离父元素边框有一段距离,而却出现了父元素
20 2018-10-10 0 20
场景最近要做的一个需求是移动端的h5页面,要求有一排可选择的卡片, 超出容器部分可以左右滑动,同时每张卡片左上角要有一个删除按钮。如下图:心想:so easy, 在父容器上加一个max-width: 200px; white-space: nowrap; over
32 2018-10-10 0 32
1.元素的 width/height/padding/margin 的百分比基准设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么?举个栗子:.parent { width: 200px; height: 100px;}.child { width: 80%; hei
24 2018-10-10 0 24
问题描述想用CSS实现顶部固定的效果:尝试margin-top加position:fixed实现,代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Test</title>
44 2018-10-10 0 44
因公司业务要求需要实现如下图中红色区域的效果:效果说明:1、红色区域数据需要倒排(即从底部开始数,数字为1、2、3、4、5),并且显示在最底部
2、当数据过多时需要显示滚动条,**并且滚动条需要拉到最底部**
3、数据从websocke
32 2018-10-10 0 32
为什么需要深入学习CSS溢出机制?在实际开发的过程中,内容溢出是经常见到的。如果不深入了解这个机制,你经常会碰到这样的问题:为什么这个元素没有受到祖先元素的overflow:hidden的影响?这里出现的滚动条是哪个元素的?如果消
37 2018-10-10 0 37
初始时,多个列内容大小不同,高度不同。现在需要设置不同的背景来显示,而且各个列的高度需要保持一致。那么这就需要利用到多列等高布局。最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局flex,默认值就是自带等高
22 2018-10-10 0 22
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时,背景看起来也会变长。大多数应用于导航栏之中,如微信导航栏:具体实现方法如下:1、首先每一块文本内容是由a标签与span标签组成<a href
42 2018-10-10 0 42
1、过渡 transition 过渡属性用法: transition :ransition-property transition-duration transition-timing-function transition-delay 可以一起指定也可以分别单独指定transition-property: 是要过渡的属性(如
16 2018-10-10 0 16
只需15行CSS代码,就可以让你的iPhone崩溃Wire 的安全研究员 Sabri Haddouche 发现了一种新的攻击,只需访问包含某些 CSS 和 HTML 的网页,就会导致 iOS 重新启动以及 macOS 冻结。 Windows 和 Linux 用户不受此错误的影响
14 2018-10-10 0 14