<!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
今日推荐
周排行