HTML+CSS 精致静态网页设计

最新推荐文章于 2024-06-15 12:12:02 发布

DILLARENA

最新推荐文章于 2024-06-15 12:12:02 发布

阅读量2.5k

点赞数 6

分类专栏：网页设计

本文链接：https://blog.csdn.net/A03130303/article/details/119758253

版权

html css

网页设计专栏收录该内容

1 篇文章 1 订阅

订阅专栏

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

DILLARENA

关注

6
点赞
踩
77

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSS 精致静态网页设计

<!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" /&...
复制链接

扫一扫