【学习笔记】HTML布局

最新推荐文章于 2022-04-20 15:55:04 发布
最新推荐文章于 2022-04-20 15:55:04 发布
阅读量190 收藏 1
点赞数
分类专栏： html 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31478771/article/details/107492539
版权

弹性布局Flex

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

示例

#box { display: flex; flex-warp: flex; justify-content: space-envenly; align-items: flex-start; align-content: flex-start;
	width: 100px; height: 100px; margin: 20px auto; border: 1px black solid;
}

网格布局Grid

在这里插入图片描述
请添加图片描述
请添加图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

移动端html

在这里插入图片描述

动态设置font-size

使用JS

<script>
	var fontsize = document.documentElement.clientWidth / 3.75; /* 100px */
	document.documentElement.style.fontSize = fontsize + 'px';
</script>

使用 VW

1个 VW 将屏幕宽度分为100 份。

<style>
	html {font-size: 26.666667vw;}
</style>

在这里插入图片描述
在这里插入图片描述

流式布局示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/common.css" rel="stylesheet" />
		<link href="iconfont/iconfont.css" rel="stylesheet" />
		<title>拉勾网</title>
	</head>
	<body>
		<header>拉勾网</header>
		<section class="m-login">
			<p>10秒钟定制职位</p>
			<div><a href="">去登录</a></div>
		</section>
		<ul class="m-list">
			<li>
				<div class="m-list-item">
					<img src="img/Cgo8PFU1-eCAOfN5AABe4RnEjUU519.png" />
					<div class="m-text">
						<h2>福昕软件</h2>
						<p class="m-item-info"><span class="u-job">软件测试工程师（黑盒测试）</span><span class="u-salary">8k-15k</span></p>
						<i>今天 19:49</i>
					</div>
				</div>
			</li>
			<li>
				<div class="m-list-item">
					<img src="img/CgqKkVcxrdWAXXCsAABISSAPic8095.JPG" />
					<div class="m-text">
						<h2>博乐科技</h2>
						<p class="m-item-info"><span class="u-job">游戏数值策划 [ 北京 ]</span><span class="u-salary">10k-20k</span></p>
						<i>今天 19:48</i>
					</div>
				</div>
			</li>
			<li>
				<div class="m-list-item">
					<img src="img/CgoB5l0xjbWAfKi0AABYdgbzWyQ168.jpg" />
					<div class="m-text">
						<h2>数美</h2>
						<p class="m-item-info"><span class="u-job">销售 [ 深圳 ]</span><span class="u-salary">20k-30k</span></p>
						<i>今天 19:43</i>
					</div>
				</div>
			</li>
			<li>
				<div class="m-list-item">
					<img src="img/CgoB5l0xjbWAfKi0AABYdgbzWyQ168.jpg" />
					<div class="m-text">
						<h2>数美</h2>
						<p class="m-item-info"><span class="u-job">销售总监 [ 深圳 ]</span><span class="u-salary">15k-30k</span></p>
						<i>今天 19:43</i>
					</div>
				</div>
			</li>
			<li>
				<div class="m-list-item">
					<img src="img/CgYXBlWRLECAP8-7AABCg8zaqRc308.png" />
					<div class="m-text">
						<h2>斗象科技</h2>
						<p class="m-item-info"><span class="u-job">安全研究员（Web方向） [ 上海 ]</span><span class="u-salary">10k-20k</span></p>
						<i>今天 19:42</i>
					</div>
				</div>
			</li>
			<li>
				<div class="m-list-item">
					<img src="img/CgYXBlWRLECAP8-7AABCg8zaqRc308.png" />
					<div class="m-text">
						<h2>斗象科技</h2>
						<p class="m-item-info"><span class="u-job">安全服务工程师 [ 北京 ]</span><span class="u-salary">10k-18k</span></p>
						<i>今天 19:42</i>
					</div>
				</div>
			</li>
			<li>
				<div class="m-list-item">
					<img src="img/CgotOV2IK22AKZQVAAA-SfVp0uE669.png" />
					<div class="m-text">
						<h2>Versa</h2>
						<p class="m-item-info"><span class="u-job">算法总监 [ 上海 ] </span><span class="u-salary">65k-80k</span></p>
						<i>今天 19:36</i>
					</div>
				</div>
			</li>
			<li>
				<div class="m-list-item">
					<img src="img/Cgq2xlqxzCOAaIMbAACbIZZXNtE514.jpg" />
					<div class="m-text">
						<h2>诺达教育</h2>
						<p class="m-item-info"><span class="u-job">SEM专员 [ 深圳 ]</span><span class="u-salary">7k-12k</span></p>
						<i>今天 19:32</i>
					</div>
				</div>
			</li>
			<li>
				<div class="m-list-item">
					<img src="img/CgotOV1KfR2ADmZTAADFXsFUnJI570.png" />
					<div class="m-text">
						<h2>小叶子The ONE</h2>
						<p class="m-item-info"><span class="u-job">课程顾问 [ 北京 ]</span><span class="u-salary">15k-30k</span></p>
						<i>今天 19:29</i>
					</div>
				</div>
			</li>
			<li>
				<div class="m-list-item">
					<img src="img/Cgp3O1h4h6GAFFvpAAAcL7c_a-g125.png" />
					<div class="m-text">
						<h2>晓教育</h2>
						<p class="m-item-info"><span class="u-job">薪酬核算主管/专员 [ 广州 ]</span><span class="u-salary">5k-8k</span></p>
						<i>今天 19:24</i>
					</div>
				</div>
			</li>
		</ul>
		<a class="m-load-more" href="">加载更多</a>
		<footer>
			<p>©2020 lagou.com, all right reserved </p>
			<a href="">移动版 · </a>
			<a class="active" href="">电脑版 · </a>
			<a href="">回顶部</a>
		</footer>
		<div class="bar">
			<a class="active" href=""><i class="iconfont icon-fangzi"></i> 职位</a>
			<a href=""><i class="iconfont icon-search"></i> 搜索</a>
			<a href=""><i class="iconfont icon-wode"></i> 我的</a>
		</div>
	</body>
