课堂笔记——页面布局

最新推荐文章于 2024-10-03 22:12:17 发布
最新推荐文章于 2024-10-03 22:12:17 发布
阅读量208 收藏 1
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AI_____/article/details/127347848
版权

一个页面布局

HTML

<!DOCTYPE html>
<!-- saved from url=(0098)file:///C:/Users/ASUS/Desktop/%E5%B8%83%E5%B1%80/20200704%E5%B8%83%E5%B1%80%E4%BD%9C%E4%B8%9A.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href= "zasx.css" type="text/css" rel="stylesheet">
    <title>布局</title>
</head>
<body>
    <div class="llio">
		<div class="iojk">
			<div class="qwqs">
				<div class="qbghf">
				</div>
				<div class="qbghr">
				</div>
				</div>
        </div>
		<div class="ijkn">
			<div class="mmih">
				<div class="mmkzf">
					</div>
				<div class="mmkzr">
					</div>
				</div>
			</div>
		</div>
    <div class="ljki">
		<div class="iljq">
			</div>
		<div class="iljy">
			<div class="iljyz">
				</div>
			<div class="iljyc">
				<div class="iljyuu">
				   <div class="iljkm">
				   </div>
				     <div class="injkloi">
					 </div>
					<div class="zasddd">
						</div>
					</div>
					<div class="iljyuu">
						<div class="iljkm">
						</div>
						  <div class="injkloi">
						  </div>
						 <div class="zasddd">
							 </div>
						 </div>
						 <div class="iljyuu">
							<div class="iljkm">
							</div>
							  <div class="injkloi">
							  </div>
							 <div class="zasddd">
								 </div>
							 </div>
							 <div class="iljyuu">
								<div class="iljkm">
								</div>
								  <div class="injkloi">
								  </div>
								 <div class="zasddd">
									 </div>
								 </div><br>
					<div class="iljyuu">
									<div class="iljkm">
									</div>
									  <div class="injkloi">
									  </div>
									 <div class="zasddd">
										 </div>
									 </div>
									 <div class="iljyuu">
										<div class="iljkm">
										</div>
										  <div class="injkloi">
										  </div>
										 <div class="zasddd">
											 </div>
										 </div>
										 <div class="iljyuu">
											<div class="iljkm">
											</div>
											  <div class="injkloi">
											  </div>
											 <div class="zasddd">
												 </div>
											 </div>
											 <div class="iljyuu ">
												<div class="iljkm">
												</div>
												  <div class="injkloi">
												  </div>
												 <div class="zasddd">
													 </div>
												 </div>
				</div>
		</div>
		<div class="iljk">
			<div class="iljki">
				</div>
			<div class="zassq">
				<div class="xxxsa">
					</div>
					<div class="xwxsa">
						<div class="aasdq">
							<div class="zaqw">
								</div>
							<div class="zasza">
								<div class="zzzx">
									</div>
								<div class="zzxcx">
									<div class="ssdaa">
										</div>
									<div class="sadsa">
										<div class="mnbgw">
											</div>
										<div class="mnbge">
											</div>
										</div>
									</div>
								</div>
							</div>
						<div class="aasdq">
								<div class="zaqw">
									</div>
								<div class="zasza">
									<div class="zzzx">
										</div>
									<div class="zzxcx">
										<div class="ssdaa">
											</div>
										<div class="sadsa">
											<div class="mnbgw">
												</div>
											<div class="mnbge">
												</div>
											</div>
										</div>
									</div>
								</div>
						<div class="aasdq">
									<div class="zaqw">
										</div>
									<div class="zasza">
										<div class="zzzx">
											</div>
										<div class="zzxcx">
											<div class="ssdaa">
												</div>
											<div class="sadsa">
												<div class="mnbgw">
													</div>
												<div class="mnbge">
													</div>
												</div>
											</div>
										</div>
									</div>
						<div class="aasdq">
										<div class="zaqw">
											</div>
										<div class="zasza">
											<div class="zzzx">
												</div>
											<div class="zzxcx">
												<div class="ssdaa">
													</div>
												<div class="sadsa">
													<div class="mnbgw">
														</div>
													<div class="mnbge">
														</div>
													</div>
												</div>
											</div>
										</div>
					</div>
				</div>
				<div class="zasoi">
					<div class="gjkiu">
						</div>
					<div class="gjkiq">
						</div>
					<div class="gjkix">
						<div class="xzzxza">
							</div>
						<div class="xzweq">
							</div>
						<div class="xzrew">
							</div>
						</div>
					<div class="gjkis">
						</div>
				</div>
        </div>
        </div>
    <div class="lmnj">
		<div class="lmnjk">
			<div class="lmmkj">
				</div>
			<div class="lkkjk">
				</div>
			</div>
        </div>

