HTML-CSS的几种布局
第一种 两栏式布局
<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的几种布局的更多相关文章
- 有关于css的四种布局
四种布局 (1).左右两侧,左侧固定宽度200px, 右侧自适应占满. (2).左中右三列,左右个200px固定,中间自适应占满. (3).上中下三行,头部200px高,底部200px高,中间自适应占 ...
- HTML的三种布局：DIV+CSS、FLEX、GRID
Div+css布局 也就是盒子模型,有W3C盒子模型,IE盒子模型.盒子模型由四部分组成margin.border.padding.content. 怎么区别这两种模型呢,区别在于w3c中的width ...
- CSS三种布局模型是什么？
在网页中,元素有三种布局模型:流动模型(Flow) 默认的.浮动模型 (Float).层模型(Layer).下面我们来看一下这三种布局模型. 三种布局模型介绍: 1.流动模型(Flow) 流动(Flo ...
- Android开发之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
- CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
- css多栏自适应布局
css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...
- HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
- css 多栏自适应布局
在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...
- 前端总结·基础篇·CSS（一）布局
目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...
随机推荐
- C++模板详解（系转载，但是个人添加了一些内容）
原文地址:http://www.cnblogs.com/gw811/archive/2012/10/25/2738929.html 零.概述 模板是C++支持参数化多态的工具,使用模板可以使用户为类或 ...
- 线程 Z
原文:http://www.albahari.com/threading/part5.aspx 专题:C#中的多线程 1并行编程Permalink 在这一部分,我们讨论 Framework 4.0 加 ...
- June 22nd 2017 Week 25th Thursday
Happiness is when the desolated soul meets love. 幸福是孤寂的灵魂遭遇爱的邂逅. When living alone for a long period ...
- make menuconfig 出错解决
问题: hank@hank-virtual-machine:/opt/Emb/linux-2.6.30.4$ sudo make menuconfig *** Unable to find the n ...
- 理解Underscore中的flatten函数
最近是在所在实习公司的第一个sprint,有个朋友又请假了,所以任务比较重,一直这么久都没怎么更新了,这个周末赖了个床,纠结了一会儿决定还是继续写这个系列,虽然比较乏味,但是学到的东西还是很多的. 之 ...
- Struts2.3.4.1 + Spring3.1.2 + Hibernate4.1.6整合
1. Jar包 2. web.xml配置 3. struts.xml配置 4. hibernate.cfg.xml配置 5. applicationContext.xml配置 6. log4j.pro ...
- phonegap 捕获图片,音频,视屏 api capture
一. capture Api 简单介绍 capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过 navigator.device.capture 来访问 方法: capture.capt ...
- cannot be resolved解决方法
引言: eclipse新导入的项目经常可以看到“XX cannot be resolved to a type”的报错信息.本文将做以简单总结. 正文: (1)jdk不匹配(或不存在) 项目指定的jd ...
- swift的clourse：字面量化的函数、将函数字面量化-与函数的类型签名相同
1.clourse的签名与函数的签名相同: 所以两者可以相互赋值: 2.可以将函数(表达式)字面量化: 因为可以字面量化,所以和其它的值(变量)没有任何区别,可以存在变量存在的任何地方: 3.clou ...
- 3.为JDeveloper添加不能的workspace
1.点击选中JDeveloper,在属性中,选中快捷方式, 可以看到目标中的值为C:\Oracle\Middleware\jdeveloper\jdeveloper.exe, 只需要在修改为C:\Or ...