div+css布局

最新推荐文章于 2024-01-15 12:13:32 发布
最新推荐文章于 2024-01-15 12:13:32 发布
阅读量306 收藏
点赞数
分类专栏： html-css 文章标签： css 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_37037281/article/details/56054100
版权

两栏布局

  1. 利用margin
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .first{overflow: hidden;;margin-top: 50px;color:#fff;}
            .first-left{width: 100px;height: 100px;float:left;background: red}
            .first-right{margin-left: 100px;height: 100px;background: black;word-wrap: break-word;}
        </style>
    </head>
    <body>
    <div class="first">
            <div class="first-left"></div>
            <div class="first-right"></div>
    </div>
    </body>
</html>
  1. 模仿圣杯
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .second{padding-left: 100px;overflow: hidden;margin-top: 50px;color:#fff;}
            .second-left{width: 100px;height: 100px;float:left;background: red;margin-left:-100%;position: relative;left:-100px;}
            .second-right{float: left;background: black;height: 100px;width: 100%;word-wrap: break-word;}
        </style>
    </head>
    <body>
    <div class="second">
            <div class="second-right"></div>
            <div class="second-left"></div>
    </div>
    </body>
</html>
  1. 利用overflow：hidden
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .third{overflow: hidden;margin-top: 50px;color:#fff;}
            .third-left{float:left;width: 100px;height: 100px;background: red}
            .third-right{overflow: hidden;background: black;height: 100px;word-wrap: break-word;}
        </style>
    </head>
    <body>
    <div class="third">
            <div class="third-left"></div>
            <div class="third-right"></div>
    </div>
    </body>
</html>

三栏布局

  1. 圣杯布局
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .sixth{overflow: hidden;margin-top: 50px;color:#fff;padding: 0 100px}
            .sixth-middle{float:left;background: yellow;width: 100%;height: 100px}
            .sixth-left{float:left;background: red;width: 100px;height: 100px;margin-left: -100%;position: relative;left: -100px;}
            .sixth-right{float:right;background: black;height: 100px;width: 100px;margin-left: -100px;position: relative;right:-100px;}
        </style>
    </head>
    <body>
    <div class="sixth">
            <div class="sixth-middle"></div>
            <div class="sixth-left"></div>
            <div class="sixth-right"></div>
    </div>
    </body>
</html>
  1. 双飞翼布局
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .seventh{overflow: hidden;margin-top: 50px;color:#fff;}
            .seventh-middle{width: 100%;height:100px;background: yellow;float: left}
            .inner{margin-left: 100px;margin-right:100px}
            .seventh-left{width: 100px;height: 100px;float: left;margin-left: -100%;background: red;}
            .seventh-right{width: 100px;height: 100px;float: left;margin-left: -100px;background: black;word-wrap: break-word;}
        </style>
    </head>
    <body>
    <div class="seventh">
            <div class="seventh-middle">
                <div class="inner">

                </div>
            </div>
            <div class="seventh-left">left</div>
            <div class="seventh-right">right</div>
    </div>
    </body>
</html>
  1. 利用flex实现圣杯
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .eighth{display: flex;height: 100px}
            .eighth-middle{background: black;flex: 1;color: #fff}
            /* 
        flex:1 == 1 1 auto：剩余空间放大比例(flex-grow)  空间不足缩小比例(flex-shrink)    分配多余空间之前项目占据的主轴空间(flex-basis)
        flex:1指的是：中部区域自由伸缩
        auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0
        块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。
        */
            .eighth-left{order:-1;flex: 0 0 50px;background: red;height: 100px}
            .eighth-right{flex: 0 0 50px;background: yellow;height: 100px}
        </style>
    </head>
    <body>
    <div class="eighth">
            <div class="eighth-middle">123</div>
            <div class="eighth-left"></div>
            <div class="eighth-right"></div>
        </div>
    </body>
</html>

一列定高，一列自适应

//一种是用box-sizing，然后marging
html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }
<div class="outer">
        <div class="A"></div>
        <div class="B"></div>
</div>
//第二种用boxsizing,然后position
html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
.A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
.B { height: 100%; background: #D9C666; }
//relative+absolute
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; position: relative; }
.A { height: 100px; background: #BBE8F2; }
.B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }
UNDERCOVERj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV+CSS布局
XUYIGE的博客
11-13 1852
DIV+CSS布局方法 DIV+CSS的网页标准化设计是web标准中的一种新的布局方式，正逐渐代替传统的表格（Table）布局。尤其适合内容信息量大、板块多且经常进行版面更新的大型门户网站使用。DIV+CSS构建网页，采用层（DIV）布局，并且使用层叠样式表（CSS）来实现页面的外观，给网站浏览者更好的体验。 DIV+CSS布局的优势： 1、表现和内容分离，便于站点重构页面 DIV+CSS模式具有...
css布局的特点,DIV+CSS布局标准优点解析
weixin_36452281的博客
08-04 1217
你对DIV+CSS布局标准是否熟悉，这里向大家描述一下DIV+CSS布局标准的优点，比如所它可以大大缩减页面代码，提高页面浏览速度,缩减带宽成本；缩短改版时间；使得CSS代码编写更方便等。DIV+CSS布局标准的优点业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是DIV+CSS标准...
DIV＋CSS布局
热门推荐
zg0601的博客
10-17 1万+
DIV+CSS布局
DIV+CSS布局（一）
weixin_50632313的博客
09-23 1460
1.当父元素div不设置宽高且所有元素都不设置浮动时，父元素div会感知子元素的宽高，所以下面例子中，div的高为子元素的总高，又因为div是独占一行的，所以下面例子中div的宽度是满宽。6.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。1.将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px,证明浮动元素不占据位置，将元素排除在普通流之外。5.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。7.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。
网页设计（五）DIV+CSS布局规划
最新发布
.正函数.的博客
01-15 2276
DIV+CSS布局是一种常用的网页设计技术，能够更好地实现页面结构和样式的分离。通过合理规划DIV块的布局，结合CSS样式设置，可以实现网页的自适应、响应式等效果，提升用户体验。
DIV+CSS页面布局
m0_62943934的博客
12-21 2055
现在所有的主流的、大型的 IT 企业的网站布局几乎都采用 DIV、CSS技术，有些甚至采用 DIV、CSS、表格混合进行页面布局。此类页面布局能够实现页面内容与表现的分离，提高网站访问速度、节省宽带、改善用户的体验。DIV+CSS组合技术完全有别于传统的表格排版习惯。通过DIV+CSS实现页面元素精确控制，网站风格、代码维护与更新变得卡分容易，甚至是页面的布局结构都可以通过修改CSS属性来重新定位。DIV+CSS布局的步骤大致为: 首先整体上对页面进行分块，接着按照分块设计使用div。
DIV+CSS布局（进阶篇）
网络爬虫开发
01-29 837
   学习前端必不可少的就是学习HTML语言以及CSS样式的布局，这也通常是新手入门的拦路虎，结合上次的入门篇的两种布局样式，又写了两个变化的样式。基础样式都是有DIV+CSS样式进行不断的变化出来的，熟练后可以变化出其他的想要的样式布局。 DIV+CSS布局 第一种布局样式：css三行三列布局 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;h...
【前端】前端必会的三种DIV+CSS布局
m0_64210833的博客
07-15 3122
要开发网页，必须要搞懂这三种div+css布局技术！（1）左右两列布局；（2）1行3列；（3）1行多列或多行多列布局；只要你掌握了这三种布局方式，那搭建一个完整的网页框架肯定是一点问题都没有。
前端开发_HTML5_布局-div+css布局
u013185175的博客
12-20 2321
div + css布局 1.引入 我们之前学习了两种排版，分别是表格布局和流式布局，那么我们发现这俩中排版都有自己的局限性，那么下面呢，我们就一起来学习一个比较重要的布局css+div布局。这一种布局方式是基于盒子模型的一种布局方式，在实际的开发中使用的比较多。 2.div+css布局 css+div布局是一种重要的布局方式，可以按照不同的排版方式实现不同效果的页面布局。 3.div+css布局 (1).简单的上中下结构布局 <style type="text/css...
div+css布局资料.zip
11-08
《深入理解Div+CSS布局：构建高效网页设计》 在网页设计领域，Div+CSS布局是一种广泛应用的技术，它能够帮助开发者实现清晰、灵活且高效的页面布局。本资料将全面解析Div+CSS布局的核心概念和实战技巧，旨在提升...
div+css布局制作横向带箭头步骤流程样式
11-08
在网页设计中，`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`<div>`元素作为容器来组织内容，并利用CSS（层叠样式表）来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...
div+css布局大全
03-22
下面，我们将深入探讨div+css布局的相关知识点。 1. **Div元素**：HTML中的`<div>`（division）元素是一个通用容器，用于组合HTML元素，为页面提供结构。通过设置`<div>`的类或ID属性，我们可以对多个元素进行分组...
详解DIV+CSS布局的好处和意义
12-13
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？...
DIV+CSS 网页布局心得
09-27
在网页设计领域，DIV+CSS布局已经成为主流，因为它提供了更加灵活、可维护性更强的页面构建方式。相比于传统的TABLE布局，DIV+CSS更符合Web标准，有助于提升网页的性能和可访问性。下面将详细探讨DIV+CSS布局的核心...
相邻元素之间的margin问题：
前端说
02-17 6457
任何元素都可以设置border 设置宽高可能无效 行内元素设置padding，margin上下是无效的，左右是有效的外边距合并：指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将
用requestAnimationFrame做轮播
前端说
04-03 1815
用setTimeout和setInterval来实现动画 没有对调用动画的循环机制进行优化 即使传递毫秒为单位的参数，也不能打到ms的准确性。因为JavaScript是单线程的，可能发生阻塞 没有考虑绘制动画的最佳时机 requestAniamationFrame requestAnimationFrame不需要使用者指定循环间隔时间，浏览器会基于当前页面是否可见、CPU的负荷情况等来自行决定最佳的
float的影响
前端说
05-01 1621
注：float为非none 原文 对自身的影响 行内元素将变为块级元素，可设置宽高 题外话，input为内联块级标签，可设置宽高，并且一行排列 父级元素设置了float，则会包裹子元素，自适应宽高 对兄弟元素的影响 浮动元素后面跟非浮动元素会覆盖非浮动元素，非浮动元素的文字或者其他行内元素会环绕浮动元素 浮动元素前后的行内元素环绕浮动元素 浮动元素临近元素也是浮动元素，且...
title与h3的区别、b与strong的区别、i与em的区别？
前端说
02-17 1475
title属性没有明确意义只表示是个标题， H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响； strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时： 会重读，而 是展示强调内容。 i内容展示为斜体， em 表示强调的文本；
Div+CSS布局完全指南
"《Div+CSS布局大全》是由博客园JesseZhao整理的一份关于网页设计中Div+CSS布局的教程，旨在帮助初学者掌握这一核心技术。教程内容包括了从基础到进阶的各种知识点，如DOCTYPE的选择、名字空间、语言编码、样式表的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值