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 ...
随机推荐
- git 回滚到上个版本命令以及忽略某些文件提交
1.git回滚到上个版本 git reset --hard FETCH_HEAD 2.git忽略某些文件的提交 以前是用默认的.gitignore 然后再里面默认某些文件不提交.但是有个问题,.git ...
- dubbo学习总结一 API
API 一般用来暴露接口 项目分层一般是 api + entity + enums + model 就是接口加上一些实体之类的东西
- android启动应用
private void openApp(String packageName) { PackageInfo pi = getPackageManager().getPackageInfo(packa ...
- C#启动外部程序（进程）
通过调用Process类可以启动系统内部(环境变量里的)或者指定位置的程序,例如: Process.Start("notepad");//启动记事本 Process.Start(& ...
- 'weblogic.kernel.Default (self-tuning) 问题weblogic层面解决办法
声明:出现这个问题有程序方面.网络方面.weblogic设置方面等等原因,此文章主要讲述由于weblogic设置而导致的解决办法. 因为: 1.程序问题,需要项目自己去解决,weblogic在做优化处 ...
- SQL Server ->> 间接实现COUNT(DISTINCT XXX) OVER(PARTITION BY YYY)
SQL Server 2005版本开始支持了窗口函数(Windowing Function)和OVER字句.SQL Server 2012版本开始支持了窗口函数的ORDER BY字句实现连续/累计聚合 ...
- 如何避免在EF自动生成的model中的DataAnnotation被覆盖掉
摘自ASP.NET MVC 5 网站开发之美 6.4 Metadata与数据验证 如果使用Database-First方式生成*.edms,那么所生成的类文件会在*.tt文件的层级之下,扩展名tt是一 ...
- HTTP常用状态码大全
HTTP状态码对照表 HTTP response codes 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码 ...
- SIMATIC 1500 PLC 同步轴，状态字StatusWord信号描述
轴名. StatusWord.X21 (Synchronizing) 正在建立同步 轴名. StatusWord.X22 (Synchronous) 已经建立同步
- 使用log4j让日志写入数据库
之前做的一个项目有这么个要求,在日志管理系统里,需要将某些日志信息存储到数据库里,供用户.管理员查看分析.因此我就花了点时间搞了一下这一功能,各位请看. 摘要:我们知道log4j能提供强大的可配置的记 ...