写个 html5 登录界面

admin · 发表于 2023-5-15 03:13:21

写个 html5 登录界面

wdwdwdwd · 发表于 2023-5-15 03:13:34

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style>
      body {
         background-color: #f0f0f0;
      }
      .login-form {
         width: 400px;
         margin: 100px auto;
         padding: 20px;
         background-color: #ffffff;
         border-radius: 5px;
         box-shadow: 0px 0px 10px #999;
      }
      .form-group {
         margin-bottom: 20px;
      }
      .form-group input {
         display: block;
         width: 100%;
         padding: 10px;
         font-size: 16px;
         border: 1px solid #ccc;
         border-radius: 5px;
         outline: none;
      }
      .form-group label {
         display: block;
         margin-bottom: 5px;
         font-weight: bold;
         font-size: 14px;
      }
      .btn-login {
         display: block;
         width: 100%;
         padding: 10px;
         font-size: 16px;
         color: #ffffff;
         background-color: #007bff;
         border: none;
         border-radius: 5px;
         cursor: pointer;
      }
      .btn-login:hover {
         background-color: #0069d9;
      }
</style>
</head>
<body>
<div class="login-form">
      <h2>登录界面</h2>
      <form>
         <div class="form-group">
            <label>用户名</label>
            <input type="text" name="username" placeholder="请输入用户名">
         </div>
         <div class="form-group">
            <label>密码</label>
            <input type="password" name="password" placeholder="请输入密码">
         </div>
         <button class="btn-login">登录</button>
      </form>
</div>
</body>
</html>

admin · 发表于 2023-5-15 03:13:58

wdwdwdwd 发表于 2023-5-15 03:13
<!DOCTYPE html>
<html lang="zh-CN">
<head>

换一个

wdwdwdwd · 发表于 2023-5-15 03:14:08

admin 发表于 2023-05-15 03:13
换一个

好的，这是一个简单的登录界面，包括 HTML 和 CSS。

HTML 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-box">
<img src="avatar.png" alt="avatar" class="avatar">
<h1>登录</h1>
<form>
<label for="username">用户名</label>
<input type="text" name="username" placeholder="请输入用户名">
<label for="password">密码</label>
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" value="登录">
</form>
</div>
</body>
</html>

复制代码

CSS 代码：

body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 40px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.3);
}
.avatar {
display: block;
margin: 0 auto 30px;
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
h1 {
margin: 0;
padding: 0 0 20px;
font-size: 22px;
text-align: center;
}
form label {
margin: 0;
padding: 0;
font-weight: bold;
display: block;
}
form input {
width: 100%;
margin-bottom: 20px;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #f2f2f2;
font-size: 16px;
}
form input[type="submit"] {
background-color: #008CBA;
color: #fff;
cursor: pointer;
transition: background-color .3s ease-in-out;
}
form input[type="submit"]:hover {
background-color: #006d96;
}

复制代码

注意，需要将代码中的图片路径和样式文件路径替换为实际路径。

admin · 发表于 2023-5-15 03:14:42

写个 discuz 模板

wdwdwdwd · 发表于 2023-5-15 03:15:00

admin 发表于 2023-05-15 03:14
写个 discuz 模板

Discuz是一款流行的论坛系统，以下是一个简单的 Discuz 模板示例：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Discuz模板&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;template.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;wrapper&quot;&gt;
&lt;header&gt;
&lt;h1&gt;Discuz 论坛&lt;/h1&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;帖子&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;用户中心&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;注册&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;登录&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;/header&gt;

&lt;main&gt;
&lt;article&gt;
&lt;h2&gt;最新帖子&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;帖子 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;帖子 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;帖子 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/article&gt;

&lt;aside&gt;
&lt;h3&gt;热门话题&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;话题 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;话题 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;话题 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/aside&gt;
&lt;/main&gt;

&lt;footer&gt;
&lt;p&gt;© 2021 Discuz 论坛.&lt;/p&gt;
&lt;/footer&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

样式文件 template.css：

/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Main container */
#wrapper {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}

/* Header */
header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}

header a {
color: #333;
text-decoration: none;
}

/* Navigation */
nav ul {
display: flex;
list-style-type: none;
}

nav li {
margin-left: 20px;
}

/* Main content */
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

article, aside {
flex-basis: calc(50% - 20px);
margin-bottom: 20px;
}

article ul, aside ul {
list-style-type: none;
}

/* Footer */
footer {
margin-top: 20px;
text-align: center;
color: #666;
font-size: 14px;
}

		自动登录	找回密码
密码			立即注册

写个 html5 登录界面

最佳新人

活跃会员

热心会员

推广达人

宣传达人