个性课表静态网页的制作

最新推荐文章于 2024-03-17 12:18:48 发布
最新推荐文章于 2024-03-17 12:18:48 发布
阅读量1.7k 收藏 14
点赞数 6
分类专栏： HTML和CSS 文章标签： HTML CSS 静态网页 课表制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38836435/article/details/88551052
版权

个性课表静态网页的制作

效果图:

在这里插入图片描述
主要运用知识：html ，css
这里是把主页面分成三个div区块：
一个是课表头部；
一个是课表月份以及课的节数；
还有一个是星期，日期和课名；
第二个和第三个星期日期是用表格
第三个课名用列表来做
内容比较简单，所以没有添加注释

html 代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>课表</title>
<link rel="stylesheet" type="text/css"  href="classstyle/classstyle.css" />
</head>
<body>
<div class="main">
<div class="top">
<em>课表(第3周)</em>
</div>
<div class="number">
<table border="0px" cellpadding="0" cellspacing="0">
<th>03月</th>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
</table>
</div>
<div class="class_date">
<div class="week">
<table border="0px" cellpadding="0" cellspacing="0">
<tr>
<td>周一</td>
<td class="xz">周二</td>
<td>周三</td>
<td>周四</td>
<td>周五</td>
</tr>
<tr>
<td>11日</td>
<td class="xz">12日</td>
<td>13日</td>
<td>14日</td>
<td>15日</td>
</tr>
</table>
</div>
<div class="class_morning">
<ul>
<li class="by"><em>编译原理@三教204</em></li>
<li class="arm"><em>ARM体系结构@三教510</em></li>
<li class="by"><em>编译原理@三教204</em></li>
<li class="arm"><em>ARM体系结构@三教510</em></li>
<li class="rgzn"><em>人工智能@三教504</em></li>
<li class="rj"><em>软件工程@三教410</em></li>
<li class="tx"><em>计算机图形学@三教104</em></li>
<li class="rgzn"><em>人工智能@三教504</em></li>
<li class="tx"><em>计算机图形学@三教104</em></li>
<li class=""></li>
</ul>
</div>
<div class="class_afternoon">
<ul>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class="rj"><em>软件工程@三教410</em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
</ul>
</div>
<div class="class_night">
<ul>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
<li class=""><em></em></li>
</ul>
<a href="#"><img src="images/图层 1.jpg" title="选项" /></a>
</div>
</div>
</div>
</body>
</html>
css代码：
@charset "utf-8";
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,a,ul,li,ol,p,em,i,table,th,tr,td,img,div,span{margin: 0px;padding: 0px;}
body{font-size: 12px;font-family: "微软雅黑"; color: aliceblue;}
li{list-style: none;}
em,i{font-style: normal;}
a{text-decoration: none;}
.by{background-color: #92c0d6;}
.arm{background-color: #f5aaab;}
.rj{background-color: #d7b271;}
.tx{background-color: #26a495;}
.rgzn{background-color: #2cb5f5;}
.xz{background-color: #73b4ef;}
.main{
 background-color:#c4e2fe;
 width: 540px;
 height: 1040px;
 margin: 0px auto;
}
.top{
 background: #73b4ef;
 padding-top: 50px;
 width: 540px;
 height: 49px;
 text-align: center;
}
.top em{
 line-height: 25px;
 font-size: 25px;
}
.number{
 float:left;
 width: 25px;
 height:941px;
}
.number table{
 border:0px solid #73b4ef;
 color:#666666;
}
.number table th{
 font-size: 15px;
 text-align: center;
 width: 24px;
 height: 50px;
 border-right: 2px solid #73b4ef;
 border-bottom: 2px solid #73b4ef;
}
.number table tr td{
 text-align: center;
 font-size: 15px;
 width: 24px;
 height: 74px;
 border-right: 2px solid #73b4ef;
}
.class_date{
 float:left;
 width: 515px;
 height:941px;
}
.week{
 width: 515px;
 height: 50px;
 border-bottom: 2px solid #73b4ef;
}
.week table{
 color:#666666;
 font-size: 15px;
}
.week table tr td{
 width: 103px;
 height: 25px;
 text-align: center;
}
.class_morning{
 width: 515px;
 height: 291px;
 border-bottom: 2px solid #73b4ef;
}
.class_morning ul li{
 border-radius: 7px;
 float: left;
 padding:50px 5px; 
 width: 91px;
 height: 43px;
 margin: 1px 1px;
 line-height: 20px;
}
.class_morning ul li em{
 font-size: 13px;
}
.class_afternoon{
 width: 515px;
 height: 291px;
 border-bottom: 2px solid #73b4ef;
}
.class_afternoon ul li{
 border-radius: 7px;
 float: left;
 padding:50px 5px; 
 width: 91px;
 height: 43px;
 margin: 1px 1px;
 line-height: 20px;
}
.class_afternoon ul li em{
 font-size: 13px;
}
.class_night{
 position: relative;
 width: 515px;
 height: 300px;
}
.class_night ul li{
 border-radius: 7px;
 float: left;
 padding:50px 5px; 
 width: 91px;
 height: 43px;
 margin: 1px 1px;
 line-height: 20px;
}
.class_night ul li em{
 font-size: 13px;
}
.class_night img{
 position: absolute;
 width: 58px;
 height: 58px;
 bottom: 1px;
 right: 25px;
}

第一次写博客就这样啦！

laiqi_luckyboy
关注
  • 6
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
制作一个简单HTML静态网页（HTML+CSS）
HTML网页设计
08-02 3326
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒...
实现超级课程表的一键提取课程功能，有app及课表静态网页内容.7z
04-07
实现超级课程表的一键提取课程功能，有app及课表静态网页内容，无论是研究还是学习，或者作为课程设计、毕业设计都是很好的参考资料
静态网页制作
09-25
静态网页制作
html静态网页设计制作 HTML我的家乡沧州网页代码 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
最新发布
网页设计与制作
03-17 774
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——
制作静态网页
qq_52291147的博客
09-20 2324
制作静态网页——微博
创建静态网页
mz1528的博客
11-04 514
创建静态网页： 1.制作静态页面 2.将html文件和图片放到同一文件夹中，取名为yemian 3.将yemian文件夹放到tomcat文件夹里的webapps文件夹中 4.运行tomcat 5.输入网址localhost:8080/yemian 就可以访问了
【WORM ONE】：静态网页制作
m0_56902859的博客
10-10 319
因为是刚刚结束前端10分钟，有些内容只是理解得很浅显，所以笔记部分借鉴了一些优秀的博主。希望能帮到大家。
超级课程表一键提取课程功能app及课表静态网页内容
03-01
内含app具体代码，可以编译，但是无法运行，因为具体的链接涉及到隐私问题，被我屏蔽，要想正常导入自己教务处的课表，请修改HttpUtil.java里对应的链接信息。...里面还含有三张课表的静态网页供大家参考
winform用datagridview制作课程表实例
09-04
主要介绍了winform用datagridview制作课程表的方法,实例分析了WinForm实现课程表的结构、数据库及调用技巧,需要的朋友可以参考下
网页设计的课程设计，界面漂亮实用，适合做为模板
05-19
这是我大学网页设计的课程设计，做了很久了，付出了很多心血，资源分不算高了！界面漂亮，容易修改代码，还有动画效果的！
课表HTML源码
07-13
加入css的炫彩课表，加有 时钟效果
静态网页课程设计---静态网站
08-10
网站共有7个主页面：首页、音乐、新闻中心、视频、阅读、科技和联系我们。每一个页面用统一的背景，以保证网站统一的页面风格。网站整体色为蓝色和白色，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用Div标签和表格，用代码实现具体定位。位置的设计也是重要的一个部分，根据具体内容决定大体结构，相同的风格调用CSS设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，我加入适当的js特效代码，用以达到更好的浏览效果。
html课程表页面
11-26
html课程表页面
HTML5生成课表
12-25
HTML5生成超级课程表格子样式课表，并通过JS代码实现单双周课程自动判断。
教案之制作个性课程表.pdf
10-06
教案之制作个性课程表.pdf
【Web网页设计制作-毕业设计期末大作业源码】奢侈品钟表行业在线商城网页模板4867.zip
05-16
Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计...
网页设计与制作课程标准
08-17
网页设计与制作课程的标准通常包括以下内容： 1. HTML和CSS基础：学习HTML标记语言和CSS样式表的基本语法、结构和属性，能够创建简单的网页布局和样式。 2. JavaScript编程：掌握JavaScript的基本语法、函数和事件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值