首页 > 代码库 > 13.4 "1-3-1"固定宽度布局
13.4 "1-3-1"固定宽度布局
下面以“1-2-1”布局为基础制作“1-3-1”布局。这里仍然使用浮动方式来排列横向并排的3栏,效果如图1所示。 图1 “1-3-1”布局 这种布局同样可以用两种方法制作,案例文件分别位于网页学习网CSS教程资源“第13章\1-3-1-absolute.htm”和“第13章\1-3-1-float.htm”。 对于这个页面,要在“1-2-1”布局的基础上修改HTML的结构,只需在container中的左边增加一列即可,这里将新增加的列命名为navi。 相信读者已经可以自己写出相应的HTML代码,并使用“绝对定位法”和“浮动法”实现所需的效果,这里就不再赘述了。这里仅给出“浮动法”的CSS样式关键代码。lodidance.com 折叠CSS 代码复制内容到剪贴板
#navi、#content和#side这3栏都使用浮动方式.3列的宽度之和正好等于总宽度。 点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表 |
编辑:网页学习网 |
本文地址:http://www.lodidance.com/css/jc/943.html |
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。