</body></html>

CSS

.llio{
    width:100%;
    height:150px;
    background-color: darkviolet;
}
.ljki{
    width:100%;
    height:1750px;
    background-color: darkmagenta;

}
.lmnj{
    width:100%;
    height:80px;
    background-color: #000000;
}
.qwqs{
	width: 70%;
	height: 100%;
	background-color: palevioletred;
	margin: 0 auto;
}
.qbghf{
	width: 40%;
	height:100%;
	background-color: paleturquoise;
	float: left;
}
.qbghr{
	width: 20%;
	height:100%;
	background-color: paleturquoise;
	float: right;
}
.mmih{
	width:70%;
	height:100%;
	background-color: rosybrown;
	margin: 0 auto;
}
.mmkzf{
	width: 50%;
	height:100%;
	background-color: sandybrown;
	float: left;
}
.mmkzr{
	width: 30%;
	height:100%;
	background-color: sandybrown;
	float: right;
}
.iojk{
	width:100%;
	height:100px;
}
.ijkn{
	width:100%;
	height:50px;
	background-color: springgreen;
}
.iljq{
	width:70%;
	height:300px;
	background-color: aliceblue;
	margin: 0 auto;
	margin-top:5px;
}
.iljy{
	width:70%;
	height:400px;
	background-color: aquamarine;
	margin: 0 auto;
	margin-top:10px;
}
.iljk{
	width:70%;
	height:1000px;
	background-color: chartreuse;
	margin: 0 auto;  
	margin-top:10px;
}
.lmnjk{
	margin: 0 auto;
	width:70%;
	height:100%;
	background-color: #ffffff;
}
.lmmkj{
	width:50%;
	height:50%;
	background-color: rgb(241, 172, 67);
}
.lkkjk{
	width:50%;
	height:50%;
	margin: 0 auto;
	background-color: darksalmon;
}
.iljyz{
	width: 70%;
	height:10%;
	background-color: gold;
	}
