前端|【前端】html+css自制登录页面（无交互） html|chrome|css

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

目录

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

一、实现的效果

文章图片

二、简要介绍由于这个小作品为博主学习前端早期的一个小代码，所以并不存在 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
浏览器：谷歌浏览器

火星数据终端登录系统 /* 设置默认样式 */ *{margin: 0; padding: 0; } ul,ol{ list-style: none; } img{ display: block; } a{ text-decoration: none; color:white; } h1,h2,h3{ font-size: 16px; } body{height: 100%; width: 100%; background-image: url('E:/vs code/源代码/html/img_2176.png'); background-attachment: fixed; position: relative; font-family: Arial; }/* 设置浮动样式 */ .l{ float: left; } .r{ float: right; } .clear { content:'' ; display: block ; clear: both; }/* 设置版心 */ .container{width: 1300px; margin:0 auto; position: relative; } .login_box{width: 500px; margin:0 auto; position: relative; } #box1{margin: 80px 0 0 0; } .box2{width: 80px; height: 80px; display: inline-block} .box2 img{max-width: 80px; max-height: 80px; } #box1 .list li{ float: left; font-size: 20px; margin-left: 70px; margin-top: 35px; }#box3{ width: 500px; height: 300px; margin-top: 220px; background-color: white; opacity: 0.7; position: relative; border-radius: 15px; } .mars{width: 500px; height: 130px; display: inline-block} .mars img{max-width: 500px; max-height:130px; margin: 0 auto; } #password{margin-left: 2px; } .box4{margin: 13px auto; padding-left: 26%; position: relative; display: block; }#bottom{padding-left: 50px; } #bottom a {color: #696B83; font-weight: bold; } #bottom a:active {background: #AFC1DC} #bottom .DownButtonNormal{height: 20px; line-height: 25x; padding: 5px 15px; background: rgb(120, 127, 162); border: 1px #E5E7EA solid; border-radius: 5px; display: inline-block; font-size: 14px; outline: none; margin-left: 88px; margin-top: 20px; } "container"> "box1"> "box2"> 文章图片 "#">MARS "#">DATAS "#">QUESTIONS "#">ABOUT US "login_box"> "box3"> "mars"> 文章图片 "box4">用户名 "box4">密码 "bottom" class="l"> "DownButtonNormal" name="DownLoadHistEvent" style="color:#ffffff" href="https://www.it610.com/article/#" οnclick="logIn(); "> 登录"DownButtonNormal" name="DownLoadHistEvent" style="color:#ffffff" href="https://www.it610.com/article/#"> 注册