第四次web前端学习笔记

最新推荐文章于 2024-05-06 12:21:01 发布

金清泽

最新推荐文章于 2024-05-06 12:21:01 发布

阅读量228

点赞数 2

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/m0_53752829/article/details/112848761

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

学习目标：

掌握css背景图片和浮动样式

学习内容：

1、 css的背景图片 2、 css的浮动定位

学习时间：

2021年1月10日

学习产出：

1、技术笔记 1 遍 2、CSDN 技术博客 1 篇

css的背景图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			
			body{
				width: 100%;
				height: 500px;
				/* 添加背景图片 
					url：统一资源定位符，需要指定路劲
					none
					背景图片默认会在水皮和垂直方向重复出现，这么效果称为墙纸效果
				*/
				/* background-image: url(img/2.jpg); */
				/* 设置背景图的平铺效果background-repeat  
					属性值：repeat-x水平方向重复出现
						   repeat-y 垂直方向重复出现
						   no-repeat 仅出现一次
				 */
				/* background-repeat: no-repeat; */
				padding: 0;
				margin: 0;
			}
			.airplane{
				width: 100%;
				/* 
					使用padding-top来撑起容器的高度  （容器高度=高/宽*100%）
				 */
				padding-top: 50%;
				margin: 0 auto;
				background-image: url("//img.58cdn.com.cn/ui6/my/images/reg-bg.png");
				background-repeat: no-repeat;
				/* 默认填充满屏幕 */
				background-size: 100%;
				/* 设置背景图的位置固定 */
				background-attachment: fixed;
				/* 调整图片的位置 */
				background-position: right;
			} 
			
			/* 
			    图片位置的调试
			    .important{
				background-image: url(img/2.jpg);
				background-repeat: no-repeat;
				width: 600px;
				height: 400px;
				background-position: top;
				
			} */
		</style>
	</head>
	<body>
		<div class="airplane">
			
		</div>
		
		<div class="important">
			
		</div>
	</body>
</html>

css的浮动定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 
				流定位：默认的定位方式，页面中的元素按照块元素和内联元素的方式排列
					    块元素：从上到下
						内联元素：从左到右水平排列
				浮动定位：浮动定位会脱离文档流
			 */
			
			#d0,p{
				width: 200px;
				border: 1px solid red;;
			}
			#d1,#d2,#d3{
				width: 100px;
				height: 100px;
				margin: 5px;
				border: 1px solid red;
			}
			
			#d1,#d2,#d3{
				/* 开启浮动定位
					浮动定位只能左浮动和右浮动，浮动时不能超过父元素的边框
				 */
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="d0">
			<div id="d1">d1</div>
			<div id="d2">d2</div>
			<div id="d3">d3</div>
		</div>
		<p>定位时观察我的位置</p>
	</body>
</html>