【前端】html+css自制登录页面(无交互)

【写在前面:本篇文章介绍的是博主在学习前端时的一个小登录页面,仅为练习 css 样式的基本操作和原理,不存在 js 交互,也没有 php 的后端。写这篇文章有两个目的,一是作为学习记录,二是希望对大家有点帮助,对于不足之处,也希望各路大佬可以不吝赐教。本文为作者原创文章,文中所示的图片、代码皆来自网络或博主自制,仅做学习、记录使用,如果某些东西涉及侵权,请作者大大告知博主,可以对此进行补充说明。如有人私自引入商业使用构成侵权或违法犯罪,则博主概不负责。】

目 录

  • 一、实现的效果
  • 二、简要介绍
    • 2.1 html部分
    • 2.2 css部分
    • 2.3 总结
  • 三、完整代码

一、实现的效果

【前端】html+css自制登录页面(无交互)_第1张图片

二、简要介绍

由于这个小作品为博主学习前端早期的一个小代码,所以并不存在 js 的交互功能,也没有使用任何的框架,仅为博主在学习过程中的一个练手作品。看起来会比较素,没什么技术含量。简单记录一下,希望帮到后来的学习者。

2.1 html部分

html部分没什么特别的,就一个主体部分加上…n个div,就没了。可能稍微特殊一点的仅仅是右上角的几个选项,使用< li >标签和 css 浮动做的。其他部分都比较基础。

2.2 css部分

对于css的部分,主要是练习了对div框的样式的一些调整,尽量将自己设计的网页样式用代码的形式呈现出来。通过实际的操作,对div的margin、pattern、border和content的盒子模型进行熟悉,也加深了对block、inline-block和span的一些基础属性的熟系。

2.3 总结

总的来说,100来行的代码不算特别复杂,也没有用到如bootstrap等的框架,直接用css代码实现版心等功能。当然,由于这个代码属于学习早期代码,也没有用到一些布局的方法,所以整个代码在对不同版本的浏览器、移动端等不同页面的适配性上会显得非常欠缺;而且在背景图片、一些配图、和字体的细节上,尚显得有些不够完美和欠缺,不仅影响了代码的修改性,也影响到了页面的美观。这一点上是可以在后期进行进一步修改的。

对于适配性的问题,由于这里的写法比较简单,并没有考虑很多浏览器适配性的问题,在博主的电脑(16:9)的屏幕上可以完整展示,但是在移动端或者其他比例的屏幕上可能效果会不太好,图片或者版心都可能会歪掉,这个得注意调整;第二就是浏览器版本上的适配,虽然目前的浏览器使用的协议基本都统一了,但如果想要完善好整个网页,还是得考虑到版本的问题,最好进行一些版本兼容。

对于一些未完成的部分,一是右上角的一些功能选择部分,最初想的下拉列表的功能并未能在该代码中实现,对于这一点也可以进一步完善。二是可以先对整体页面进行设计,再用代码实现功能,由于博主这里直接跳过了第一步,没有先画好一个设计图,所以在制作上有些混乱,具体的效果可能没有预想的这么好。

这里博主应该不会进行后续修改了,就是一个练手代码的分享,希望可以帮到后来学习的你。

三、完整代码

编译器:vs code
浏览器:谷歌浏览器


"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    火星数据终端登录系统
    "icon" type="/image/x-icon" href="./html/img_2370.ico">
    

    



    
"container">
"box1">
"box2"> "./html/img_2370.png" alt="" >
"login_box">
"box3">
"mars"> "./html/img_2371.png" alt="">
"box4">用户名 "users" type="text" placeholder="USERNAME">
"box4">密   码 "password" type="password" placeholder="PASSWORDS">

你可能感兴趣的:(前端,css,html,chrome)