Flex 布局教程:实例篇
21 07 2021
今天介绍常见布局的Flex写法。你会看到,不管是什么布局,Flex往往都可以几行命令搞定。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。如果不加说明,本节的HTML模板一律如下。 上面代码中,...
Flex 布局教程:语法篇
21 07 2021
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的...
css强制换行和超出部分隐藏实现
30 04 2021
一、强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据。2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据。3 white-space: pre-wrap; 只对中文起作用,强制换行。word-break:break-all 和 word-wrap:break-word都是能使其容器如DIV的内容自动换行,它们的区别在于:1、word-break:break-all假设div宽度为450px,它的内容...
使用animate动画库添加鼠标经过动画
30 04 2021
animate是一个css3动画库,使用它简单几步就能很轻松的为网站增加各种动画效果;今天蓝叶讲的是如何使用animate动画库添加鼠标经过动画,首先需要站长下载animate动画库文件,通过FTP上传到网站主机里,然后在页面模版上引用,演示可以用鼠标悬停在本站的LOGO上面看效果。在模版文件头部添加animate.min.css的调用。或者也可以直接使用七牛静态库的地址。然后在css文件里写上鼠标经过的样式,举个例子,比如.logo是你的logo层样式名,代码如下,swin...