课堂笔记10

最新推荐文章于 2024-09-30 11:33:31 发布

蒸汽秋葵y

最新推荐文章于 2024-09-30 11:33:31 发布

阅读量55

点赞数

本文链接：https://blog.csdn.net/y850266/article/details/114879899

版权

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>袁雪如</title>
		<style>
			.box{
				width:1010px;
				height:52px;
				border: #C0C0C0 1px solid;
				margin:auto;
				}
				.box1{
					width:200px;
					height:50px;
					border:solid 1px #FFFFF;
					background-color:darkred;
					color:white;
					font-size:24px;
					text-align:center;
					line-height:50px;
					float:left;
				}
				.box2{
					width:200px;
					height:50px;
					border:solid 1px #FFFFF;
					background-color:darkred;
					color:white;
					font-size:24px;
					text-align:center;
					line-height:50px;
					float:left;
				}
				.box3{
					width:200px;
					height:50px;
					border:solid 1px #FFFFF;
					background-color:darkred;
					color:white;
					font-size:24px;
					text-align:center;
					line-height:50px;
					float:left;
				}
				.box4{
					width:200px;
					height:50px;
					border:solid 1px #FFFFF;
					background-color:darkred;
					color:white;
					font-size:24px;
					text-align:center;
					line-height:50px;
					float:left;
				}
				.box5{
					width:200px;
					height:50px;
					border:solid 1px #FFFFF;
					background-color:darkred;
					color:white;
					font-size:24px;
					text-align:center;
					line-height:50px;
					float:left;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">我的音乐</div>
			<div class="box2">流行音乐</div>
			<div class="box3">网络音乐</div>
			<div class="box4">欧美音乐</div>
			<div class="box5">华语音乐</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子浮动</title>
		<style>
			.box{
				/* float:浮动 */
				/* float:left(左) right(右) none(没有浮动) */
				/* float:right;右浮动 */
				float:left;
				width:400px;
				height:400px;
				background-color:pink;
			}
			.box1{
				float:left;
				width:200px;
				height:2 00px;
				background-color:blue;
			}
		</style>
	</head>
	<body>
		<div class="box">菜单1</div>
		<div class="box1">菜单2</div>
		<div class="box1">菜单2</div>
	</body>
</html>

3.16
浮动元素会脱离标准流（脱标）
浮动元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的类似特性