返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: div+css >

css设计课程表,月历和通讯录

2020-04-29 文章标签: css 课程表 浏览次数:

我们来介绍css入门,我们从基础标签介绍起,现阶段我们看到的网站大部分是div和css可以实现,今天介绍css设计课程表,css设计通讯录,css设计月历,设计分组表格

css教程

1.css设计课程表css制作课程表

<!doctype html>
<html>
<head>
<title></title>
<style>
body {
    background-color: #f8e6e6;
    text-align: center;
    margin: 50px;
}
table {
    border: 6px double #3186dd;/* 表格边框 */
    font-family: Arial;
    border-collapse: collapse;/* 边框重叠 */
}
.cap {                     /*设置表格标题 */
    padding-top: 3px;
    padding-bottom: 4px;
    font-weight:bold;
    font-size:30px;
    color: red;
}
table th {
    border: 2px solid #429fff;/* 行、列名称边框 */
    background-color: #d2e8ff;
    font-weight: bold;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
table td {
    border: 2px solid #429fff;/* 单元格边框 */
    text-align: center;
    padding: 4px;
}
</style>
<meta charset="utf-8">
</head>
<body>
<table>
    <caption class="cap" >
    课程表
    </caption>
    <tr>
        <th></th>
        <th scope="col">星期一</th>
        <th scope="col">星期二</th>
        <th scope="col">星期三</th>
        <th scope="col">星期四</th>
        <th scope="col">星期五</th>
    </tr>
    <tr>
        <th scope="row">第一节</th>
        <td>数学</td>
        <td>数学</td>
        <td>语文</td>
        <td>英语</td>
        <td>英语</td>
    </tr>
    <tr>
        <th scope="row">第二节</th>
        <td>数学</td>
        <td>数学</td>
        <td>语文</td>
        <td>英语</td>
        <td>英语</td>
    </tr>
    <tr>
        <th scope="row">第三节</th>
        <td>数学</td>
        <td>语文</td>
        <td>语文</td>
        <td>美术</td>
        <td>音乐</td>
    </tr>
    <tr>
        <th scope="row">第四节</th>
        <td>信息</td>
        <td>地理</td>
        <td>历史</td>
        <td>英语</td>
        <td>数学</td>
    </tr>
    <tr>
        <th scope="row">第五节</th>
        <td>生物</td>
        <td>历史</td>
        <td>体育</td>
        <td>物理</td>
        <td>语文</td>
    </tr>
    <tr>
        <th scope="row">第六节</th>
        <td>化学</td>
        <td>数学</td>
        <td>历史</td>
        <td>英语</td>
        <td>地理</td>
    </tr>
    <tr>
        <th scope="row">第七节</th>
        <td>生物</td>
        <td>数学</td>
        <td>语文</td>
        <td>美术</td>
        <td>英语</td>
    </tr>
</table>
</body>
</html>

2.css制作通讯录css制作通讯录

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body {
    font: normal 12px auto sans-serif;
    color: #4f6b72;
    background: #E6EAE9;
}
a {
    color: #c75f3e;
}
#mytable {
    width: 700px;
    padding: 0;
    margin: 0;
}
caption {                 /*设置表格标题 */
    padding: 0 0 5px 0;
    width: 700px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}
th {
    color: #4f6b72;
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-align: left;
    padding: 6px 6px 6px 12px;
    background: #CAE8EA;
}
td {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    background: #fff;
    font-size: 14px;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}
td.alt {
    background: #F5FAFA;
    color: #797268;
}
th.spec {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #fff;
}
th.specalt {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #f5fafa;
    color: #797268;
}
</style>
<body>
<table id="mytable" cellspacing="0" summary="财经2000级毕业生通讯录">
    <caption>
    财经2014级毕业生通讯录
    </caption>
    <tr>
        <th scope="col" abbr="Configurations" >姓名</th>
        <th scope="col" abbr="Dual 1.8">出生日期</th>
        <th scope="col" abbr="Dual 2">电话</th>
        <th scope="col" abbr="Dual 2.5">单位</th>
    </tr>
    <tr>
        <th scope="row" abbr="Model" class="spec">王明</th>
        <td>1978.1.4</td>
        <td>137563443</td>
        <td>中国铁道部</td>
    </tr>
    <tr>
        <th scope="row" abbr="G5 Processor" class="specalt">李丽</th>
        <td class="alt">1977.5.7</td>
        <td class="alt">13893212</td>
        <td class="alt">北京市朝阳区街道办事处</td>
    </tr>
    <tr>
        <th scope="row" abbr="Frontside bus" class="spec">刘丽敏</th>
        <td>1978.4.23</td>
        <td>13345678</td>
        <td>北京市11中学</td>
    </tr>
    <tr>
        <th scope="row" abbr="L2 Cache" class="specalt">李松</th>
        <td class="alt">1977.11.31</td>
        <td class="alt">139432567</td>
        <td class="alt">北京东城区防汛办</td>
    </tr>
    <tr>
        <th scope="row" abbr="Frontside bus" class="spec">赵艳</th>
        <td>1978.7.3</td>
        <td>1355613234</td>
        <td>北京深华新股份有限公司</td>
    </tr>
    <tr>
        <th scope="row" abbr="L2 Cache" class="specalt">杜征</th>
        <td class="alt">1978.6.19</td>
        <td class="alt">1368395322</td>
        <td class="alt">酷6网</td>
    </tr>
    <tr>
        <th scope="row" abbr="Frontside bus" class="spec">王朋</th>
        <td>1978.9.22</td>
        <td>13567890</td>
        <td>adobe公司</td>
    </tr>
    <tr>
        <th scope="row" abbr="L2 Cache" class="specalt">杨小东</th>
        <td class="alt">1978.1.3</td>
        <td class="alt">1354983611</td>
        <td class="alt">朝阳区将台东路乐天玛特</td>
    </tr>
    <tr>
        <th scope="row" abbr="Frontside bus" class="spec">杨秀燕</th>
        <td>1977.12.3</td>
        <td>1354353623</td>
        <td>朝阳区教委</td>
    </tr>
    <tr>
        <th scope="row" abbr="L2 Cache" class="specalt">张小光</th>
        <td class="alt">1978.10.24</td>
        <td class="alt">134567831</td>
        <td class="alt">铁路第二中学</td>
    </tr>
