u012137648的博客

响应式导航设计今天来做一个简单响应式导航不想看具体制作过程的，请直接前往这里 Responsive Header Demo布局先来码出基本的布局<header> <div class="logo"> <a href="#">Company Name</a> </div> <nav> <div class="nav-responsive"><a id="n

css animation学习上一篇写了transition的用法，其实animation也是做动画利器，相比于transition，animation可以做出更多更大的动画效果今天就来学一下css的animation的用法用法如下所示animation属性可以有8个值，当然这8个值可以分开写.someclass { /*[animation-name] [animation-duration] [animation-timing-function] [animation-delay]

css transition学习transition英文意思是过渡，在css中用来展示过渡效果，它和animation很像，都可以展示网页的动效，那么它们有什么区别呢?主要记住一下这点，transition需要人为触发，比如鼠标点击，移上，移走等，而animation不需要人为触发，在页面加载滑动到特定位置或者其它时刻就可以自动展示动效不需要人为干预。今天就来学一下css的transition的用法，用熟了可以做出很出彩的效果。用法如下所示transition属性可以有4个值，当然这4个值可以分开

css flex布局学习网上有很多关于flex布局的教程，有些写的很不错，今天就用自己的理解写一篇博客吧，不追求术语的解释，尽量实用。什么是flex布局flex字面意思是弹性布局，是W3C提出的一种布局方式，为什么称之为弹性布局，是因为当你定义了一个元素为弹性布局时，它的子元素可以在大小未知时依然能很自然很优雅的布局在网页上，而不会到处乱飞。flex的关键术语喜欢看官方文档的可以去这里，术语解释在第二节官方文档图片出自https://www.w3.org/TR/css-flexbox/#int

css三种方式实现圣杯布局圣杯布局时很常见的网页布局方式，圣杯布局的主要结构如下图所示：头部，中间，底部，其中中间又分为三列：左，中，右，要求左右宽度固定，中间自适应。Dom 结构<div id="app"> <div class="header"></div> <div class="middle"> <div class="left"></div> <div class="main"></div