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 ...
随机推荐
- UTF-8文件编码格式中有无签名问题汇总(BOM)
UTF-8签名(UTF-8 signature)也叫做BOM(Byte order Mark),是UTF编码方案里用于标识编码的标准标记.如果多个文件设置了签名,在二进制流中就会包含多个UTF-8签名 ...
- Microsoft Office ->> 完整卸载Office 2007
今天用GHOST安装了Windows 8.1,结果发现预装了Office 2007,而且这个GHOST系统的Office 2007还不是很正规的安装手法安装的.它没有在注册表中注册.在打开控制面板后发 ...
- JavaWeb笔记——MVC设计模式和JavaWeb经典三层架
1 MVC设计模式 MVC设计模式 MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(C ...
- php大文件上传失败的原因及解决方法
为什么上传大文件总是失败,上传小文件就没有问题.关于PHP大文件上传失败的原因及解决方法如下: 第1种情况:文件上传时存放文件的临时目录必须是开启的并且是 PHP 进程所有者用户可写的目录.如果未指定 ...
- Spark Worker原理和源码剖析解密：Worker工作流程图、Worker启动Driver源码解密、Worker启动Executor源码解密等
本课主题 Spark Worker 原理 Worker 启动 Driver 源码鉴赏 Worker 启动 Executor 源码鉴赏 Worker 与 Master 的交互关系 Spark Worke ...
- 由memcpy内存越界引发的问题 && delete 和 delete []的真正区别
今天遇到了一个问题,在程序运行到某处总会报访问到错误的地址的错误,而且每次报错的堆栈还都不一样,排查了一段时间,发现是memcpy这里出了错 ]; memset(d, , data.size() * ...
- dom4j.jar有什么作用？
om4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个非常非常优秀的Java XML API,具有性能优异.功能强大和极端易用使用的特点,同时它也是一个开放源代 ...
- Linux学习总结（十四） 文件的打包和压缩
文件的压缩和打包,在windos下我们很熟悉.rar和.zip文件,这是两种压缩文件,他们支持单个文件和多个文件的压缩.windos下我们不提及打包的概念,虽然多个文件的压缩肯定存在打包过程.打包和压 ...
- Tomcat整体介绍
来源 本文整理自 <Tomcat内核设计剖析>.<Tomcat结构解析> Tomcat 整体架构 如上图所示:包含了Tomcat内部的主要组件,每个组件之间的层次包含关系很 ...
- 截屏快捷键（windows）自带截屏,不需要安装任何插件
方案一:电脑自带截屏,不需要QQ Shift+win+s即可截图(推荐使用) 方案二:搜狗输入法下载自带:Ctrl+Shift+x