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

最新推荐文章于 2024-08-01 12:02:26 发布

import_error

最新推荐文章于 2024-08-01 12:02:26 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： css html chrome

本文链接：https://blog.csdn.net/yunsong603210469/article/details/107327210

版权

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

一、实现的效果

在这里插入图片描述

二、简要介绍

由于这个小作品为博主学习前端早期的一个小代码，所以并不存在 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;