.iljyc{
	width: 100%;
	height:90%;
	background-color: #ff0000;
	margin: 0 auto;
}
.iljyuu{
	width:24%;
	height:48%;
	float:left;
	background-color: lemonchiffon;
	margin: 3px;
}
.iljkm{
	width:100%;
	height:70%;
	background-color: lightblue;
}
.injkloi{
	width:70%;
	height:15%;
	background-color: lightcoral;
	margin: 0 auto;
}
.zasddd{
	width:50%;
	height:15%;
	background-color: lightcyan;
	margin: 0 auto;
}
.iljki{
	width:100%;
	height:10%;
	background-color: lightpink;
	float: left;
}
.zassq{
	width:68%;
	height:90%;
	background-color: lightseagreen;
	float: left;
}
.zasoi{
	width:30%;
	height:90%;
	background-color: #000000;
	float: left;
	margin-left:17px;
}
.xxxsa{
	width:100%;
	height:15%;
	background-color: #ff0000;
	margin-top:5px ;
}
.xwxsa{
	width:100%;
	height:82%;
	background-color: coral;
	margin-top: 20px;
}
.aasdq{
	width:98%;
	height:24%;
	background-color: deeppink;
	margin: 5px;
}
.zaqw{
	width:50%;
	height:20%;
	background-color: gold;
}
.zasza{
	width:100%;
	height:80%;
	background-color: gray;
}
.zzzx{
	width:40%;
	height:100%;
	background-color: greenyellow;
	float: left;
}
.zzxcx{
	width:58%;
	height:100%;
	background-color: green;
	margin-left: 10px;
	float: left;
}
.ssdaa{
	width: 97%;
	height:80%;
	background-color: honeydew;
	margin: 0 auto;
}
.sadsa{
	width:97%;
	height:20%;
	background-color: indigo;
	margin: 0 auto;
}
.mnbgw{
	width:50%;
	height:100%;
	background-color: maroon;
	float: left;
}
.mnbge{
	width:20%;
	height:100%;
	background-color: mediumspringgreen;
	float: right;

}
.gjkiu{
	width: 100%;
	height: 5%;
	background-color: mediumturquoise;
	margin-top:10px ;
}
.gjkiq{
	width:100%;
	height:15%;
	background-color: hotpink;
	margin-top:10px ;
}
.gjkix{
	width: 100%;
	height:60%;
	background-color: khaki;
	margin-top:10px ;
}
.gjkis{
	width: 100%;
	height: 15%;
	background-color: lightgrey;
	margin-top:10px ;
}
.xzzxza{
	width: 100%;
	height:33%;
	background-color: orange;
}
.xzweq{
	width: 100%;
	height:33%;
	background-color: orangered;
}
.xzrew{
	width: 100%;
	height:33%;
	background-color: paleturquoise;
}

不规范的命名格式一看就很像初学者，拿去交作业老师决对不会怀疑你。

温馨提示——不弹

