CSS入门 0x5 表格和表单的样式

最新推荐文章于 2024-10-09 19:30:02 发布

原创

最新推荐文章于 2024-10-09 19:30:02 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fieldset #日历组件 #legend #表单布局

本文介绍了CSS在处理数据表格和表单布局方面的应用。首先讲解了如何使用CSS美化数据表格，接着详细阐述了表单布局的技巧，包括fieldset、legend等元素的使用，以及日历组件的样式设计。

数据表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单</title>
        <style>
            table.cal {
                border-collapse: separate;
                border-spacing: 0;
                text-align: center;
                color: #333;
            }
            .cal th,.cal td {
                margin: 0;
                padding: 0;
            }
            .cal caption {
                font-size: 1.25em;
                padding-top: 0.692em;
                background-color: #d4dde6;
            }
            .cal caption [rel="prev"]{
                float: left;
                margin-left: 0.2em;
            }
            .cal caption [rel="next"]{
                float:right;
                margin-right: 0.2em;
            }
            .cal caption a:link,
            .cal caption a:visited{
                text-decoration: none;
                color: #333;
                padding: 0 0.2em;
            }
            .cal caption a:hover,
            .cal caption a:active,
            .cal caption a:focus{
                background-color: #6d8ab7;
            }
            .cal thead th {
                background-color: #d4dde6;
                border-bottom: 1px solid #a9bacb;
                font-size: 0.875em;
            }
            .cal tbody td {
                border-top: 1px solid #e0e0e1;
                border-right: 1px solid #9f9fa1;
                border-bottom: 1px solid #acacad;
                border-left: 1px solid #dfdfe0;
            }
            .cal tbody a{
                display: block;
                text-decoration: none;
                color: #333;
                background-color: #c0c8d2;
                font-weight: bold;
                padding: 0.385em 0.692em 0.308em 0.692em;
            }
            .cal tbody a:hover,
            .cal tbody a:focus,
            .cal tbody a:active,
            .cal tbody .selected a:link,
            .c

最低0.47元/天解锁文章