</table>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body {
    font-size: 12px;
    color: #4f6b72;
    background-color: #E6EAE9;
}
a {
    color: #c75f3e;
}
table {
    width: 700px;
    border-collapse: collapse;
}
caption {  /*设置表格标题 */
    padding: 0 0 12px 0;
    width: 700px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}
thead th {
    color: #4f6b72;
    border: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-align: left;
    padding: 6px 6px 6px 12px;
    background: #CAE8EA;
}
tbody {
    background: #fff;
}
tbody th, tbody td {
    border: 1px solid #C1DAD7;
    font-size: 14px;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}
tbody tr:nth-child(2n) {
    background: #F5FAFA;
    color: #797268;
}
</style>
<body>
<table id="mytable" summary="财经2000级毕业生通讯录">
    <caption>
    财经2014级毕业生通讯录
    </caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>出生日期</th>
            <th>电话</th>
            <th>单位</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>王明</th>
            <td>1978.1.4</td>
            <td>137563443</td>
            <td>中国铁道部</td>
        </tr>
        <tr>
            <th>李丽</th>
            <td>1977.5.7</td>
            <td>13893212</td>
            <td>北京市朝阳区街道办事处</td>
        </tr>
        <tr>
            <th>刘丽敏</th>
            <td>1978.4.23</td>
            <td>13345678</td>
            <td>北京市11中学</td>
        </tr>
        <tr>
            <th>李松</th>
            <td>1977.11.31</td>
            <td>139432567</td>
            <td>北京东城区防汛办</td>
        </tr>
        <tr>
            <th>赵艳</th>
            <td>1978.7.3</td>
            <td>1355613234</td>
            <td>北京深华新股份有限公司</td>
        </tr>
        <tr>
            <th>杜征</th>
            <td>1978.6.19</td>
            <td>1368395322</td>
            <td>酷6网</td>
        </tr>
        <tr>
            <th>王朋</th>
            <td>1978.9.22</td>
            <td>13567890</td>
            <td>adobe公司</td>
        </tr>
        <tr>
            <th>杨小东</th>
            <td>1978.1.3</td>
            <td>1354983611</td>
            <td>朝阳区将台东路乐天玛特</td>
        </tr>
        <tr>
            <th>杨秀燕</th>
            <td>1977.12.3</td>
            <td>1354353623</td>
            <td>朝阳区教委</td>
        </tr>
        <tr>
            <th>张小光</th>
            <td>1978.10.24</td>
            <td>134567831</td>
            <td>铁路第二中学</td>
        </tr>
    </tbody>
</table>
</body>
</html>

3.css制作日历月历css制作日历月历

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
    border-collapse: collapse; /* 合并单元格之间的边 */
    border: 1px solid #DCDCDC;
    font: normal 12px/1.5em Arial, Verdana, Lucida, Helvetica, sans-serif;
} /* 定义表格文字样式 */
caption {
    text-align: center;
    line-height: 46px;
    font-size: 20px;
    color: blue;
} /* 定义表头的样式,文字居中等 */
td, th {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid #DCDCDC;
} /* 将单元格内容和单元格标题的共同点归为一组样式定义 */
th {
    color: #000000;
    background-color: #EEEEEE;
} /* 针对单元格标题定义样式,使其与单元格内容产生区别 */
td.current {
    font-weight: bold;
    color: #FFFFFF;
    background-color: blue;
} /* 定义当前日期的单元格内容样式 */
td.last_month, td.next_month {
    color: #DFDFDF;
} /* 定义上个月以及下个月在当前月中的文字颜色 */
tr>td, tr>td+td+td+td+td+td+td {
    color: #B3222B;
    background-color: #F8F8F8;
} /* 定义第一列以及最后一列的单元格内容(即双休日)的样式 */
tr>td+td {
    color: #333333;
    background-color: #FFFFFF;
} /* 定义中间五列单元格内容的样式 */
col.day_off {
    color: #B3222B;
    background-color: #F8F8F8;
} /* 针对IE浏览器定义双休日的单元格样式 */
</style>
</head>
<body>
<table>
    <caption>
    2017年7月1日
    </caption>
    <colgroup span="7">
    <col span="1" class="day_off">
    <col span="5">
    <col span="1" class="day_off">
    </colgroup>
    <thead>
        <tr>
            <th>日</th>
            <th>一</th>
            <th>二</th>
            <th>三</th>
            <th>四</th>
            <th>五</th>
            <th>六</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="last_month">29</td>
            <td class="last_month">30</td>
            <td class="current">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
        <tr>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
        </tr>
        <tr>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
        </tr>
        <tr>
            <td>27</td>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td class="next_month">1</td>
            <td class="next_month">2</td>
        </tr>
        <tr>
            <td class="next_month">3</td>
            <td class="next_month">4</td>
            <td class="next_month">5</td>
            <td class="next_month">6</td>
            <td class="next_month">7</td>
            <td class="next_month">8</td>
            <td class="next_month">9</td>
        </tr>
    </tbody>
