表格样式+添加样式

其他 2018-05-12 18:12:45 阅读次数: 0 
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>样式</title>

<style type="text/css">

* {

font-size: 14px;

margin: 0;

padding: 0;

}



body {

padding: 16px 32px;

}



.search {

position: relative;

width: 512px;

height: 40px;

line-height: 40px;

margin: 0 auto;

}



.search input {

width: 160px;

height: 24px;

border: 1px solid #999;

border-radius: 4px;

}



.search select {

width: 86px;

height: 24px;

border: 1px solid #999;

border-radius: 4px;

}



.search .sort {

position: absolute;

right: 0;

top: 8px;

}



.add_user_btn {

width: 512px;

height: 40px;

line-height: 40px;

margin: 0 auto;

}



.add_user_btn button {

width: 80px;

height: 24px;

background-color: green;

border: 0;

border-radius: 4px;

color: white;

}



.list {

width: 512px;

margin: 0 auto;

}



.list thead tr {

background-color: #777;

}



.list tbody tr:nth-child(odd) {

background-color: #ccc;

}



.list tbody tr:nth-child(even) {

background-color: #fff;

}



.form {

width: 460px;

border: 1px solid #999;

margin: 0 auto;

}



.formErr {

border: 1px solid red;

}



.form .label {

display: block;

float: left;

width: 80px;

height: 40px;

line-height: 40px;

text-align: end;

}



.form .txt {

display: block;

float: left;

width: 340px;

height: 40px;

line-height: 40px;

padding-left: 16px;

}



.form input {

width: 320px;

height: 24px;

border: 1px solid #999;

border-radius: 4px;

}



.form select {

width: 64px;

height: 24px;

border: 1px solid #999;

border-radius: 4px;

}



.form button {

width: 56px;

height: 24px;

background-color: green;

border: 0;

border-radius: 4px;

color: white;

}



.form .errTips {

width: 226px;

background-color: lightpink;

color: darkred;

border-radius: 4px;

margin-left: 96px;

margin-top: 6px;

margin-bottom: 4px;

padding: 16px 48px;

}

</style>

</head>

<body>

<div class="search">

<input type="text" placeholder="用户名搜索"/>

<select class="level">

<option value="">选择级别</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

</select>

<select class="sort">

<option value="">排序</option>

<option value="1">级别正序</option>

<option value="2">级别倒序</option>

<option value="3">时间正序</option>

<option value="4">时间倒序</option>

</select>

</div>



<div class="add_user_btn">

<button>新增用户</button>

</div>



<div class="list">

<table width="512px" cellspacing="0" rules="cols" border="1px">

<thead>

<tr>

<th width="6%">

<input type="checkbox"/>

</th>

<th width="6%">ID</th>

<th width="16%">用户名</th>

<th width="18%">密码</th>

<th width="10%">级别</th>

<th width="32%">创建时间</th>

<th width="12%">操作</th>

</tr>

</thead>

<tbody>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">1</td>

<td align="center">曹操</td>

<td align="center">123456</td>

<td align="center">1</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">2</td>

<td align="center">孙权</td>

<td align="center">123456</td>

<td align="center">1</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">3</td>

<td align="center">刘备</td>

<td align="center">123456</td>

<td align="center">1</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">4</td>

<td align="center">司马懿</td>

<td align="center">123456</td>

<td align="center">1</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">5</td>

<td align="center">张辽</td>

<td align="center">123456</td>

<td align="center">3</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">6</td>

<td align="center">关羽</td>

<td align="center">123456</td>

<td align="center">2</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">7</td>

<td align="center">张飞</td>

<td align="center">123456</td>

<td align="center">2</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">8</td>

<td align="center">赵云</td>

<td align="center">123456</td>

<td align="center">3</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">9</td>

<td align="center">孙尚香</td>

<td align="center">123456</td>

<td align="center">4</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">11</td>

<td align="center">周瑜</td>

<td align="center">123456</td>

<td align="center">2</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">12</td>

<td align="center">鲁肃</td>

<td align="center">123456</td>

<td align="center">2</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">13</td>

<td align="center">黄盖</td>

<td align="center">123456</td>

<td align="center">3</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">14</td>

<td align="center">大乔</td>

<td align="center">123456</td>

<td align="center">4</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

<tr>

<td align="center">

<input type="checkbox"/>

</td>

<td align="center">15</td>

<td align="center">小乔</td>

<td align="center">123456</td>

<td align="center">4</td>

<td align="center">2017-10-23 10:00:00</td>

<td align="center">

<button>修改密码</button>

</td>

</tr>

</tbody>

</table>

</div>



<div class="form">

<div>

<span class="label">新增用户</span>

<span class="txt"></span>

</div>

<div style="clear: both"></div>

<div>

<span class="label">用户名</span>

<span class="txt"><input type="text" placeholder="6-20个字符"/></span>

</div>

<div style="clear: both"></div>

<div>

<span class="label">密码</span>

<span class="txt"><input type="password" placeholder="6-20个字符" class="formErr"/></span>

</div>

<div style="clear: both"></div>

<div>

<span class="label">重复密码</span>

<span class="txt"><input type="password" placeholder="再次输入密码"/></span>

</div>

<div style="clear: both"></div>

<div style="clear: both"></div>

<div>

<span class="label">级别</span>

<span class="txt">

<select>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

</select>

</span>

</div>

<div style="clear: both"></div>

<div class="errTips">

<ul>

<li>密码长度不能小于6个字符！</li>

<li>密码不能为空！</li>

<li>两次密码输入不一致！</li>

</ul>

</div>

<div style="clear: both"></div>

<div>

<span class="label"></span>

<span class="txt"><button>提交</button></span>

</div>

<div style="clear: both"></div>

</div>

</body>

</html>


猜你喜欢

转载自blog.csdn.net/zh_binfgan/article/details/78332821
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022