【响应式】foundation栅格布局的“尝鲜”与“填…
2018-06-24 01:15:34来源:未知 阅读 ()
【注意】在这篇文章中我采取的是React框架的写法,可能有些影响阅读,请多多包涵,className等同于class, style= {{background:'red'}}等同于 style = "background:red",可放心食用
【准备工作】 把下面这两个东西写在你的html文件里:
<link rel="stylesheet" href="http://cdn.staticfile.org/foundation/6.3.0-rc3/css/foundation.min.css">(放在head标签内)
<script src="http://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>(放在body底部)
<div className = 'row'> <div className = 'small-2 medium-6 large-10 columns' style = {{background:'red'}}>column1</div> <div className = 'small-10 medium-6 large-2 columns' style = {{background:'blue'}}>column2</div> </div>
<div className = 'row'> <div className = 'small-6 columns' style = {{background:'red'}}>column1</div> <div className = 'small-6 columns' style = {{background:'blue'}}>column2</div> </div>
<div className = 'row'> <div className = 'large-6 columns' style = {{background:'red'}}>column1</div> <div className = 'large-6 columns' style = {{background:'blue'}}>column2</div> </div>
<div className = 'row' > <div className = 'large-6 columns' style = {{background:'red'}}>column1</div> <div className = 'large-6 columns' style = {{background:'blue'}}>column2</div> </div>
<div className = 'row' style = {{maxWidth:'100%'}}> <div className = 'small-3 columns' style = {{background:'red'}}>column1</div> <div className = 'small-3 columns' style = {{background:'blue'}}>column2</div> <div className = 'small-3 columns' style = {{background:'yellow'}}>column2</div> </div>
<div className = 'row' style = {{maxWidth:'100%'}}> <div className = 'small-3 columns' style = {{background:'red'}}>column1</div> <div className = 'small-3 columns' style = {{background:'blue'}}>column2</div> <div className = 'small-3 columns end' style = {{background:'yellow'}}>column3</div> </div>
<div className = 'row'> <div className = 'small-6 small-centered columns' style = {{background:'red'}}>column1</div> </div>
<div className = 'row'> <div className = 'small-6 small-centered medium-uncentered large-uncentered columns' style = {{background:'red'}}>
column1
</div> </div>
<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}> <div className = 'columns column-block' style ={{minHeight:'20px',background:'grey'}}></div> <div className = 'columns column-block' style ={{minHeight:'20px',background:'blue'}}></div> <div className = 'columns column-block' style ={{minHeight:'20px',background:'red'}}></div> <div className = 'columns column-block' style ={{minHeight:'20px',background:'yellow'}}></div> <div className = 'columns column-block' style ={{minHeight:'20px',background:'black'}}></div> <div className = 'columns column-block' style ={{minHeight:'20px',background:'orange'}}></div> </div>
<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}> <div className = 'columns ' style ={{minHeight:'20px',background:'grey'}}></div> <div className = 'columns ' style ={{minHeight:'20px',background:'blue'}}></div> <div className = 'columns ' style ={{minHeight:'20px',background:'red'}}></div> <div className = 'columns ' style ={{minHeight:'20px',background:'yellow'}}></div> <div className = 'columns ' style ={{minHeight:'20px',background:'black'}}></div> <div className = 'columns ' style ={{minHeight:'20px',background:'orange'}}></div> </div>
<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}> <div className = 'small-3 columns' style ={{minHeight:'20px',background:'grey'}}></div> <div className = 'small-3 columns' style ={{minHeight:'20px',background:'blue'}}></div> <div className = 'small-3 columns' style ={{minHeight:'20px',background:'red'}}></div> <div className = 'small-3 columns' style ={{minHeight:'20px',background:'yellow'}}></div> <div className = 'small-3 columns' style ={{minHeight:'20px',background:'black'}}></div> <div className = 'small-3 columns' style ={{minHeight:'20px',background:'orange'}}></div> </div>
<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxmaxWidth:'100%'}}> <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'grey'}}></div> <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'blue'}}></div> <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'red'}}></div> <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'yellow'}}></div> <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'black'}}></div> <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'orange'}}></div> </div>
<div> <p className = 'show-for-small'>我在小/中/大型屏幕显示</p> <p className = 'show-for-medium'>我在中大型屏幕显示</p> <p className = 'show-for-large'>我在大型屏幕显示</p> </div>
<div> <p className = 'show-for-small-only'>我只在小型屏幕显示</p> <p className = 'show-for-medium-only'>我只在中型屏幕显示</p> <p className = 'show-for-large-only'>我只在大型屏幕显示</p> </div>
<div className = 'row'> <p className = 'float-left'>float-left</p> <p className = 'float-right'>float-right</p> </div>
最后最后的一点
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:给你的博客换个装-园子换装指南
下一篇:HTML语义化的理解
- 3.栅格系统 2020-05-28
- [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读 2020-05-07
- 用flex布局实现栅格系统 2020-03-15
- 使用栅格系统开发响应式页面 2020-03-15
- 使用栅格系统和flex布局开发响应式页面源码 2020-01-07
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash