第一种  两栏式布局

 <body>

     <!-- 两栏式布局 -->

     <!-- 想要的效果是左边图片右边文字 拉伸盒子文字的高度宽度自动改变 -->

     <div class="box">

         <div class="left">

             <img src="./img/头像.png" alt="">

         </div>

         <div class="right">

             测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字

             测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字

             测试文字测试文字测试文字测试文字测试文字测试文字测测试文字测试文字测试文字测试文字测试文

             字测试文字测试文字测试文字测试文字测试文字

         </div>

     </div>

 </body>
  <style>

         .box {

             width: 500px;

             background-color: #eee;

             overflow: auto;

             /* 下方这个属性可以配合overflow让用户控制div的宽度的大小 */

             /* none    用户无法调整元素的尺寸 */

             /* both    用户可调整元素的高度和宽度 */

             /* vertical    用户可调整元素的高度 */

             resize: horizontal;

         }

         .left {

             width: 200px;

             height: 200px;

             float: left;

         }

         .left img {

             width: 200px;

             height: 200px;

         }

         .right {

             margin-left: 210px;

             /* 不要加这个不然文字会下来 */

             /* float: left; */

         }

     </style>

2、移动端布局

 <body>

     <div class="container">

         <!-- 头部内容 -->

         <header></header>

         <!-- 主题内容 -->

         <main>

             <!-- 主题内容中的导航条 -->

             <div class="title"></div>

             <!-- 主题内容中的重复样式区域 -->

             <div class="list">

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

                 <div class="one"></div>

             </div>

             <div class="box"></div>

             <div class="box"></div>

             <div class="box"></div>

             <div class="box"></div>

             <div class="box"></div>

         </main>

         <!-- 尾部 -->

         <footer></footer>

     </div>

 </body>
 * {

   margin:;

   padding:;

 }

 /* 设置宽高充满整个手机屏幕 */

 html,

 body {

   width: 100%;

   height: 100%;

 }

 /* 设置最外层大盒子宽高 然后开弹性盒 设置弹性盒内容的排列顺序 为竖向 */

 .container {

   width: 100%;

   height: 100%;

   display: flex;

   flex-direction: column;

 }

 /* 头部设置成宽百分百 高度为定高 */

 header {

   width: 100%;

   height: 1.33333rem;

   background: red;

 }

 /* 主体部分设置成flex ：1  宽百分百 加上overflow: auto;让其主体部分的内容可以滚动 而头部尾部固定不变 */

 main {

   width: 100%;

   flex:;

   overflow: auto;

 }

 main .title {

   width: 100%;

   height: 1.2rem;

   background: blue;

 }

 /* 给主体部分的列表也就是重复性区域加上overflow: auto;可以让其滚动 而主体的标题部分不滚动 */

 main .list {

   width: 100%;

   height: 100%;

   background: #ccc;

   overflow: auto;

 }

 main .list .one {

   width: 100%;

   height: 2.13333rem;

   margin-top: 0.53333rem;

   background: pink;

 }

 main .box {

   width: 100%;

   height: 2.13333rem;

   background: maroon;

 }

 /* 尾部也要设置成定高 */

 footer {

   width: 100%;

   height: 1.12rem;

   background: green;

 }

HTML-CSS的几种布局的更多相关文章

  1. 有关于css的四种布局

    四种布局 (1).左右两侧,左侧固定宽度200px, 右侧自适应占满. (2).左中右三列,左右个200px固定,中间自适应占满. (3).上中下三行,头部200px高,底部200px高,中间自适应占 ...

  2. HTML的三种布局：DIV+CSS、FLEX、GRID

    Div+css布局 也就是盒子模型,有W3C盒子模型,IE盒子模型.盒子模型由四部分组成margin.border.padding.content. 怎么区别这两种模型呢,区别在于w3c中的width ...

  3. CSS三种布局模型是什么？

    在网页中,元素有三种布局模型:流动模型(Flow) 默认的.浮动模型 (Float).层模型(Layer).下面我们来看一下这三种布局模型. 三种布局模型介绍: 1.流动模型(Flow) 流动(Flo ...

  4. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  5. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  6. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  7. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  8. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  9. css 多栏自适应布局

    在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...

  10. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

随机推荐

  1. ORACLE 收集统计信息

    1.     理解什么是统计信息优化器统计信息就是一个更加详细描述数据库和数据库对象的集合,这些统计信息被用于查询优化器,让其为每条SQL语句选择最佳的执行计划.优化器统计信息包括: ·        ...

  2. Hyper-V迁移---委派

    在Hyper-V管理器中-实时迁移,选择“使用kerberos",如图1所示 在AD中,找到Hyper-V宿主,分别设置委派,如图2所示    图1               图2

  3. Python学习---Python下[字符串]的学习

    字符串[不可变] 重点方法: in count() center(50,'*') startswith('h') endwith('h') find('r') : 找不到返回 -1 index('r' ...

  4. Spring学习之-各注解的含义总结

    注解配置 @ComponentScan("spittr.web"):/在加载Spring上下文时,会扫描spittr.web包查找组件 @ComponentScan注解扫描的组件有 ...

  5. RedHat（Linux） Oracle数据库设置开机自启动

    1 首先修改/etc/oratab文件添加如下行:ycr:/u01/app/oracle/product/12.1.0/dbhome_1:Y 关于/etc/oratab文件解释如下:# This fi ...

  6. Oracle 12c logminer测试

    首先开启归档:SQL> archive log list   Database log mode              Archive ModeAutomatic archival     ...

  7. GO语言（一）G语言自虐

    package main import . "fmt" //notice 1 type testInt func(uint32) bool func isOdd(integer u ...

  8. ZT————pull push mode

    谁能讲讲push和pull模式是什么意思?(参与有分) [问题点数:100分,结帖人mickeyfirst] 收藏 mickeyfirst mickeyfirst 等级: 结帖率:94.12% 楼主 ...

  9. java学习第一步，使用IntelliJ IDEA编写自己的第一个java程序

    首先下载java的jdk,然后说一下IDEA的配置 IntelliJ IDEA目前公认的最好的java开发工具,不过一般的学校的教学还是使用eclipse来进行java的开发.所以老师一般只会教你如何 ...

  10. hdu-4135 Co-prime---容斥定理经典&&求1-m中与n互质的数目

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4135 题目大意: 求区间[a, b]中与N互质的数目. 解题思路: 首先对n求出所有素因子. 对于区 ...