登陆 注册

用html,css做一个课程表

守望者 2020-03-29 525人围观 ,发现0个评论 htmlcss

     用html和css做一个如下图所示的课程表,html结构的搭建并不难,

         重点在于css渲染的课程表效果,使得不同特殊日期呈现出不同的效果。

QQ截图20200329081221.jpg


这里主要讲一个css部分实现的难点部分,让不同特殊日期呈现出不同的字体颜色。


第一种方法:一个一个改表单元的样式,显然比较笨,效率也低,而且也不灵活。


第二种方法:就是下面用到的方法,利用css的伪选择器,简单高效,便于维护。


第一行的前两个表单元字体颜色定为灰色:

tbody tr:nth-of-type(1) td:nth-of-type(-n+2){color: #aaaaaa;}


第一和最后一的颜色定为红色:

 td:nth-of-type,td:nth-last-of-type(1){color: red;}


倒数第二全部颜色改为灰色:

tbody tr:nth-last-of-type(2) td:nth-last-of-type(-n+2){color: #aaaaaa;}


最后一行全部颜色定为灰色:

tbody tr:nth-last-of-type(1) td:nth-of-type(n){color: #aaaaaa;}


隔行背景色改为青色:

tbody tr:nth-of-type(2n){background-color: #f5fafe;}


全部实例代码如下,可以实测一下:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			
			table{
			
				table-layout: fixed;
				empty-cells: show;
				margin: 0 auto;
				border-collapse: collapse;
				border: 1px solid #cad9ea;
				
				font-size: 12px;
				font-family: sans-serif;
				
			}
		
			caption{
				caption-side: top;
				margin: 1em auto;
				font-size: 2em;
			}
			th{
				background-image: linear-gradient(to top,#aaaaaa,#999999);			
			}
			
			th,td{
				border: solid 1px #cad9ea;
				padding: 1em 3em;
				font-weight: bold;
			}
	
			td:nth-of-type(1){
				color: red;
				/* background-color: #f5fafe; */
				
			}
			td:nth-last-of-type(1){
				color: red;
				/* background-color: #f5fafe; */
			}
			tbody tr:nth-of-type(1) td:nth-of-type(-n+2){color: #aaaaaa;}
			tbody tr:nth-last-of-type(2) td:nth-last-of-type(-n+2){color: #aaaaaa;}
			tbody tr:nth-last-of-type(1) td:nth-of-type(n){color: #aaaaaa;}
            
			tbody tr:nth-of-type(2n){
				/* background-color: #f5aaaa; */
				background-color: #f5fafe;
			}
			tbody td:hover{
				background-color: #f5aaaa;		
			}
		</style>
		
	</head>
	<body>
		<dialog >dddddddddddd</dialog>
		<table>
			<caption>2014年7月1日</caption>
			
			<colgroup >
				<col span="1" class="col1"/ >
				<col span="5"  class="col2"/>
				<col span="1"  class="col3"/>
			</colgroup>
			
			<thead>
				<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
			</thead>
			
			<tbody>
				<tr><td class="c1">29</td><td>30</td><td>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>1</td><td>2</td></tr>
				<tr><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
			
			</tbody>
			
		</table>
	</body>
</html>


    转载请注明本文链接: https://tufeng.xyz/htmlcss/33.html, 谢谢合作!

请发表您的评论
请关注微信公众号
微信二维码