初学css能做的实战登录页面制作

最新推荐文章于 2024-04-25 20:41:03 发布

asiaqi

最新推荐文章于 2024-04-25 20:41:03 发布

阅读量1.1k

点赞数 1

分类专栏： asiaqi每日打卡 CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_62200674/article/details/125793887

版权

asiaqi每日打卡同时被 2 个专栏收录

17 篇文章 2 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

最终效果：

最终效果浏览器截图
(input框是可使用的）

代码

HTML部分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>登录页面</title>

    <link href="login.css" rel="stylesheet" type="text/css">

</head>

<body>

    <div class="outbox">

        <div class="pic"></div>

        <div class="rightbox">

            <div class="textbox">

                <h1>Login/Register</h1>

                <input type="text" placeholder="USER NAME" class="inputbox">

                <input type="password" placeholder="PASSWORD" class="inputbox">

                <a href="#" class="forget">Forget Password?</a>

                <a href="#" class="login">Login</a>

            </div>

        </div>

    </div>

</body>

</html>

html部分代码逻辑

outbox是整个大框
pic是放在左边的图片。为什么要用div然后用background来设置，而不用img直接插入呢：是因为我们需要让图片自适应outbox这个框框（使用background-size属性）这种将插入图片作为背景图片进行操作是一种常用方法
rightbox是右边的白框部分（由于插入的图片也是白底，所以这个例子看不太出来）
textbox是所有文字内容合成的框。这样便于整体调整位置，不会每一段文字散开来
然后给每个部分的文字设置样式（盒模型）

CSS部分

body {

  background-image: linear-gradient(to right, #ba5370, #f4e2d8);

  /*严格来说background-image要做浏览器兼容*/

  display: flex; /*将整个body定义为一个flex容器*/

  justify-content: center; /*将flex项目在容器中心对齐*/

}

.outbox {

  /*定义为弹性布局*/

  display: flex;

  

  /*规定定位类型*/

  position: relative;

  top: 50px;

  width: 1000px;

  height: 550px;

  

  /*其他效果*/

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);

}

.pic {

  background-image: url(pic/side4.jpg);

  width: 700px;

  height: 550px;

  /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/

  background-size: cover;

}

.rightbox {

  display: flex;

  justify-content: center; /*将felx项目--即下面的textbox在容器的水平中心*/

  align-items: center; /*将felx项目--即下面的textbox在容器的竖直中心*/

  

  width: 300px;

  height: 550px;

  background-color: white;

}

.textbox {

  position: relative;

  top: 20px;

  width: 300px;

  height: 500px;

}

.textbox h1 {

  margin-left: 30px;

  font: Garamond 900 35px ""; /*Garamond是字体 900是字体加粗允许值*/

  color: #39e48b;

}

.textbox .inputbox {

  /*按照box的元素从内到外设计*/

  width: 200px;

  padding: 10px;

  margin: 20px 30px;

  border-style: none;

  border-bottom: 3px solid #92bda6;

}

.forget {

  font: 12px;

  color: #92bda6;

  float: right;

  margin: 15px 25px; /*微调位置*/

}

.login {

  display: block;

  /*定位*/

  position: absolute;

  bottom: 100px;

  margin-left: 75px;

  /*盒子样式*/

  background-image: linear-gradient(to left, #9c88ff, #3cadeb);

  width: 150px;

  height: 60px;

  border-radius: 20px;

  /*文字样式*/

  font: 900 30px "";

  text-decoration: none; /*取消下划线*/

  text-align: center;

  line-height: 60px;

  color: #f0acea;

}