用HTML5编写一个课程表界面

方法：用li列表常见表格。
效果图如下

源代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的课程表</title><style>body{margin:0% auto;padding:0;background:#fff;text-align:center;}body>div{margin-right: auto;margin-left: auto;text-align: center;}div,form,ul,ol,li,span,p,dl,dt,dd,img{margin: 0;padding: 0;border: 0;}h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;font-size: 12px;font-weight: normal;}ul,ol,li{list-style: none;}  /*清除列表默认样式*/
/*设置浮动*/.fl{float: left;}
/*课程背景颜色*/.xsyzc{background-color:#00ff40;}.czxt{background-color:#A349A4;}.ui{background-color:#ffff17;}.dl{background-color:#ff5858;}.sjsj{background-color:#ff8040;}.ps{background-color:#400080;}.rg{background-color:#408080;}.web{background-color:#804040;}.nr{width:890px;height:1180px;background-image: url(bg.jpg);margin: 0 auto;}
/*设置标题CSS规则*/.bt{padding-top: 35px;margin: 0 auto;}.bt p{font-size: 40px; font-family: 微软雅黑;color: #fff;}
/*设置星期CSS规则*/.TL{width: 890px;height: 4px;background-color: #d2d2d2;margin-top: 30px;}.Week{width: 890px;height: 58px;background-color: #fff;filter: alpha(opacity=60);opacity: 0.6;}.Week ul{padding-left: 60px;}.Week ul li{font-family: 微软雅黑;font-size: 26px;color: #333;text-align: center;width: 110px;line-height: 56px;}
/*设置节次CSS规则*/.Source{width: 890px;height: 858px;margin-top: 3px;background-image: url("../img/_500641415_banner.jpg");}.Num{width: 60px;height: 1180px;margin-top: 1px;background-color: #fff;filter: alpha(opacity=60);opacity: 0.6;}.Num ul li{font-family: 微软雅黑;font-size: 26px;color: #333;width: 60px;height: 81px;line-height: 81px;text-align: center;}
/*设置课程CSS规则*/.Sun ul li{width: 98px;height: 153px;}.Mon,.Tue,.Wed,.Thu,.Fri,.Sat,.Sun ul{margin-top: 1px;}.kc li{width: 98px;height: 153px;border-radius: 10px;border: 5px solid #fff;margin-bottom: 3px;margin-left: 2px;box-shadow: inset 0 1px 8px #666;}.kc li p{font-family: 微软雅黑;color: #fff;font-size: 20px;width: 98px;height: 153px;display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center;}</style>
</head>
<body><div class="nr"><div class="bt"><p>我的课程表</p></div><div class="TL"></div><div class="Week"><ul><li class="fl">一</li><li class="fl">二</li><li class="fl">三</li><li class="fl">四</li><li class="fl">五</li><li class="fl">六</li><li class="fl">日</li></ul></div><div class="Source">
<!--       节数--><div class="Num fl"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul></div>
<!--     星期一课程信息--><div class="Mon fl"><ul class="kc"><li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li><li class="czxt"><p>操作系统</p></li><li class="dl"><p>电路与电子技术</p></li><li class="xsyzc"><p>形势与政策</p></li><li class="ui"><p>UI界面设计</p></li><li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li></ul></div><!--     星期二课程信息--><div class="Tue fl"><ul class="kc"><li class="sjsj"><p>视觉设计基础</p></li><li class="sjsj"><p>视觉设计基础</p></li><li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li><li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li><li class="ps"><p>Photoshop图像处理</p></li></ul></div><!--     星期三课程信息--><div class="Wed fl"><ul class="kc"><li class="rg"><p>软件工程导论</p></li><li class="ui"><p>UI界面设计</p></li><li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li><li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li><li class="ps"><p>Photoshop图像处理</p></li></ul></div><!--     星期四课程信息--><div class="Thu fl"><ul class="kc"><li class="dl"><p>电路与电子技术</p></li><li class="czxtsyk"><p>操作系统实验课</p></li><li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li><li class="websyk"><p>Web前端高级技术实验课</p></li><li class="web"><p>Web前端高级技术</p></li></ul></div><!--     星期五课程信息--><div class="Fri fl"><ul class="kc"><li class="dl"><p>电路与电子技术</p></li><li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li><li class="rg"><p>软件工程导论</p></li><li class="czxt"><p>操作系统</p></li><li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li></ul></div><!--     星期六课程信息--><div class="Sat fl"><ul class="kc"><li class="uisyk"><p>UI界面设计实验课</p></li><li class="uisyk"><p>UI界面设计实验课</p></li><li class="uisyk"><p>UI界面设计实验课</p></li><li class="uisyk"><p>UI界面设计实验课</p></li><li class="web"><p>Web前端高级技术</p></li></ul></div><!--     星期日课程信息--><div class="Sun fl"><ul class="kc"><li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li></ul></div></div></div>
</body>
</html>

用HTML5编写一个课程表界面相关推荐

label qt 自动换行_QT编写一个登录界面
前言继上篇:一起学Qt之基础篇---入门今天上手实操用QT编写一个登录界面~ 系统权限这个词大家肯定不陌生,你进入一个网站也是,如果不登录,就是以游客的身份进去的,要想看到某些信息肯定需要进行登录 ...
一步步展示如何用C#和ACCESS编写一个登录界面
** 登录界面简易教程 ** 前段时间老师要求做一个登录界面来熟悉C#的操作,于是在看了很多文章后终于编出一个小程序.为了让以后入门的新手不用再找一大堆的文章来慢慢摸索,现在决定分享一下我的编写过程, ...
【tkinter探索之旅】小试牛刀：编写一个登录界面
文章目录一.前言废话二.设计分析三.代码分步解析 1. 导入工具库 2. 创建应用程序窗口 3. 创建画布放置图片 4. 创建账号密码的标签 5. 创建文本框组件 6. 创建按钮组件 7. 设置 ...
java图形界面关键字_怎样用Java编写一个图形界面，要求可以利用关键词查询txt中的内容...
楼主想问技术吗,还是代码,首先说技术完成你说的功能用到的技术如下:用swing写界面,然后用输入流按行读取文件,用正则表达式或者直接contain方法查找. 我写了一个简单的版本你看一下,没考虑换行 ...
Android编写一个登录界面，利用数据库实现记住密码，注册账号，强制下线，以及类似QQ的下拉列表登录功能
首先呢,看到这么长的标题,是不是感觉这些功能有点难以实现呢,哈哈,其实并没有想象中的那么复杂,下面就跟着笔者来一起学习一下这些功能是怎么实现的吧! 1.建立一个所有活动的父类,继承自Appcompat ...
请你使用html5编写一个关于黄柳瑜的网站，内容要包括炫彩动画和相关按钮，比如联系作者之类的...
好的,以下是一个简单的HTML5代码示例: <!DOCTYPE html> <html> <head><meta charset="UTF-8&qu ...
【吐血整理】用java编写一个登陆界面
结构化数据.非结构化数据与半结构化数据文章的开始,聊一下结构化数据.非结构化数据与半结构化数据,因为数据特点的不同,将在技术上直接影响存储引擎的选型. 首先是结构化数据,根据定义结构化数据指的是由二 ...
html5编写一个手机app的首页
为了适配各种手机用一段简单的js代码解决 <script> autoSize(); window.onresize = function(){ autoSize(); } function ...
android实现课程表界面
这是我第一次写博客,也是刚开始学习android,做了一个课程表界面的小练习.做的过程中遇到了一些问题也参考了许多人的解决方法,希望在这里总结下,就当做学习笔记.如果能对那些像我一样的初学者有一点点帮 ...

用HTML5编写一个课程表界面

用HTML5编写一个课程表界面相关推荐

最新文章

热门文章