33岁转职者的前端笔记-DAY 5 登入画面切版实作

第五天的文章就来谈谈工作上学习到的切版画面

首先一样附上范例图:

https://ithelp.ithome.com.tw/upload/images/20210905/20120789QNabivZiB8.png

这是常见的登入会员或是加入会员的页面

为了让文字及区块内容画面一致,所以这次来学着用 table 排版

范例code:


HTML:


        <table cellspacing="0" cellpadding="0">
          <tr>
            <td>学<span>号</span></td>
            <td><input type="text" placeholder="请输入学号" required /></td>
          </tr>
          <tr>
            <td>身份证号码</td>
            <td><input type="text" placeholder="请输入身份证字号" /></td>
          </tr>
        </table>

        <div class="button-style">
          <button>注册</button>
          <button>登入</button>
        </div>

        <nav class="other-link">
          <a href="#" title="查询个人成绩">查询个人成绩</a> / 
          <a href="#" title="查询证书">查询证书</a>
        </nav>
      </form>
CSS

form {
  width: 1200px;
  display: inline-block;
}

.input-style table {
  width: 350px;
  margin: 0 auto 30px;
}

.input-style table tr:nth-child(1) {
  margin-bottom: 10px;
}

.input-style table tr td:nth-child(1) {
  text-align: left;
  width: 110px;
  letter-spacing: 1px;
}

.input-style table tr td:nth-child(2) {
  padding-bottom: 10px;
}

.input-style table tr:last-child td:nth-child(2) {
  padding-bottom: 0;
}

.input-style table tr td:nth-child(1)::before {
  content: "*";
  color: red;
}

.input-style table tr td:nth-child(2) input {
  width: 200px;
  border-radius: 5px;
  border: 1px solid #999;
}


.input-style input {
  width: 170px;
  padding: 10px;
  border-radius: 3px;
}

.student-id {
  display: inline-block;
  width: 60px;
  text-align:justify;
  text-align-last:justify;
  margin-left: 5px;
}

.disperse {
  display:inline-block;
  margin-right: -30px;
}
.student-id,
.id-number {
  color: #292929;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.5;
  width: 145px;
  display: inline-block;
  margin-left: 13px;
}

.id-number {
  margin-bottom: 30px;
}

.button-style button {
  cursor: pointer;
  border-radius: 8px;
  border: 0px;
  margin: 0 10px 40px;
  font-size: 20px;
  background-color: turquoise;
  padding: 8px 35px;
}

.button-style button:hover {
  box-shadow: 0px 1px 10px 3px #ccc;
}

.button-style button:last-child {
  margin-right: 0;
}

nav.other-link a {
  text-decoration: none;
  font-size: 16px;
}

这次学着用 table 方法排表单内容发现可以更快速整洁,更加速开发的效率

在使用 table 前我是用一般的div之类的去排,发现文字都无法对称整个画面就是很怪

砍掉重练後用 table 排这个区块就有一种很开心的感觉,原来这麽方便呢XD


<<:  【Day3】前端React +Antd 的环境(Docker化)建立 (上)

>>:  DAY05 - [CSS] 三角型,来个推荐标签吧!

【心得】 会让人晕3D的transform

昨天有先提到了transform的位移与relative的差别了 那麽今天再来详细一些比较常使用的t...

【PHP 设计模式大头菜】策略模式 Strategy Pattern

策略模式 Strategy Pattern 策略模式,可以让物件在运作时更改其行为或算法,你可以透...

Day21: Infrastructure Protection on AWS

接下来我们进入到五大面向的第三个面向:基础设施保护。 基础设施保护是云端资安计划的关键部分,它可以确...

[DAY12]就是要持久-Statefulset

一般来说,k8s中的container大多为无状态(stateless),这样子进行cotrolle...

[Day01] 前言

身为一个商业设计的转职者,从懵懂到认识 HTML 与 CSS 之後,接着来到进入 JavaScrip...