返回顶部下载帮助
网站模板
模板应用：
企业模板 博客模板 娱乐模板 卡通模板 商城模板 节庆模板 相册模板 后台模板
模板风格：
响应式模板 html5模板 中文模板 欧美模板 韩国模板 公益模板 404模板
模板颜色分类：
红色 橙色 黄色 蓝色 黑色 粉色 黑白色
艺术性质分类：
设计 艺术 古典 时尚 珠宝 教育 简历 花 公益 中秋
休闲模板分类：
音乐 电影 体育 游戏 爱情 婚礼 儿童 图书 宠物 旅游 社区 植物
当前位置： 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>


你可能还感兴趣···

人气下载

热门标签

关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

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