C#实训Day001：大数据登录界面制作

来源：互联网 2023-03-16 19:11:05 233

今天的任务是制作大数据系统的登录界面，老板给了我一个PPT，里面有10多个登录界面的设计版本，之前自己自学了些HTML、CSS等网页编程语言，看来今天派上用场了。

老板从中间挑选了一中方案给我，可悲的是公司的东西没法传出来，这PPT我也没法带回来，只能打印了一份回家先试试水了。

方法/步骤

本来想用Webstrom来制作的，但是Webstrom创建项目会自动生成很多配套的文件，看的我都眼花了，虽然之前学了点但是毕竟都是自学的，基础不扎实，越复杂反而觉得杂乱，而看目前这个网页，应该只需要用到HTML、CSS、Javascript就可以了，所以还是简单点，用sublime_text即可。

C#实训Day001：大数据登录界面制作

首先我们来分析下页面，页面有个标题，一个Form登录表单和文字说明，我们可以先定位3个大的容器来容纳这几部分。

C#实训Day001：大数据登录界面制作

我们将其划分开一部分一部分的解决，先把大框架搭建，这里小编创建了header、wrapper、footer三个容器，然后在逐一完成每个容器中的内部的搭建

C#实训Day001：大数据登录界面制作

3该信息未经许可获取自百度经验

顺便写个style.css文件，并将这三个框架的层叠样式写好，如果看不出效果，可以先为其加上边框属性，这样可以更直观的观察你创建的容器是否发生改变，当编辑好之后可以注释掉或者删掉边框设置。

C#实训Day001：大数据登录界面制作

接下来就是针对每个大容器中的细节进行编写和样式了，这里主要的工作还是在Form登录表单这里，首先我们需要将会出现的内容进行划分，在wrapper中继续划分更多的容器来承载不同的内容，同时需要为他们设置还类名，方便在CSS中进行调用和样式调整。

C#实训Day001：大数据登录界面制作

这个页面的HTML代码算早的了，接下里主要是对这些内容进行样式调整，这是今天的重点工作，需要很大的耐心和细心，不断的慢慢去调节，由于小编也是生手，所以足足花了4个小时编写index.html、style.Css这两个文件。

C#实训Day001：大数据登录界面制作

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML CSS

上一篇：html前端模拟手机列表页点击加载更多下一篇：如何将html转换成jsp