⽤HTML5制作课程表
⽆论是上班族还是学⽣党，都需要⼀份类似课程表的表格来提醒我们的⽇程。有了它就可以不必担⼼⾃⼰忘记该⼲什么事情，到点了该⼲什么事情。它可以说是我们⽇常⽣活中经常接触的事物了，制作⼀份课程表也很简单，可以⽤纸写，可以在office⾥写，可以在⼀些软件上写等等……但是，你听说过⽤HTML5做的课程表吗？
图1.⽤HTML5写的课程表
怎么样，看起来还是很⾼⼤上的吧！制作这个表格也不难，只需要添加⼀些列表元素（ul,li），之后再⽤CSS美化即可。
代码如下
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的课程表</title>
<link rel="stylesheet" href="../css/课程表.css"> <!-- 引⼊外部样式表-->
</head>
<body>
<div class="Content">
<div class="Title"><p>我的课程表</p></div>
<div class="TopLine"></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>
</ul>
</div>
<!-- 星期⽇课程信息-->
<div class="Sun fl">
<ul class="KeCheng">
<li ></li>
</ul>
</div>
<!-- 星期⼀课程信息-->
<div class="Mon fl">
<ul class="KeCheng">
<li class="GaodengshuxueBg"><p>⾼等数学</p></li>
<li ></li>
<li class="YingyuBg"><p>⼤学英语</p></li>
<li class="JavaBg"><p>⾯向对象程序设计</p></li>
</ul>
</div>
<!-- 星期⼆课程信息-->
<div class="Tue fl">
<ul class="KeCheng">
<li class="WuliBg"><p>⼤学物理</p></li>
<li class="SixiangzhengzhiBg"><p>思想政治</p></li>
<li class="YingyuBg"><p>⼤学英语</p></li>
</ul>
</div>
<!-- 星期三课程信息-->
<div class="Wed fl">
<ul class="KeCheng">
<li class="EnglishlisteningspeakingBg"><p>⼤学英语听说</p></li> <li class="GaodengshuxueBg"><p>⾼等数学</p></li>
<li class="WuliBg"><p>⼤学物理</p></li>
<li class="TiyuBg"><p>体育</p></li>
</ul>
</div>
<!-- 星期四课程信息-->
<div class="Thu fl">
<ul class="KeCheng">
<li class="JavaBg"><p>⾯向对象程序设计</p></li>
<li ></li>
<li class="YingyuBg"><p>⼤学英语</p></li>
<li class="SixiangzhengzhiBg"><p>思想政治</p></li>
</ul>
</div>
<!-- 星期五课程信息-->
<div class="Fri fl">
<ul class="KeCheng">
<li class="GaodengshuxueBg"><p>⾼等数学</p></li>
<li class="WuliBg"><p>⼤学物理</p></li>
<li class="YingyuBg"><p>⼤学英语</p></li>
<li class="EnglishlisteningspeakingBg"><p>⼤学英语听说</p></li> </ul>
</div>
<!-- 星期六课程信息-->
<div class="Sat fl">
<ul class="KeCheng">
<li class="Huodong">团⽇活动</li>
<li>班会</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS部分
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}
/*课程背景颜⾊*/
.SixiangzhengzhiBg{background-color: #4dc4cc}
.GaodengshuxueBg{background-color:#6fa1e0}
.TiyuBg{background-color: #82e27b}
.JavaBg{background-color: #eec291}
.WuliBg{background-color: #b15b7e}
.EnglishlisteningspeakingBg{background-color: #9d8fcc}
.Huodong{background-color: #fa809d}
.content{
width: 890px;
height: 1024px;
background: url("../img/_500641415_banner.jpg")no-repeat;
margin: 0 auto;
}
/*设置标题CSS规则*/
.Title{
padding-top: 35px;
margin: 0 auto;
}
.Title p{
font-size: 40px; font-family: 微软雅⿊;color: #fff;
}
/*设置星期CSS规则*/
.TopLine{
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;
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: 858px;
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: 149px;}
.Mon,Tue,Wed,Thu,Fri,Sat,Sun ul{margin-top: 1px;}
.KeCheng li{
width: 98px;
height: 149px;
border-radius: 10px;
border: 5px solid #fff;
margin-bottom: 3px;
box shadow怎么设置margin-left: 2px;
box-shadow: inset 0 1px 8px #666;
}
.KeCheng li p{
font-family: 微软雅⿊;
color: #fff;
font-size: 20px;
width: 98px;
height: 150px;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
怎么样？很有逼格吧！快去做⼀份属于你⾃⼰的课程表或⽇程表吧，你⼀定会惊叹⾃⼰创作的艺术品的！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论