</html>


* {margin: 0; padding: 0;}
ul {list-style: none;}
img {display: block;}
a {text-decoration: none; color: #555;}

header {height: 45px; line-height: 45px; font-size: 20px; color: white; text-align: center; background-color: #00b38a;}

.m-login {display: flex; justify-content: space-between; align-items: center; height: 43px; font-size: 14px;
	border-bottom: 1px #ddd solid;}
.m-login p {margin-left: 16px;}
.m-login div {width: 84px; height: 30px; margin-right: 15px; text-align: center; border-radius: 15px; background-color: #f5f5f5;}
.m-login a {display: flex; align-items: center; justify-content: center; height: 100%; font-size: 16px; color: #00b38a;}

.m-list li {padding: 14px;}
.m-list-item {display: flex; justify-content: flex-start; height: 64px; width: 100%; border-bottom: 1px #e8e8e8 solid;}
.m-list-item img {height: 60px; width: 60px; margin-right: 10px;}
.m-list-item .m-text {display: flex; flex-direction: column; align-items: flex-start; width: 100%;}
.m-list-item h2 {font-size: 18px;}
.m-list-item .m-item-info {display: flex; justify-content: space-between; height: 15px; width: 100%; margin-bottom: 6px;
	line-height: 16px; color: #333;}
.m-list-item .m-item-info span {display: inline-block;}
.m-list-item .u-job {font-size: 12px;}
.m-list-item .u-salary {margin-right: 14px; font-size: 16px; color: #17b994;}
.m-list-item i {width: 100%; font-size: 10px; font-style: normal; color: #999;}

.m-load-more {display: block; height: 50px; line-height: 50px; text-align: center; background-color: #fafafa;}

footer {width: 100%; margin-top: 30px; padding-bottom: 80px; text-align: center; font-size: 10px;}
footer a {line-height: 32px;}
footer .active {color: #999;}

.bar {position: fixed; bottom: 0; display: flex; width: 100%; height: 45px; 
	border-top: 1px #e8e8e8 solid; font-size: 18px; color: #c2cfcc; background-color: #f6f6f6;}
.bar a {flex: 1; line-height: 45px; text-align: center;}
.bar i {font-size: 22px;}
.bar .active {color: #00b38a;background-color: #e7f3f0;}

iphone6

在这里插入图片描述
在这里插入图片描述

ipad

在这里插入图片描述
在这里插入图片描述

rem布局示例

<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/rem.css" rel="stylesheet" />
		<link href="iconfont/iconfont.css" rel="stylesheet" />
		<title>拉勾网</title>
		<style>
			html {font-size: 26.666667vw;}
		</style>
	</head>

* {margin: 0; padding: 0;}
ul {list-style: none;}
img {display: block;}
a {text-decoration: none; color: #555;}

header {height: .45rem; line-height: .45rem; font-size: .2rem; color: white; text-align: center; background-color: #00b38a;}

.m-login {display: flex; justify-content: space-between; align-items: center; height: .43rem; font-size: .14rem;
	border-bottom: .01rem #ddd solid;}
.m-login p {margin-left: .16rem;}
.m-login div {width: .84rem; height: .3rem; margin-right: .15rem; text-align: center; border-radius: .15rem; background-color: #f5f5f5;}
.m-login a {display: flex; align-items: center; justify-content: center; height: 100%; font-size: .16rem; color: #00b38a;}

.m-list li {padding: .14rem;}
.m-list-item {display: flex; justify-content: flex-start; height: .64rem; width: 100%; border-bottom: .01rem #e8e8e8 solid;}
.m-list-item img {height: .6rem; width: .6rem; margin-right: .1rem;}
.m-list-item .m-text {display: flex; flex-direction: column; align-items: flex-start; width: 100%;}
.m-list-item h2 {font-size: .18rem;}
.m-list-item .m-item-info {display: flex; justify-content: space-between; height: .15rem; width: 100%; margin-bottom: .06rem;
	line-height: .16rem; color: #333;}
.m-list-item .m-item-info span {display: inline-block;}
.m-list-item .u-job {font-size: .12rem;}
.m-list-item .u-salary {margin-right: .14rem; font-size: .16rem; color: #17b994;}
.m-list-item i {width: 100%; font-size: .1rem; font-style: normal; color: #999;}

.m-load-more {display: block; height: .5rem; line-height: .5rem; font-size: .12rem; text-align: center; background-color: #fafafa;}

footer {width: 100%; margin-top: .3rem; padding-bottom: .8rem; text-align: center; font-size: .1rem;}
footer a {line-height: .32rem;}
footer .active {color: #999;}

.bar {position: fixed; bottom: 0; display: flex; width: 100%; height: .4rem; 
	border-top: .01rem #e8e8e8 solid; font-size: .18rem; color: #c2cfcc; background-color: #f6f6f6;}
.bar a {flex: 1; line-height: .4rem; text-align: center;}
.bar i {font-size: .22rem;}
.bar .active {color: #00b38a;background-color: #e7f3f0;}

iphone6

在这里插入图片描述

ipad

在这里插入图片描述

Hung武
关注
专栏目录
html div布局
05-17
css+div
HTML+CSS学习笔记（一）——网页布局
徐徐小法师的技术博客
07-26 828
HTML+CSS基础的标签和属性都掌握后，开始进行网站开发时，往往会遇到布局上的困难。所以本学习笔记从布局开始讲起，相关的基础知识可以参见W3C网站：http://www.w3school.com.cn/。 1、CSS框模型 首先，需要掌握基本的框模型，如下图所示。 从内到外分别是元素、内边距、边框、外边距。需要注意的是，在CSS中的width和heigh
HTML学习笔记（网页布局）
weixin_47878443的博客
02-11 479
HTML网页布局：1.传统的DIC+CSS布局。2.HTML5语义化标签+CSS3布局。3.响应式布局
html学习笔记(布局<div>)
qq_36676979的博客
03-23 143
HTML 布局 - 使用<div> 元素 div 元素是用于分组 HTML 元素的块级元素。 下面的例子使用五个 div 元素来创建多列布局： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程</title> </head...
HTML布局
wonderJQ的博客
04-17 186
用&lt;div&gt;写下表代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt;&lt;body&gt; &lt;div i
html css js全套学习笔记＋举例
最新发布
04-16
通过笔记和实例的实践，你可以逐步理解并掌握这些概念，从而从零开始建立起前端开发的能力。 在实际应用中，前端开发者通常会将HTML、CSS和JavaScript结合使用，构建功能丰富且美观的网页。例如，可以使用HTML创建...
web第二期学习笔记 ，主要是布局，HTML5
06-18
在本篇web第二期的学习笔记中，我们涵盖了前端开发中的一些关键...综上所述，这期学习笔记涵盖了前端开发中HTML5的布局、样式控制和新特性，以及CSS3的转换和动画效果，对于提升网页设计和开发能力有着重要的指导意义。
Extjs学习笔记之七 布局
10-29
以上介绍的只是Extjs布局管理中的一小部分，Extjs官网提供了丰富的例子和详细的文档，这是学习Extjs布局的最佳资源。通过官网的例子，可以直观地看到不同布局类型的效果和配置方法，极大地便利了开发者的布局实践和...
HTML的布局
FairyKunKun的博客
04-01 1013
重中之重 需求： Html默认采用文档流布局方式：浏览器会自上而下，从左到右依次显示标签元素，遇到块级元素则独占一行，行级元素同行共存。 两个块级元素如何在同一行显示？ 办法1：使用display inline 或inline-block ----》打破默认的文档流布局方式。 问题： 办法2：使用浮动技术。 float: none 默认的文档流 left左浮动 right右浮动 原始素材 <!DO...
HTML基本布局
weixin_51150444的博客
10-12 421
块级元素和行内元素区别： Html里面的容器（body、div、…）他们的宽度，都是默认为你显示屏的宽度，但是高度，可以不设置，让里面的内容进行撑高，而他的行内标签（span、a、b、p…）他们的宽度和高度，都是只能根据它里面的文子大小进行自动撑开，没办法设置他们的宽度，和高度。 但是，若想实现对一个a、span、…等标签设置宽度、高度，就要用display：block设置成块状元素，也就是类似一块div的元素 想让一个容器居中，你可能一开始的想法是center，但是center并不可以对容器居中，只能对容
Html 布局总结
wangyihero8的专栏
07-12 361
1、<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。 2、文本格式化标签 ...
HTML——上中下布局
笨鸟
10-31 4610
上中下布局是最基本的布局方式，本例假设用户屏幕分辨率为800*600像素。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 上中下布局 body{ background: #42413C ; margin: 0
一行css代码轻松实现前端响应式布局（vw+rem）
weixin_34318956的博客
12-08 410
大家知道rem可以用来做响应式布局，只是html元素上的font-size样式需要根据屏幕宽度来指定。 之前有用@media媒体查询，根据各种屏幕宽度写html的样式，也用过类似lib-flexible这样的js库动态改变html样式，总觉得挺麻烦的。 今天突然想到vw这个单位，发现用它来做响应式布局实在太方便了。 只需一行css： ht...
Rem布局是如何实现响应式的？
Always-Learning
04-20 923
从一个实际例子来看Rem布局是如何实现响应式的 首先rem是一个相对单位，指的是相对于根元素html的font-size的大小，假如根元素font-size大小为16px，那么1rem就是16px，2rem就是32px，但是px是一个绝对单位，如果我们将根元素的font-size设置为一个绝对单位，那么是无法实现响应式布局的，因此，我们可以给根元素的font-size的大小设置为一个动态单位vw。 给根元素的font-size指定为动态单位vw 请看下面的例子： /* 100vw -->
手机端font-size:31.25vw原理
xiasohuai的博客
11-11 1805
移动端布局一般使用：             方法一：媒体查询 + rem + 弹性盒子布局             方法二：vw + rem + 弹性盒子布局 这里说一下vw原理：         vw它是根据可视区的宽度来计算的         如果是10vw，就是当前移动设备(浏览器)宽度的十分之一大小         vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%） ...
手机h5布局（二）适配
sky的博客
11-30 943
上一篇说到flex布局，这篇说下我的从切图到前端适配的方案。 关于字体是否需要适配大小，个人观点，如果是确定是手机端使用（不包括ipad等较大屏幕）可以使用px为单位。 1.关于切图视觉图一般会做基于iPhone6的2倍去做750*1334（高度跟随内容变化）并标注大小，切图可以切@2X或@3X的。2.关于前端 这里用到的是rem； rem（font size of the root el
HTML与CSS基础学习笔记
“html和css笔记，包括HTML基础、XHTML注意事项、常用标签等内容，结合了书籍、网站和知名专家的资源，以及各种网页调试工具的介绍。” HTML与CSS是构建网页设计的基础，它们分别负责网页的结构和样式。HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值