给我生成一个登录页面,左侧为广告图,右侧为antdesign生成的登录内容,漂亮为主
时间: 2024-09-27 12:02:38 浏览: 18
登录页面的设计通常会注重用户体验和视觉吸引力。这里是一个简化的描述,如何创建这样一个使用Ant Design的登录页面:
首先,在HTML结构上,你可以采用以下布局:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/antd/4.20.5/antd.min.css">
</head>
<body>
<div class="container login-page">
<div id="ad-sidebar" class="ad-sidebar">
<!-- 插入广告图片 -->
<img src="your-ad-image-url" alt="广告图">
</div>
<div id="login-content" class="login-content antd-layout-column">
<div class="antd-layout-row antd-layout-flex-center">
<div class="antd-form antd-form-bordered">
<!-- 使用Ant Design组件 -->
<form>
<a href="#" class="antd-avatar">Logo</a>
<hr>
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<br>
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
<br>
<button type="submit" class="antd-btn-primary">登录</button>
<p>或者使用</p>
<a href="#" class="antd-btn-link">第三方登录</a>
</form>
</div>
</div>
</div>
</div>
<!-- 引入Ant Design JavaScript库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/antd/4.20.5/antd.min.js"></script>
</body>
</html>
```
在这个例子中,`<ad-sidebar>` 区域放置广告图,而 `<login-content>` 中则是Ant Design的表单元素,包括用户名、密码输入框和登录/注册按钮。
为了美观,可以调整CSS样式,比如颜色主题、间距、字体大小等,以及适配响应式设计,使得在不同设备上看起来都舒适。记得替换掉 `your-ad-image-url` 为你实际的广告图片链接。
阅读全文