最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css 自适应高度的两列页面布局实现方法
时间：2022-06-25 10:13:32 编辑：袖梨 来源：一聚教程网
最大宽度的样式
通过将 “margin: 1em 5%” 修改为 “margin: 0” 可以很容易的切换到最大宽度的样式
| 代码如下 | 复制代码 |
| #container { margin: 0; /* changed from 1em 5% */ background-color: #FFF; background-image: url(background.jpg); background-repeat: repeat-y; border: 1px solid #333; } |
|
右侧导航的样式
通过修改 nav 为 float: right ，然后将背景图片右对齐，我们很容易的切换到右侧导航的样式。
| 代码如下 | 复制代码 |
| #container { margin: 1em 5%; background-color: #FFF; background-image: url(background.jpg); background-repeat: repeat-y; border: 1px solid #333; background-position: right; /* ADD THIS RULE */ } #nav { float: right; /* WAS FLOAT LEFT */ width: 160px; margin-right: 10px; /* WAS MARGIN-LEFT */ padding-top: 1em; } #content { padding-top: 1em; margin: 0 200px 0 2em; /* SWAP ORDER */ } |
|
实例
| 代码如下 | 复制代码 |
|
http://www.111com.net>
Site nameLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Page headingUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. |
|
相关文章
- 云星穹铁道权益升级怎么玩 云崩铁权益升级活动介绍 12-03
- 以闪亮之名山中绘梦怎么玩 以闪亮之名滢然花梦套装活动介绍 12-03
- 以闪亮之名绿野梦歌礼包怎么样 以闪亮之名绿野梦歌拍照礼包介绍 12-03
- 光遇12.6有什么更新 光遇12月6日更新内容介绍 12-03
- 伍六七暗影交锋测试资格怎么获得 伍六七暗影交锋内测资格获取方法 12-03
- 无限暖暖晶莹诗集怎么样 12-03