HTML学习-day12

W_ZH511

于 2024-07-29 21:07:12 发布

阅读量623

点赞数 30

文章标签： html 学习前端

本文链接：https://blog.csdn.net/W_ZH511/article/details/140781242

版权

HTML学习-day12

1.float

配色网站:https://colordrop.io/

float从字面意思上来讲就是“浮动”的意思，即将某一模块脱离原来外部标签的限制，好像浮到页面上面了一样。即浮动会忽略页面的布局，无视空格、换行，浮动元素将生成一个新的块级框来显示。浮动有如下几个属性值

将div浮动到顶格排列在同一行

float.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 声明引入CSS文件 -->
		<link rel="stylesheet" href="./css/float1.css" />
	</head>
	<body>
		<div class="red float-box"></div>
		<!-- class中通过空格间隔不同类 -->
		<div class="green float-box"></div>
		<div class="pink float-box"></div>
		
		<!-- 蓝色的div被浮动的块遮住了 -->
		<div class="blue"></div>
	</body>
</html>

float1.css

div{
	width: 100px;
	height: 100px;
}

.red{
	background-color: red;
}

.blue{
	background-color: #B1E8ED;
}

.green{
	background-color: green;
}

.pink{
	background-color: pink;
}

.float-box{
	float:right;
}

在这里插入图片描述

2. 列表实现

clearfloat.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/float.css" />
	</head>
	<body>
		<ul id="menu" class="clear-box">
			<li>首頁</li>
			<li>新聞</li>
			<li>研發
			    <ul class="child">
				    <li>java</li>
					<li>大数据</li>
					<li>人工智能</li>
			    </ul>
			</li>
			<li>奧運</li>
			<li>社會</li>
		</ul>
		<div class="pink"></div>
	</body>
</html>

float.css

div{
	height:100px;
	width:100px;
}

.red{
	background-color: red;
}

.blue{
	background-color: skyblue;
}

.green{
	background-color: darkgreen;
}
.pink{
	background-color: pink;
}

.float{
	float:left;
}
.clear-box::after{
	clear:both;
	content: "";
	display:block;
}


/* 子代选自起 */
#menu>li{
	border:1px solid #1ABC9C;
	float:left;
	padding:10px 20px 30px 40px;/* 上右下左 */
	padding:10px 20px  30px;/* 上   左右   下 */
	padding:10px 25px;/* 上下   左右 */
	width:100px;
	position: relative;/* 相对定位 */
}

#menu>li:hover{
	background-color: #F1C40F;
}
ul,ol,li{
	list-style: none;
	margin:0;
	padding:0;
}

.child{
	display:none;
	position:absolute;
	left:0;
	/* 绝对定位的参照物是第一个非static的父组件,如果找到,参照就html */
	/* bottom:100%; */
}

.child>li{
	padding:10px 25px; 
	width:100px;
}

.child>li:hover{
	background-color: #1ABC9C;
}

#menu>li:hover .child{
	display:block;
}

在这里插入图片描述

3. position

position用于元素的定位，定位主要关注参照物品是谁，已经是否占空间
position 四个属性

absolute 绝对定位不占空间参照物第一个非static定位的父组件，找不到非static定位的父组件参照物为html
relative 相对定位参照物是自身原来的位置占据原来空间
fixed 窗口定位参照物是窗口不占空间
static 流布局不定位

position.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div{
			width: 100px;
			height: 100px;
		}
		.red{
			background-color: red;
		}
		
		.blue{
			background-color: blue;
		}
		
		.green{
			background-color: green;
		}
		
		.pink{
			background-color: pink;
		}
	</style>
	<body>
		<!-- 流布局不定位 -->
		<div class="red"></div>
		<!-- 窗口定位  位置一直在窗口的底边，距离窗口右端100px的位置 -->
		<div class="green" style="position:fixed;bottom: 0px;right: 100px;"></div>
		<!-- 相对定位    参照物是自身原来的位置   占据原来空间 -->
		<div class="pink" style="position:relative; bottom: 50px; left: 50px;"></div>
		
		<div style="position: relative;height: 500px; width: 100%; background-color: #B1E8ED;">
			<!-- 绝对定位，参照物为父组件，位与父元素顶边10px的位置 -->
			<div class="blue" style="position:absolute; top: 10px;"></div>
		</div>
		<div class="red"></div>
	</body>
</html>

在这里插入图片描述

4. 登录页面实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/login.css" />
	</head>
	<body>
		<div class="login">
			<div class="title">Easy管理系统</div>
			<div class="item">
				<label for="">用户名</label>
				<input type="text" name="usrname" id="">
			</div>
			<div class="item">
				
				<div>
					<label for="">密码</label>
					<input type="password" name="userpass" id="">
				</div>
				
			</div>
			<div class="btnbox">
				<button type="button">登录</button>
			</div>
		</div>
	</body>
</html>

.login{
	border:solid 1px #89CFF0;
	border-radius: 8px;
	/* div绝对居中 */
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%,-50%);
	background-image: url("../img/easy.jpg");
	background-size: 100%;
}

.login>.title{
	color: black;
	font-weight: bold;
	font-size: 30px;
	text-align: center;
	padding: 20px 0px;
}

.login label{
	color: #003B46;
	font-family: cursive;
	width: 60px;
	text-align: left;
	display: inline-block;
}

.login input{
	height: 30px;
	width: 200px;
	border: 1px solid black;
	border-radius: 5%;
	border: none;
	outline: none;
}

.login>.item{
	border-bottom: 1px solid red;
	margin: 5px 10px 0px;
}

.login button{
	width:120px;
	height: 60px;
	text-align: center;
	font-size: 30px;
	background-color: gray;
}

.login>.btnbox{
	text-align: center;
	padding: 20px 0px;

}

lack;
border-radius: 5%;
border: none;
outline: none;
}

.login>.item{
border-bottom: 1px solid red;
margin: 5px 10px 0px;
}

.login button{
width:120px;
height: 60px;
text-align: center;
font-size: 30px;
background-color: gray;
}

.login>.btnbox{
text-align: center;
padding: 20px 0px;

}


![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/5afacba031b14c67bd7f236c203f15b4.png#pic_center)

W_ZH511

关注

30
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML学习-day12

配色网站:https://colordrop.io/float从字面意思上来讲就是“浮动”的意思，即将某一模块脱离原来外部标签的限制，好像浮到页面上面了一样。即浮动会忽略页面的布局，无视空格、换行，浮动元素将生成一个新的块级框来显示。浮动有如下几个属性值将div浮动到顶格排列在同一行float.html</</</</</</</</float1.css。
复制链接

扫一扫