爱站程序员基地【写在前面：本篇文章介绍的是博主在学习前端时的一个小登录页面，仅为练习 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
浏览器：谷歌浏览器
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>火星数据终端登录系统</title><link rel=\"icon\" type=\"/image/x-icon\" href=\"./html/img_2370.ico\"><style>/* 设置默认样式 */*{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;}</style><script>// 想弄一个交互的，没弄好，差点后端的知识function logIn(){var user_name = document.getElementById(\'users\').valuevar pass_word = document.getElementById(\'password\').value}</script></head><body><div class=\"container\"><div id=\"box1\"><div class=\"box2\"><img src=\"./html/img_2370.png\" alt=\"\" ></div> <!-- 图片等比缩放的写法，把图片放在一个div中 --><ul class=\"list r\"><li><a href=\"#\">MARS</a></li><li><a href=\"#\">DATAS</a></li><li><a href=\"#\">QUESTIONS</a></li><li><a href=\"#\">ABOUT US</a></li></ul></div></div><div class=\"login_box\"><div id=\"box3\"><div class=\"mars\"><img src=\"./html/img_2371.png\" alt=\"\"></div><div class=\"box4\">用户名<input id=\"users\" type=\"text\" placeholder=\"USERNAME\"></div><div class=\"box4\">密   码<input id=\"password\" type=\"password\" placeholder=\"PASSWORDS\"></div><div id=\"bottom\" class=\"l\"><a class=\"DownButtonNormal\" name=\"DownLoadHistEvent\" style=\"color:#ffffff\" href=\"#\" οnclick=\"logIn();\">登录</a><a class=\"DownButtonNormal\" name=\"DownLoadHistEvent\" style=\"color:#ffffff\" href=\"#\">注册</a></div></div></div></body></html>
