樣品：
目錄
源碼：
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敏感，哭出聲來）