CSS+DIV 布局 (流体布局&刚性布局)

最新推荐文章于 2021-06-15 17:39:22 发布
最新推荐文章于 2021-06-15 17:39:22 发布
阅读量1.3k 收藏
点赞数
分类专栏： Web 开发 文章标签： div css application border float wrapper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cooleader320/article/details/4626390
版权

·         流体布局

<!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>Liquid layout</title>

    <style type="text/css">

        #wrapper

        {

            border: solid 1px blue;

           /* width: 720px;*/

            width:85%;

            margin: 0 auto;

        }

        #content

        {

            float: right;

           /* width: 520px;*/

           width:75%;

            border: solid 1px red;

            margin-right: 1px;

        }

        #mainContent

        {

            float: left;

            /*width: 320px;*/

            width:66%;

            border: solid 1px red;

        }

        #secondaryContent

        {

            float: right;

           /* width: 180px;*/

           width:31%;    /* 与mainNav div 一样宽*/

            border: solid 1px green;

        }

        #mainNav

        {

            float: left;

            /*width: 180px;*/

            width:23%;

            padding-top: 20px;

            padding-bottom: 20px;

            border: solid 1px black;

            margin-left: 1px;

        }

        #footer

        {

            border: solid 1px yellow;

            clear: both;

        }

        #footer p

        {

            text-align: center;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <div id="wrapper">

        <div id="branding">

            <h1 style="text-align: center; border-bottom: solid 1px black">

                Liquid layout</h1>

        </div>

        <div id="content">

            <div id="mainContent">

                Your application's run-time performance-its speed-is one of its most visible and

                critical characteristics. Developing high-performance software that meets the expectations

                Your application's run-time performance-its speed-is one of its most visible and

                critical characteristics. Developing high-performance software that meets the expectations

            </div>

            <div id="secondaryContent">

                Your application's run-time performance-its speed-is one of its most visible and

                critical characteristics. Developing high-performance software that meets the expectations

                Your application's run-time performance-its speed-is one of its most visible and

                critical characteristics. Developing high-performance software that meets the expectations

            </div>

        </div>

        <div id="mainNav">

            <ul>

                <li><a href="#">Menu1</a>

                    <ul>

                        <li>Sub1</li>

                        <li>Sub2</li>

                        <li>Sub3</li>

                    </ul>

                </li>

                <li>Menu2</li>

                <li>Menu3</li>

            </ul>

        </div>

        <div id="footer">

            <p>

                Footer Text</p>

        </div>

    </div>

</body>

</html>

 

效果：https://p-blog.csdn.net/images/p_blog_csdn_net/cooleader320/EntryImages/20091001/image001633900350493281250.png

 

 

 

 

 

刚性布局:
<!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>Elastic layout</title>

    <style type="text/css">

        /*

            the default font size on most browsers is 16px

            1em roughly equals 10px

        */

        body

        {

          font-size:62.5%;/*1em, 10/16~=62.5%*/

          }

        #wrapper

        {

            border: solid 1px blue;

            width: 72em;

           /* width:720px;*/

            margin: 0 auto;

        }

        #content

        {

            float: right;

            width: 52em;

             /*   width:520px;*/

            border: solid 1px red;

            margin-right: 1px;

        }

        #mainContent

        {

            float: left;

            width: 32em;

            /*width:320px;*/

            border: solid 1px red;

        }

        #secondaryContent

        {

            float: right;

            width: 18em;

          /* width:180px;*/

            border: solid 1px green;

        }

        #mainNav

        {

            float: left;

            width: 18em;

         /*   width:180px;*/

            padding-top: 20px;

            padding-bottom: 20px;

            border: solid 1px black;

            margin-left: 1px;

        }

        #footer

        {

            border: solid 1px yellow;

            clear: both;

        }

        #footer p

        {

            text-align: center;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <div id="wrapper">

        <div id="branding">

            <h1 style="text-align: center; border-bottom: solid 1px black">

                Liquid layout</h1>

        </div>

        <div id="content">

            <div id="mainContent">

                Your application's run-time performance-its speed-is one of its most visible and

                critical characteristics. Developing high-performance software that meets the expectations

                Your application's run-time performance-its speed-is one of its most visible and

                critical characteristics. Developing high-performance software that meets the expectations

            </div>

            <div id="secondaryContent">

                Your application's run-time performance-its speed-is one of its most visible and

                critical characteristics. Developing high-performance software that meets the expectations

                Your application's run-time performance-its speed-is one of its most visible and

                critical characteristics. Developing high-performance software that meets the expectations

            </div>

        </div>

        <div id="mainNav">

            <ul>

                <li><a href="#">Menu1</a>

                    <ul>

                        <li>Sub1</li>

                        <li>Sub2</li>

                        <li>Sub3</li>

                    </ul>

                </li>

                <li>Menu2</li>

                <li>Menu3</li>

            </ul>

        </div>

        <div id="footer">

            <p>

                Footer Text</p>

        </div>

    </div>

</body>

</html>

效果：

https://p-blog.csdn.net/images/p_blog_csdn_net/cooleader320/EntryImages/20091001/image002633900350494062500.png

 

 

cooleader320
关注
专栏目录
布局（一）——流体浮动三列布局
mmrsdym的专栏
03-02 895
今天看李炎恢老师的视频教程，学习了流体浮动布局，跟着教程写了流体浮动三列布局的代码，其中有一些自己的理解，总结一下，便于自己以后查看。     根据李炎恢老师总结的4种布局，分为：     1.流体浮动布局     2. 流体定位布局     3. 固定浮动布局     4. 固定定位布局 1. 流体浮动布局（可使不同大小的浏览器布满；缺点：易错位） 规格：当视窗变化时跟着变化   采用：浮动布
弹性流体布局
weixin_34239592的博客
05-10 121
 原创：冰极峰    转载请注明出处     时间：2009年5月10日 0:12:03 蓝色论坛讨论贴：http://bbs.blueidea.com/thread-2927057-1-1.html 在我的另一篇文章《弹性+固宽布局》中，我介绍了弹性加最小固定宽度的一种布局方案，现在介绍另一种布局方案---弹性流体布局。 那种方案其实就是这种布局的变通应用。弹性布局最大的优...
[01]项目实战-移动端流体布局
weixin_34032827的博客
02-18 112
一．整体设计 首先，我们要了解一下测试工具。这里提供两种测试工具，一种是 Chrome 自带的移动端测试工具，另一种是 Opera Mobile 移动端测试工具。这里主要以 Chrome 为准，他模拟了主流的手机，并且引擎是webkit。 首先，我们介绍一下分辨率，通过 Chrome 移动端测试工具可以得知，一般分辨率最小的不会小于 320了，最大的不超过 640。这时有人会...
div+css布局之流体定位布局
alex
06-11 322
 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/
流体布局、响应式布局
weixin_34391854的博客
10-13 193
一、流体布局 流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值。流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。 <!DOCTYPE html> <html lang="zh-cn"> <head> <...
CSS+DIV布局赏析案例.zip_CSS+DIV布局赏析案例
09-22
本案例“CSS+DIV布局赏析案例”主要展示了如何通过这两种技术来实现高效、美观且易于理解的网页结构。下面我们将深入探讨CSS和DIV布局的相关知识点。 首先，CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、...
CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例
01-13
"CSS+DIV布局案例"的标题和描述多次强调了这一主题，表明这可能是一个关于如何有效使用CSS和DIV来实现网页布局的教学资源或示例集合。 首先，我们需要理解CSS的核心概念。CSS是一种样式表语言，用于描述HTML或XML...
CSS+div 布局
12-28
下面我们将深入探讨CSS+div布局的相关知识点。 一、CSS简介 CSS是一种样式表语言，用于描述HTML或XML（包括SVG、XHTML等）文档的呈现。它允许开发者将样式与结构分离，使得网页设计更加灵活和易于维护。CSS规则由...
精通CSS+DIV 网页样式与布局【PDF】
12-19
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript,Ajax,...
运用流体布局的html代码,div+css布局之流体浮动布局_html/css_WEB-ITnose
weixin_36194102的博客
06-15 205
FloatLayout3Cols.htm流体浮动布局2这里是标题新闻杂志游戏音乐电影娱乐对于ASP.NET而言，开发人员不可避免的会将ASP.NET与ASP进行比较，因为ASP.NET可以算作是ASP的下一个版本。但是ASP.NET却与ASP完全不同，可以说微软重新将ASP进行编写和组织形成ASP.NET技术。在传统的ASP开发中，开发人员可以在页面中进行ASP代码的编写，当服务器请求相应的页面时...
DIV流式布局
m0_46170663的博客
02-18 1184
一、流式布局 1、float:left、right、none 2、clear：both、right、left、none 二、clear 1、语法： clear：none | left | right | both 2、取值： none：默认值。允许两边都可以有浮动对象 left：不允许左边有浮动对象 right：不允许右边有浮动对象 both：不允许有浮动对象 3、说明： 该属性的值指出了不允许有...
div+css布局之流体浮动布局
alex
06-11 246
 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/
流体布局FlowLayout
了吃好最子包
09-21 583
FlowLayoutView.javaimport android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup;import java.util.ArrayList; import java.util.List;/** * Cre
CSS 流体布局
weixin_30877227的博客
05-09 210
流体布局设计随着用户对浏览器窗口的扩大或缩小而伸展或收缩。这种设计通常使用百分数。 优势 页面会伸展到整个浏览器窗口，所以即使在大屏幕上，页面的周围 也没有空白； 如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动； 即使用户设置的字体比设计人预设的更大，这种设计也可以适应（因为页面可以伸展）。 劣势 如果不对页面各个部分的宽度加以控制，那么页面设计会和预期的效果大...
布局（一）——流体浮动布局
bigboy1010的博客
04-13 1415
记录一下自学过程中对布局的自我理解 一，流体布局 流体布局通俗的讲就像水上偏流的“盒子”一样，哪有缝隙往哪里流动，前提是缝隙放的下“盒子”的宽度，这里的“盒子”宽度用百分比表示，即：width：40%，（相对整个body的宽度），这也算是流体布局的一大优点，可以铺满屏幕 属性用到： float ：(为“盒子”添加浮动特性) 值 描述 left 元素向左浮动。 r...
流体布局详解
weixin_30323961的博客
03-11 152
流体布局需要注意哪些，有什么特殊的写法？ 响应式设计：流体布局 http://www.w3cplus.com/responsive/responsive-web-design-fluid-layouts.html 转载于:https://www.cnblogs.com/diantao/p/4331044.html...
CSS布局之流体浮动布局
liangde123的博客
07-17 3534
在CSS布局中经常使用的布局方式大值分为以下四种： 1、流体浮动布局 2、流体定位布局  3、固定浮动布局 4、固定定位布局 下面首先说下流体浮动布局; 假如我们要实现如下的布局情况： 则应该可以考虑采用流体浮动布局，其中CSS的样式如下： #header{ border:2px solid black; height:80px; back
CSS+Div布局模式详解
"本文将详细介绍使用div+css进行网页布局的各种常见方法，包括百分比布局、固定布局以及混合布局等，旨在帮助读者理解和掌握div+css布局的基本技巧和应用场景。" 在网页设计中，`div+css`布局是构建页面结构和样式...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值