css两栏式布局示例

请先看图,这里主要用到了float属性,该属性的值指出了对象是否及如何浮动

语法:  float : none | left |right
 
参数:  none :  对象不浮动;left :  对象浮在左边;right :  对象浮在右边 

 请看代码,请CSS高手指教,其他还可以用position来实现两栏,只是用习惯了float.

ContractedBlock.gifExpandedBlockStart.gifCode
<!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>
<title>经典两栏布局实例</title>
<style type="text/css">
    
/* 通用空白间距 */
.blank9
{ height:9px;width:100%;}

#wrap
{width:960px;margin: 0 auto;} 
#header
{
    height
:80px;
    margin
: 0 auto;
    clear
: both;
    border
:#CCCCCC 1px solid;    
}
 
/* 左边 */
#sideleft
{
    height
:120px;
    float
: left;
    width
:200px;
    overflow
: hidden;
    border
:#CCCCCC 1px solid;    
}

/* 右边 */
#sideright
{
    height
:120px;
    float
: right;
    width
: 750px;
    overflow
: hidden;
    background-color
: #fcf8f7;
    border
:#CCCCCC 1px solid;

}
/* 页尾 */
#footer
{height: 50px;border:#CCCCCC 1px solid;margin: 0 auto;}
</style>

</head>
<body>


<div id="wrap">
  
<div id="header">
    
  
<name="top"></a>

    
<span>页头</span>

    
</div>
    
<div class="blank9"></div>
  
<div id="sideleft">
  
<span>左边</span>
    
</div>
  
<div id="sideright">
    
 
<span>右边</span>

    
</div>    
    
<div class="blank9"></div>
  
<div id="footer">
    
<div id="foot">
<span>页脚</span>
</div>



  
</div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/bluedy1229/archive/2008/12/23/1360733.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/300142.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HttpClient 禁用自动重定向

HttpClient 禁用自动重定向Intro前段时间写了一个小工具来帮助我们简化一个每个月一次的小任务&#xff0c;每个月我们公司的 BI Team 会给我们上个月访问量比较高的博客文章的 url&#xff0c;然后我们会根据 BI 提供博客的 url 去找到对应的博客 id&#xff0c;然后更新到配置…

OpenAI“单手解魔方”被公开质疑,Gary Marcus称七大问题涉嫌误导

全世界只有3.14 % 的人关注了青少年数学之旅近日&#xff0c;“OpenAI的机器手在4分钟内单手成功还原魔方”引起刷屏&#xff0c;然而&#xff0c;这一成就被著名机器学习怀疑论者马库斯质疑了&#xff0c;马库斯逐条列举OpenAI的误导性说法&#xff0c;机器学习圈却都撑OpenAI…

android 带弧形背景,[Android日常]绘制弧形渐变背景

最近要修改用户空间头部信息显示&#xff0c;参考了好多APP的用户空间&#xff0c;都有一个弧形的背景&#xff0c;看着挺漂亮的。实现这种效果&#xff0c;有两种实现方式&#xff1a;1、作图&#xff1b;2、通过代码进行绘制。今天就讲讲如何通过canvas进行绘制。一、用到的知…

超强的绕口令

今天看到这样一个绕口令&#xff0c;自己读了半天&#xff0c;越读错的越多&#xff0c;呵呵&#xff0c;贴出来大家一起来玩玩1、初入江湖&#xff1a;化肥会挥发 2、小有名气&#xff1a;黑化肥发灰&#xff0c;灰化肥发黑 3、名动一方&#xff1a;黑化肥发灰会挥发&…

世界顶级精英们的人生哲学 【转】

1.别为你自己和别人下定论&#xff0c;你所看到听到的可能只是一面&#xff0c;为这个失去可能的朋友&#xff0c;很不值。 2.你可以有喝醉的时候&#xff0c;我们可以接受&#xff0c;但是你要明白和真正的朋友一醉才能让伤心事方休&#xff0c;否则&#xff0c;你只会是别人的…

记一次 .NET 某云采购平台API 挂死分析

一&#xff1a;背景 1. 讲故事大概有两个月没写博客了&#xff0c;关注我的朋友应该知道我最近都把精力花在了星球&#xff0c;这两个月时间也陆陆续续的有朋友求助如何分析dump&#xff0c;有些朋友太客气了&#xff0c;给了大大的红包&#xff0c;哈哈????&#xff0c;手…

来自女朋友的灵魂拷问!| 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅【1】【2】【3】【4】【5】【6】【7】【8】【9】

android 栏目编辑,android – 编辑文本导致内存泄漏

介绍&#xff1a;我有一个应用程序具有以下结构&#xff1a;ActionBar顶部(ActionBarSherlock)ViewPagerIndicator下面(对于选项卡)ViewPager(主机片段)我有一个问题,我的一个碎片导致了相当大的内存泄漏.我将问题缩小到以下情况&#xff1a;导致泄漏的片段只会在其onCreateVie…

Spring 事物传播特性

Spring 事物传播特性 这是Spring官方的定义 一共有7种 摘自源码省略了一部分 public interface TransactionDefinition {int PROPAGATION_REQUIRED 0;int PROPAGATION_SUPPORTS 1;int PROPAGATION_MANDATORY 2;int PROPAGATION_REQUIRES_NEW 3;int PROPAGATION_NOT_SUPPORT…

6月,回忆我失去的爱情

6月&#xff0c;夏天早已到来 自4月起&#xff0c;我一直放荡着。这个我在上个文章里已提到&#xff0c;哈哈 放荡两个月后&#xff0c;我回想我自己的爱情 我想明白为什么我会失去自己的爱情&#xff0c;哈哈 终于明白了是为什么&#xff0c;其实失去的这样的简单 我承认我有错…

《你必须知道的.NET》第1章学习笔记

面向对象中几个最基本的概念&#xff1a;类&#xff0c;对象&#xff0c;继承&#xff0c;封装和多态。 对象的出生&#xff0c;只是完成了对必要字段的初始化&#xff0c;其他数据要通过后面的操作来完成&#xff0c;如&#xff1a;属性的赋值&#xff0c;通过方法获取必要信息…

利用 PGO 提升 .NET 程序性能

引子.NET 6 开始初步引入 PGO。PGO 即 Profile Guided Optimization&#xff0c;通过收集运行时信息来指导 JIT 如何优化代码&#xff0c;相比以前没有 PGO 时可以做更多以前难以完成的优化。下面我们用 .NET 6 的 nightly build 版本 6.0.100-rc.1.21377.6 来试试新的 PGO。PG…

不作死就不会死,盘点那些死于自己发明的发明家

全世界只有3.14 %的人关注了青少年数学之旅还有他们死于自己的发明发明呼吸器&#xff1a;缺氧死亡 1772年&#xff0c;法国人希厄尔弗莱米奈特发明了可用于潜水的循环式再呼吸器&#xff0c;让呼出的气体实现循环。这是世界上第一个自持呼吸装置。不幸的是&#xff0c;弗莱米奈…

CIO们对数据中心虚拟化心存的六大疑虑

本文摘自&#xff1a;[url]http://industry.ccidnet.com/art/3915/20070428/1072803_1.html[/url] 巴塞罗那超级计算中心 数据中心虚拟化正在势不可挡地迅猛发展&#xff0c;据IDC预测&#xff0c;到2009年&#xff0c;虚拟化市场将在全球范围内将增长150亿美元。有专家预言&am…

启动Tomcat一闪而过解决

打开apache-tomcat-6.0.32/bing/catalina.bat在首行添加&#xff1a; set JAVA_HOMEC:\Program Files\Java\jdk1.6.0_07 就可以了。

android gdb 远程调试工具,Android下用gdb远程调试办法

Host: ubuntuTarget: Android ICS1. 将gdbserver和gdbclient分别放入target和host。两者都可在android源代码的prebuilt目录下找到。2. 在Target上启动gdbserver&#xff0c;在adb shell中执行$ /path/to/gdbserver :1111--attach PID其中PID为想要debug程序的进程号&#xff0…

如何在Domino中使用文本文件注册用户

具体的步骤如下&#xff1a; 1。先用以下的格式创建一个文本文件&#xff08;每个用户一行&#xff09;: ZhangSan;;;;passw0rd;e:\id\603server;zhangsan.id;603server/r6domain;;zhangsan.nsf;;;;;;;;;;;; LiSi;;;;passw0rd;e:\id\603server;lisi.id;603server/r6domain;;lis…

C# 对接微信支付时生成符合 RFC3339 标准的日期时间字符串

rfc3339 是一种包含时区信息的字符串标准格式。格式为YYYY-MM-DDTHH:mm:ssTIMEZONE&#xff0c;YYYY-MM-DD表示年月日&#xff0c;T出现在字符串中&#xff0c;表示time元素的开头&#xff0c;HH:mm:ss表示时分秒&#xff0c;TIMEZONE表示时区&#xff08;08:00表示东八区时间&…

盘点那些世间顶级直男hhhhhh | 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅【1】【2】【3】【4】【5】【6】【7】【8】【9】

android的单选按钮xml语法,android 控件 单项选择(RadioGroup,RadioButton)

1、继承关系和子类&#xff1a;2、定义&#xff1a;RadioButton表示单个圆形单选框&#xff0c;而RadioGroup是可以容纳多个RadioButton的容器3、XML重要属性&#xff1a;4、重要方法&#xff1a;5、实战&#xff1a;布局文件android:layout_width"wrap_content"andr…