TP商城静态登录页面制作

ina的

已于 2023-08-20 16:16:10 修改

阅读量458

点赞数 2

分类专栏： Web前端文章标签： html css web 笔记经验分享

于 2023-08-20 16:14:25 首次发布

本文链接：https://blog.csdn.net/qq_52430605/article/details/132392956

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

TP商城静态登录页面制作

最终效果图展示

在这里插入图片描述

制作思路

①观察页面

可以看到页面由三部分组成，分别是：背景图片，位于中上的TP商城logo，位于正中心的登录框。

②分析布局以及要使用的标签

两边为空，中间有内容：一个水平居中的div

logo在上，输入框在下：一个水平居中的img和form标签

form表单中的内容：

管理中心：p标签

账号输入框：input[type:text]

密码输入框：input[type:password]

验证码输入框：input[type:text]

验证码图片：行内img标签，图片居右

忘记密码：a标签，文字居右

提交按钮：input[type:submit]

③写出对应的html代码

html代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TP商城</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!-- 登录盒子 -->
    <div class="login">
        <!-- 登录logo -->
        <img src="images/logo.png" alt="">

        <!-- 提交表单 -->
        <form action="">
            <!-- 标题 -->
            <p>管理中心</p>

            <!-- 账号 -->
            <input type="text" placeholder="请输入用户名/账号">

            <!-- 密码 -->
            <input type="password" placeholder="请输入密码">
            <!-- 验证码 -->
            <span class="verify">
                <input type="text" placeholder="请输入验证码">
                <img src="images/verify.png" alt="">
            </span>

            <!-- 忘记密码 -->
            <a href="">忘记密码？</a>

            <!-- 提交按钮 -->
            <input class="btn" type="submit">
        </form>
    </div>
</body>

</html>

CSS样式代码展示

/* 设置默认边距 */
* {
  margin: 0;
  padding: 0;
}

/* 设置超链接默认样式 */
a {
  text-decoration: none;
}

/* 设置背景图片 */
body {
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 去除输入框的外边框 */
input:focus,
textarea:focus {
  outline: none;
}

/* 登录盒子设置 */
.login {
  width: 512px;
  height: 1024px;

  /* 盒子水平居中 */
  margin: 0 auto;

  /* 盒子中的内容水平居中 */
  text-align: center;
}

/* 商城logo */
.login>img {
  margin-top: 25%;
}

/* 登录表单 */
.login form {
  width: 256px;
  height: 256px;

  margin: 20px auto;
  padding: 16px;
  border-radius: 5px;
  background-color: white;
}

/* 表单输入框 */
.login form input {
  width: 192px;
  height: 20px;

  color: black;

  margin-top: 20px;
  border: 0;
  border-bottom: 1px solid lightgray;
}

/* 输入框提示字符串 */
.login form input::placeholder {
  font-size: 12px;
  color: #CCC;
}

/* 
  清除inline-block默认边距，并且对齐同一方向
    父类{
      display: table;
    }
    子类{
      display: inline-block;
      vertical-align: top;
    }
*/

/* 验证码行 */
.login form .verify {
  display: table;
  margin: 0 auto;
}

/* 让验证码输入框和验证码图片在同一行 */
.login form .verify input,
.login form .verify img {
  display: inline-block;
  vertical-align: top;
}

/* 验证码输入框 */
.login form .verify input {
  width: 132px;
}

/* 验证码图片 */
.login form .verify img {
  width: 60px;
  height: 20px;

  margin-top: 20px;
  border-bottom: 1px solid lightgray;
}

/* 
  a标签是行内元素，要转换成块级元素才能设置高度
  a {
    display: block;
  }
*/

/* 忘记密码 */
.login form>a {
  display: block;

  height: 40px;

  line-height: 40px;
  font-size: 8px;
  color: gray;
  text-align: right;

  padding-right: 24px;
}

/* 
  默认的submit按钮鼠标悬浮在上面时，不是手指
  设置成可以确认的手指图标
  .btn {
    cursor: pointer;
  }
*/

/* 登录按钮 */
.login form .btn {
  height: 40px;

  color: white;

  margin-top: 0;
  border: 0;
  border-radius: 4px;
  background-color: #148EFF;

  cursor: pointer;
}