典型的左右结构（两列）的网页模式 - 点击一下， ↓ ↓ ↓ ↓ ↓ ,祝您成功，幸福。 - ITeye博客

`

380071587

浏览: 447596 次
性别:
来自: 上海

最近访客更多访客>>

libian339

u012363178

billowliu2

月亮不懂夜的黑

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

lyschj：
C#实现网页采集，分栏目配置，数据保存到dtcms
eyejava666：引用幸福就好，不要晒出来，因为晒多了，迟早有一天会晒干的，所以 ...
犀利的牛人牛语
380071587： http://aspnetwinform.iteye.com/ ...
项目通知
再_见孙悟空：
C#实现网页采集，分栏目配置，数据保存到dtcms
aspnetwinform：谢谢分享，界面方面能美化一下就更好了，再也不用为几十个字段的 ...
Oracle 代码生成小工具免费下载

典型的左右结构（两列）的网页模式

阅读更多

效果如图：

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <head> <title>固定宽度且居中</title> <style type="text/css" media="all"> #container { position: relative; width:80%; /* width + border for IE 5.x */ border: solid #036; border-width: 1 3px; margin: auto; height:100%; } #header { background-color:lightyellow; height: 60px; } #navigation { position: absolute; top: 60px; left: 0; width: 134px; background-color:lightblue; height:500px; } #content { background-color:lightgreen; /*padding: 1px 20px 1em 40px;*/ top: 60px; border-left: 134px solid #069;/*左边框位置从134px位置开始*/ height:500px; } </style> </head> <body>  <div id="container">  <div id="header"> 标题部分 </div>   <div id="navigation"> 左边部分 </div>   <div id="content"> 右边部分 </div>  </div>  </body> </html>

分享到：

CSS盒子模型 | C#3.0的一些新特性

2009-08-22 22:58
浏览 208
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

左右结构两列布局宽屏模板.rar: 左右结构两列布局宽屏模板，DIV CSS布局，蓝色风格，该模板经过W3C验证，符合web2.0标准。

HTML5全屏两列布局网页模板: 这是一款非常有创意和实用的HTML5全屏两列布局网页模板。在大屏幕设备中，该模板以两列布局的方式出现，用户可以通过点击导航按钮来切换页面，新的内容会覆盖旧的内容。

典型的三行两列居中高度自适应布局: 典型的三行两列居中高度自适应布局如何使整个页面内容居中，如何使高度自适应内容自动伸缩，这是学习CSS布局最常见的问题。下面给出一个实际的列子，附详细说明。首先可以将下列代码复制到html文件中运行一下，...

XHTML+CSS网页布局与美化07两列式网页的布局与美化.docx: XHTML+CSS网页布局与美化07两列式网页的布局与美化.docx

DIV＋CSS＋HTML布局（三行两列布局）: DIV＋CSS＋HTML布局（三行两列布局）

uitableview显示两列数据: 用一个uitableview显示两列数据。

CSS多种方法实现div两列等高: CSS多种方法实现div两列等高布局，前端工程师必备知识，div两列等高

excel中两列数据值的比较: 通过该函数，利用excel的宏功能可实现两列数据值的比较，包括两列共有的，不共有的。

EXCEL找到两列重复项,统计两列重复项出现次数: EXCEL找到两列重复项,统计两列重复项出现次数

jxl 实现excel 比较两列: 比较两列中存在不同的值；找出在一列中存在相同的值

原创左右两列框架锚点滚动Jquery插件: 此插件把一个简单网站的所有功能都集成在一个页面上，利用锚点的方式滑动到相应的菜单对应的模块，非常实用，是一种新型的设计模式，值得借鉴，网友可以学习哦。

查找两列数据异同.xlsm: 查找两列数据异同.xlsm 标记颜色

两列单色平面波合成动态仿真: 两列单色平面波合成动态仿真

freemarker实现一行两列算法: freemarker实现一行两列算法

STM32+W5500实现Web2个网页之间的切换.rar: STM32+W5500实现Web2个网页之间的切换.rar

android两列显示两个listview: android两列显示两个listview

仿京东淘宝两列错位展示瀑布流代码基于masonry.zip: 仿京东淘宝两列错位展示瀑布流代码，可直接运行，向下无限滚动增量append

CSS左右两列自适应高布局示例代码: 左右两列自适应高的需求是越来越紧迫了，实现方法也是各种各样，下面有个不错的示例可以实现此效果，感兴趣的朋友可以参考下，希望对大家有所帮助

取两列数据交集、并集、差集: excel取两列数据交集、并集、差集 excel取两列数据交集、并集、差集 excel取两列数据交集、并集、差集

对比两列数据: 对比excel表格的两列数据之间的差异，找出他们的不同的数据输出结果。

Global site tag (gtag.js) - Google Analytics