【千锋Python2205班9.09笔记-day15-前端基础学习（4）】

最新推荐文章于 2024-07-30 16:49:30 发布

weixin_43600905

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量388

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/weixin_43600905/article/details/126788048

版权

01-css常用属性2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1. 背景相关属性单独操作 -->
		<div id="box1"></div><br>
		<div id="box2">
		</div>
		
		<style>
			#box1{
				width: 300px;
				height: 300px;
				
				/* 1)背景颜色 */
				background-color: skyblue;
			}
			
			#box2{
				width: 200px;
				height: 200px;
				background-color: aliceblue;
				/* 2)单独设置背景图相关属性 */
				/* a.添加背景图 
				   如果背景图比标签小，默认会重复图片，直到把标签填满为止。
				   如果背景图比标签大，只显示标签大小能显示的部分(图片不会缩放)
				*/
				background-image: url(img/花.png);
				/* background-image: url(img/baoer.jpeg); */
				/* background-image: url('https://img2.baidu.com/it/u=1246423168,2248525401&fm=253&fmt=auto&app=138&f=JPEG?w=969&h=500'); */
			
				/* b.设置平铺方式：
				no-repeat  - 不平铺，图片只显示一次
				repeat  -   平铺（将整个标签铺满）
				repeat-x   -  平铺一行
				repeat-y 	-	平铺一列
				*/
				background-repeat: no-repeat;
				
				/* c.背景图固定(子标签在父标签中可以滚动的时候，子标签的背景图固定或者滚动有区别)
					scroll(滚动)/fixed(固定)
				*/
				/* background-attachment: scroll; */
				
				/* d.设置背景图的位置
					水平方向上的对齐方式（left/center/right）或值
					垂直方向上的对齐方式(top/center/bottom)或值
				 */
				background-position:30px 50px;
			
				
			}	
		</style>
		
		<br><br>
		<a href="">&emsp;&nbsp;&nbsp;登录页面，调查问卷</a>
		<style>
			a{
				background-image:url(img/dl.png);
				background-repeat: no-repeat;
				text-decoration: none;
				font-size: 11px;
				color: #909090;
			}
			a:hover{
				color: red;
				text-decoration: underline;
			}
		</style>
		
		
		<!-- 2. 背景相关属性同时操作 -->
		<div id="box3"></div>
		<style>
			#box3{
				width: 800px;
				height: 800px;
				
				/* 直接设置背景相关属性：
					background:背景图地址 平铺方式 x方向位置 y方向位置 背景颜色;
				 */
				background:url("img/baoer.jpeg") no-repeat right top red;
			} 
			
		</style>
		
	</body>
</html>

02-边框标准样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box1"></div>
		<br><br>
		<div id="box2"></div>
		<br><br>
		<div id="box3"></div>
		<style>
			#box1{
				width: 200px;
				height: 100px;
				background-color: yellowgreen;
				
				/* 1.同时设置四个边的边框样式
					border:边框的宽度 边框样式 边框的颜色;
					
					边框样式：solid(实线)/dashed(虚线)dotted(点划线)double(双线)
				 */
				border:5px solid red;
			}
			
			#box2{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				
				/* 2.单独设置四个边的边框样式 
					border-left:
					border-right:
					border-top:
					border-bottom:
				*/
				border-left:5px solid red;
				border-top: 10px dotted hotpink;
			}
			
			
			#box3{
				width: 200px;
				height: 200px;
				background-color: darkcyan;
				border: 10px solid red;
				
				/* 3.同时设置四个角的圆角弧度 */
				/* border-radius: 100px; */
				
				/* 4.单独设置四个角的圆角弧度 */
				border-top-left-radius: 40px;
				border-bottom-right-radius: 40px;
			}
		</style>
		
		
		
		
	</body>
</html>

03-标准流布局

1.标准流布局

标签在没有添加任何布局相关样式的时候，标签默认的布局方式
根据标签在标准流默认布局方式的不同，可以将标签分为三类：块级标签、行内标签、行内块标签

1)块级标签

一个标签占一行；设置宽高有效；默认高度是内容的高度。（常见块级标签: p、h1~h6、div、ul、li）

2)行内标签

一行可以显示多个；设置宽高无效；默认大小是内容大小。（常见行内标签：span、b、i、label等)
3)行内块标签 - 一行可以显示多个；设置宽高有效；默认大小是内容大小。（常见行内块标签：img、input(输入框))

2. display属性

block(块)、inline(行内)、inline-block(行内块)、none(隐藏标签-让标签不显示)
在标准流中可以通过设置标签的display属性来修改标签的类型。

3. 脱流

脱离标准流布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- -----------1.块级标签案例 ---------------->
		<p id="p1">我是段落1</p>
		<p id="p2">我是段落2</p>
		<style>
			#p1,#p2{
				background-color: hotpink;
				font-size: 30px;
				
				width: 300px;
				height: 150px;
			}
		</style>
		
		
		<!-- -----------2.行内标签案例 ---------------->
		<span>我是span1</span>
		<span>我是span2xxxx</span>
		<style>
			span{
				background-color: lawngreen;
				
				width: 300px;
				height: 150px;
			}
		</style>
		
		<!-- -----------3.行内块标签案例 ---------------->
		<img id="img1" src="img/相机.png" alt="">
		<img src="img/hua.png" alt="">	
		<input type="text">
		<input type="text">
		<style>
			#img1{
				width: 100px;
				height: 100px;
			}
			
			input{
				height: 60px;
				width: 300px;
			}
		</style>
		
		
		<!-- -----------4.display修改标签类型案例 ---------------->
		<div id="box1">
			<p class="c1">我是段落3</p>
			<p class="c1">我是段落4</p>
			<a href="">我是超链接1</a>
			<b>我是文字1</b>
			<b>我是文字2</b>
		</div>
		
		<style>
			.c1{
				width: 300px;
				height: 50px;
				background-color: aquamarine;
				
				/* 设置display属性值，修改标签类型 */
				display: inline-block;
			}
			b{
				background-color: lightcoral;
				width: 300px;
				height: 50px;
				
				display: inline-block;
			}
			a{
				/* 隐藏标签 */
				display: none;
			}
			#box1{
				display: block;
			}
		</style>
	</body>
