HTML5作业1员工信息登记表

最新推荐文章于 2024-04-29 15:17:32 发布

沫雨娉娉

最新推荐文章于 2024-04-29 15:17:32 发布

阅读量2.7k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/Sad_dog/article/details/104705511

版权

本次作业是创建一个员工信息登记表，采用HTML5实现。表单设计包括居中布局，标题使用h标签，主体部分通过ul>li结构排版，其中li内的span、input和i标签用于构建三列布局，利用placeholder设置默认值。最终运行结果显示表单布局合理，功能完善。

摘要由CSDN通过智能技术生成

首先，我们的作业是写个表单，如图所示在这里插入图片描述
然后我们开始对它进行分析排版
1、一般来说表单位置应当居中，我们可以在外部利用margin: 0 auto;position: relative;内部利用left: 50%;margin-left:来达到居中的目的。
2、标题可使用h标签，主体部分明显行高相同，可使用有序标签ul>li达到排版的目的
3、由于在li行列只有最后一行不同，其他都是三列，故li下级标签我选择用span input i,在设置span宽度，但由于span是行内标签，需要将其转换为行内块标签才能使其设置宽度
4、默认值使用的是placeholder

源代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>员工登记表</title>
	<style type="text/css">
		*{
    
			padding: 0px;
			margin: 0px;
			list-style: none;
		}
		.main{
    
			width: 100%;
			margin: 0 auto;
			position: relative;
		}
		.box{
    
			width: 650px;
			height: 400px;
			border: 4px solid aqua ;
			background: pink;
			position: relative;
			left: 50%;
			margin-left: -329px;
			top: 50px;
		}
		h2{
    
			text-align: center

最低0.47元/天解锁文章

沫雨娉娉

关注

0
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
HTML5作业1员工信息登记表

首先，我们的作业是写个表单，如图所示然后我们开始对它进行分析排版1、一般来说表单位置应当居中，我们可以在外部利用margin: 0 auto;position: relative;内部利用left: 50%;margin-left:来达到居中的目的。2、标题可使用h标签，主体部分明显行高相同，可使用有序标签ul>li达到排版的目的3、由于在li行列只有最后一行不同，其他都是三列，故li...
复制链接

扫一扫