`

两栏布局

XHTMLHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两栏</title>
<style type="text/css">
body{ margin:0px; padding:0px;}
#left{ float:left;width:100%;margin-left:-200px;background:#f1f1f1;}
#wrapper{ margin-left:200px;}
#right{float:right;width:200px;background:#ccc;}
</style>
</head>

<body>
<div id="left">
    <div id="wrapper">leftContent</div>
</div>
<div id="right">rightSliderBar</div>

</body>
</html>
分享到：
| 液态三栏布局
评论
发表评论

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

相关推荐

    Typecho两栏布局主题

    "Typecho两栏布局主题"是一个专门为Typecho设计的，旨在提供更丰富展示空间和更好用户体验的定制主题。这种两栏布局通常指的是页面左侧为主要内容区域，右侧为辅助信息如侧边栏、广告或导航菜单等。 在创建或修改...

    左右两栏布局右侧自适应+左右拖动改变两栏宽度

    在网页设计中，创建左右两栏布局并且支持用户通过拖动改变两栏宽度是一种常见的交互方式，这可以提供更灵活的界面体验。本示例主要涉及的技术点包括HTML基础、CSS布局以及JavaScript事件处理。 首先，HTML结构是...

    四种两栏布局自适应 ｜ float\bfc\flex\absolute

    四种两栏布局 ｜ 1. float + margin 2. float + bfc 3. flex 4. 父相对子绝对

    CSS效果图大全，收集了各类CSS源代码，转盘、文字雨、煸动翅膀的蝴蝶、vector键盘、两栏布局文章、元素的拖拽定位、转动天枰

    CSS效果图大全，收集了各类CSS源代码，转盘、文字雨、煸动翅膀的蝴蝶、vector键盘、两栏布局文章、元素的拖拽定位、转动天枰、动态改变汽车颜色、大屏随机抽奖、如何让元素保持一定的宽高比、实现modal弹框动画、...

    简单的两栏流动式布局

    3. **浮动布局**：在“两栏布局”中，通常会使用`float`属性让元素向左或向右浮动，这样元素就会尽可能地靠边排列，从而实现并排显示。但需要注意，浮动会导致父元素的高度塌陷，可能需要使用`clearfix`方法来解决。...

    基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局.zip

    这个压缩包文件"基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局.zip"显然是一个使用Bootstrap 3.3.6版本创建的网页设计资源，特别强调了扁平化设计和常见的左右两栏布局。 扁平化设计...

    CSS实现两栏布局，左边固定，右边自适应的4种方法

    1. float+overflow:hidden 这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。...

    整洁扁平两栏网站模板

    1. **两栏布局**：两栏设计是网页设计中的经典布局，它将页面内容分为左右两部分，通常左边为导航栏或侧边栏，右边展示主要内容。这种布局方式既保持了页面的平衡感，又能让用户快速找到所需信息。 2. **淡绿色配色...

    简单的两栏网页模板-简单 二栏.rar

    在实际应用中，两栏布局可以适用于多种场景，比如博客、企业网站、新闻资讯平台等。通过调整栏宽比例，甚至可以实现响应式设计，使网页在不同设备（如桌面、平板、手机）上都能呈现良好的视觉效果。 总的来说，...

    Python读取PDF文字转txt，解决分栏识别问题，能读两栏

    - 假设我们需要从一个具有两栏布局的PDF文档中提取文本并保存为TXT文件。 ```python import pdfplumber def extract_text_from_pdf(pdf_path, txt_path): with pdfplumber.open(pdf_path) as pdf: with open...

    三栏布局

    在网页设计中，"三栏布局"是一种常见的页面布局方式，尤其在构建复杂网页或需要展示多类信息时，这种布局能有效地组织内容。三栏布局通常包括左侧栏、中间主要内容区域和右侧栏，每栏宽度可以根据实际需求进行调整。...

    CSS-40款专业网页布局源码

    2. **两栏布局**：分为左右两侧，常用于新闻网站，左边是导航，右边是主要内容。 3. **三栏布局**：常用于包含主内容、侧边栏和广告等元素的复杂页面。 4. **流式布局**：随着浏览器窗口大小变化而自动调整的布局，...

    蓝白色两栏wordpress博客主题

    2. 两栏布局：这种主题采用的两栏布局意味着页面主要分为两部分，通常一栏用于主要内容，另一栏用于侧边栏，可以展示分类、最新文章、广告或社交媒体链接等。 3. 博客主题：博客主题是WordPress中的一种视觉设计模板...

    十个不错的DIV+CSS网页布局模版

    2. **两栏布局**：分为左右两部分，常用于主内容区与侧边栏的组合。 3. **三栏布局**：分为左中右三部分，适用于包含导航、主要内容和广告等多元素的页面。 4. **头尾布局**：头部包含导航等信息，底部为页脚，中间...

    经典CSS+DIV布局模板

    - **两栏布局**：通常分为侧边栏和主内容区，常见于博客和新闻网站。 - **三栏布局**：多用于需要展示多个信息区域的页面。 - **响应式布局**：根据屏幕尺寸改变，元素会自动调整布局和样式，适应手机、平板和桌面...

    DIVCSS完美布局

    在网页设计领域，"DIVCSS完美布局"是构建现代网页结构的一种核心技术。...通过深入学习并实践这些知识点，开发者可以创建出既美观又功能强大的网页布局，无论是简单的两栏布局还是复杂的响应式多栏布局，都能游刃有余。

    DIV+CSS网页样式与布局实例

    1. 基础布局：如简单的两栏布局、三栏布局。 2. 复杂布局：如响应式布局、自适应布局、流体布局等。 3. 导航栏制作：包括水平导航、下拉菜单等。 4. 图片和媒体处理：如图片轮播、响应式图片。 5. 表单设计：利用`...

    40个经典DIV+CSS 网页布局样式

    2. **两栏布局**：常用于边栏和主要内容区的组合，如新闻网站。 3. **三栏布局**：适用于包含导航、主要内容和侧边栏的复杂页面。 4. **响应式布局**：随着设备屏幕尺寸变化自动调整，确保在不同设备上都有良好显示...

Magicbox
Global site tag (gtag.js) - Google Analytics