ZBLOG

很好,在设计更好看一点,使用css和js来进行设计

当然,我可以帮你设计一个更漂亮的登录界面。以下是使用CSS和JavaScript来设计的示例:

<!DOCTYPE html>
<html>
<head>
  <title>登录</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
    }
    
    .container {
      width: 300px;
      padding: 20px;
      margin: 0 auto;
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      text-align: center;
    }
    
    label {
      display: block;
      margin-top: 15px;
    }
    
    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      border-radius: 3px;
      border: solid 1px #ccc;
    }
    
    button {
	  display:block; /* 将按钮设置为块级元素 */
	  width:auto; /* 自动调整宽度 */
	  margin-top:20px; /* 设置上边距 */
	  padding:.5em; /* 调整内边距 */
	  background-color:#4CAF50; 
	  color:white; 
	  border:none; 
	  cursor:pointer; 
	}
	
	button:hover {opacity:.7;}
  
   </style>
</head>

<body>
<div class="container">
<h1>登录</h1>
<form action="" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">

<label for="password">密码:</label>
<input type="password" id="password" name="password">

<button type="submit">登录</button>
</form>
</div>

<script>
  // JavaScript代码可以在这里添加,用于处理表单提交等其他交互逻辑
</script>

</body>
</html>

在以上示例中,我们对按钮的样式进行了微调,将其设置为块级元素,并添加了悬停效果。你还可以根据自己的需求进一步修改CSS样式或通过JavaScript来处理表单提交和其他交互行为。希望这个设计更好看一些的登录界面能满足你的需求!


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=15700

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?