唯美二次元少女web登录界面(附free code)

今好久没有写博客,然后今天给大家带来比较具有二次元靓妹的登录界面,也只是用html和css来写的,大家可以来看看,一起交流学习一下!

个人名片:
作者简介:一名大三在校生,计科专业
个人主页:莫白媛
座右铭:舒服是留给死人的
**学习目标: 坚持每一次的学习打卡,掌握更多知识!还要学iOS开发和考研呢!

登录界面解析

  • HTML部分
    • css解析
      • 总结和源码

HTML部分

使用表单元素,会比盒子更加简单一些,所以这里用的表单

<body>
    <div class="shell">
        <div id="img-box">
            <img src="images/b.png" alt="">
        div>
        <form action="" method="post">
            <div id="form-body">
                <div id="welcome-lines">
                    <div id="w-line-1">您好哇,Userdiv>
                    <div id="w-line-2">欢迎回来!div>
                div>
                <div id="input-area">
                    <div class="f-inp">
                        <input type="text" placeholder="邮箱地址">
                    div>
                    <div class="f-inp">
                        <input type="password" placeholder="密码">
                    div>
                div>
                <div id="submit-button-cvr">
                    <button type="submit" id="submit-button">登录button>
                div>
                <div id="forgot-pass">
                    <a href="#">是否忘记密码a>
                div>
            div>
        form>
    div>
body>

css解析

首先我们得先清除内外边距

ountline:none;的含义是鼠标点击文本框的时候,文本的边框焦点会消除掉

用的是渐变色,需要让盒子模型放在正中间,需要使用弹性布局

CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

语法:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

说明:

direction:默认为to bottom,即从上向下的渐变;

stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。

我讲一下这个伪元素placeholder

伪元素**::placeholder**可以选择一个表单元素的占位文本 (en-US),它允许开发者和设计师自定义占位文本 (en-US)的样式。

::placeholder {
  color: red;
  font-size: 1.5em;
}

我们经常用到placeholder属性是在input标签里面,placeholder属性主要作用是让输入框有个提示的显示。那当我们想要改变placeholder属性中文字的大小颜色等样式时,又如何设置呢?

看一下正常的placeholder属性样式:

<input type="text" placeholder="正常的样式">

唯美二次元少女web登录界面(附free code)_第1张图片
自己动动小脑袋想一想哦!搜索!!!

css代码
唯美二次元少女web登录界面(附free code)_第2张图片

总结和源码

大家可以尝试敲一敲,这样一步步就会了解到这种类型的html和css布局,继续加油!源码看评论区免费或者评论区发邮箱。源码点我免费下载

看到这别忘三连加关注,么么叽么么叽么么哒!!!!

你可能感兴趣的:(HTML,前端)