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 ...
随机推荐
- Hadoop Archives档案
HDFS 并不擅长存储小文件,因为每个文件最少一个 block,每个 block 的元数据都会在 NameNode 占用内存,如果存在大量的小文件,它们会吃掉NameNode 节点的大量内存. Had ...
- Android已上线应用开源分享中（第一季）
这是我上线的第一个android应用,在百度.腾讯.豌豆荚等平台测试通过,也有了部分用户,还是可以的啊,哈哈.现在分享给大家,当然,源码我也会分享. 1.软件是一个管理wifi的小工具 (1)查询.连 ...
- Python学习---Python下[字典]的学习
Python中唯一的映射类型(哈希表) -->Java中的HashMap<K,V> Python对key进行了哈希函数运算,根据计算的结果决定value的存储地址,所以字 ...
- Windows软件静默安装
Install Software in A Slient Way 一般来说,不同的软件的封装类型都有固定的静默安装命令. 查看软件的封装类型 双击setup.exe,在弹出窗口的左上角单击,选择&qu ...
- 文本处理三剑客之 grep
grep简介 grep(Global search REgular expression and Print out the line)是Linux上的文本处理三剑客之一,另外两个是sed和awk. ...
- [转] 从此不再惧怕URI编码：JavaScript及C# URI编码详解
混乱的URI编码 JavaScript中编码有三种方法:escape.encodeURI.encodeURIComponent C#中编码主要方法:HttpUtility.UrlEncode.Serv ...
- 20145223 杨梦云 《网络对抗》 Web安全基础实践
20145223 杨梦云 <网络对抗> Web安全基础实践 1.实验后回答问题 (1)SQL注入攻击原理,如何防御 **原理**:SQL注入攻击是通过构建特殊的输入作为参数传入web应用程 ...
- Selenium应用代码（读取mysql表数据登录）
1. 封装链接数据库的类: import java.sql.ResultSet; import java.sql.Connection; import java.sql.DriverManager; ...
- alibaba--java规范
18. [推荐]final 可以声明类.成员变量.方法.以及本地变量,下列情况使用 final 关键字: 1) 不允许被继承的类,如:String 类. 2) 不允许修改引用的域对象,如:POJO 类 ...
- Visual C++中MFC消息的分类
Visual C++中MFC消息的分为三类:标准(窗口)消息.命令消息.控件消息. 1.标准(窗口)消息:窗口消息一般与窗口内部运作有关,如创建窗口,绘制窗口,销毁窗口,通常,消息是从系统发到窗口,或 ...