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> <h1>科技新闻总汇</h1> <h3>第一段内容</h3> <p>据市场研究机构IDC公布的最新数据，中国市场第一季度智能手机出货量较上年同比下滑4.3%，这在六年来尚属首次。其他的调查结果则显示，中国市场第一季度智能手机出货量仍处于增长，但其增幅较以往出现明显放慢。</p> <h3>第二段内容</h3> <p>据IDC的数据，今年第一季度，三星在华市场份额已经跌到第四，而一年前还位居第一。不过，三星还是对中国市场充满希望，希望通过其高端手机产品Galaxy S6继续赢得发展。三星在一份声明中称，“虽然有迹象表明爆发式增长的中国智能市场今年将降速，但8.85亿中国手机用户中的大部分还在使用中低端智能手机，因此即便中国市场出现饱和，但升级换代还是给高端手机留下相当大的空间。”</p> <h3>第三段内容</h3> <p>业内人士称，智能手机在中国市场的发展显著减速主要是受首次购买用户减少的影响。市场研究机构Counterpoint研究总监Tom Kang表示，在中国，智能手机的渗透率已经超过90%，这意味着在中国希望使用智能手机的用户都已经实现第一次购买，现在已经进入了一个手机换代升级的时期。</p> <h3>第四段内容</h3> <p>在北京一家科技公司工作的廖先生就属于这一人群。廖先生目前使用的是苹果iPhone 6，他几乎每两年更换一部手机。但从目前的情况来看，廖先生还是比较钟情于现在使用的iPhone 6。他说：“近期内不会再购买手机，除非现在的这部手机丢了或摔坏了。我以后可能还是会买苹果的手机，如果三星能推出一款不错的手机，我也会考虑的。”</p> <h3>第五段内容</h3> <p>中国市场发展速度的减速对苹果、三星等国外智能手机制造商以及小米等本土企业将产生实质性的影响。与此同时，不管是国外厂商还是本土企业，例如联想、酷派以及华为都在中国市场投入更多力量，其中很多还专注于销售价格不断上涨的大屏智能手机。</p> </div> </body> </html>
style.css
@charset "utf-8";
div {
/*-moz-columns: auto 3;*/
/*-moz-columns: 150px 3;*/
/*如果没有设置列数，却设置了每列多少宽度，那么会自动设置列数*/
-moz-column-width: 150px;
-moz-column-count: 3;
-moz-column-gap: 50px;
-moz-column-rule: 2px dashed gray;
-webkit-column-width: 150px;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
-webkit-column-rule: 2px dashed gray;
column-width: 150px;
column-count: 3;
column-gap: 50px;
column-rule: 2px dashed gray;
}
h1 {
text-align: center;
-moz-column-span: all;
-webkit-column-span: all;
column-span: all;
}
相关推荐
第28章 CSS3多列布局.pdf
第二天 一列布局 第三天 二列和三列布局 第四天 纵向导航菜单及二级弹出菜单 第五天 超链接伪类 第六天 html列表 第七天 横向导航菜单 第八天 下拉及多级弹出菜单 第九天 CSS表单设计 第十天 div+css...
18.2 让单元格跨越多列或多行 371 第19章 添加JavaScript 373 19.1 加载外部脚本 374 19.2 添加嵌入脚本 378 19.3 JavaScript事件 378 第20章 测试和调试网页 380 20.1 验证代码 380 20.2 ...
第二部分为应用篇（第3～11章），详细介绍如何利用Dreamweaver 8设计制作网页，JavaScript脚本编程，Web数据库应用，以及网站发布和维护方面的知识；第三部分为图形动画篇（第12～15章），介绍目前最常用的网页制作...
第二十四章. FlexUnit单元测试（742） 24.1节. 创建应用FlexUnit框架的应用程序 24.2节. 运行FlexUnit单元测试 24.3节. 创建FlexUnit测试用例 24.4节. 添加测试用例到测试集合 24.5节. 在测试前后运行代码 24.6节. ...
第3章 Web窗体 58 3.1 页面处理 58 3.1.1 HTML表单 59 3.1.2 动态用户界面 60 3.1.3 ASP.NET事件模型 61 3.1.4 自动回送 62 3.1.5 视图状态 63 3.1.6 XHTML兼容性 66 3.1.7 客户端控件ID 71 3.2 ...
21、减少布局中列与列之间的间距 22、导航设置默认折叠起来 23、版块编辑器增加源代码标签 24、版块的描述字段长度调成text类型 25、解决编辑器上传附件使用现有的图片时，缩略图地址错误的bug 26、调整前台首页友情...
第3章 使用页眉、工具栏和标签栏来导航 39 3.1 页眉栏 39 3.1.1 页眉基础知识 39 3.1.2 页眉结构 40 3.1.3 页眉定位 40 3.1.4 页眉按钮 42 3.1.5 既有文本又有图标的按钮 43 3.1.6 只带有图标...
第3章 Web窗体 3.1 页面处理 3.1.1 HTML表单 3.1.2 动态用户界面 3.1.3 ASP.NET事件模型 3.1.4 自动回送 3.1.5 视图状态 3.1.6 XHTML兼容性 3.1.7 客户端控件ID 3.2 Web窗体处理阶段 3.2.1 ...
第3章 第一个XML文档 34 3.1 Hello XML 34 3.1.1 创建一个简单的XML文档 34 3.1.2 保存XML文件 35 3.1.3 将XML文件装入Web浏览器 35 .2 考察简单的XML文档 37 3.3 赋于XML标记以意义 39 .4 为XML文档编写样式单 40 ....
第3章 第一个XML文档... 34 3.1 Hello XML. 34 3.1.1 创建一个简单的XML文档... 34 3.1.2 保存XML文件... 35 3.1.3 将XML文件装入Web浏览器... 35 .2 考察简单的XML文档... 37 3.3 赋于XML标记以意义... 39 ....
第3章 第一个XML文档 34 3.1 Hello XML 34 3.1.1 创建一个简单的XML文档 34 3.1.2 保存XML文件 35 3.1.3 将XML文件装入Web浏览器 35 .2 考察简单的XML文档 37 3.3 赋于XML标记以意义 39 .4 为XML文档编写样式单 40 ....
只显示所需的数据 19 2.4 字符串数组和数值数组的排序 22 2.5 拆分数组 24 2.6 合并数组 26 2.7 把数值数组转换成字符串，并查找其子字符串 27 2.8 创建对象数组 28 2.9 为对象数组排序 30 2.10 小结 32 第3章 事件...
第3章 调试工具及技巧 / 62 3.1 使用firebug进行调试 / 62 3.2 在ie中调试 / 76 3.2.1 使用debugbar和companion.js调试 / 76 3.2.2 使用ietester测试 / 80 3.2.3 在ie 8或ie 9中调试 / 83 3.3 在chrome中调试...
第3章 第一个XML文档... 34 3.1 Hello XML. 34 3.1.1 创建一个简单的XML文档... 34 3.1.2 保存XML文件... 35 3.1.3 将XML文件装入Web浏览器... 35 .2 考察简单的XML文档... 37 3.3 赋于XML标记以意义... 39 ....