样品：
目录
源码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表</title>
<link rel="stylesheet" href="mystyle.css"> <!-- 引入外部样式表-->
</head>
<body>
<div class="Content">
<div class="Title">
<p>PJ的课程表</p>
</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="KeCheng">
<li class="SQL">
<p>大型数据库@含浦校区3203教室</p>
</li>
<!-- <li class="wuke2"style="border: none;box-shadow: none;width: 108px ;height: 158px;"></li> -->
</ul>
<ul class="KeCheng3">
<li class="YunChou">
<p>运筹学@含浦校区3303教室</p>
</li>
</ul>
<ul class="KeCheng">
<li class="Com">
<p>计算机组成原理@含浦校区3302教室</p>
</li>
<!-- <li class="wuke2"style="border: none;box-shadow: none;width: 108px ;height: 158px;"></li> -->
</ul>
</div>
<!-- 星期二课程信息-->
<div class="Tue fl">
<ul class="KeCheng">
<li class="WeiJi">
<p>微机原理@含浦校区3306教室</p>
</li>
<li class="wuke2" style="border: none;box-shadow: none;width: 108px ;height: 78px;"></li>
<li class="Suan">
<p>算法设计与分析@含浦校区3202教室</p>
</li>
<li class="Com">
<p>计算机组成原理@含浦校区3机房</p>
</li>
</ul>
</div>
<!-- 星期三课程信息-->
<div class="Wed fl">
<ul class="KeCheng">
<li class="Suan">
<p>算法设计与分析@含浦校区3202教室</p>
</li>
<li class="wuke2" style="border: none;box-shadow: none;width: 108px ;height: 78px;"></li>
<li class="SQL">
<p>大型数据库@含浦校区3203教室</p>
</li>
</ul>
<ul class="KeCheng3">
<li class="Web">
<p>Web技术@含浦校区3304教室</p>
</li>
</ul>
</div>
<!-- 星期四课程信息-->
<div class="Thu fl">
<ul class="KeCheng3">
<li class="Android">
<p>移动应用开发@含浦校区11机房</p>
</li>
</ul>
<ul class="KeCheng">
<li class="WeiJi">
<p>微机原理@含浦校区3306教室</p>
</li>
<li class="wuke2" style="border: none;box-shadow: none;width: 108px ;height: 158px;"></li>
<li class="MaoGai">
<p>思想@含浦校区3117教室</p>
</li>
</ul>
</div>
<!-- 星期五课程信息-->
<div class="Fri fl">
<ul class="KeCheng">
<li class="TiYu">
<p>体育(4)@含浦校区风雨篮球场</p>
</li>
<li class="wuke2" style="border: none;box-shadow: none;width: 108px ;height: 558px;"></li>
</ul>
<ul class="KeCheng3">
<li class="MaoGai">
<p>思想@含浦校区3117教室</p>
</li>
</ul>
</div>
<!-- 星期六课程信息-->
<div class="Sat fl">
<ul class="KeCheng">
</ul>
</div>
<!-- 星期日课程信息-->
<div class="Sun fl">
<ul class="KeCheng">
<li style="border: none;box-shadow: none;width: 108px"></li>
</ul>
</div>
</div>
</div>
</body>
</html>
css
body {
margin: 0% auto;
padding: 0;
text-align: center;
/* background-image: url("images/KK-259.jpg"); */
}
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
}
/*课程背景颜色*/
.MaoGai {
background-color: #10fa23
}
/* 数据库 */
.SQL {
background-color: #6fa1e0
}
/* 计算机组成原理 */
.Com {
background-color: #11ec91
}
/* 算法 */
.Suan {
background-color: #188af5
}
/* 微机 */
.WeiJi {
background-color: #f7e81f
}
/* 运筹学 */
.YunChou {
background-color: #9d8fcc
}
/* Web */
.Web {
background-color: #025192
}
/* 移动开发 */
.Android {
background-color: #f76083;
}
/* 体育 */
.TiYu {
background-color: rgb(233, 191, 6);
}
.Content {
width: 890px;
height: 1115px;
background: url("images/KK-259.jpg")no-repeat;
background-size: 100% 100%;
margin: 0 auto;
}
/*设置标题CSS规则*/
.Title {
padding-top: 35px;
margin: 0 auto;
}
.Title p {
font-size: 40px;
font-family: 微软雅黑;
color: #fff;
}
/*设置星期CSS规则*/
.Week {
width: 890px;
height: 60px;
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: 950px;
margin-top: 3px;
}
.Num {
width: 60px;
height: 980px;
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;
}
.KeCheng3 li,
.KeCheng li {
width: 98px;
border-radius: 10px;
border: 5px solid #fff;
margin-bottom: 3px;
margin-left: 2px;
box-shadow: inset 0 1px 8px #666;
}
.KeCheng li {
height: 149px;
}
.KeCheng3 li {
height: 230px;
}
.KeCheng li p,
.KeCheng3 Li p {
font-family: 微软雅黑;
color: #fff;
font-size: 20px;
width: 98px;
height: 150px;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
注：html里面有几个文本我改了应该和图片里面不一样（因为它说我zz敏感，哭出声来）