【笔记】第一次使用Flex盒子，写的页面

Greary · 发表于 2020-12-1 12:06

第一次学习使用Flex写的登录页面

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;
}

样子巨丑，会加油学习的！！！

寒墨轩 · 发表于 2020-12-1 13:59

加油，会越来越好的

一剑飘红 · 发表于 2020-12-1 14:38

加油，我只能羡慕！

Codeman · 发表于 2020-12-1 21:59

至少你已经迈出了第一步

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 【笔记】第一次使用Flex盒子，写的页面