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 ...
随机推荐
- Android Button事件处理
一般只需要处理按钮的点击事件就可以,但想让一个按钮处理多个事件,就得同时监听多个方法. OnClickListener 点击事件 OnLongClickListener 长按事件 OnTouchLi ...
- 139.00.007 Git学习-Cheat Sheet
@(139 - Environment Settings | 环境配置) Git虽然极其强大,命令繁多,但常用的就那么十来个,掌握好这十几个常用命令,你已经可以得心应手地使用Git了. 友情附赠国外网 ...
- 微信小程序支付返回信息为空
1.昨天公司说要实现微信小程序的支付,于是看了下微信小程序的开发api文档,和之前的app 端以及pc端基本相似:于是让他们把参数改了下,把之前的trade_type 由 app 改成 小程序要求的 ...
- Java接口与多态
接口 可以理解为一种特殊的类,里面全部是由全局常量(static final)和公共的抽象方法所组成 接口的定义格式 接口的数据成员,只允许被public, static, final修饰. 接口的方 ...
- 《C++ Primer Plus》读书笔记之——处理数据
本文旨在记录在阅读<C++ Primer Plus>第五版的过程中,一些重点的知识点,方便以后查阅.本文将不断更新...... 一.第三章 处理数据 1.无符号整型不能存储负数值,其优点是 ...
- February 20 2017 Week 8 Monday
Behind every beautiful thing, there's some kind of pain. 美丽背后,必有努力. No pains, no gains, and sometime ...
- GO语言（五）项目搭建
<sorter> |------<src>(手动添加,代码存放处) |------sorter.go |------<algorithm> |--- ...
- SAP CRM One order里user status和system status的mapping逻辑
Below example show: How the mapping relationship between User status and System status maintained in ...
- MySQL语法二：数据操纵语句
数据操纵语句DML(SELECT,DELETE,UPDATE,INSERT) 一. 数据操纵语句是对数据表中的内容进行操作.比如对某个表中的某条记录或者多条记录进行增删改查操作. 一).查询 SELE ...
- datetime中时间的formatter整理
datetime是个很常用的模块,这个连python初学者都应该知道,datetime中有两个函数:strftime和strptime,里面都有个参数format,可以将输出的时间格式化.例如 pri ...