</html>

04-浮动

1. 浮动：

设置标签的float属性可以让标签浮动
left: 左浮动
right: 右浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- -----------------1. 浮动可以让标签脱流------------------- -->
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<a href="" class="c1">我是超链接1</a>
		<a href="" class="c1">我是超链接2</a>
		<style>
			#div1,#div2{
				background-color: aquamarine;
				width: 300px;
				
				/* 让标签浮动 */
				float: left;
			}
			#div1{
				background-color: hotpink;
			}
			
			.c1{
				background-color: thistle;
				width: 300px;
				
				float: right;
			}
		</style>
	</body>
</html>

05-浮动应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 应用：如果需要竖着显示的标签横着来，就使用浮动(页面布局) -->
		<!-- <div style="background-color: saddlebrown; height: 120px;" id="div1">
		</div>
		<div style="height:1000px; width: 20%; background-color: seagreen;" id="div2">
			<div style="background-color: yellow; width: 50%; height:20%;"></div>
		</div>
		<div style="height:1000px; width: 80%; background-color: red;" id="div3"></div>
		
		<style>
			#div2,#div3{
				float: left;
			}
		</style> -->
		
		
		<!-- 如果前面的标签浮动，后面的标签不浮动，就会出现后面的标签被前面的标签覆盖的现象
			解决方法：让后面的标签也浮动
		 -->
		<div id="div1"><p id="p1">我是段落1</p></div>
		<div id="div2">
			<div>div1</div>
		</div>
		<div id="div3"></div>
		
		<style>
			#div1{
				width: 30%;
				height: 150px;
				background-color: red;
				float: left;
				
				position: relative;
			}
			
			#div2{
				width: 70%;
				height: 150px;
				background-color: darkcyan;
				float: left;
			}
			
			#div3{
				width: 100%;
				height: 300px;
				background-color: aqua;
				float: left;
			}
			
			#p1{
				position: absolute;
				bottom: 0px;
			}
		</style>
		
		
		
		
	</body>
</html>

06-定位

1.定位相关属性

1）设置距离的属性

left:	设置当前标签的左边到参考标签的左边的距离
right:	设置当前标签的右边到参考标签的右边的距离
top:	设置当前标签的上边到参考标签的上边的距离
bottom:  设置当前标签的下边到参考标签的下边的距离

2）设置参考标签: position

absolute: 将第一个position的值不是默认值(initial\static)的父标签参考对象。
		  (除了body标签的position不是默认值，其他标签没有设置postion的时候对应的值都是默认值)
relative: 将自己作为后代标签的参考对象
fixed:	相对浏览器进行定位(在浏览器内容滚动的时候不会动)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="div1" style="background-color: red; width: 800px; height: 1800px;">
			<div id="div2" style="background-color: green; width: 400px; height: 400px;">
				<div id="div3" style="background-color: yellow; width: 200px; height: 200px;">	
					<div id="div4" style="background-color: purple; width: 100px; height: 100px;"></div>
				</div>
			</div>
		</div>
		
		<div id="div0" style="background-color: sandybrown; width: 100%; height: 50px;">TOP</div>
		
		<style>
			#div2{
				/* 设置position为relative是希望当前标签可以作为后代标签定位的参考对象 */
				position: relative;
			}
			#div4{
				/* 设置position为position是希望当前标签在定位的时候可以相对父标签(前辈)进行定位 */
				position: absolute;
				right: 30px;
				bottom: 20px;
			}
			
			#div0{
				position: fixed;
				top: 0;
				right: 0;	
			}
		</style>
	</body>
</html>

07-盒子模型

1.盒子模型

一个完整的标签由4个部分组成：content(内容)、padding(内边距)、border(边框)、margin(外边距)

1)content:

设置标签的宽度和和高度，就是设置标签的content的大小;
给标签添加内容，内容是添加在content上的(包括标签文字内容和子标签);
设置标签的背景颜色和背景图，会作用在content上

2)padding:

内边距有4个方向；
设置标签的背景颜色和背景图，会作用在padding上

3)margin:

内边距有4个方向；
外边距看不见但是占位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box1">div</div>
		<div style="background-color: green; height:100px;"></div>
		<div id="box2">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<style>
			#box1{
				width: 200px;
				height: 100px;
				background-color: red;
				
				/* 1. 同时设置4个方向的内边距*/
				padding: 100px;
				
				/* 2.单独设置某个方向的内边距 */
				/* padding-left: 20px; */
				
				/* 3.同时设置4个方向的外边距 */
				/* margin: 100px; */
				
				/* 4.单独设置一个方向的外边距 */
				margin-bottom: 100px;
			}
			
			#box2{
				width: 300px;
				height: 800px;
			}
			#box2>div{
				width: 80px;
				height: 80px;
				background-color: yellowgreen;
				float: left;
				
				margin-top: 20px;
				margin-left: 20px;
				
			}
			
		</style>
	</body>
</html>

weixin_43600905

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【千锋Python2205班9.09笔记-day15-前端基础学习（4）】

【千锋Python2205班9.09笔记-day15-前端基础学习（4）】
复制链接

扫一扫