![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
bdss58
这个作者很懒,什么都没留下…
展开
-
Flexbox布局(3)
使用flex-direction: column,可以是flexbox中的子元素按竖直方向排列。实现下面效果: <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script><style> .side-bar { /** * 这是一个flexbox */原创 2016-05-23 17:00:27 · 355 阅读 · 0 评论 -
Flexbox布局(2)
在需要左右放置内容的情况下(下图布局效果),往常都是用float,这个float恶心的很,需要float: left,float: right,然后再clear: both。不仅麻烦,并且常常左右内容不能水平对齐。 这个时候,css3的flex布局的优越感油然而生。下面使用flex来实现以下图中的效果。 不多解释了,直接代码中注释了。<link href="http://cdn.bootcss.原创 2016-05-22 12:56:22 · 418 阅读 · 0 评论 -
Flexbox布局(1)
使用css3中的flex,可以实现很棒的布局。一些简单的页面和需求,可以考虑使用flex布局,基本上都能满足需求。只需要将元素添加一个display: flexcss规则,我们就获得了一个flexbox。就是这么简单。默认情况下,flexbox将其子元素沿着一条水平的“main axis”轴线布局。本篇先玩一下基本的使用:水平排列子元素。 先做一个Stepper input组建,效果如图没有必要使原创 2016-05-20 17:14:18 · 381 阅读 · 0 评论 -
Flexbox布局(4)
上一篇Flexbox布局(3)css居中问题,老生常谈。这里试着flex布局一番,看看flex居中实现起来效果如何。实现下面效果: 使用以下要点:display: flex :肯定要来一个flexbox嘛。flex-direction: column :竖直方向摆放子元素。align-items: center :“串糖葫芦”,居中效果justify-content: center :子元原创 2016-05-24 10:05:41 · 440 阅读 · 0 评论 -
Flexbox布局(6)
上一篇介绍了flex-direction: row-reverse,来颠倒排列。 现使用下面规则:display: flexflex-direction: columnalign-items: centerjustify-content: center来实现下面效果: <link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/f原创 2016-05-26 12:31:58 · 368 阅读 · 0 评论 -
Flexbox布局(5)
接上一篇flexbox布局(4)展示了flexbox的完美居中能力。flexbox还可以轻松实现颠倒排列的效果。 实现下面效果: flex-direction: row-reverse 是flexbox中的子元素倒序排列。<link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesh原创 2016-05-25 09:45:09 · 401 阅读 · 0 评论 -
Basic JavaScript Slideshow without jQuery
一直想实现一个slideshow,不用jquery。但是能力有限,效果都不是很好。直到看到这篇文章。<style>/*essential styles:these make the slideshow work*/#slides{ position: relative; height: 300px; padding: 0px; margin: 0px;翻译 2016-06-09 00:17:16 · 518 阅读 · 0 评论 -
使用css垂直水平居中
不管是新手还是老手,fed们都会遇到水平和垂直居中问题。是一个div居中,水平方向上谁都会,那就是margin: 0 auto。但是垂直居中就需要点技巧了,不过代码也不复杂,下面是同时水平垂直居中的两种方法。 html 片段如下:<div class="parent"> <div class="children"></div></div>父元素的css如下:.parent { posit原创 2016-01-24 18:35:19 · 411 阅读 · 0 评论 -
css实现翻转卡片效果
主要用到了:transform,用来翻转transform-style: preserve-3d,3D翻转效果perspective,配合3D翻转效果transition,动画效果html<div class="flipbox"> <div class="side">side a</div> <div class="side">side b</div></div>css.flip原创 2016-06-21 16:44:26 · 2650 阅读 · 1 评论