</table>
</body>
</html>

4.css设计表格分组

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
    font-family: "宋体" arial, helvetica, sans-serif;
}
table {
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.1;
    width: 100%;
}
caption { /*设置表格标题 */
    padding: 0 0 5px 0;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
}
col {
    border: solid 1px #eee;
}
tr:hover, td.start:hover, td.end:hover {
    background: #FF9;
}
th, td {
    padding: .3em .5em;
}
th {
    font-weight: normal;
    text-align: left;
    padding-left: 15px;
}
.arrow {
    background: #eee url(images/arrow.gif) no-repeat 12px 50%;
    padding-left: 28px;
    font-weight: bold;
    color: #444;
}
thead th {
    background: #c6ceda;
    border-color: #fff #fff #888 #fff;
    border-style: solid;
    border-width: 1px 1px 2px 1px;
    padding-left: .5em;
}
tbody th {
    background: url(images/dots.gif) 18px 54% no-repeat;
    padding-left: 26px;
}
tbody th.end {
    background: url(images/dots2.gif) 18px 54% no-repeat;
    padding-left: 26px;
}
</style>
</head>
<body>
<table>
    <caption>
    HTML标签功能分类
    </caption>
    <col></col>
    <col></col>
    <thead>
        <tr>
            <th>标签</th>
            <th>描述</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="arrow" colspan="2">表格</td>
        </tr>
        <tr>
            <th>&lt;table&gt;</th>
            <td>定义表格。</td>
        </tr>
        <tr>
            <th>&lt;caption&gt;</th>
            <td>定义表格标题。</td>
        </tr>
        <tr>
            <th>&lt;th&gt;</th>
            <td>定义表格中的表头单元格。</td>
        </tr>
        <tr>
            <th>&lt;tr&gt;</th>
            <td>定义表格中的行。</td>
        </tr>
        <tr>
            <th>&lt;td&gt;</th>
            <td>定义表格中的单元。</td>
        </tr>
        <tr>
            <th>&lt;thead&gt;</th>
            <td>定义表格中的表头内容。</td>
        </tr>
        <tr>
            <th>&lt;tbody&gt;</th>
            <td>定义表格中的主体内容。</td>
        </tr>
        <tr>
            <th>&lt;tfoot&gt;</th>
            <td>定义表格中的表注内容(脚注)。</td>
        </tr>
        <tr>
            <th>&lt;col&gt;</th>
            <td>定义表格中一个或多个列的属性值。</td>
        </tr>
        <tr>
            <th class="end">&lt;colgroup&gt;</th>
            <td>定义表格中供格式化的列组。</td>
        </tr>
        <tr>
            <td class="arrow" colspan="2">列表</td>
        </tr>
        <tr>
            <th>&lt;ul&gt;</th>
            <td>定义无序列表。</td>
        </tr>
        <tr>
            <th>&lt;ol&gt;</th>
            <td>定义有序列表。</td>
        </tr>
        <tr>
            <th>&lt;li&gt;</th>
            <td>定义列表的项目。</td>
        </tr>
        <tr>
            <th>&lt;dir&gt;</th>
            <td>不赞成使用。定义目录列表。</td>
        </tr>
        <tr>
            <th>&lt;dl&gt;</th>
            <td>定义定义列表。</td>
        </tr>
        <tr>
            <th>&lt;dt&gt;</th>
            <td>定义定义列表中的项目。</td>
        </tr>
        <tr>
            <th>&lt;dd&gt;</th>
            <td>定义定义列表中项目的描述。</td>
        </tr>
        <tr>
            <th>&lt;menu&gt;</th>
            <td>定义命令的菜单/列表。</td>
        </tr>
        <tr>
            <th>&lt;menuitem&gt;</th>
            <td>定义用户可以从弹出菜单调用的命令/菜单项目。</td>
        </tr>
        <tr>
            <th class="end">&lt;command&gt;</th>
            <td>定义命令按钮。</td>
        </tr>
    </tbody>
</table>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。