第五天的文章就来谈谈工作上学习到的切版画面
首先一样附上范例图:
这是常见的登入会员或是加入会员的页面
为了让文字及区块内容画面一致,所以这次来学着用 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] 三角型,来个推荐标签吧!
昨天有先提到了transform的位移与relative的差别了 那麽今天再来详细一些比较常使用的t...
策略模式 Strategy Pattern 策略模式,可以让物件在运作时更改其行为或算法,你可以透...
接下来我们进入到五大面向的第三个面向:基础设施保护。 基础设施保护是云端资安计划的关键部分,它可以确...
一般来说,k8s中的container大多为无状态(stateless),这样子进行cotrolle...
身为一个商业设计的转职者,从懵懂到认识 HTML 与 CSS 之後,接着来到进入 JavaScrip...