AI生成式探究学习教学辅助设计单-4.3 登录页面制作.docx

AI生成式探究学习教学辅助设计单

使用AI名称：DeepSeek班级：学生姓名：

子任务名称

提示词

AI的回应

对AI回应的评价

我的收获

第四模块网站表格和表单页面制作

4.3登录页面制作

使用HTML5和CSS3语言，编写一个网站登录页面。要求使用合适的表单元素、布局合理，给出案例代码。

以下是一个使用HTML5和CSS3编写的网站登录页面示例代码。该页面包含一个登录表单，布局合理，样式美观，适合现代网站使用。

```html

!DOCTYPEhtml

htmllang=zh-CN

head

metacharset=UTF-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

title网站登录页面/title

style

/*全局样式*/

body{

font-family:Arial,sans-serif;

background-color:#f4f4f9;

margin:0;

padding:0;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

/*登录框样式*/

.login-container{

background-color:#fff;

padding:40px;

border-radius:10px;

box-shadow:04px8pxrgba(0,0,0,0.1);

width:100%;

max-width:400px;

text-align:center;

}

.login-containerh2{

margin-bottom:20px;

color:#333;

}

/*表单样式*/

.login-form{

display:flex;

flex-direction:column;

}

.login-forminput{

padding:12px;

margin-bottom:15px;

border:1pxsolid#ddd;

border-radius:5px;

font-size:16px;

}

.login-forminput:focus{

border-color:#4CAF50;

outline:none;

}

.login-formbutton{

padding:12px;

background-color:#4CAF50;

color:white;

border:none;

border-radius:5px;

font-size:16px;

cursor:pointer;

}

.login-formbutton:hover{

background-color:#45a049;

}

/*链接样式*/

.login-containera{

color:#4CAF50;

text-decoration:none;

font-size:14px;