CSS three column layout
2024-04-08 16:27:40
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6 <title> three column layout </title>
7 <meta name="Generator" content="缔友计算机信息技术有限公司 ,2010" />
8 <meta name="Author" content="Geovin Du 涂聚文" />
9 <meta name="Keywords" content="缔友计算机信息技术有限公司 ,2010,Cascading, Style, Sheets, CSS1, CSS2, CSS" />
10 <meta name="Description" content="CSS ~ Cascading Style Sheets" />
11 <style type="text/css">
12
13 html, body {margin:0px; padding:0px; background:#eee; font-family:verdana; font-size:12px;}
14 #main
15 {
16 width:80%;
17 margin-left:auto;
18 margin-right:auto;
19 }
20 /* The header and footer */
21 .headfoot {display:block; height:70px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:30px;}
22
23 /* This bit does all the work */
24 #container {position:relative; display:block; background:#0ac; border-left:200px solid #aa8; border-right:200px solid #a8a;}
25 #inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px;}
26 #left {float:left; position:relative; width:200px; left:0px;}
27 #right {float:right; position:relative; width:190px; right:0px;}
28 #center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
29 .clear {clear:both;}
30
31 /* Just to extend each column */
32 #inner a:visited, a {color:#000; text-decoration:none; cursor:default;}
33 #inner a span {display:none;}
34 #inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
35 #inner a:active span, #inner a:focus span {display:block;}
36
37 a:visited, a {text-decoration:underline; cursor:pointer;}
38 a:hover {text-decoration:none; cursor:pointer;}
39
40 em {font-weight:bold;}
41 </style>
42 </head>
43
44 <body>
45 <div class="main" id="main">
46 <div class="headfoot">兼容各浏览器</div>
47
48 <div id="container">
49 <div id="inner">
50 <div id="left"><a href="#"><em>CLICK</em> here to make the left column the longest<span>this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column</span></a></div>
51
52 <div id="right"><a href="#"><em>CLICK</em> here to make the right column the longest<span>this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br /></span></a></div>
53
54 <div id="center"><a href="#"><em>CLICK</em> here to make the middle column the longest<span>this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br /></span></a></div>
55
56 <div class="clear"></div>
57 </div>
58
59
60 </div>
61 <div class="headfoot">勝利は仕事部屋である貴方にご光来を賜ることを歓迎<br />NOTHING could be simpler...!</div>
62 </div>
63 </body>
64
65 </html>
66
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6 <title> three column layout </title>
7 <meta name="Generator" content="缔友计算机信息技术有限公司 ,2010" />
8 <meta name="Author" content="Geovin Du 涂聚文" />
9 <meta name="Keywords" content="缔友计算机信息技术有限公司 ,2010,Cascading, Style, Sheets, CSS1, CSS2, CSS" />
10 <meta name="Description" content="CSS ~ Cascading Style Sheets" />
11 <style type="text/css">
12
13 html, body {margin:0px; padding:0px; background:#eee; font-family:verdana; font-size:12px;}
14 #main
15 {
16 width:80%;
17 margin-left:auto;
18 margin-right:auto;
19 }
20 /* The header and footer */
21 .headfoot {display:block; height:70px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:30px;}
22
23 /* This bit does all the work */
24 #container {position:relative; display:block; background:#0ac; border-left:200px solid #aa8; border-right:200px solid #a8a;}
25 #inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px;}
26 #left {float:left; position:relative; width:200px; left:0px;}
27 #right {float:right; position:relative; width:190px; right:0px;}
28 #center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
29 .clear {clear:both;}
30
31 /* Just to extend each column */
32 #inner a:visited, a {color:#000; text-decoration:none; cursor:default;}
33 #inner a span {display:none;}
34 #inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
35 #inner a:active span, #inner a:focus span {display:block;}
36
37 a:visited, a {text-decoration:underline; cursor:pointer;}
38 a:hover {text-decoration:none; cursor:pointer;}
39
40 em {font-weight:bold;}
41 </style>
42 </head>
43
44 <body>
45 <div class="main" id="main">
46 <div class="headfoot">兼容各浏览器</div>
47
48 <div id="container">
49 <div id="inner">
50 <div id="left"><a href="#"><em>CLICK</em> here to make the left column the longest<span>this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column</span></a></div>
51
52 <div id="right"><a href="#"><em>CLICK</em> here to make the right column the longest<span>this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br /></span></a></div>
53
54 <div id="center"><a href="#"><em>CLICK</em> here to make the middle column the longest<span>this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br /></span></a></div>
55
56 <div class="clear"></div>
57 </div>
58
59
60 </div>
61 <div class="headfoot">勝利は仕事部屋である貴方にご光来を賜ることを歓迎<br />NOTHING could be simpler...!</div>
62 </div>
63 </body>
64
65 </html>
66
CSS three column layout相关推荐
- LVGL8学习之row and a column layout with flexbox
这一篇来学习一下基于flexbox(柔性盒子)简单行和列布局,还是通过codeblock来模拟代码的运行,可设置layout对象内部的水平和竖直填充,以及布局内各item之间的间隔填充 代码如下: v ...
- 转: 自适应css布局—-流动布局新时代(译文)
流动网页设计有很多好处,但也只有在正确使用的时候.合适的技巧会使页面在大屏幕.小屏幕抑.PDA小屏幕上都能得到良好的呈现.但是,糟糕的代码结构,对于流动布局来说将是灾难性的.因此,我们需要针对大多数流 ...
- 幕客学习CSS3全面基础知识点
CSS基础 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至3 ...
- 神奇的Css3（3） 多列布局
六.columns 多列布局 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module) ...
- CSS3新特性-多栏布局
为了实现类似报纸,杂志的多列排版的布局,CSS3新增了一个多列布局模块(css multi column layout module).主要应用在文本的多列布局方面. 语法: colums:<c ...
- 【CSS 弹性盒子布局 (Flexible Box Layout)】
CSS 弹性盒子布局 Flexible Box Layout CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的 基本概念和术语 2. flex 属性: 设置 伸缩 ...
- CSS 布局:40个教程、技巧、例子和最佳实践
前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...
- CSS三栏自适应布局，左中右，上中下
本文对可以实现三栏布局的方法进行了整理 左右固定宽度,中间自适应(5种方法) 1.float方法 2.absolute方法 3.flexbox方法 4.table方法 5.grid方法 <htm ...
- ExtJS中layout的12种布局风格
总览 extjs的容器组件都可以设置它的显示风格,它的有效值有 1. absolute,2. accordion, 3. anchor, 4. border, 5. card, 6. column, ...
最新文章
- MySQL练习题：常用函数
- php静态方法调用变量吗,php静态方法怎么调用非静态变量？
- 网络营销外包——网络营销外包专员对网站标题修改都是有原因的
- python做动态相册_动感网页相册 python编写简单文件夹内图片浏览工具
- RocketMQ topic路由
- Promise详解，相信你看完我这篇文章简单的Promise使用方式基本上就全会了
- BZOJ 1180: [CROATIAN2009]OTOCI [LCT]
- 楼层平面放线及标高实测记录_建筑平面图怎么看？教你这样看图，新手也能秒懂...
- Winform的菜单控件
- 教师计算机培训汇报ppt,教师培训工作总结ppt模板
- 第二章、 Linux 如何学习
- status计算机语言,status 在c语言中的用法？请高手指教、、、、谢谢
- 电石炉技术的发展及电石炉尾气解决方案
- 初试hive-创建内表（最简单的表），load加载方式简介
- php jquery 时间轴,jquery时间轴
- 思科实验-生成树协议STP
- 女神节礼物送什么好？女神节送女生的礼物推荐
- css图片放大缩小动画
- 苹果“面目全非”的 iOS7
- 末代帝王微软：戴着PC枷锁跳“移动Style”