HTML——超级课程表页面制作

方法：

借助html,css相关知识制作。
1.用表格来做主体设计，相同课程使之显示效果相同。
2.使用属性选择器将相同课程的效果同化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超课</title><style>*{margin:0;padding: 0;}table,tr,td{border:1px solid  lightgray;text-align: center;color: floralwhite;border-collapse: collapse;}table{margin:0 auto;left: 0;top:0;right:0;bottom:0;}td{width: 20px;height:43PX;background-color: gainsboro;}td[class*="VS"]{background-color: aquamarine;}td[class*="OS"]{background-color: khaki;}td[class*="SE"]{background-color: lightpink;}td[class*="UI"]{background-color: greenyellow;}td[class*="CE"]{background-color: cornflowerblue;}td[class*="MG"]{background-color: yellow;}td[class*="PE"]{background-color: lightgreen;}td[class*="PS"]{background-color: lightsteelblue;}td[class*="Web"]{background-color: limegreen;}tr:nth-child(2) td,td:nth-child(1){color: black;}img{margin-bottom:-3px;margin-left: -1px;}</style>
</head>
<body><table><tr><td colspan="8"><header><img src="超课.png"></header></td></tr><tr><td>    </td><td>周一</td><td>周二</td><td>周三</td><td>周四</td><td>周五</td><td>周六</td><td>周日</td></tr><tr><td>1</td><td>    </td><td class="VS" rowspan="4">视觉<br>设计<br>基础</td><td class="SE" rowspan="2">软件<br>工程<br>导论</td><td class="CE" rowspan="2">电路<br>与<br>电子<br>技术</td><td class="CE" rowspan="2">电路<br>与<br>电子<br>技术</td><td class="UI" rowspan="8">UI<br>界面<br>设计</td><td>    </td></tr><tr><td>2</td><td>    </td><td>    </td></tr><tr><td>3</td><td class="OS" rowspan="2">操作<br>系统</td><td class="UI" rowspan="2">UI<br>界面<br>设计</td><td class="OS" rowspan="2">操作<br>系统</td><td class="MG" rowspan="2">毛概</td><td>    </td></tr><tr><td>4</td><td>    </td></tr><tr><td>5</td><td class="CE" rowspan="2">电路<br>与<br>电子<br>技术</td><td>    </td><td class="MG" rowspan="2">毛概</td><td></td><td class="SE" rowspan="2">软件<br>工程<br>导论</td><td>    </td></tr><tr><td>6</td><td>    </td><td>    </td><td>    </td></tr><tr><td>7</td><td class="SP" rowspan="2">形势<br>与<br>政策</td><td class="PE" rowspan="2">大学<br>体育<br>(四)</td><td>    </td><td class="Web" rowspan="2">Web<br>前端<br>高级<br>设计</td><td class="OS" rowspan="2">操作<br>系统</td><td>    </td></tr><tr><td>8</td><td>    </td><td>    </td></tr><tr><td>9</td><td class="UI" rowspan="2">UI<br>界面<br>设计</td><td class="PS" rowspan="3">PS<br>图像<br>处理</td><td class="PS" rowspan="3">PS<br>图像<br>处理</td><td class="Web" rowspan="3">Web<br>前端<br>高级<br>设计</td><td>    </td><td class="Web" rowspan="3">Web<br>前端<br>高级<br>设计</td><td>     </td></tr><tr><td>10</td><td>     </td><td>     </td></tr><tr><td>11</td><td>    </td><td>    </td><td>    </td></tr>
</table>
</body>
</html>

HTML——超级课程表页面制作相关推荐

用HTML写一个超级课程表页面
用HTML写一个超级课程表页面首先给大家展示一下效果图,他家可以根据自己的喜好,换成自己喜欢的颜色看到这个图可以把它肯成一个大的表格来进行做,将一些单元格进行相应的合并就可以达到上面所期望的图片效 ...
自定义view之超级课程表页面的实现
之前机缘巧合做了一个类似超级课程表app的课程表界面,如图所示界面,特此分享它的实现方式和部分源码. 观察分析课程表,发现它可以按下图所示的方式实现: 一.视图部分的实现: <1.顶部GridV ...
HTML+CSS实现基础课程表页面制作 (锚链接到页面下方课程详细信息)~小白入门版~
HTML+CSS实现基础课程表 (锚链接到页面下方课程详细信息) HTML代码部分 <!DOCTYPE html> <html><! ...
实验二、制作一个本学期使用的课程表页面，要求内容清晰，格式规整，有背景图像单击某一门课程名称，可以跳转到该课程的简介（同一页面）
首先看实验内容,要做一个课程表,并且单击某一门课程名称,可以跳转到该课程的简介,而且是在同一个页面上.所以肯定要用到两个表格,一个是关于课程表的表格,一个是关于课程介绍的表格. 第一,关于课程表,把表 ...
模仿超级课程表——抓取学校课表数据
本文参考自:打造超级课程表一.显示课表页面的制作 ①.介绍用过的超标的同学都知道,超标的课表页面是可以滑动的,并且背景为透明色,可以任意修改背景. 效果展示: ②.制作流程那么如何制作出这样的表 ...
php模拟超级课程表,一个功能完善、UI简洁的仿超级课程表的课表控件 TimetableView...
TimetableView 一个非常漂亮的Android课程表控件,该控件支持的功能: 设置数据源颜色设置,控件内置17种颜色触感反馈,每种内置颜色都有对应的三个样式日期显示与高亮课表Item ...
实践--课程表（仿超级课程表展示课表）
总览在上一篇博客实践–课程表(ViewPager实现)中已经实现了课表内容的获取和展示,可是因为ViewPager的显示的效果的局限性,对于课表的一览性较差.而且没有单双周的区分,不能实时显示,故将 ...
python爬取数据情感分析_爬虫再探实战（五）———爬取APP数据——超级课程表【四】——情感分析...
仔细看的话,会发现之前的词频分析并没有什么卵用...文本分析真正的大哥是NLP,不过,这个坑太大,小白不大敢跳...不过还是忍不住在坑边上往下瞅瞅2333. 言归正传,今天刚了解到boson公司有py ...
html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分) 成品截图前期准备素材一.项目页面PSD源文件二.前期准备工作三.CSS属性书写顺序四.布局分析五.布局流程开始页面制作头部 ...

HTML——超级课程表页面制作

方法：

HTML——超级课程表页面制作相关推荐

最新文章

热门文章