HTML学习记录（Day2）

最新推荐文章于 2024-10-11 16:10:25 发布

何容与

最新推荐文章于 2024-10-11 16:10:25 发布

阅读量934

点赞数 10

文章标签： html 学习前端

本文链接：https://blog.csdn.net/qq_62499218/article/details/140734570

版权

一、通过css来设计样式

1.在head标签内声明引用css文件

<link rel="stylesheet" href="css/float.css" />

2.在同一个项目下设置对应位置的css文件

二、设置浮动

在html文件中将组件的class属性定义一个名字float，然后再css文件中设置该类的样式

<div class="red float"></div>
       
       <div class="green float"></div>
       <div class="blue float"></div>

css文件中的设置

.float{
float: left;
}

将该类设为靠左浮动

将组件设为浮动后，他原来所处的位置就会被后面的组件占据，为了不影响页面，所以我们要清除浮动。

<ul id="menu" class="clearbox">
           <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>

将浮动设为靠左排列

将标签ul中的内容设为浮动后，后面的组件就会占据ul原来的位置

我们设置清除浮动

.clearbox::after{
   clear: both;
   content: "";
   display: block;
}

两个组件中间的就是我们设置的after，如果在content中输入内容，输入的内容就会在两者之间显示出来。

下面是float的html文件和对应的css文件代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/float.css" />
    </head>
    <body>
        <!-- 使用子代选择器或者在li上直接引用cssl里的float样式 -->
        <!-- 清空浮动 -->
        <ul id="menu" class="clearbox">
            <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>

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

.red{
	background-color: red;
}
.blue{
	background-color: #B1E8ED;
}

.green{
	background-color: darkgreen;
}
.pink{
	background-color:pink;
}
.float{
	float: left;
}
.clearbox::after{
	clear: both;
	content: "";
	display: block;
}
/* 子代选择器 >*/
/* 外边距 margin 内边距 padding */
#menu>li{
	/* 边框 */
	border: 1px solid #C4F0C5;
	float: left;
	/* 上10右20左30下40 */
	padding:10px 20px 30px 40px ;
	/* 上 10右20左20下30*/
	padding:10px 20px 30px;
	/* 上下，左右 */
	padding:10px 20px;
	width: 100px;
	/* relative 相对定位 */
	position: relative;
	}
	/* 鼠标放置，改变背景颜色 */
#menu>li:hover{
	background-color: #B5B9F1;
}
ul,ol,li{
	list-style: none;
	margin: 0;
	padding: 0;
}
.child{
	display: none;
	/* 定位 */
	position: absolute;
	left: 0;
	/* 绝对定位的参照物是第一个非static的父组件，如果找到，参照就html */
	/* top:0; */
	/* bottom: 100%; */
}
.child>li{
	padding: 10px 25px;
	width: 100px;
}
.child>li:hover{
	background-color: #F9CB9C;
}
#menu>li:hover .child{
	display: block;
}

三、定位position

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

盒模型 padding margin border

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height:100px;
				width: 100px;
				}
				.red{
					background-color: red;
				}
				.blue{
					background-color: #B1E8ED;
				}
				
				.green{
					background-color: darkgreen;
				}
				.pink{
					background-color:pink;
				}
		</style>
	</head>
	<body>
		<div class="red"></div>
		<div class="green" style="position: fixed; bottom: 0px;right:100px;"></div>
		<div class="pink" style="position: relative;left:10px;top:10px;"></div>
		<div style="position: relative;height: 500px;width: 100%;background-color: aliceblue;">
		<div class="blue" style="position: absolute;left: 50px;top: 10px;"></div>
		</div>
		<div class="red"></div>
	</body>
</html>

四、设置一个登录页面

下面是代码实现：

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/login.css" />
	</head>
	<body>
		<!-- <img src="image/111.jpg" height="100%" width="100%"/> -->
		<div class="loginbox">
			<div class="title">Easy管理系统</div>
			<div class="item">
				<label>用户名</label>
				<input type="text" name="username" />
			</div>
			<div class="item">
				<label>密码</label>
				<input type="password" name="userpass" />
			</div>
			<div class="btnbox">
				<button type="button">登录</button>
			</div>
		</div>
	</body>
</html>

css代码

body {
    background-image: url('../image/111.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 100vh; /* 设置最小高度为视口高度，确保背景图片覆盖整个页面 */
    margin: 0; /* 移除默认的外边距 */
}
.loginbox{
	/* border: 2px solid #A6DADF; */
	border-radius: 10px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	/* background-image: url('../image/kui.jpg');
	background-size:100% 100%; */
}
.loginbox>.title{
	color: yellowgreen;
	font-weight: bold;
	font-size: 30px;
	text-align: center;
	padding: 20px 0px;
}
.loginbox label{
	color: black;
	font-family: 宋体;
	font-weight: bold;
	width: 60px;
	text-align: left;
	/* 内联标签 */
	display: inline-block;
}
.loginbox input{
	height: 30px;
	width: 200px;
	border:none;
	outline: none;
}
.loginbox>.item{
	border-bottom: 1px solid red;
	margin: 10px 20px 0px;
}
.loginbox button{
	width: 100px;
	height: 48px;
	text-align: center;
	font-size: 20px;
	border: none;
	background-color: #845EC2;
}
.loginbox .btnbox{
	text-align: center;
	padding: 20px 0px;
}