AI_____
关注
Amazon on compus 面经
Hanwenwangad的专栏
02-14 4930
coding题 circular sorted linked list的插入，backtracking走迷宫，还有内存管理的LUR算法~ 这三种题型。 编程题用C++的话，不支持自己写子函数。递归只能自己写Stack. 这里有面经，加油吧，把所有的Case都过了就好了。 http://www.1point3acres.com/bbs/thread-16
Web页面设计实训课堂笔记——导航栏_06DYL
weixin_44762370的博客
03-22 291
导航栏（一级菜单）学习 关于导航栏的代码实现 可分别用<div>与ul il 两种方法实现 方法一总体代码： <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> ...
CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)...
weixin_30871905的博客
12-08 779
一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。常见的功能如下： 1.1.1、向上移动 当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不...
前端学习笔记：网页布局总结
weixin_43339892的博客
12-30 232
网页布局总结 一个完整的网页，是由标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。 1.标准流 可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局 2.浮动 可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局 3.定位 定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局 ...
background-color颜色名及其编码
m0_62064241的博客
01-15 1万+
以下举例大多数浏览器公认的background-color颜色名及其编码； 要想对HTML颜色有更多的了解可以转向以下链接学习： https://www.w3school.com.cn/html/html_colors.asp
解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%
热门推荐
相濡以沫不如相忘于江湖.
09-16 13万+
Access to XMLHttpRequest at 'file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE/dist/model/model.gltf.xz' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data,
LOSER的课堂笔记之————弹性布局
qq_72174695的博客
07-31 352
弹性布局
Android课堂学习笔记——Fragment
King_HT96的博客
03-06 324
Fragment学习笔记 什么是Fragment 1.我对Fragment的认知 我们将Fragment称之为“碎片”，在日常代码编写中，Fragment的使用也很频繁，当前的一些主流APP基本也是使用Fragment做布局的。今天我们学的也主要是Fragment用于不同选项间做切换，我觉得我们可以把Fragment看做是一个Activity，Activity在程序运行时被创建，而Fra...
Android设计与开发——Layout课堂笔记
ALYUTING的博客
09-23 248
在Android studio建立新页面 Res->layout->右键new->Activity->Empty Activity 1.布局三个按钮 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="150dp" android
基于微信小程序的“自由课堂——旁听课”的设计与实现.zip
10-16
"自由课堂——旁听课"是利用微信小程序平台开发的一款在线教育应用，旨在为用户提供便捷的旁听学习体验。本文将详细解析该应用的设计理念、功能实现以及技术选型，帮助读者理解如何通过微信小程序构建一个高效、易用...
斑码教育大前端课堂笔记-css第一天
11-24
【CSS第一天】——斑码教育大前端课堂笔记详解 斑码教育是专注于IT技术培训的机构，其在前端开发领域的教学资源备受关注。本篇笔记是斑码教育sy101课程的第一天内容，主要围绕CSS（Cascading Style Sheets）展开，...
基于HTML、CSS和JavaScript的滚动数字显示效果，类似于老式计数器或电子表上的数字滚动效果
2201_76060199的博客
09-29 1152
这段代码创建了一个数字滚动显示效果，用户可以通过输入框输入金额，或点击按钮生成随机数字，金额数字会以滚动的方式显示。CSS负责布局和样式，JavaScript负责动画效果和逻辑处理。代码中多次使用了相同的IDcounter，这在实际开发中是不推荐的，ID应该是唯一的，这里可能是为了简化示例而重复使用。
使用html写一个能发起请求的登录界面
最新发布
2301_79431343的博客
10-03 625
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
前端编程艺术（1）---HTML
lys20221113242的博客
09-30 1010
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它描述了一个网站的结构骨架，使得浏览器能够展示具有特定格式的文本、链接、图片和其他内容。：主体元素，包含可见的页面内容，如文本、图片、视频、游戏、可播放的音频等。：头部元素，包含元信息，如字符集、页面标题、样式表链接、脚本链接等。标签：HTML标签用于标记文本，以便浏览器知道如何渲染它们。属性：提供关于元素的额外信息，通常在开始标签中规定。：根元素，包裹所有其他HTML元素。
HTML中的padding和margin
学无止境
09-27 873
作用增加元素内部的空间，使内容不显得过于拥挤。可以用来突出元素的重要性或增加视觉层次感。语法（分别对应上、右、下、左的内边距值为 10 像素和 20 像素）。也可以使用缩写形式，如（四个方向内边距均为 10 像素）。示例假设一个<div>元素，设置了，那么这个元素内部的内容与边框之间就会有 20 像素的距离。二、Margin（外边距）Margin 是指元素边框与相邻元素之间的距离。它用于控制元素之间的间隔。作用分隔不同的元素，使页面布局更加清晰。可以用来调整元素在页面中的位置。语法。
【CSS/HTML】左侧固定，右侧自适应的布局方式理解margin负值理论
mengran_code的博客
09-29 688
简单解释下flex: 0 0 200px的用处，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。它的默认值为auto，即项目的本来大小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。是固定宽度的div脱离文档流。
【工欲善其事】巧用 Sublime Text 生成带格式的 HTML 片段
PeacefulWinter的博客
09-30 1174
本文介绍了 Sublime Text 自定义代码片段的操作技巧，非常适合需要快速输入一系列高度格式化的文本内容。配合大量截图，可以快速掌握该技巧，提升日常工作效率。
DOM Comment: Understanding the Power of HTML Comments in Web Development
wjs2024的博客
09-30 694
【代码】DOM Comment: Understanding the Power of HTML Comments in Web Development。
面向对象编程基础——Java课堂笔记解析
"Java学习笔记概述了面向对象编程的核心概念，包括对象的定义、类的抽象、高内聚和低耦合的原则，以及面向对象与面向过程的区别。笔记强调了对象的属性（即数据结构）和方法（即算法），并介绍了类的定义和实例变量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值