效果图
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form action="">
<input class="text" type="text" name="" value="" placeholder="账号">
<br />
<input class="pwd" type="" name="" value="" placeholder="密码">
<br />
<input class="submit" type="submit" name="" value="登录">
<br />
<p>版权所有©hqyj.com</p>
</form>
</body>
</html>CSS代码
/*
* @Author: Marte
* @Date: 2024-08-28 17:31:01
* @Last Modified by: Marte
* @Last Modified time: 2024-08-28 18:42:02
*/
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
body{
background-image: url(images/bgt.jpeg);
}
form{
position: absolute;
left: 46%;
top: 50%;
}
input.text{
width: 300px;
height: 20px;
border-radius: 15px;
border:none;
padding:10px;
margin-bottom: 15px;;;
}
input.pwd{
width: 300px;
height: 20px;
border-radius: 15px;
border:none;
padding:10px;
margin-bottom: 15px;;;
}
input.submit{
width: 320px;
height: 40px;
background-image: url(images/bgt.jpeg);
border:none;
color: white;
font-size: 22px;
}
p{
text-align: center;
}步骤说明
1、新建文件夹，新建index.html style.css
2、使用link链接
3、书写HTML部分
①建立form表
②使用input创建账号文本（text）、密码（password）以及登录按钮（submit）
③使用p创建底部文本内容（其中“©”符号是由©这串代码实现）
4、书写CSS部分
①使用bgi+Tab快捷键给body添加背景图
②给form设置绝对定位，让它水平垂直居中
实现代码：
Ⅰ、position: absolute;
Ⅱ、 left: 46%；
Ⅲ、top: 50%;
③给input中的text框、密码框以及按钮框设置名字
④其中text框和密码框的操作方式相同，设置边框宽度和高度、取消边框线、调整边框距离以及设置外边框的间隔
⑤设置登录框
Ⅰ、使用bgi+Tab快捷键设置背景色
Ⅱ、设置边框的高度和宽度
Ⅲ、设置字体颜色为白色
Ⅳ、设置字体的大小
Ⅴ、取消边框线
⑥使用tac+Tab快捷键让p居中
5、通过浏览器验收成果是否与效果图一致
总结
根据这几天对前端页面学习中，学会了一些简单页面的制作以及一些简单动画的制作，对于前端的学习中，在HTML中对于嵌套的快捷生成方式还不是很熟练以及在CSS中对于嵌套的集体修饰掌握的不是很熟练，有时可能在修饰过程中，发现实现的效果的没到指定的位置上，导致需要从头开始检查错误。
对于无序列表和自定义列表掌握的不是很熟练，无序列表中的type类型（disc实心圆 square 小方块 circle 空心圆 none无）容易忘记更改的位置，以及属性和属性值之间的联系。
对于简单的动画演示停留在颜色的变换当中，还有简单的放大效果掌握的不是很熟练，不能够很熟练制造出阴影效果，以及取色功底有待提高。
对前端的初步学习，整体来说有了一定的了解，以及掌握，主要方向在后端的嵌入式中，学习前端是为了方便到时候前后端之间的相连能更加方便。
扫一扫
4809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
