HTML+CSS实现基础课程表 (锚链接到页面下方课程详细信息)
HTML代码部分
<!DOCTYPE html>
<html>
<!-- 设计要求 -->
<!-- Web程设为 #20B2AA-->
<!-- C#课程为 #7FFFD4 -->
<!-- 大学英语为#808000 -->
<!-- 概率论为 #D87093 -->
<!-- 马克思为 #FFFF00 -->
<!-- 大学体育为#FF7F50 -->
<!-- 线性代数为#E6E6FA -->
<!-- 数据结构为#FFE4E1 -->
<head>
<meta charset="utf-8">
<title>Exp_2</title>
<link rel="stylesheet" type="text/css" href="Exp_2.css" />
</head>
<body class="box">
<div class="design">
<h2 class="Align"> 软件工程 大二 第1学期 </h2>
<br />
<br />
<table align="center" border="5" cellpadding="50">
<!-- 行1 -->
<tr>
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
<!-- 行2 -->
<tr>
<th>一、二节</th>
<td> </td>
<td class="C">
<a href="#C1">
C#程序设计
</a>
</td>
<td class="PTMS">
<a href="#PTMS1">
概率论与数理统计 I
</a>
</td>
<td> </td>
<td class="Marx">
<a href="#Marx1">
马克思主义基本原理概论
</a>
</td>
<td> </td>
<td> </td>
</tr>
<!-- 行3 -->
<tr>
<th>三、四节</th>
<td class="English">
<a href="#English1">
大学英语 III
</a>
</td>
<td class="DS">
<a href="#DS1">
数据结构
<a />
</td>
<td class="DS">
<a href="#DS1">
数据结构
<a />
</td>
<td> </td>
<td class="English">
<a href="#English1">
大学英语 III
</a>
</td>
<td> </td>
<td> </td>
</tr>
<!-- 行4 -->
<tr>
<th>五、六节</th>
<td class="PTMS">
<a href="#PTMS1">
概率论与数理统计 I
</a>
</td>
<td class="Web">
<a href="#Web1">
Web设计基础
</a>
</td>
<td class="LA">
<a href="#LA1">
线性代数 I
</a>
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!-- 行5 -->
<tr>
<th>七、八节</th>
<td class="PE">
<a href="#PE1">
大学体育(3)
</a>
</td>
<td class="LA">
<a href="#LA1">
线性代数 I
</a>
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!-- 行6 -->
<tr>
<th>九、十节</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!-- 行7 -->
<th>十、十一节</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</table>
</div>
<div class="design">
<div class="C">
<h4 id="C1" class="pad">
C#程序设计
杨振宇副教授
1-12,14-16(周)
2号公教楼306
---------------------
C#程序设计
杨振宇副教授
17(单周)
2号公教楼306
</h4>
</div>
<div class="PTMS">
<h4 id="PTMS1" class="pad" class="PTMS">
概率论与数理统计Ⅰ
王景明讲师
1-16(周)
2号公教楼JT203
</h4>
</div>
<div class="Marx">
<h4 id="Marx1" class="pad" class="Marx">
马克思主义基本原理概论
邓文钱讲师
1-16(周)
1号公教楼JT203
</h4>
</div>
<div class="English">
<h4 id="English1" class="pad" class="English">
大学英语Ⅲ
李群
3-18(周)
1号公教楼106
</h4>
</div>
<div class="Web">
<h4 id="Web1" class="pad">
Web设计基础
周军讲师
1-16(周)
机电楼B315
</h4>
</div>
<div class="DS">
<h4 id="DS1" class="pad" class="DS">
数据结构
李爱民副教授
1-14(周)
1号公教楼302
---------------------
数据结构
李爱民副教授
15(单周)
1号公教楼302
</h4>
</div>
<div class="LA">
<h4 id="LA1" class="pad" class="LA">
线性代数Ⅰ
李颖讲师
2,4,6,8,10,12,14,16(双周)
1号公教楼JT204
---------------------
线性代数Ⅰ
李颖讲师
15(单周)
1号公教楼JT102
</h4>
</div>
<div class="PE">
<h4 id="PE1" class="pad" class="PE">
大学体育(3)
张振国
1-16(周)
</h4>
</div>
</div>
</body>
</html>
CSS代码部分
.box {
background-image: url(背景图.jpg);
}
.design {
border: 10;
text-align: center;
}
.pad {
border: solid;
padding: 100px;
}
.Align {
border: solid;
padding: 3.125rem;
margin: 0 text-align: center;
}
.C {
background-color: #7FFFD4;
}
.Web {
background-color: #20B2AA;
}
.English {
background-color: #808000;
}
.PTMS {
background-color: #D87093;
}
.Marx {
background-color: #FFFF00;
}
.PE {
background-color: #FF7F50;
}
.LA {
background-color: #E6E6FA;
}
.DS {
background-color: #FFE4E1;
}
背景图还是要根据大家自己的需要修改哈~
效果图