Web——day06——流式布局

最新推荐文章于 2024-07-11 22:36:37 发布
最新推荐文章于 2024-07-11 22:36:37 发布
阅读量55 收藏
点赞数
分类专栏： Web学习 文章标签： web html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45792414/article/details/119280647
版权

流式布局

（1）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width,user-scalable=no,
		initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
		<title></title>
		<style>
			/*移动端css中padding和margin不改变盒子的大小*/
		</style>
	</head>
	<body>
		<!--  在手机端中使用二倍图，不然会导致模糊-->
		<!-- 缩放后的高度：x=500/300*200 -->
		<!-- background-size: 背景图片宽度 背景图片高度 -->
		<!-- 单位： 长度|百分比|cover|contain
			 cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
			 contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
		-->
		<!-- em不固定长度单位 百分比 根据屏幕的大小更改 -->
		<!-- 试用各种设备，使用rem -->
	</body>
</html>

流式布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>流式布局</title>
		<style>
			*{margin: 0;}
			html,body{
				width: 100%;
				height: 100%;
			}/*有这个下面可以打height:100%;*/
			.box{
				width: 100%;
				/*不写也是100%*/
				height: 100%;
				/*直接设置高度为100%是不管用的*/
				max-width: 123%;
				background-color: antiquewhite;
			}
			.box div{
				border: 1px solid;
				border-radius: 30px;
				width: 32%;
				height: 100%;
				float: left;
			}	
			.box div:nth-child(1){
				background-color: rgba(255,0,0,0.3);
			}
			.box div:nth-child(2){
				background-color: rgba(0,255,0,0.3);
			}
			.box div:nth-child(3){
				background-color: rgba(0,0,255,0.3);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
		
	</body>
</html>

代码运行结果：
在这里插入图片描述

流式模型（1）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				background-color: #FFC0CB;
			}
			.box>div{
				float: left;
				height: 100px;
				box-sizing: border-box;/*css3盒子模型,边框不影响尺寸*/
				/*margin-right: calc(100% - 50px - );*//*可以利用这个公式来计算
				百分数和像素的差*/
				margin-right: 0.5%;
			}
			.box>div:nth-child(1){
				width: 49.5%;
				background-color: rgba(0,255,0,0.5);
				border: 1px solid #000000;
				padding: 10px;
				
			}
			.box>div:nth-child(2){
				width: 24.5%;
				background-color: rgba(0,0,0,0.5);
			}
			.box>div:nth-child(3){
				width: 24.5%;
				background-color: rgba(255,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>
</html>

代码的运行结果：
在这里插入图片描述

流式模型（2）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			nav{
				background-color: #FFC0CB;
				overflow: hidden;
			}
			nav>a{
				float: left;
				height: 320px;
				box-sizing: border-box;
				text-align: center;
				margin-right: 1%;
			}
			nav>a:nth-child(1){
				width: 49%;
				background-color: rgba(0,255,0,0.5);
				border: 1px solid;
			}
			nav>a:nth-child(2){
				width: 24%;
				background-color: rgba(0,0,0,0.5);
				/*padding-right: 30px;*/
			}
			nav>a:nth-child(3){
				width: 24%;
				background-color: rgba(255,0,0,0.5);
			}
			nav>a>img{
				width: 200px;
				/*display: block;*/
			}
		</style>
	</head>
	<body>
		<nav>
			<a><img src="img/cat.jpg"></a>
			<a><img src="img/cat.jpg"></a>
			<a><img src="img/cat.jpg"></a>
		</nav><!--导航-->
	</body>
</html>

代码的运行结果：
在这里插入图片描述

——The End

子曰礼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端学习笔记——Day5
qq_43338468的博客
05-08 168
七、css的float属性（最重要） 先来了解一下block元素和inline元素在文档流中的排列方式。 ​ block元素通常被实现为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性； ​ inline元素不会独占一行，多个相邻的行内元素会排在同一行里，直到一行排列...
移动web——学习笔记整理
Thaley的博客
01-22 3299
学习笔记整理——移动web(黑马的)
记录我的java之路——day26(周更)
Adventure的博客
08-20 391
玩转bootstrap Bootstarp介绍 概述 ​ Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地 构建基于 PC 及移动端设备的 Web 页面需求。 ​ 2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问...
web前端——html、css、JavaScript学习总结(持续更新中.......)
悟道子HD
03-08 749
一、html中tr,td...等的英文扩写分别是？ 是table data 的缩写，标准单元格 是table row 的缩写，表格中的一行； 是table heading 的缩写，表头单元格 二、HTML标签和元素的区别, 非(空)元素(标签)？ 标签：形如，由一对尖括号和表示标签含义的“关键字”构成。 元素：形如一些内容，由开始标签、结束标签以及标签中包含的内容构成。元素( 范围 ) > 标签 三、html5手册运行html代码时提示错误
一起学java——Day01.txt
04-03
从0开始一起学java，互帮互助 本文主要讲述变量，数据类型，Scanner类的应用以及printf()的相关知识
微信小程序——day02.zip
01-11
在"微信小程序——day02"的学习主题中，我们将深入探讨微信小程序开发的基础和进阶知识。 1. **环境配置**：首先，你需要安装微信开发者工具，这是创建和调试小程序的必备平台。下载并安装后，可以通过工具进行项目...
Oracle学习笔记——day01
09-02
Oracle数据库是世界上最流行的数据库管理系统之一，广泛用于企业级的数据存储和管理。在Oracle学习的第一天，我们主要关注了SQL语句，这是与Oracle交互的基础。SQL主要包括三种类型的语言：DML（数据操作语言）、DDL...
Oracle学习笔记——day02
09-02
在Oracle数据库的学习过程中，Day02涵盖了基础的SQL语句，主要包括数据表的创建、数据插入、查询以及多表之间的关联操作。以下是对这些知识点的详细解析： 1. 数据表创建： 在Oracle中，创建数据表是通过`CREATE ...
Oracle学习笔记——day05
09-02
Oracle数据库是世界上最流行的数据库管理系统之一，广泛用于企业级的数据存储和管理。在Oracle学习笔记的第五天中，主要探讨了数据库中的连接查询、子查询、集合操作以及SQL注入防范等重要概念。...
标准盒模型和怪异盒子模型的区别
karlaofsky的博客
07-08 298
盒模型描述了一个 HTML 元素所占用的空间，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
一文清晰了解HTML——简单实例
weixin_73074505的博客
07-08 244
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
vue学习day02-Vue指令-v-html、v-show与v-if、v-else与v-else-if、v-on、v-bind、v-for、v-model
2301_76648183的博客
07-07 657
当表达式值为true时，无显著区别，当值为false时，v-show通过控制css的display：none来控制显示与隐藏。如果不加key，v-for的默认行为会尝试原地修改元素（就地复用）提供一个地址，这里是百度的地址，通过v-html渲染。作用：设置元素的innerHTML。语法：v-html=“表达式”提供一个布尔值和两个盒子。点击“切换显示与隐藏”
HTML 基础
最新发布
2302_77179144的博客
07-11 594
文章目录HTML 结构认识 HTML 标签HTML 文件基本结构快速生成代码框架HTML 常见标签注释标签标题标签: h1-h6段落标签: p换行标签: br格式化标签图片标签: img超链接标签: a表格标签列表标签表单标签form 标签input 标签label 标签select 标签textarea 标签无语义标签: div & span综合案例: 填写简历信息Emmet 快捷键HTML 特殊字符 HTML: 页面有哪些元素组成 CSS:这些元素的样式、布局、排版等 JS:这些元素之间如何交
html js 3d z轴移动 实现星空
从事厨房信息化行业，万能对接所有点餐系统，kds，智能控菜，酒店协调软件
07-11 75
用chatgpt还有kimi 让实现动画效果的星空，都太垃圾了。我要z轴移动，他们就是搞不出来，不是y轴移动，就是x轴移动，ai写代码还有很长的路。
springmvc前端jsp与html
paulwang040的博客
07-08 357
在实际的项目中，JSP和HTML往往不是非此即彼的关系，而是可以结合使用的。例如，可以使用HTML来构建页面的基本结构和静态内容，对于需要动态展示的数据，则可以通过Ajax技术从服务器端获取JSON格式的数据，然后在前端使用JavaScript和DOM操作来动态更新页面内容。动态内容生成：如果需要在HTML页面中展示动态内容，通常需要通过JavaScript（Ajax等）技术从服务器端获取数据后，再通过DOM操作来动态更新页面，这增加了前端开发的复杂度。轻量级：HTML页面加载速度快，对服务器压力小。
HTML集成优雅的实时输入清除功能
你羡慕的生活都是你没熬过的苦。
07-11 274
通过上述步骤，我们可以轻松地在网页表单中实现一个实用且美观的实时输入清除功能。这不仅提高了用户交互的便利性，也增强了整体的用户体验。希望这篇文章能帮助你优化自己的网站或应用程序的用户界面设计。
HTML(27)——渐变
m0_74386799的博客
07-08 394
渐变是多个颜色逐渐变化的效果，一般用于设置盒子模型。
【HTML入门】第四课 - 换行、分割横线和html的注释
xingyu_qie的专栏
07-08 398
这一小节，我们继续说HTML的入门知识，包括换行、横线分割以及注释（html的注释）。
jQuery插件之——简单日历
05-23
} else if (day > daysInMonth) { html += '<td></td>'; } else { html += '<td>' + day + '</td>'; day++; } } html += '</tr>'; if (day > daysInMonth) { break; } } html += '</table>'; var ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值