CSS3表格和表单

最新推荐文章于 2024-07-23 14:07:14 发布

伶俐虫虫

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量219

点赞数 1

分类专栏： CSS3 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44034883/article/details/113404918

版权

CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

表格样式

斑马线表格

<style type="text/css">
table {
    font-size: 12px;
    table-layout: fixed;/*固定表格布局*/
    empty-cells: show;/*显示空单元格*/
    border-collapse: collapse;/*合并单元边框格*/
    margin: 0 auto;
    border: 1px solid #cad9ea;/*边框样式*/
    color: #666;
    width:100%;
}
caption { /*设置表格标题 */
    padding: 0 0 5px 0;
    text-align: center; 		 /*水平居中*/
    font-size: 30px;		 /*字体大小*/
    font-weight: bold;		 /*字体加粗*/
}
th {
    background-image: url(images/th_bg1.gif);/*指定背景图片*/
    background-repeat: repeat-x;/*定义水平平铺*/
    height: 30px;
}
td { height: 20px; }/*单元格的高度*/
td, th {
    border: 1px solid #cad9ea;
    padding: 0 1em 0;/*单元格左右两侧的补白，一个字距*/
}

tbody tr:nth-child(2n) {
    background-color: #f5fafe;/*定义隔行变色样式*/
}
</style>

<body>
<table summary="历届奥运会中国奖牌数">
    <caption>
    历届奥运会中国奖牌数
    </caption>
    <thead>
        <tr>
            <th>编号</th>
            <th>年份</th>
            <th>城市</th>
            <th>金牌</th>
            <th>银牌</th>
            <th>铜牌</th>
            <th>总计</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>第23届</th>
            <td>1984年</td>
            <td>洛杉矶（美国）</td>
            <td>15</td>
            <td>8</td>
            <td>9</td>
            <td>32</td>
        </tr>
        <tr>
            <th>第24届</th>
            <td>1988年</td>
            <td>汉城（韩国）</td>
            <td> 5</td>
            <td>11</td>
            <td>12</td>
            <td>28</td>
        </tr>
        <tr>
            <th>第25届</th>
            <td>1992年</td>
            <td>巴塞罗那（西班牙）</td>
            <td>16</td>
            <td>22</td>
            <td>16</td>
            <td>54</td>
        </tr>
        <tr>
            <th>第26届</th>
            <td>1996年</td>
            <td>亚特兰大（美国）</td>
            <td>16</td>
            <td>22</td>
            <td>12</td>
            <td>50</td>
        </tr>
        <tr>
            <th>第27届</th>
            <td>2000年</td>
            <td>悉尼（澳大利亚）</td>
            <td>28</td>
            <td>16</td>
            <td>14</td>
            <td>58</td>
        </tr>
        <tr>
            <th>第28届</th>
            <td>2004年</td>
            <td>雅典（希腊）</td>
            <td>32</td>
            <td>17</td>
            <td>14</td>
            <td>63</td>
        </tr>
        <tr>
            <th>第29届</th>
            <td>2008年</td>
            <td>北京（中国）</td>
            <td>51</td>
            <td>21</td>
            <td>28</td>
            <td>100</td>
        </tr>
        <tr>
            <th>第30届</th>
            <td>2012年</td>
            <td>伦敦（英国）</td>
            <td>38</td>
            <td>27</td>
            <td>23</td>
            <td>88</td>
        </tr>
        <tr>
            <th>第31届</th>
            <td>2016年</td>
            <td>里约热内卢（巴西）</td>
            <td>26</td>
            <td>18</td>
            <td>26</td>
            <td>70</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>合计</th>
            <td colspan="6">543枚</td>
        </tr>
    </tfoot>
</body>

圆角表格，使用border-radius定义圆角，使用box-shadow为表格添加内阴影。使用transition定义过渡动画，使用linear-gradient()函数定义标题列渐变背景效果，使用text-shadow定义文本阴影。

表单样式

背景修饰

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body { text-align: center; }
input[type="text"] { padding: 4px 6px; }
#login {
    margin: 10px auto 10px;
    text-align: left;
}
fieldset {
    width: 230px;
    margin: 20px auto;
    font-size: 12px;
    padding: 8px 24px;
}
legend { font-weight:bold; font-size:20px; margin-bottom:12px;}
label {
    width: 200px;
    height: 26px;
    line-height: 26px;
    text-indent: 6px;
    display: block;
    font-weight: bold;
}
#name, #password {
    border: 1px solid #ccc;
    width: 160px;
    height: 22px;
    margin-left: 6px;
    padding-left: 28px;
    line-height: 20px;
}
#name { background: url(images/name.gif) no-repeat 4px center; }
#password { background: url(images/password.gif) no-repeat 4px center; }
.button_div {
    text-align: center;
    margin: 6px auto;
}
</style>

<form action="" method="post" class="form"  id="login">
    <fieldset>
        <legend>用户登录</legend>
        <label for="name">姓名</label>
        <div>
            <input name="name" type="text"  id="name" value="">
        </div>
        <label for="password">密码</label>
        <div>
            <input name="password" type="text" id="password" value="">
        </div>
        <div class="button_div">
            <input type="image" src="images/login1.gif">
        </div>
    </fieldset>
</form>

伶俐虫虫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3表格和表单

表格样式斑马线表格<style type="text/css">table { font-size: 12px; table-layout: fixed;/*固定表格布局*/ empty-cells: show;/*显示空单元格*/ border-collapse: collapse;/*合并单元边框格*/ margin: 0 auto; border: 1px solid #cad9ea;/*边框样式*/ color: #666
复制链接

扫一扫