DIV布局之道一:DIV块的水平并排、垂直并排
2018-06-18 03:40:46来源:未知 阅读 ()
DIV布局网页元素的方式主要有三种:平铺(并排)、嵌套、覆盖(遮挡)。本文先讲解平铺(并排)方式。
1、垂直平铺(垂直排列)
请看如下代码
CSS部分:
- .lay1{ width:200px; height:20px; border:1px solid #FF6699;}
- .lay2{ width:200px; height:20px; border:1px solid #FF6699;}
- .lay3{ width:200px; height:20px; border:1px solid #FF6699;}
HTML部分:
- <div class="lay1"></div>
- <div class="lay2"></div>
- <div class="lay3"></div>
我们看到这里有三个DIV块,三个DIV块呈上下并列分布,这种方式就是常见的DIV “ 垂直平铺方式”,也是最为常见的布局网页的方式,预览效果:
我们可以看到网页中有三个“方块”呈上下排列。
2、水平平铺(水平排列):
我们要让上例中的三个DIV块呈水平排列该如何改写代码呢?其实只要我们相应的样式中加一个float:left 即可:
CSS部分:
- .lay1{ width:100px; height:20px; border:1px solid #FF6699; float:left}
- .lay2{ width:100px; height:20px; border:1px solid #FF6699; float:left}
- .lay3{ width:100px; height:20px; border:1px solid #FF6699; float:left}
HTML部分无需任何修改,预览效果:
这个时候,就把三个DIV块水平平铺了。不难吧?
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:asp.net 文件上传示例整理
下一篇:探讨在线支付平台的实现
- CodeForces 1324 - Codeforces Round #627 (Div. 3) 2020-03-13
- Codeforces Round #617 (Div. 3) 2020-02-10
- Codeforces Round #595 (Div. 3)D1D2 贪心 STL 2019-11-06
- C++对象在继承情况下的内存布局 2019-05-24
- 『ACM C++』 Codeforces | 1005D - Polycarp and Div 3 2019-03-06
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