HTML 网页设计 简约风格 注册界面

成品如下
HTML 网页设计 简约风格 注册界面_第1张图片
html

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Science科幻注册界面title>
        <link href="css/comm.css" rel="stylesheet" type="text/css">
        <link href="css/register.css" rel="stylesheet" type="text/css"/>
        <style>
        body{
            background-image:url("image/www.png");
            background-size:cover;
        }
    style>
head>
<body>
<div class="register-box">
    <h2>注册h2>
    <form>
        <div class="form-group">
            <label for="username" class="form-label">用户名label>
            <input type="text" id="username" class="form-input">
        div>
        <div class="form-group">
            <label for="email" class="form-label">邮箱label>
            <input type="email" id="email" class="form-input">
        div>
        <div class="form-group">
            <label for="password" class="form-label">密码label>
            <input type="password" id="password" class="form-input">
        div>
        <div class="form-group">
            <label for="confirm_password" class="form-label">确认密码label>
            <input type="password" id="confirm_password" class="form-input">
        div>
        <button type="submit" class="submit-btn"><a class="submit-btn" href="index.html">注册a>button>
    form>
div>
body>
html>

css

.register-box {
    width: 380px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 100px;
    margin-left: 500px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 5px;
}

.form-input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.submit-btn {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
h2 {
    position: relative;
    left: 150px;
}
.submit-btn:hover, .submit-btn:active {
	    color: red;
		text-decoration: none;
	}
.submit-btn:link, .submit-btn:visited {
	    text-decoration: none;
	}

背景图片
HTML 网页设计 简约风格 注册界面_第2张图片

你可能感兴趣的:(html,前端)