HTML+CSS实现基础课程表页面制作 (锚链接到页面下方课程详细信息)~小白入门版~
2024-05-19 13:16:33
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;
}背景图还是要根据大家自己的需要修改哈~
效果图
HTML+CSS实现基础课程表页面制作 (锚链接到页面下方课程详细信息)~小白入门版~相关推荐
- “页面制作人员”？“页面工程师”？“页面架构师”？滚一边去！
随手查看我的Blog统计,发现有好多人来自蓝色理想上推荐的一篇文章叫<页面制作人员(W3C Page Builder)的修炼之道>,随后我来到作者blog,发现作者在文章中推荐了我的blo ...
- 黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结 黑马程序员前端-CSS之emmet语法 黑马程序员前端-CSS的 ...
- iframe嵌入页面白屏_封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
在页面中嵌入PDF文件 在上一篇<在html页面中嵌入其他页面的方法--零基础自学网页制作>(结尾见目录)中我们学习了如何在页面中嵌入其他页面的操作.今天我们来嵌入一个pdf文件. 其实使 ...
- 【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录 一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端 一.移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问 ...
- el-table 行背景颜色_使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
行颜色设置的简便方法 昨天我们在<使用HTML添加表格3(间距与颜色)--零基础自学网页制作>(目录在结尾)中学习了设置单元格以及其中内容的空间间距和背景颜色. 其中添加列向单元格背景颜色 ...
- Day213.讲师详细页、课程列表页面、课程详细页、阿里云视频播放测试、阿里云云视频播放器 -谷粒学院
谷粒学院 讲师详细页 一.后端部分 1.TeacherFrontController @RestController @CrossOrigin @RequestMapping("/eduse ...
- Day215.课程详细页面功能完善、Echarts统计分析模块[生成统计数据+生成图表]前后端整合 -谷粒学院
谷粒学院 课程详细页面功能完善 一.修改课程详细接口 1.在service_order模块添加接口 用于判断订单中status值是否为1,为1则为已支付 @RestController @CrossO ...
- 大学web基础期末大作业~仿品优购商城页面制作(HTML+CSS+JavaScript)
HTML网页设计期末课程大作业~~仿品优购页面制作(HTML+CSS+JavaScript) 关于HTML期末网页制作,大作业A+水平 ~仿品优购网页作业HTML+CSS+JavaScript实现,共 ...
- 【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE htm ...
最新文章
- 页面左边导航固定，右边自适应宽度
- Perl IO：文件锁
- QMouseEvent鼠标事件简介
- Python小游戏(打地鼠)
- curl cookie格式
- UVA11991 Easy Problem from Rujia Liu?题解
- OpenGL加载2D的草地
- Airflow安装教程
- 这一年炼就的底层内功修养
- passenger 部署
- 未来计算机和ai应用,计算机人工智能技术的应用与发展（1）
- 对象可以创建数组吗_企业微信活码如何创建？活码可以统计渠道来源吗？
- C语言-qsort函数详解及使用例
- 论文阅读 (二十一)：Exploratory Machine Learning with Unknown Unknowns (2021AAAI EXML)
- 利用迈克尔逊干涉仪和傅里叶变换光谱法测量相干性
- 2020-11-30
- 2021年科学突破奖：生命科学、基础物理学和数学奖得主揭晓
- wifi,zigbee,ble 比较分析
- 刘知远：NLP研究入门之道（三）如何通过文献掌握学术动态
- Nacos的下载安装