1、新建html文档。
2、书写hmtl代艨位雅剖码。<div style="width:1000px;margin: 0 auto;"><h1 class="H unone clear"> <span class="left">信息 </span> </h1><div class="jyTable"> <div class="clearfix"> <ul class=" left"> <li class='cur'>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> <li>星期六</li> <li>星期日</li> </ul> </div> <div class='zong'> <div class="list list1"> <div class="tabCon"> <ul> <li class="tabth clearfix"> <span style="width: 13%">时间/上午</span> <span style="width: 12%">校区</span> <span style="width: 10%">室</span> <span style="width: 16%">级</span> <span style="width: 16%">内容</span> <span style="width: 16%">主任</span> <span style="width: 15%">操作</span> </li> </li> </ul> </div> </div> </div></div></div>
3、初始化css代码。<style>ul,ol,li{list-style-type:none;}a img{border:0;}a{text-decoration:none; color: #595757;}a:hover{text-decoration:underline; color: #595757;}.left{float:left;}.right{float:right;}.textCenter{text-align:center;}.textRight{text-align:right;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}body{font-size: 12px;color: #595757;font-family: "微软雅黑";background-color: #ffffff;}body a{color: #595757}</style>
4、书写css代码。.tH1{height:40px;line-height:40px;font-size多唉捋胝:20px;font-weight:bold;border-bottom:2px solid lightskyblue;margin-bottom:5px;}.t{padding-left:1px;}.t li{width:90px;text-align:center;background-color:lightskyblue;font-size:17px;float:left;cursor:pointer;padding:6px 0;}.t li.cur{background:lightskyblue;color:#ffffff;}.texp li{float:left;margin-right:10px;}.zong{clear:both;width:1000px;height:260px;overflow:hidden;}.list{width:6994px;}.list .tabCon{float:left;width:997px;height:250px;border:1px solid #F2F2F2;border-top:0px ;}.tabth{width:997px;height:37px;line-height:37px;color:#ffffff;background-color:lightskyblue;}.tabth span{display:inline-block;text-align:center;float:left;}#s1,#s2,#s3,#s4,#s5,#s6,#s7{height:210px;overflow:hidden;}.tabUl{height:200px;overflow:hidden;}.tabtr{width:1000px;height:40px;*height:38px;line-height:40px;*line-height:38px;}.tabtr span,.tabtr a{display:inline-block;text-align:center;cursor:pointer;float:left;text-decoration:none;}.hot{background:lightskyblue;color:#ffffff;cursor:pointer;}
5、书写并添加js代码。<script src="js/jquery-1.7.2.min.js"></script><script src="js/tab.js"></script>
6、代码整体结构。
7、查看效果。
