index.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS3弹性伸缩布局[上]</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <p>从技术上来说,IP(Internet Procotol,互联网协议)是一种地址协议,是互联网信息传输的规范和标准,也是互联网赖以存在的基础。现在的互联网大多是建立在IPv4这个版本的地址协议基础上,这个协议所“产生”的IP地址约有45亿个,由国际组织统一分配。简单来说,IP地址就相当于互联网设备的网络身份证,有了它,电脑、智能手机、云电视等设备才能正常上网。据测算,到2020年全球将有约500亿台联网设备,超过IPv4可供地址的10倍。</p> <p>对此,已经有不少科技企业开始大量囤积IP地址,但IP地址即将耗尽情况的出现还是会让那些有意在线扩展业务的美国企业面临大量损失。事实上,亚洲地区其实早在2011年就已经耗尽了IP地址,欧洲也在一年后遭遇了类似的情况,而北美地区则预计会在今夏迎来相同的状况。</p> <p>简单来说,IP地址之于互联网就相当于电话号码之于电话一样,这些由数字组成的IP地址不同于以结尾的这些顶级域名,因为它们仅仅是数据在互联网中传输的背后平台。</p> </div> </body> </html>
style.css
@charset "utf-8"; p { width: 150px; border: 1px solid gray; background-color: silver; margin: 5px; padding: 5px; } div { width: 100%; display: -moz-box; display: -webkit-box; display: box; /*-moz-box-orient: vertical;*/ /*-moz-box-orient: inline-axis;*/ /*-moz-box-orient: block-axis;*/ /*-moz-box-direction: reverse;*/ /*-moz-box-pack: end;*/ /*-moz-box-pack: center;*/ /*-moz-box-pack: justify;*/ /*-webkit-box-pack: justify;*/ /*-moz-box-align: start;*/ /*-moz-box-align: end;*/ /*-moz-box-align: center;*/ /*-moz-box-align: baseline;*/ } p:nth-child(1) { -moz-box-flex: 1; -moz-box-ordinal-group: 2; } p:nth-child(2) { -moz-box-flex: 3; -moz-box-ordinal-group: 1; } p:nth-child(3) { -moz-box-flex: 1; -moz-box-ordinal-group: 3; }
相关推荐
第29章 CSS3弹性伸缩布局[上].pdf
第29章 CSS3弹性伸缩布局[下].pdf
NULL 博文链接:https://onestopweb.iteye.com/blog/2232133
NULL 博文链接:https://onestopweb.iteye.com/blog/2232132
主要为大家详细介绍了CSS3弹性伸缩布局之box布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
纯css3 弹性布局瀑布流
HTML5.CSS3网页布局和样式精粹欢迎大家下载!
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一...
CSS Flexible Box弹性布局模块切换效果是一款利用纯css3 Flexbox布局模块(国内很多人称为弹性布局),它是CSS3新增的一种布局模式。
CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...
第28章 CSS3多列布局.pdf
HTML5 + CSS3 实现 3d 室内布局源码。
css-弹性盒布局的深度学习
css3弹性布局-webkit-box的用法演示 css3弹性布局-webkit-box的用法演示
介绍了css的响应式布局的方法展示和代码,欢迎下载观看
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
这是一款非常实用的jQuery和CSS3圆形弹性伸缩导航菜单按钮特效。该导航菜单初始状态是一个圆形的按钮,当用户用鼠标点击或移动手机上用手触摸了按钮之后,该圆形按钮平滑的伸缩变形为圆角导航菜单,效果非常酷。
css3伸缩条形图是一款纯css3实现的3D伸缩条形图效果。 css3实现伸缩条形图演示: 点击查看演示