CSS3伪类选择器:last-child的理解和使用

最近弄东西时遇到一个css3选择器的小小的问题,就是伪类选择器的问题。起源是这样的,我要实现如下的一个效果: 时遇到小问题了。写出来的效果是这样的: 本以为很简单,使用css伪类 :last-child 把 border-bottom 弄没就行了,但是我还是想简单了。 我的页面是这样写的: 123456789101112131415<div id="app"> <div class=

 阅读全文...

flex实现css左右布局

关于css左右布局,大家应该都很有体会。左边一个图,右边文字,类似下图的效果:实现方法也很多,我平时使用的方法主要有两个: 左右浮动. 可以左边绝对定位,然后把右边的margin-left,或者padding-left设置一下。 这两个方法有利有弊。浮动兼容性最好,但是会对后面的元素产生影响,要清除浮动。绝对定位,书写比较复杂。 今天和大家分享一个比较高大上的方法:flex。具体语法大家可以在这里学习

 阅读全文...

垂直居中的实现方法

一般情况下,我们页面垂直居中的情况一般包括以下几种: 高度一定的弹出框 ,我们常用的登录框,提示框等 高度未知,但是知道百分比 高度完全未知 1.高度一定最常见的是一种,实现方法也比较简单。我个人一般是这么写的,分两种情况,1.有遮罩层,2,没有遮罩层。 第一种情况: 最外围添加一个绝对样式属性fixed,作为遮罩层,设置size满屏。 弹出框,设置固定宽高(w,h)、absolute位置属性

 阅读全文...

图片文字在一个水平线上

关于图片和文字在一个水平面线上的问题,相信大家都遇到。实现这样一个简单的效果,如图: 看似比较简单的问题,其实还是有点小小烦人的。我以前的做法是这样的: 图片文字都要设置浮动 对文字或图片设置margin-top属性 ,调节两者的水平关系。 html: <div class="aa"> <img src

 阅读全文...