下面是用HTML5 编写的一个课程表界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的课程表</title>
<link rel="stylesheet" href="kcb.css" type="text/css"> <!-- 引入外部样式表-->
</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>
下面是样式代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课程表的CSS样式表</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>
</html>
最终效果图
