写一个学院网站登录界面,利用html,css和javascript
时间: 2024-03-05 14:54:44 浏览: 29
好的,这是一个简单的学院网站登录界面的示例代码,包括HTML,CSS和JavaScript部分:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<title>学院网站登录</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>学院网站登录</h1>
<form>
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
<button type="submit" onclick="login()">登录</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS部分:
```css
.container {
max-width: 400px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 32px;
margin-top: 50px;
}
form {
margin-top: 30px;
text-align: left;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
border: none;
border-radius: 5px;
background-color: #3498db;
color: #fff;
font-size: 16px;
cursor: pointer;
}
```
JavaScript部分:
```javascript
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// TODO: 在此处添加登录逻辑
alert("用户名:" + username + "\n密码:" + password);
}
```
这个示例代码仅用于演示学院网站登录界面的基本实现方式,实际应用中需要根据具体需求进行修改和完善。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)