HTML+CSS实现基础课程表页面制作 (锚链接到页面下方课程详细信息)~小白入门版~

最新推荐文章于 2024-06-17 11:26:49 发布
最新推荐文章于 2024-06-17 11:26:49 发布
阅读量692 收藏 4
点赞数
分类专栏： Html入门 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pan_ZC/article/details/112135605
版权

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"> &nbsp; &nbsp;软件工程 大二 第1学期 &nbsp;&nbsp;</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>&nbsp;</td>
					<td class="C">
						<a href="#C1">
							C#程序设计
						</a>
					</td>
					<td class="PTMS">
						<a href="#PTMS1">
							概率论与数理统计 I
						</a>
					</td>
					<td>&nbsp;</td>
					<td class="Marx">
						<a href="#Marx1">
							马克思主义基本原理概论
						</a>
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</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>&nbsp;</td>
					<td class="English">
						<a href="#English1">
							大学英语 III
						</a>
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</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>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</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>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>

				<!-- 行6 -->

				<tr>
					<th>九、十节</th>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>

				<!-- 行7 -->

				<th>十、十一节</th>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</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;
}

背景图还是要根据大家自己的需要修改哈~

效果图

在这里插入图片描述
在这里插入图片描述

沧浪百川
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用HTML&CSS创建一个网页课程表
qq_45915712的博客
11-05 1万+
使用HTML&CSS创建一个网页课程表整体布局加入表头数据合并上下单元格并加入课表信息美化页面最终效果 整体布局 对于课程表，其实就是一个表格，其中加入CSS样式。 因此，我们先创建一个九行八列的表格（以我的课表为例）。 <table border="1"> <tr> <td> </td> <td> </td> <td> </td> <td> </t
锚链常见的几种连接方式
zyml88888的博客
10-13 4601
锚链常见的几种连接方式 有档锚链由锚端链节、末端链接和若干中间链节组成，链节与链节之间用连接卸扣连接。 常用连接方式如下 锚端链节 1、普环（Common Link，C）+......+普环（Common Link，C）+加大环（Enlarged Link，EL）+转环（Swivel，SW）+加大环（Enlarged Link，EL）+末端环（End Link，E）+末端卸扣（End Shackle,ES）+锚卸扣 2、肯特卸扣（Kenter Shackle,KS）+普...
css做的课表
04-09
做的静态页面，做的课表，包括行的合并，颜色
用css制作一个课程表
m0_63882285的博客
09-11 410
星期二</td><td>星期三</td><td>星期四</td><td>星期五
大一学生《web课程设计》用DIV+CSS技术设计的个人网页（网页制作课作业）
最新发布
weixin__BJ050106的博客
06-17 270
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
html和css写一个课程表
Alt__的博客
09-19 690
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> td{ width: 100px; height: 60px; text-align...
HTML+CSS制作课程表
weixin_57037336的博客
09-10 3045
HTML+CSS制作课程表 今天复习到了表格，八表个内容进行了更深层次的了解，首先，来看看我课堂上做好的课程表吧~ 这里用到了HTML和CSS，就这两个而已，相比网络上的，这个较为基础，也比较适合初学者运用， 接下来显示一下HTML代码： <table> <caption>计算机工程技术学院课表</caption> <thead> <tr>
亚星锚链：全球锚链龙头，受益船舶景气周期上行+漂浮式未来增量.pdf
10-27
亚星锚链作为全球锚链行业的领军企业，其业务涵盖了船用锚链和海洋石油开采用系泊链，以及随着新兴领域漂浮式海上风电的发展，公司正面临着新的增长机遇。以下是关于公司及其所在行业的详细分析： 1、亚星锚链公司...
机械设计基础课程设计汇本说明书）.doc
10-08
【机械设计基础课程设计说明书】 本课程设计说明书主要围绕“单级蜗轮蜗杆减速器”的设计展开，针对船舶与海洋工程专业，旨在培养学生在机械设计领域的实践能力和理论知识的运用。设计任务是设计船舶锚传动系统中的...
机械设计基础课程设计报告报告说明书.doc
11-10
【机械设计基础课程设计报告】主要涵盖了机械设计中蜗轮蜗杆减速器的设计过程，旨在让学生深入理解并应用机械设计的基础知识。以下是该课程设计的关键知识点： 1. **设计题目**：单级蜗轮蜗杆减速器是本次设计的...
重学CSS（11）—— overflow属性详解，利用CSS实现锚点定位
tianduantoutiao的博客
06-21 480
1.overflow的裁剪界线——border-box overflow属性用于指定块容器元素的内容溢出时的表现方式——滚动，裁剪，自适应。“BFC的最佳结界”只是其衍生出来的特性，“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内边缘，来看下面的例子。 <div style="width: 200px;height: 200px;ov...
课表HTML源码
07-13
加入css的炫彩课表，加有 时钟效果
html课程表页面
11-26
html课程表页面
网页设计之课程设计源代码
12-08
基于网页设计的课程设计源代码，网帮组到广大爱学者。
课表网页制作
05-27
自己制作的一个课表,用的是html,小菜鸟作品,还望大家笑纳.
html-课程表
01-20
课表 *{ margin: 0; padding: 0; } td{ text-align: center; } .math{ width: 90px; height: 250px; } .more{ width: 60px; } .time{ width: 110px; } .emp{ width: 60px; } .cour{ width: 108px } .col{ background-color: rgba(224,
HTML课程表制作（利用html、css、table表格知识）
Endorphincuan的博客
09-27 3559
学习html中的表格table章节后，可以制作一些表格、课程表等，可以更清晰地呈现信息。
html5&css&js代码 035 课程表
明月看潮生的博客
03-21 860
一个具有亮蓝色背景的网页，其中包含一个样式化的表格用于展示一周课程安排。表格设计了交替行颜色、鼠标悬停效果以及亮色表头，并对单元格设置了内边距和边框样式。
利用html css创建的课程表代码
ZYlky886的博客
09-10 783
利用html+css创建课程表
锚链集中质量法matlab张力计算详细编程
03-25
对于一组锚链，可以通过集中质量法来计算锚链任意位置处的张力，具体步骤如下： 1. 确定锚链的初始状态，包括锚链总长度、质量分布、端点位置等参数。 2. 确定离散化的步长，即将锚链等距离分成若干段，每段长度为Δs。 3. 构建节点矩阵，共n个节点，每个节点的位置为sj，取值为jΔs，j=0,1,2,…,n-1。 4. 将锚链质量分布离散化，计算每个节点处的重力大小和重心位置。对于每个节点j，计算节点上端点到重心的距离rGj和重力大小Fj。 5. 根据牛顿第二定律，计算每个节点处的力平衡，即得到节点处的张力Tj。 6. 循环计算每个节点处的张力，直到收敛，即误差小于设定精度。 下面是一份简单的Matlab代码实现： ``` % 输入参数 L = 100; % 锚链总长度 m = 1000; % 锚链总质量 n = 100; % 锚链离散化节点个数 g = 9.81; % 重力加速度 R = 1; % 锚链弯曲半径 % 初始化参数 ds = L / (n-1); % 步长 s = linspace(0, L, n)'; % 节点矩阵 rG = linspace(0, L, n)'; % 重心距离 F = m * g / n * ones(n,1); % 重力 T = ones(n,1); % 张力 eps = 1e-10; % 收敛精度 diff = inf; % 误差 while diff > eps % 计算重心距离 for j = 2:n-1 rG(j) = (s(j+1)-s(j-1))/2 + R^2 ./ (s(j+1)-s(j-1)); end % 计算张力 T(1) = T(n) = m*g/2; for j = 2:n-1 T(j) = T(j-1) + ds/2 * (F(j) + F(j-1)) - ds * m * g * rG(j); end % 计算误差 diff = norm(T - circshift(T,[1 -1])) / norm(T); end % 输出结果 plot(s, T); xlabel('Position (m)'); ylabel('Tension (N)'); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值