html+css（第一页信息登陆）

南方狼王

已于 2023-01-05 18:12:22 修改

阅读量101

点赞数 1

分类专栏： html+css+javascript 文章标签： css css3 html

于 2022-11-16 17:22:47 首次发布

本文链接：https://blog.csdn.net/m0_73778150/article/details/127889217

版权

html+css+javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

登录系统

文章目录

前言
一、如何轻松写成代码？
二、html+css样式-代码
- 1.html（head和 body部分）
- 2.css样式（link rel=“stylesheet(样式表)” href=“/” ）
总结

前言

提示：这是我的前言：
随着我从零基础学习了一个多月我发现只是听课，靠着做笔记，成长是十分有限的，我们只有去做项目，在自己用的软件慢慢做，然后从项目中获得煎熬式的成长—《光说不练，假把式》
提示：以下是本篇文章正文内容，下面案例可供参考

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何轻松写成代码？

人	计算机
逻辑+中文+表达（说出来）+被相对关系的人理解	逻辑思维+各种编码语言+写在计算机上+执行

二、html+css样式-代码

1.html（head和 body部分）

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- UTF-8是通用编码全世界都可用，大部分都是用这个UTF-8 是一种用于将宽字符值转换为字节流的 Unicode 的标准机制。
    还有一些常用的GB2313(简体中文) -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 在mate中设置X-UA-Compatible的值能够指定兼容模式，ie=二哥表示ie用最新的引擎渲染网页，假如是chrome=1则可以激活chrome frame -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- viewport是视窗的意思 初始分辨率为1：1，宽度是视屏的宽度 -->
    <title>Document</title>
    <link rel="stylesheet" href="/css-外联/001.1login.css">
    <!-- 用link链接css样式 -->
</head>
<body>
    <!-- 我习惯用class选择器和div -->
    <form class="user" name="Form1" method="post" onsubmit="return check()">
        <!-- 因为使用flex盒子我习惯设置flex-direction 
        然后 配合justify-content和align-items的space-around或者space-between
        所以我将四个input为两个一组 -->
        <div class="ym">
            <input type="text" name="text用户名" placeholder="请输入正确的用户名" required pattern="^[a-zA-Z0-9_-]{6,16}$" value="jxl123">
            <input type="password" name="password" placeholder="请输入正确的密码" required pattern="^[a-zA-Z0-9_-]{6,16}$" value="12312312312">
        </div>
        <div class="btn">
            <input type="submit"  name="submit" value="登陆" formaction="" />
            <input type="submit" name="submit"  value="注册" formaction="/js-外联/001.1register" />
        </div>
    </form>
</body>
</html>

2.css样式（link rel=“stylesheet(样式表)” href=“/” ）

代码如下（示例）：

body{
    background: url(/图库/001-学生系统登录界面.jpeg ) center center fixed;
    background-repeat: no-repeat;
    background-size:cover;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
}

form{
    width: 300px;
    height: 160px;
    margin: auto;
    border: 1px solid black;
    border-radius:5px ;
    text-align: center;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction:column;
    justify-content: space-around;
    align-items:center;
}

.ym{
    width:300px ;
    height: 60px;
}

.ym input{
    width: 270px;
    height: 30px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.btn{
    width: 300px;
    height: 30px;
}

.btn input{
    width: 50px;
    height: 30px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}
.btn input:hover{
    background-color: lightblue;
}

总结

提示：这里对文章进行总结：
我们在家自学的时候一定要注意别被很多东西禁锢住，比如家人的不理解，毕业已经工作的同学待遇多好。我们不要太多的东西，相信二八定律，我们要做我们想要而且我们能够心态轻松达到的境界。我们所局限的环境特别重要但是，非天生有好的运势，暂时我们要努力创造条件。只要能牛起来大家以后才能山顶相见！还有一点我们不要死记硬背，要物尽其用，辛辛苦苦听了几百节课放在脑子不用，很多东西会走掉的。所以要输出、用！