<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精致女孩</title>
<link rel="stylesheet" href="css/咪.css" />
</head>
<body>
<img class="mi" src="img/微信图片_20210619160935.jpg" />
<div class="mumu">
<span class="La_la">精致女孩小信息</span>
<div class="La_mu">
<span>姓名:</span>
<input class="ins" type="text" value="LALA">
</div>
<div class="La_mu">
<span>班级:</span>
<input class="ins" type="text" value="网一">
</div>
<div class="La_mu">
<span>学号:</span>
<input class="ins" type="text" value="*********">
</div>
<div class="La_mu">
<span>系部:</span>
<input class="ins" type="text" value="电子信息工程">
</div>
<div class="La_mu">
<span>课程名称:</span>
<input class="ins" type="text" value="HTML+CSS">
</div>
<div class="btn_submit">
<a href="./finish.html">
<button class="btn">提交</button></a>
<a href="下一页.html" class="back"><button class="mm">下一页</button></a>
</div>
</div>
</div>
</body>
</html>
CSS部分:
.mi{width: 100%;}
.mumu{width: 600px;height: 600px; position: absolute;
z-index: 9;left: 0;top: 0;right: 0;bottom: 0;margin: auto;margin-top: 150px;
background: rgba(255, 255, 255, 0.2);border-radius: 10px;color: #fff;display: flex;
flex-direction: column;}
.La_mu{padding: 0 102px;
box-sizing: border-box;
display: flex;
margin-top: 20px;}
.La_mu span{width: 100px;align-self: center;}
.La_la{ text-align: center;
margin-top: 40px;
font-size: 28px;}
.ins{height: 40px;
width: 160px;
border-radius: 8px;
border: none;
background-color: #eee;
color: darkgreen;
padding-left:50px;}
.mm{border: none;
width: 80px;
height: 40px;
color: #fff;
border-radius: 5px;
background: #FFD204;}
.back{margin-left: 10px;}
.btn_submit {
align-self: center;
}
.btn {
border: none;
width: 80px;
height: 40px;
color: #fff;
border-radius: 5px;
background: #999;
margin-top: 40px;
}
.btn:hover {
background: #666;
}
更多推荐
HTML+CSS 精致静态网页设计
发布评论