精华内容
下载资源
问答
  • css自适应布局
    千次阅读
    2019-11-09 17:10:56

    1.float+margin(自适应的那个元素),适应横向布局

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>左中右三列 左右固定200px 中间自适应占满</title>
        <style>
            body {
                margin: 0;
                height: 100%;
                padding: 0;
                font-size: 30px;
                font-weight: 500;
                text-align: center;
            }
    
            .left {
                width: 200px;
                height: 500px;
                background-color: red;
                float: left;
            }
    
            .right {
                width: 200px;
                height: 500px;
                background-color: #00f;
                float: right;
            }
    
            .zhong {
                height: 500px;
                margin: 0 200px;
                background-color: #f0f;
            }
        </style>
    </head>
    
    <body>
        <div class="left"></div>
        <div class="right"></div>
        <div class="zhong"></div>  
    </body>
    
    </html>

    2.float+绝对定位(自适应的那个元素),适应横向布局

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>左中右三列 左右固定200px 中间自适应占满</title>
        <style>
            body {
                margin: 0;
                height: 100%;
                padding: 0;
                font-size: 30px;
                font-weight: 500;
                text-align: center;
            }
    
            .left {
                width: 200px;
                height: 500px;
                background-color: red;
                float: left;
            }
    
            .right {
                width: 200px;
                height: 500px;
                background-color: #00f;
                float: right;
            }
    
            .zhong {
                height: 500px;
                position: absolute;
                left:200px;
                right:200px;
                background-color: #f0f;
            }
        </style>
    </head>
    
    <body>
        <div class="left"></div>
        <div class="right"></div>
        <div class="zhong"></div>
    </body>
    
    </html>

    3.绝对定位+绝对定位(自适应的那个元素),适应横向布局,竖向布局

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>左中右三列 左右固定200px 中间自适应占满</title>
        <style>
            body {
                margin: 0;
                height: 100%;
                padding: 0;
                font-size: 30px;
                font-weight: 500;
                text-align: center;
            }
    
            .left {
                width: 200px;
                height: 500px;
                background-color: red;
                position: absolute;
                left: 0px;
            }
    
            .right {
                width: 200px;
                height: 500px;
                background-color: #00f;
                position: absolute;
                right: 0px;
            }
    
            .zhong {
                height: 500px;
                position: absolute;
                left:200px;
                right:200px;
                background-color: #f0f;
            }
        </style>
    </head>
    
    <body>
        <div class="left"></div>
        <div class="right"></div>
        <div class="zhong"></div>
    </body>
    
    </html>

    4. 中间那个先用box包裹,box和左右采用float,然后left用margin-left:-100%;right用margin-left:-200px;

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>左中右三列 左右固定200px 中间自适应占满</title>
        <style>
            body {
                margin: 0;
                height: 100%;
                padding: 0;
                font-size: 30px;
                font-weight: 500;
                text-align: center;
            }
            .box{
                width: 100%;
                height: 100%;
                float: left;
            }
            .zhong {
                height: 500px;
                background-color: #f0f;
                margin: 0 200px;
            }
    
            .left {
                width: 200px;
                height: 500px;
                background-color: red;
                left: 0px;
                float: left;
                margin-left: -100%;
    
            }
    
            .right {
                width: 200px;
                height: 500px;
                background-color: #00f;
                float: left;
                margin-left: -200px;
            }
            
        </style>
    </head>
    
    <body>
        <div class="box">
                <div class="zhong"></div>   <!--这里注意 -->
        </div>
        <div class="left"></div>
        <div class="right"></div>
        
    </body>
    
    </html>

     

     

    5.圣杯布局和双飞翼布局

    区别:圣杯布局和双飞翼布局解决的问题都是一样的。两边固定宽度,中间自适应的三栏布局,已经由此演变出来的类似其他布局格式。中间布局代码要写在 前边,保证第一个渲染

    (1)父元素包含三个元素
    (2)中间的盒子宽度设置为100%,自适应,并且在三个元素的最前面显示,第一个渲染

    其实双飞翼布局多了一个box包裹

    1.圣杯布局

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <title>左中右三列 左右固定200px 中间自适应占满</title>
        <style>
            body {
                margin: 0;
                height: 100%;
                padding: 0;
                font-size: 30px;
                font-weight: 500;
                text-align: center;
            }
    
            .container {
                height: 500px;
                overflow: hidden;
                /*清除浮动 */
            }
    
            .zhong {
                height: 500px;
                background-color: #f0f;
                left: 200px;
                right: 200px;
                position: absolute;
            }
    
            .left {
                width: 200px;
                height: 500px;
                background-color: red;
                left: 0px;
                float: left;
            }
    
            .right {
                width: 200px;
                height: 500px;
                background-color: #00f;
                float: right;
    
            }
    
            .head,
            .foot {
                width: 100%;
                height: 50px;
                background: yellow;
            }
        </style>
    </head>
    
    <body>
        <div class="head">head</div>
        <div class="container">
            <div class="zhong"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    
        <div class="foot">foot</div>
    </body>
    
    </html>

    2.双飞翼布局

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <title>左中右三列 左右固定200px 中间自适应占满</title>
        <style>
            body {
                margin: 0;
                height: 100%;
                padding: 0;
                font-size: 30px;
                font-weight: 500;
                text-align: center;
            }
    
            .container{
                height: 500px;
                overflow: hidden;
            }
             .box {
                width: 100%;
                height: 100%;
                float: left;
            }
    
            .zhong {
                height: 500px;
                background-color: #f0f;
                margin: 0 200px;
            }
    
            .left {
                width: 200px;
                height: 500px;
                background-color: red;
                left: 0px;
                float: left;
                margin-left: -100%;
    
            }
    
            .right {
                width: 200px;
                height: 500px;
                background-color: #00f;
                float: left;
                margin-left: -200px;
            }
    
            .head,
            .foot {
                width: 100%;
                height: 50px;
                background: yellow;
            }
        </style>
    </head>
    
    <body>
        <div class="head">head</div>
        <div class="container">
            <div class="box">
                <div class="zhong"></div>
                <!--这里注意 -->
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    
        <div class="foot">foot</div>
    </body>
    
    </html>

     

    更多相关内容
  • CSS自适应布局思路

    2020-12-09 09:53:10
    最近在做一个自适应布局的项目,所以学了下自适应,下面是总结。此总结只做效果,不关注效率和代码优化。 1.css3 html中添加复制代码代码如下:<meta name=”viewport” content=”width=device-width,target-...
  • CSS自适应布局

    2022-06-14 15:44:38
    自适应布局

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    		<title>Document</title>
    		<style>
    			* {
    				padding: 0;
    				margin: 0;
    			}
    			.client-a {
    				height: 100%;
    				min-width: 1000px;
    				width: 100%;
    				border: 1px solid aquamarine;
    				overflow: hidden; //外边距塌陷,给父元素添加overflow 
    			}
    			.client-b {
    				border: 1px solid #f40;
    				width: calc(33.3% - 34px);
    				height: 100px;
    				margin: 10px 0;
    				margin-left: 16px;
    				float: left;
    			}
    			.client-b:nth-child(3n+1) {
    				margin-left: 32px;
    			}
    			.client-b:nth-child(3n) {
    				margin-right: 32px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="client-a">
    			<div class="client-b"></div>
    			<div class="client-b"></div>
    			<div class="client-b"></div>
    			<div class="client-b"></div>
    			<div class="client-b"></div>
    			<div class="client-b"></div>
    			<div class="client-b"></div>
    			<div class="client-b"></div>
    			<div class="client-b"></div>
    			<div class="client-b"></div>
    		</div>
    	</body>
    	<script>
    
    	</script>
    </html>
    
    
    展开全文
  • flex 布局、超出自动换行、自适应

    在这里插入图片描述
    已知:
    • 布局分为:父元素A和N个子元素B;
    • A宽度不固定:最小宽度为1000px,内部边距是32px
    • B的宽度不固定:相邻两个B元素的间距是16px,所有B的宽度相同,边框为1像素,颜色为999
    • 每行只能有3个B元素,超过的话需要换行;
    • 最左侧B元素和最右侧的B元素,距离A的边缘都是32px;

    <div class="client-a">
       <div class="client-b"></div>
       <div class="client-b"></div>
       <div class="client-b"></div>
       <div class="client-b"></div>
       <div class="client-b"></div>
       ...
    </div>
    
    <style>
    .client-a {
      min-width: 1000px;
      padding: 24px;
      display: flex;
      border: 1px solid #333;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
    .client-b {
      flex: 1 0 30%;
      box-sizing: border-box;
      margin: 8px;
      border: 1px solid #999;
    }
    </style>
    
    

    效果图:
    在这里插入图片描述

    展开全文
  • 日常工作时,我们可能遇到这样一个布局:一个父元素框框(随着浏览器大小自适应宽度)里面有许多按钮,然后这些按钮(宽度固定)的整体需要在父元素内居中对齐,而按钮整体的内容又是从左往右排列。这里提供一个解决...
  • css 自适应布局阮一峰

    2021-08-05 04:09:49
    转载一篇文章:自适应网页设计(Responsive Web Design)作者:阮一峰移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的...

    转载一篇文章:

    自适应网页设计(Responsive Web Design)

    作者: 阮一峰

    移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

    L3Byb3h5L2h0dHAvaW1hZ2UuYmVla2thLmNvbS9ibG9nLzIwMTIwNS9iZzIwMTIwNTAxMDEuanBn.jpg

    手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。

    很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

    于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?

    L3Byb3h5L2h0dHAvaW1hZ2UuYmVla2thLmNvbS9ibG9nLzIwMTIwNS9iZzIwMTIwNTAxMDcuanBn.jpg

    一、"自适应网页设计"的概念

    2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

    他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。

    L3Byb3h5L2h0dHAvaW1hZ2UuYmVla2thLmNvbS9ibG9nLzIwMTIwNS9iZzIwMTIwNTAxMDMuanBn.jpg

    如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。

    L3Byb3h5L2h0dHAvaW1hZ2UuYmVla2thLmNvbS9ibG9nLzIwMTIwNS9iZzIwMTIwNTAxMDQuanBn.jpg

    如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。

    L3Byb3h5L2h0dHAvaW1hZ2UuYmVla2thLmNvbS9ibG9nLzIwMTIwNS9iZzIwMTIwNTAxMDUuanBn.jpg

    如果屏幕宽度在400像素以下,则6张图片分成三行。

    L3Byb3h5L2h0dHAvaW1hZ2UuYmVla2thLmNvbS9ibG9nLzIwMTIwNS9iZzIwMTIwNTAxMDYuanBn.jpg

    这里还有一个测试小工具,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。

    二、允许网页宽度自动调整

    "自适应网页设计"到底是怎么做到的?其实并不难。

    首先,在网页代码的头部,加入一行viewport元标签。

    viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

    所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

    三、不使用绝对宽度

    由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

    具体说,CSS代码不能指定像素宽度:

    width:xxx px;

    只能指定百分比宽度:

    width: xx%;

    或者

    width:auto;

    四、相对大小的字体

    字体也不能使用绝对大小(px),而只能使用相对大小(em)。

    body {

    font: normal 100% Helvetica, Arial, sans-serif;

    }

    上面的代码指定,字体大小是页面默认大小的100%,即16像素。

    h1 {

    font-size: 1.5em;

    }

    然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

    small {

    font-size: 0.875em;

    }

    small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

    五、流动布局(fluid grid)

    "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。

    .main {

    float: right;

    width: 70%;

    }

    .leftBar {

    float: left;

    width: 25%;

    }

    float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

    另外,绝对定位(position: absolute)的使用,也要非常小心。

    六、选择加载CSS

    "自适应网页设计"的核心,就是CSS3引入的Media Query模块。

    它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

    media="screen and (max-device-width: 400px)"

    href="tinyScreen.css" />

    上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

    media="screen and (min-width: 400px) and (max-device-width: 600px)"

    href="smallScreen.css" />

    如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

    除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

    @import url("tinyScreen.css") screen and (max-device-width: 400px);

    七、CSS的@media规则

    同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

    @media screen and (max-device-width: 400px) {

    .column {

    float: none;

    width:auto;

    }

    #sidebar {

    display:none;

    }

    }

    上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

    八、图片的自适应(fluid image)

    除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。

    这只要一行CSS代码:

    img { max-width: 100%;} 确实可以。

    这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

    img, object { max-width: 100%;}

    老版本的IE不支持max-width,所以只好写成:

    img { width: 100%; }

    此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:

    img { -ms-interpolation-mode: bicubic; }

    或者,Ethan Marcotte的imgSizer.js。

    addLoadEvent(function() {

    var imgs = document.getElementById("content").getElementsByTagName("img");

    imgSizer.collate(imgs);

    });

    不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

    (完)

    这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

    css 自适应布局

    转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...

    DIV&plus;CSS自适应布局

    自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应            1,高度自适应 ...

    &lbrack;css&rsqb; 自适应布局 移动端自适应

    一.宽度自适应 三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定 原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.h ...

    记一次产品需求:图片等比缩放和CSS自适应布局16&colon;9

    前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...

    CSS自适应布局&lpar;左右固定 中间自适应或者右侧固定 左侧自适应&rpar;

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

    CSS自适应布局&lpar;包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应&rpar;

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

    DIV&plus;CSS 自适应布局

    两栏布局,左边定宽200px,右边自适应.如何实现?我的第一个反应就是:用flex伸缩盒呀,然后balabala...说完之后,面试官说,还有没有别的方法?flex有些浏览器不支持嗯...我愣了一下, ...

    css自适应布局之&OpenCurlyDoubleQuote;圣杯双飞翼”

    首先,这个这么扯淡又装逼的名字不知道是谁起的,大意就是说:中间的内容随着浏览器宽度的不同,进行宽度自适应操作,而两边的内容固定宽度. 来,上个代码演示一下:

    随机推荐

    WordPress 博客文章时间格式the&lowbar;time&lpar;&rpar;设置

    国外设计的WordPress 主题里的文章的时间格式是类似“十一月 21, 2010”这种格式的,而中国人习惯的是年在前,月紧跟其后,日在末尾,所以看国外的就显得很别扭,但是我们可以通过修改WP时间代 ...

    Some SQL basics

    1, Index An index is a set of data pointers stored on disk associated with a single table. The main ...

    python&lowbar;Day&lowbar;02&lbrack;数组、列表、元组之篇&rsqb;

    一.对python中.pyc的理解 1).pyc文件可以理解为是python编译好的字节码文件,即只有python解释器才能读懂,类似于java中class文件 2)python运转过程: 当pyth ...

    schtasks命令遇见ERROR&colon; The request is not supported&period;

    执行schtasks命令的环境,下文为机器1:windows server 2008 r2 工作任务(Schedules)所在的机器环境,下文为机器2:windows server 2003 当在机器 ...

    python django 实现验证码的功能

    我也是刚学Python  Django不久很多都不懂,所以我现在想一边学习一边记录下来然后大家一起讨论! 验证码功能一开始我在网上找了很多的demo但是我在模仿他们写的时候,发现在我的版本上根本就不能 ...

    Java框架数据库连接池比较 &lbrack;转贴 2010-3-20 9&colon;57&colon;51&rsqb;

    现在常用的开源数据连接池主要有c3p0,dbcp和proxool三种,其中: ¨hibernate开发组推荐使用c3p0; ¨spring开发组推荐使用dbcp (dbcp连接池有weblogic连接 ...

    OOP随笔

    父类为普通类: 内部可声明虚方法(virtual),并包含代码实现,子类中可以重写(override),也可以不重写直接用. 父类为(不可实例化的)抽象类: 可声明虚方法,同上. 也可以声明抽象方法( ...

    MySQL Execution Plan--EXPLAIN用法

    MySQL Explain新用法: --使用EXPLAIN来查看语句的最终执行计划 语法:EXPLAIN [EXTENDED] SELECT select_options --在MYSQL .7版本后 ...

    struts2的国际化i18n

    先来例子,普通的读取配置文件中不同语言信息,一个测试类,一份中文配置文件,一份英文配置文件 中文配置文件,书写中文“欢迎”,myelipse自动转码 public class Readi18n { p ...

    Ubuntu上搭建比特币运行环境

    Ubuntu版本:16.04.3 Bitcoin Core版本:0.16 1. 比特币运行依赖的开源库 (1)必须依赖的库 库 目的 描述 libssl 加密 随机数生成,椭圆曲线加密算法 libbo ...

    展开全文
  • 大体上,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位三种定位机制,CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局,inline-block布局,弹性盒布局这几...
  • 详细的说一说css自适应布局中css宽度自适应该如何实现。我们经常会看到这样的页面,左侧(或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小,这其实就是宽度自适应的实现。css宽度...
  • CSS中常见的自适应布局是什么

    千次阅读 2021-08-05 04:08:36
    CSS中常见的自适应布局是什么发布时间:2020-12-05 13:24:07来源:亿速云阅读:102作者:小新这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!...
  • 相信做过后台管理界面的同学,都非常清楚这个布局。最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里。如果有不了解的同学可以百度、google。这里我不得不吐下槽!!百度实在让我这个“粉丝”失望。就...
  • html+css+个人博客自适应布局,对于自适应网页布局可以参考
  • CSS自适应布局

    2019-02-25 09:46:32
    自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒。 效果图如下:高度自适应——宽度自适应   1,高度自适应布局  原理就是把每...
  • css中常用的几种自适应布局

    万次阅读 2018-08-11 10:59:27
    全局布局兼容性,自适应,性能一览表: 方案 兼容性 性能 是否自适应 position 好 好 部分自适应 flex 较差 差 可自适应 Grid 差 较好 ...
  • 首先,先了解非自适应布局,对于界面会有些刚硬,特别是将窗口放大和缩小的时候,一些区域会因为大小是固定的,显得不协调。 对称完成一个简单的自适应布局
  • CSS div 自适应布局

    2021-10-13 09:52:55
    <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width,initial-scale=1">...div 自适应布局</title> <meta name="Keywords" content="关键字"&
  • .parent{ width: 100%; display: table; height: 500px; } .left{ width: 200px; background: red; display: table-cell; } .right{ background: blue; display: table-cell; }
  • 假设高度已知,请写出三栏布局,其中左右宽度均为300px,中间自适应。 看了上面的题目,有经验的人也许会觉得很简单,仔细想想,如果我们来写,能写出几种方案呢?一般都会想到两种吧,float和position定位,其实...
  • CSS 自适应布局

    2018-03-12 14:07:00
    本篇文章将介页面布局中的自适应布局,常见的自适应布局有以下2种:左列固定右列自适应、左右两列固定中间自适应。 1. 左列固定右列自适应布局方案 说明:左列固定右列自适应,也可以为右列固定左列自适应,常见...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,006
精华内容 17,602
关键字:

css自适应布局

友情链接: Demo3.rar