页面主体代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XX大学</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="top fl">
<div class="wid1050">
<a href="" class="logo fl"><img src="css/images/nfyk-logo.png" /></a>
<div class="top-right fr">
<div class="top-link fr">
<ul>
<li><a href="">设为主页</a></li>
<li><a href="">加入收藏</a></li>
<li><a href="">English</a></li>
<li><a href="">校内网</a></li>
<li><a href="">信息公开</a></li>
<li><a href="">校长信箱</a></li>
<li style="background:none"><a href="">回顾旧版</a></li>
</ul>
</div>
<div class="search fr">
<form id="au3a" style="display: inline">
<input name="showkeycode" id="showkeycode184761" class="search-input" value="请输入搜索内容...">
<input name="search_btn" type="image" class="search-btn" src="css/images/search.jpg">
</form>
</div>
</div>
</div>
</div>
<div class="menu-nav">
<div id="menu">
<ul class="l1-nav">
<li class="l1-nav"><a class="l1-nav" href="#">学校首页</a></li>
<li class="l1-nav"><a class="l1-nav" href="#">学校概况</a></li>
<li class="l1-nav"><a class="l1-nav" href="#">学校机构</a></li>
<li class="l1-nav"><a class="l1-nav" href="#">科学研究</a></li>
<li class="l1-nav"><a class="l1-nav" href="#">图书馆</a></li>
<li class="l1-nav"><a class="l1-nav" href="#">招生就业</a></li>
<li class="l1-nav" style="margin-right:0;"><a class="l1-nav" href="#">附属医院</a> </li>
</ul>
</div>
</div>
<div class="slide_container">
<ul class="rslides" id="sliders">
<li><a href=""><i></i><img src="css/images/banner.jpg" alt=""></a></li>
</ul>
</div>
<div class="clear"></div>
<div class="sy-part1">
<div class="title fl">
<h3>学校新闻</h3>
<a class="more" href="http://news.smu.edu.cn/">全部新闻>></a>
</div>
<div class="xxxw-con fl">
<div class="xxxw-first fl">
<h3><a href="" style="color:#ffffff;">广东省人社厅周成副厅长一行来校调研</a></h3>
<a href=""><img src="images/1.jpg" style="width:360px;height:240px" /></a>
</div>
<div class="xxxw-1 fl">
<ul>
<li>
<a href="">
<div class="pic fl"><img src="images/2.jpg" style="width:99px;height:73px" /></div>
<div class="txt fl">
<h3>我校举行大学生创客沙龙</h3>
<p>为进一步学习党的十九大精神及习近平总书记新时代中…[2018-04-04]</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="pic fl"><img src="images/3.jpg" style="width:99px;height:73px" /></div>
<div class="txt fl">
<h3>学校召开档案收集整理及馆藏数…</h3>
<p>3月28日，学校召开档案收集整理暨馆藏数字化工作布…[2018-04-04]</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="pic fl"><img src="images/4.jpg" style="width:99px;height:73px" /></div>
<div class="txt fl">
<h3>2017级检验与生物技术本科生导…</h3>
<p>4月2日晚，检验与生物技术学院导师见面会暨2017级本…[2018-04-04]</p>
</div>
</a>
</li>
</ul>
</div>
<div class="xxxw-2 fl">
<ul>
<li>
<a href="info/1139/4165.htm">
<h3>各学院开展思政第一课活动</h3>
<p>检验与生物技术学院：学术有道，诚信为德3月29日下午<span>[2018-04-04]</span></p>
</a>
</li>
<li>
<a href="info/1139/4209.htm">
<h3>海外名家7日齐聚我校畅谈国际突触</h3>
<p>4月7日-9日，第五届国际突触传递及可塑性学术研讨会（<span>[2018-04-04]</span></p>
</a>
</li>
<li>
<a href="info/1139/4208.htm">
<h3>国家康复辅具研究中心与我校共商战</h3>
<p>4月3日上午，国家康复辅具研究中心主任、附属康复医院<span>[2018-04-04]</span></p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div class="sy-part2">
<div class="wid1050">
<div class="sy-lm fl">
<div class="sy-lm-title fl">
<ul>
<li class="current" href="javascript:void(0)" onmouseover="selectSwtich('',this,'bbb',0,'current')"><a href="index/xy.htm">校 园</a> </li>
<li href="javascript:void(0)" onmouseover="selectSwtich('',this,'bbb',1,'current')"><a href="index/yl.htm">医 疗</a> </li>
<li href="javascript:void(0)" onmouseover="selectSwtich('',this,'bbb',2,'current')"><a href="index/mt.htm">媒 体</a> </li>
</ul>
</div>
<div class="sy-lm-con fl">
<div id="bbb0" class="xy fl">
<ul>
<li>
<a href="info/1140/4215.htm">
<div class="date fl"><span>04.04</span><i>2018</i></div>
<div class="txt fl">
<h3>各学院组织观影学习活动</h3>
<p>基础医学院：观影抒情怀 励志图报国 近日，基础医学院组织全体教…</p>
</div>
</a>
</li>
<li style="margin-right:0">
<a href="info/1140/4214.htm">
<div class="date fl"><span>04.04</span><i>2018</i></div>
<div class="txt fl">
<h3>公卫学院举办假期风采展</h3>
<p> 4月1日,公共卫生学院举办了2018“青春欢畅，风采飞扬”假期风采…</p>
</div>
</a>
</li>
<li>
<a href="info/1140/4213.htm">
<div class="date fl"><span>04.04</span><i>2018</i></div>
<div class="txt fl">
<h3>校警携手 共筑安全防火墙</h3>
<p>4月3日下午，XX校区管委会牵头，与学生处一起联合顺德区公安局防诈…</p>
</div>
</a>
</li>
<li style="margin-right:0">
<a href="info/1140/4204.htm">
<div class="date fl"><span>04.03</span><i>2018</i></div>
<div class="txt fl">
<h3>二临举办女生节主题游园会</h3>
<p>3月30日晚，由第二临床医学院学生会主办的“G-I-R-L”女生节主题游园…</p>
</div>
</a>
</li>
<li>
<a href="info/1140/4203.htm">
<div class="date fl"><span>04.03</span><i>2018</i></div>
<div class="txt fl">
<h3>卫管学院举办“卫生管理学科建…</h3>
<p>3月29日，卫生管理学院举办“卫生管理学科建设与发展”学术报告会。…</p>
</div>
</a>
</li>
<li style="margin-right:0">
<a href="info/1140/4202.htm">
<div class="date fl"><span>04.03</span><i>2018</i></div>
<div class="txt fl">
<h3>XX校区举办第四届“花灯赏”…</h3>
<p>3月29日晚，XX校区文化广场热闹非凡，由校团委主办的第四届“刹那…</p>
</div>
</a>
</li>
</ul>
</div>
<div id="bbb1" class="xy fl" style="display: none">
<ul>
<li>
<a href="info/1141/4218.htm">
<div class="date fl"><span>04.05</span><i>2018</i></div>
<div class="txt fl">
<h3>XX医院：服务企业，服务顺德</h3>
<p>4月3日上午，顺德医院院长刘瑞林，副院长钟剑萍，党政办及VIP医学中…</p>
</div>
</a>
</li>
<li style="margin-right:0">
<a href="info/1141/4217.htm">
<div class="date fl"><span>04.05</span><i>2018</i></div>
<div class="txt fl">
<h3>中西医结合医院承办中国中西医…</h3>
<p>3月30日-31日，由中国中西医结合学会风湿类疾病专业委员会主办、中西…</p>
</div>
</a>
</li>
<li>
<a href="info/1141/4216.htm">
<div class="date fl"><span>04.04</span><i>2018</i></div>
<div class="txt fl">
<h3>五附院召开选人用人“一报告两…</h3>
<p>3月29日，根据省委组织部及学校组织部安排，第五附属医院医院召开了2…</p>
</div>
</a>
</li>
<li style="margin-right:0">
<a href="info/1141/4205.htm">
<div class="date fl"><span>04.03</span><i>2018</i></div>
<div class="txt fl">
<h3>XX医院教授做客“中山讲堂”</h3>
<p>4月1日，由省立中山图书馆、南方生活广播、广东科技报、广东省健康管…</p>
</div>
</a>
</li>
<li>
<a href="info/1141/4195.htm">
<div class="date fl"><span>04.02</span><i>2018</i></div>
<div class="txt fl">
<h3>XX医院完成首例微创椎间孔镜…</h3>
<p>3月27日，XX医院脊柱外科成功完成首例微创椎间孔镜手术，因患腰椎…</p>
</div>
</a>
</li>
<li style="margin-right:0">
<a href="info/1141/4194.htm">
<div class="date fl"><span>04.02</span><i>2018</i></div>
<div class="txt fl">
<h3>三附院召开2018年科技工作大会</h3>
<p>3月22日，第三附属医院召开2018年科技工作大会，表彰奖励2017年度为…</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="ztwz fl">
<div class="ztwz-title fl">
<ul>
<li class="current"><a href="#">专题网站</a> </li>
<li ><a href="#">友情链接</a> </li>
</ul>
</div>
<div class="ztwz-1 fl">
<table>
<tr>
<td>
<a href="">
<img src="images/zt-1.jpg" alt="" title="">
</a>
</td>
</tr>
<tr>
<td>
<a href="">
<img src="images/zt-2.jpg" alt="" title="">
</a>
</td>
</tr>
<tr>
<td>
<a href="">
<img src="images/zt-5.jpg" alt="" title="">
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="foot fl">
<div class="wid1050">
<div class="foot-left fl">
<div class="sydw fl">
<a href=""><img src="css/images/sydw.jpg" /></a>
</div>
<div class="bq fl">学校地址：XXXXXXXXXXXX<br />
<a href="" style="color: #c9c9c9">粤ICP备00000000号 </a> XX大学版权所有
</div>
</div>
<div class="foot-middle fl">
<img src="css/images/foot-logo.jpg" />
</div>
<div class="foot-right fr">
<ul>
<li><a href=""><img src="css/images/yx.jpg" /></a></li>
<li><a href=""><img src="css/images/wx.jpg" /></a></li>
<li><a href="" ><img src="css/images/wb.jpg" /></a></li>
<li><a href=""><img src="css/images/phone.jpg" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
重置样式表CSS：
实例
*{margin:0;padding:0; border:0px;}
body,button,input,select{font-family:'微软雅黑', Arial, sans-serif; font-size:12px;}
ul,li{list-style:none; float:left;}
a:link,a:visited,a:hover,a:active{text-decoration:none; cursor:pointer;}运行实例 »
点击 "运行实例" 按钮查看在线实例
公共样式表：
实例
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
img{vertical-align:middle;}
.wid1050{width:1050px; margin:0 auto;}
body{min-width:1050px; background:#f2f2f2;}
.top{width:100%; height:118px; background:url(images/top.jpg) no-repeat center top;}
.logo{width:320px; height:118px; display:block;}
.top-right{width:535px; margin-top:20px;}
.top-link{line-height:30px; height:30px;}
.top-link li{padding:0 15px; background:url(images/line.jpg) no-repeat right center;}
.top-link li a{color:#c8e5ff; font-size:12px; font-family:'宋体';}
.search{width:200px; height:28px; margin-right:10px; margin-top:15px;}
.search-input{width:160px; height:16px; line-height:16px; float:left; padding:6px 0 6px 10px; background:#f8f8f8; color:#003366; font-size:12px;}
.search-btn{width:30px; height:28px; float:right;}
.foot{background:#444140; height:95px; width:100%; position:relative;}
.foot-left{background:url(images/foot-line.jpg) no-repeat right center; width:390px; height:78px; margin-top:17px;}
.sydw{width:52px; height:65px; margin-right:15px;}
.bq{margin-top:8px; line-height:24px; color:#c9c9c9; font-size:12px;}
.foot-middle{width:360px; background:url(images/foot-line.jpg) no-repeat right center; text-align:center; height:78px; margin-top:17px;}
.foot-right{width:275px; padding-left:15px;}
.foot-right li{width:36px; height:36px; margin-left:30px; margin-top:30px;}运行实例 »
点击 "运行实例" 按钮查看在线实例
主页样式表：
实例
.menu-nav{width:100%; height:45px; background:#fff; position:relative; float:left; position:relative; z-index:1000;}
#menu {
margin: 0 auto;
width: 1050px;
clear: both ;
font-size:15px;
height:45px;
}
#menu ul {
list-style: none;
}
li.l1-nav {
float: left;
left: 0px;
top: 0px;
height:45px;
line-height:45px;
text-align:center;
margin-right:18px;background:url(images/nav-mr.jpg) repeat;
}
a.l1-nav {
display: block;
text-align: center;
text-decoration: none;
height: 45px;
line-height: 45px;
color:#333;
float:left;
width:115px;
}
li.l1-nav:hover a.l1-nav {
color: #fff;
height:45px;
line-height:45px;
background:url(images/nav-xz.jpg) repeat;
}
a.l1-nav:hover ul.l2-nav, li.l1-nav:hover ul.l2-nav {
visibility: visible;
}
.rslides { position: relative; overflow: hidden; width: 100%; padding: 0; margin: 0; }
.rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; }
.rslides li:first-child { position: relative; display: block; float: left; }
.rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }
.sy-part1{width:1050px; margin:30px auto; height:300px; overflow:hidden;}
.title{width:100%; height:30px; margin-bottom:26px;}
.title h3{display:block; float:left; height:30px; line-height:30px; color:#333; font-size:18px; font-weight:normal;}
.more{display:block; float:right; color:#333; font-size:12px; height:30px; line-height:30px;}
.xxxw-first{width:360px; height:240px; position:relative; margin-right:12px;}
.xxxw-first h3{position:absolute; left:0; bottom:0; background:rgba(0,0,0,0.5); color:#fff; padding:0 15px; width:330px; font-weight:normal; line-height:30px;}
.xxxw-1{width:334px; background:url(images/fgx.jpg) no-repeat right center; padding-right:42px;}
.xxxw-1 li{width:100%; height:73px; margin-bottom:11px;}
.xxxw-1 li .pic{width:99px; height:73px; margin-right:14px;}
.xxxw-1 li .txt{width:220px;}
.xxxw-1 li .txt h3,.xxxw-2 li h3{display:block; height:20px; width:100%; line-height:20px; font-weight:normal; color:#333; font-size:14px; margin-bottom:5px;}
.xxxw-1 li .txt p,.xxxw-2 li p{display:block; width:100%; line-height:20px; height:40px; color:#666; font-size:12px;}
.xxxw-2{width:302px;}
.xxxw-2 li{width:100%; margin-bottom:18px;}
.sy-part2{width:100%; height:370px; background:url(images/sy-part2.jpg) no-repeat center bottom;}
.sy-lm{width:760px; margin-right:20px; height:370px;}
.sy-lm-title{width:100%; border-bottom:1px solid #e0e9f4; margin-top:10px; height:43px;}
.sy-lm-title li a,.ztwz-title li a{display:block; padding:0 5px; font-size:18px; color:#333; line-height:43px; margin-right:25px;}
.xy li{width:355px; height:60px; margin-top:27px; margin-right:40px;}
.xy .date{width:60px; height:60px; background:url(images/date.jpg) no-repeat; line-height:30px; margin-right:15px;}
.xy .date span{display:block; width:100%; text-align:center; color:#333; font-size:12px; float:left;}
.xy .date i{display:block; width:100%; text-align:center; color:#fff; font-size:14px; float:left;}
.xy .txt{width:280px;}
.xy .txt h3{display:block; float:left; font-weight:normal; color:#333; font-size:14px; width:100%; margin-bottom:4px;}
.xy .txt p{display:block; float:left; font-weight:normal; color:#666; font-size:12px; width:100%; line-height:20px;}
.ztwz{width:270px;}
.ztwz-title{width:100%; height:43px; margin-top:9px; border-bottom:1px solid #e0e9f4;}
.ztwz-1{width:100%; margin-top:20px;}运行实例 »
点击 "运行实例" 按钮查看在线实例
