`

液态三栏布局

阅读更多
<!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=gb2312" />
<title>三栏</title>
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
}
div#header {
    clear: both;
    height: 50px;
    background-color: aqua;
    padding: 1px;
}
div#left {
    float: left;
    width: 150px;
    background-color: red;
}
div#right {
    float: right;
    width: 150px;
    background-color: green;
}
div#middle {
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
}
div#footer {
    clear: both;
    background-color: yellow;
}


</style>
</head>

<body>
<div id="header">
    <h1>Header</h1>
</div>
<div id="left">
    Port side text...
</div>
<div id="right">
    Starboard side text...
</div>
<div id="middle">
    Middle column text...
</div>
<div id="footer">
    Footer text...
</div>

</body>
</html>

分享到:
评论

相关推荐

    用CSS的float和clear属性进行三栏网页布局

    三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。本文介绍一...

    jQuery液态融合(gooey)样式导航菜单插件

    而“jQuery液态融合(gooey)样式导航菜单插件”则是利用jQuery来实现的一种独特且吸引人的用户界面设计。这种菜单设计借鉴了液态或半固态物质流动的效果,给人一种黏糊糊、柔软的印象,因此被称为“gooey”。 液态...

    铝合金液态模锻的发展现状

    铝合金液态模锻是一种先进的金属成形技术,具有省力、节能、节材等特点,并能够在接近成品形状的一步成形中达到高制件质量。它属于介于液态成型和固态成型之间的技术,能够集中两种工艺的优势。铝合金液态模锻的应用...

    Web流布局实例

    Web流布局,也被称为“液态布局”或“灵活布局”,是网页设计中的一种布局方式,它允许网页元素根据浏览器窗口大小的变化而自动调整自身尺寸,以保持良好的可读性和用户体验。这种布局模式在响应式网页设计中尤其...

    九宫格 流动布局

    流动布局,又称液态布局或自适应布局,是指网页元素根据浏览器窗口的大小自动调整其尺寸和位置。这种布局方式能够确保网页在不同设备上的显示效果,尤其是在移动设备日益普及的今天,流动布局成为实现响应式设计的...

    液态镜头软件以及使用说明

    液态镜头技术是一种创新的光学成像解决方案,它利用电场或磁场来改变镜头内部液体的形状,从而实现快速、连续的焦距调整。这种技术在许多领域,如工业自动化、医疗成像、无人机摄影、安防监控等都有广泛应用。本文将...

    udfconfig_液态金属的粘度是温度的函数_

    在IT行业中,尤其是在流体动力学模拟或者计算流体力学(CFD)领域,经常会遇到对各种流体性质的研究,包括液态金属的粘度。标题"udfconfig_液态金属的粘度是温度的函数_"暗示了我们正在探讨一个涉及到液态金属流动的...

    基于自收缩型液态金属限流器的弧前特性实验研究

    液态金属限流器是一种自复型故障电流限制器,利用液态金属的自收缩效应引发电弧来实现快速限流。自收缩型液态金属限流器具有无需控制装置、结构简单、全封闭免维护等特点,相较于其他类型的限流器,例如超导限流器、...

    罐装液态二氧化碳直接防灭火技术

    为了快速消除煤层自燃危险,设计了液态二氧化碳罐装储运设备。利用液态二氧化碳灭火列车将液态二氧罐直接运到煤矿井下自燃危险区或高温区附近,直接向自燃危险区域灌注液态二氧化碳,起到快速降氧与降温灭火功能。液态...

    CSS3液态胶合效果环形菜单特效.zip

    在本文中,我们将深入探讨如何使用CSS3来创建液态胶合效果的环形菜单特效。这个创新的特效是HTML5和CSS3技术相结合的产物,可以为网站增添独特的交互性和视觉吸引力。以下是对该特效及其相关知识点的详细解析。 ...

    液态镜头技术帮助 ID 读码器将读取率从 75% 提高到 100%.zip

    液态镜头技术的问世,为光学领域带来了革命性的变革。这一创新技术在ID读码器的应用尤为突出,它使得ID读码器的读取率从传统的75%飞跃至100%,实现了完美的读取效率。该技术之所以能取得如此显著的成效,主要归功于...

    河南全新电机液态软启动说明书.pdf

    根据您提供的文件信息,文件名为“河南全新电机液态软启动说明书.pdf”,此文件应是一份关于电机软启动器的说明书文档,其内容涉及液态软启动器的技术细节、使用指南、安装说明、故障排查和维护保养等方面的知识。...

    工程材料液态成型原理.docx

    ### 工程材料液态成型原理 #### 一、液态成型概述 液态成型是一种重要的金属加工技术,尤其在工程材料的制造过程中扮演着关键角色。它涉及到将金属熔化成液体状态,并通过特定的工艺流程将其倒入预先设计好的模具...

    液态气体充装资料

    #### 三、液态二氧化碳的具体案例分析 在部分给定内容中提到了一篇关于液态二氧化碳充装系数的研究文章。液态二氧化碳是一种常见的液态气体,在多个行业中都有应用,特别是在化工生产和食品加工领域。液态二氧化碳...

    jQuery液态式环形按钮菜单特效.zip

    在用户触发点击事件后,JavaScript会动态修改元素的样式,包括位置、大小和透明度,使得主按钮“分离”成三个子菜单按钮。这些子菜单按钮通常包含了网站的主要功能或导航链接,用户可以通过再次点击来激活相应的功能...

    HTML5彩色液态背景动画特效.zip

    在这个特效中,开发者很可能利用Canvas绘制出液态流动的效果,通过JavaScript来控制颜色的变化和流动路径,实现动态背景。JavaScript是实现此特效的关键,它允许对网页内容进行实时更新和交互,使得背景动画可以响应...

    成人每天应摄入300毫升液态奶

    这一指导建议中国居民每天摄入300毫升液态奶或等量蛋白质的其他奶制品。此建议是基于《中国居民膳食指南》制定的,并且对之前国家卫健委发布的“新冠肺炎防治营养膳食指导”中的奶及奶制品摄入建议进行了深入解读。...

Global site tag (gtag.js) - Google Analytics