【笔记】第一次使用Flex盒子，写的页面
第一次学习使用Flex写的登录页面{:1_937:}
HTML文件
<!DOCTYPE html>
<html>
<head>
<title>log in</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="box">
<div class="list">
<h2>Log in</h2>
<form>
<div class="item">
<label>E-mail:</label>
<input class="input" type="text" name="E-mail" placeholder="Enter your E-mail">
</div>
<div class="item">
<label>Passwords:</label>
<input class="input" type="text" name="Passwords" placeholder="Enter your passwords">
</div>
</form>
</div>
<button class="button_style"><a class="hello" href="hello.html">submit</a></button>
</div>
</body>
</html>
css文件
.box {
margin: auto;
margin-top: 120px;
height: 300px;
width: 300px;
border: 12px #555555 solid;
background-color: #FFBF00;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.list {
border: 3px black dotted;
border-radius: 15px;
padding: 5px;
margin: auto;
background-color: #00D5FF;
align-self: center;
}
.list h2 {
text-align: center;
}
.item {
text-align: center;
align-items: flex-end;
}
.input {
background-color: #00D5FF;
border-radius: 5px;
}
.button_style {
background-color: cyan;
border-radius: 25px;
padding: 10px 15px;
border:3px #555555 solid;
height: 60px;
margin: 10px;
align-self: center;
}
.button_style:hover {
background-color: red;
}
/*.button_style:active {
background-color: green;
}*/
.hello {
text-decoration: none;
text-align: center;
color: black;
font-size: 32px;
}
.hello:hover {
color: cyan;
}
样子巨丑，会加油学习的！！！{:1_936:} 加油，会越来越好的 加油，我只能羡慕！ 至少你已经迈出了第一步{:301_988:}
页:
[1]