第三次作業：上海師范大學首頁的CSS+DIV的山寨方法
- 參考的HTML文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上海師范大學</title>
<link type="text/css" href="Style.css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="divBanner"> <a id="aLogIn" href="#">登錄</a>
<ul id="ulNavBar">
<li id="liIndex"><a href="#"><img src="breadcrumb.gif" />首頁</a></li>
<li><a href="#">關于師大</a></li>
<li><a href="#">人才培養</a></li>
<li><a href="#">教學一覽</a></li>
<li><a href="#">科學研究</a></li>
<li><a href="#">招生就業</a></li>
<li><a href="#">合作交流</a></li>
<li><a href="#">學苑生活</a></li>
<li><a href="#">服務之窗</a></li>
<li><a href="#">信息公開</a></li>
<li><a href="#">校友園地</a></li>
</ul>
</div>
<div id="divMarqueeText">
<div id="divMarquee">城市，讓生活更美好； 師大，為世博添光彩；世博，讓上海更精彩！</div>
</div>
<div id="divContent">
<div id="divLeftSideBar">
<!--Search bar and English Version -->
<a href="#"><img id="imgEnglishVer" src="untitled.bmp" /></a>
<input id="inputSearch" type="text" />
<a href="#"><img id="imgSearch" src="search.bmp" /></a>
<!-- Log in form -->
<img id="imgLogIn" src="left_11.jpg" /> <span id="spanUserName">用戶名:</span>
<input id="inputUserName" type="text" />
<span id="spanPassword">密 碼:</span>
<input id="inputPassword" type="text" />
<span id="spanCaptcha">驗證碼:</span>
<input id="inputCaptcha" type="text" />
<img id="imgCaptcha" src="captcha.bmp" />
<input id="inputLogIn" type="button" value="登錄" />
<a id="aReadme" href="#"> <span id="spanReadme">登錄須知</span></a>
<!-- Shortcuts -->
<img id="imgShortcuts" src="left_2.jpg" />
<ul id="ulShortcuts" name="ulShortcuts">
<li><a href="#"><img src="icon_1.jpg" /></a></li>
<li><a href="#"><img src="icon_2.jpg" /></a></li>
<li><a href="#"><img src="icon_3.jpg" /></a></li>
<li><a href="#"><img src="icon_4.jpg" /></a></li>
<li><a href="#"><img src="icon_5.jpg" /></a></li>
<li><a href="#"><img src="icon_6.jpg" /></a></li>
<li><a href="#"><img src="icon_7.jpg" /></a></li>
<li><a href="#"><img src="icon_8.jpg" /></a></li>
</ul>
</div>
<div id="divContentPannel"> <img id="imgNews" src="center_1.jpg" />
<table id="tableNews" class="News">
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">扶貧支教五載 捐贈培訓下鄉——校領導率隊赴老區</a></td>
<td class="tdNewsStat"> [ 2010-04-16 , 瀏覽:303 ] </td>
</tr>
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">學報哲社版編委專家共議引領和促進學校學科發展之使命</a></td>
<td class="tdNewsStat"> [ 2010-04-16 , 瀏覽:201 ] </td>
</tr>
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">播音主持學生楊正龍考上香港浸會大學國際新聞專業研究生</a></td>
<td class="tdNewsStat"> [ 2010-04-16 , 瀏覽:480 ] </td>
</tr>
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">奉賢校區管委會擴大會議要求凝心聚力加強管理</a></td>
<td class="tdNewsStat"> [ 2010-04-16 , 瀏覽:143 ] </td>
</tr>
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">旅院/旅專舉辦就業招聘會多家知名企業前來招賢</a></td>
<td class="tdNewsStat"> [ 2010-04-16 , 瀏覽:231 ] </td>
</tr>
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">學校高度重視落實第七屆教代會第二次會議提案處理工作</a></td>
<td class="tdNewsStat"> [ 2010-04-16 , 瀏覽:131 ] </td>
</tr>
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">陳衛平教授承擔的上海市社科規劃項目通過驗收并獲好評</a></td>
<td class="tdNewsStat"> [ 2010-04-16 , 瀏覽:201 ] </td>
</tr>
</table>
<span id="spanMoreNews"><a class="MoreNews" href="#">更多...</a></span>
<div id="divNews">
<table id="tablePicNews">
<tr>
<td><a href="#"><img src="MakeThumbnail.jpg"/></a></td>
<td><a href="#"><img src="MakeThumbnail2.jpg"/></a></td>
<td><a href="#"><img src="MakeThumbnail3.jpg"/></a></td>
<td><a href="#"><img src="MakeThumbnail4.jpg"/></a></td>
<td><a href="#"><img src="MakeThumbnail5.jpg"/></a></td>
<td><a href="#"><img src="MakeThumbnail6.jpg"/></a></td>
<td><a href="#"><img src="MakeThumbnail7.jpg"/></a></td>
</tr>
</table>
</div>
<img id="imgAnnouncements" src="center_2.jpg" />
<table id="tableAnnouncements" class="News">
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">關于已婚女職工婦科體檢的通知</a></td>
<td class="tdNewsStat"> [ 2010-03-30 , 瀏覽:3751 ] </td>
</tr>
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">2009年度理工科科科研獎勵公示</a></td>
<td class="tdNewsStat"> [ 2010-04-16 , 瀏覽:853 ] </td>
</tr>
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">2009年度文科科研獎勵公示</a></td>
<td class="tdNewsStat"> [ 2010-04-16 , 瀏覽:1095 ] </td>
</tr>
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">關于4月18日（周日）暫停行政樓及會議中心校園網絡...</a></td>
<td class="tdNewsStat"> [ 2010-04-16 , 瀏覽:212 ] </td>
</tr>
<tr>
<td class="tdNewsItem"><a href="#" class="NewsItem">關于申報第十六屆“安子介國際貿易研究獎”評獎工作的...</a></td>
<td class="tdNewsStat"> [ 2010-04-16 , 瀏覽:227 ] </td>
</tr>
</table>
<span id="spanMoreAnnouncements"><a class="MoreNews" href="#">更多...</a></span>
</div>
<div id="divRightSideBar">
<!-- Enrolling column -->
<img id="imgEnroll" src="aboutchanne05.jpg" /> <img id="imgMeeting" src="zhaoshengzixunhui.bmp" />
<p id="pDesc">查看具體時間地點，請點擊進入……<a class="More" href="#">>>更多</a></p>
<!-- New topics -->
<img id="imgNewTopics" src="aboutchanne04.jpg" />
<ul id="ulNewTopics">
<li id="liExpo"><a class="More" href="#">2010年中國上海世博會</a></li>
<li id="liParty"><a class="More" href="#">學習實踐科學發展觀</a></li>
<li id="liAnniversary"><a class="More" href="#">五十五周年校慶</a></li>
</ul>
<a class="More" id="aMoreTopics" href="#">更多</a>
<!-- Xingzhi Xing -->
<img id="imgXingzhiXingBar" src="aboutchanne09.jpg" /> <img id="imgXingzhiXing" src="xzx.jpg" />
<p id="pXingzhiXing">捧著一顆心來，不帶半根草去。</p>
<p id="pTaoXingzhi">陶行知</p>
</div>
</div>
<div id="divLinks">
<ul id="ulLinks">
<li>
<select>
<option>管理機構</option>
<option>很多管理機構</option>
<option>這么多管理機構</option>
<option>咋這么多管理機構</option>
</select>
</li>
<li>
<select>
<option>教學機構</option>
<option>很多教學機構</option>
<option>這么多教學機構</option>
<option>咋這么多教學機構</option>
</select>
</li>
<li>
<select>
<option>快速通道</option>
<option>很多快速通道</option>
<option>這么多快速通道</option>
<option>咋這么多快速通道</option>
</select>
</li>
<li>
<select>
<option>友情鏈接</option>
<option>很多友情鏈接</option>
<option>這么多友情鏈接</option>
<option>咋這么多友情鏈接</option>
</select>
</li>
</ul>
</div>
<div id="divFoot">
<ul id="ulFootLinks">
<li class="FootLink"><a href="#">版權信息</a></li>
<li class="FootLinkSpilter">|</li>
<li class="FootLink"><a href="#">聯系我們</a></li>
<li class="FootLinkSpilter">|</li>
<li class="FootLink"><a href="#">更新日志</a></li>
<li class="FootLinkSpilter">|</li>
<li class="FootLink"><a href="#">網站地圖</a></li>
</ul>
<span id="spanCopyright">版權所有:上海師范大學</span>
<img id="imgBeian" src="shcia_cc.gif" />
<span id="spanBeian">滬ICP備 05052062</span>
</div>
</body>
</html>
- 參考的CSS文件源代碼：
@charset "utf-8";
/* CSS Document */
body { margin: 0 auto; }
/* { outline: 1px dotted #CCC; } /* for testing purpose */
#divBanner {
width: 993px;
height: 153px;
background: url(200805191.jpg) no-repeat top center;
margin: 0 auto;
position: relative;
}
#divMarqueeText {
width: 993px;
height: 32px;
margin: 0 auto;
background-color: #CACCCB;
}
#divContent {
width: 993px;
margin: 0 auto;
height: 549px;
}
#divLinks {
width: 993px;
height: 42px;
margin: 0 auto;
background-color: #92CB7A;
position: relative;
}
#divFoot {
width: 993px;
background-color: #F00;
margin: 0 auto;
position: relative;
text-align: center;
}
#aLogIn { /* The LogIn hyperlink on the right top of the page. */
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
vertical-align: top;
color: #FFF;
position: absolute;
margin-left: 949px;
margin-top: 3px;
}
#ulNavBar { /* The navigation bar. */
position: absolute;
margin-left: 159px;
margin-top: 128px;
padding-left: 0; /* To remove the left padding of the first item in the navigation bar, in this case, the whole of it. */
}
#liIndex {
width: 49px !important; /* This property cannot be redefined because of the !important. */
}
#ulNavBar li {
margin: 0px;
float: left;
list-style: none;
text-align: right;
vertical-align: middle;
width: 67px;
height: 22px;
padding-top: 2px;
}
#ulNavBar img {
border: 0;
}
#ulNavBar a:link, a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
font-weight: bold;
vertical-align: top;
text-align: left;
padding-right:3px;
}
#ulNavBar a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #060;
text-decoration: none;
font-weight: bold;
vertical-align: top;
text-align: left;
padding-right: 3px;
}
#divMarquee { /* The marquee text after navigation bar. */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #555555;
height: 19px;
vertical-align: center;
padding-top: 3px;
padding-left: 15px;
overflow: hidden;
}
#divLeftSideBar { /* The left side bar. */
width: 208px;
height: 548px;
float: left;
position: relative;
border-left: 1px solid #92AD5E;
border-right: 1px solid #92AD5E;
background-color: #F6FBE5;
}
#imgEnglishVer, #inputSearch, #imgSearch, #imgLogIn, #spanUserName, #inputUserName, #spanPassword, #inputPassword, #spanCaptcha, #inputCaptcha, #imgCaptcha, #inputLogIn, #aReadme, #spanReadme, #imgShortcuts, #ulShortcuts {
position: absolute;
}
#imgEnglishVer, #imgSearch {
border: none;
}
#imgEnglishVer {
left: 10px;
top: 23px;
width: 138px; /* ~~ */
height: 23px; /* better performance for designing time.*/
}
#inputSearch {
left: 10px;
top: 52px;
width: 137px;
height: 16px;
font-size: 12px;
}
#imgSearch {
left: 159px;
top: 46px;
}
#imgLogIn {
left: 0;
top: 108px;
}
#spanUserName, #spanPassword, #spanCaptcha {
width: 70px;
left: 1px;
text-align: center;
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
}
#spanUserName {
height: 23px;
top: 156px;
line-height: 21px
}
#spanPassword {
top: 179px;
height: 26px;
line-height: 24px;
}
#spanCaptcha {
top: 208px;
height: 27px;
line-height: 20px;
}
#inputUserName, #inputPassword {
width: 124px;
height: 14px;
left: 70px;
}
#inputUserName {
top: 156px;
}
#inputPassword {
top: 180px;
}
#inputCaptcha {
top: 208px;
left: 70px;
width: 62px;
height: 15px;
}
#imgCaptcha {
top: 204px;
left: 142px;
border: #000 solid 1px;
}
#inputLogIn {
left: 78px;
top: 233px;
width: 40px;
height: 22px;
padding: 0;
font-family: "宋體", Times, serif;
}
#aReadme, #aReadme:hover, #aReadme:visited {
left: 120px;
top: 235px;
width: 57px;
height: 23px;
line-height: 23px;
text-align: left;
font-size: 13px;
color: #000;
text-decoration: underline;
}
#spanReadme {
color: #F00;
text-decoration: underline;
}
#imgShortcuts {
top: 266px;
left: 0;
}
#ulShortcuts img {
border: none;
}
#ulShortcuts {
list-style: none;
padding: 0;
margin-left: 15px;
margin-top: 305px;
width: 190px;
}
#ulShortcuts li {
float: left;
padding: 0;
margin-bottom: 6px;
margin-right: 10px;
}
#divContentPannel { /* The content pannel. */
width: 554px;
height: 548px;
float: left;
position: relative;
}
#imgNews, #tableNews, #divNews, #spanMoreNews, #imgAnnouncements, #tableAnnouncements, #spanMoreAnnouncements {
position: absolute;
}
#imgNews {
left: 0;
top: 8px;
}
.News {
width: 478px;
padding: 0;
left: 16px;
}
#tableNews {
top: 56px;
}
.News tr {
height: 23px;
}
.tdNewsItem {
width: 331px;
}
.News td {
vertical-align: top;
text-align: left;
}
.NewsItem:link, .NewsItem:visited {
color: #000;
text-decoration: none;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.NewsItem:hover {
color: #000;
text-decoration: underline;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.tdNewsStat {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #060;
}
#spanMoreNews {
top: 234px;
left: 462px;
}
#spanMoreAnnouncements {
left: 462px;
top: 526px;
}
.MoreNews, .MoreNews:visited {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #555555;
}
.MoreNews:hover {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
color: #555555;
}
#divNews {
border:solid thin #999;
left: 10px;
top: 259px;
width: 534px;
overflow: hidden;
}
#tablePicNews {
height: 80px;
}
#tablePicNews td {
width: 94px;
vertical-align: middle;
padding-left: 5px;
}
#tablePicNews img {
border: none;
}
#imgAnnouncements {
top: 351px;
left: 0;
}
#tableAnnouncements {
top: 400px;
}
#divRightSideBar { /* The right side bar. */
width: 227px;
height: 548px;
float: left;
position: relative;
border-left: 1px solid #92AD5E;
border-right: 1px solid #92AD5E;
background-color: #F6FBE5;
}
#imgEnroll, #imgMeeting, #pDesc, .More, #imgNewTopics, #ulNewTopics, #aMoreTopics, #imgXingzhiXingBar, #imgXingzhiXing, #pXingzhiXing, #pTaoXingzhi {
position: absolute;
}
#imgEnroll {
left: 0;
top: 8px;
}
#imgMeeting {
top: 35px;
left: 38px;
}
#pDesc {
top: 110px;
left: 24px;
width: 177px;
height: 38px;
text-indent: 2em;
font-size: 12px;
margin: 0;
line-height: 18px;
}
.More, .More:visited {
color: #000;
text-decoration: none;
padding: 0;
margin: 0;
text-align: left;
}
.More:hover {
color: #000;
text-decoration: underline;
padding: 0;
margin: 0;
text-align: left;
}
#imgNewTopics {
left: 0;
top: 166px;
}
#ulNewTopics {
list-style: none;
padding: 0;
margin-left: 20px;
margin-top: 206px;
width: 204px;
}
#ulNewTopics li {
margin-bottom: 4px;
width: 205px;
height: 30px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 6px;
padding-left: 44px;
}
#liExpo {
background-image: url(expo.gif);
background-repeat: no-repeat;
background-position: 0 7px;
}
#liParty {
background-image: url(party.jpg);
background-repeat: no-repeat;
background-position: 0 7px;
}
#liAnniversary {
background-image:url(55xq.jpg);
background-repeat: no-repeat;
background-position: 0 7px;
}
#aMoreTopics {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
top: 300px;
left: 174px;
}
#imgXingzhiXingBar {
top: 324px;
left: 0;
}
#imgXingzhiXing {
top: 365px;
left: 75px;
width: 81px;
height: 75px;
}
#pXingzhiXing, #pTaoXingzhi {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#pXingzhiXing {
top: 455px;
left: 31px;
}
#pTaoXingzhi {
left: 176px;
top: 488px;
}
#ulLinks { /* Links bar. */
position: absolute;
list-style: none;
padding: 0;
margin-left: 113px;
margin-top: 0;
}
#ulLinks li {
float: left;
height: 22px;
width: 172px;
padding: 10px;
}
#ulLinks select {
width: 172px;
height: 22px;
}
#ulFootLinks { /* Foot links. */
position: absolute;
list-style: none;
padding: 0;
margin-top: 16px;
margin-left: 382px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#ulFootLinks li{
float: left;
padding: 0 3px;
}
.FootLink a, .FootLink a:visited {
text-decoration: none;
font-weight: bold;
color: #339900;
}
.FootLink a:hover {
border-bottom: 1px solid #666;
text-decoration: none;
font-weight: bold;
color: #339900;
}
#spanCopyright {
position: absolute;
top: 59px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
left: 433px;
}
#imgBeian {
position: absolute;
top: 98px;
left: 478px;
}
#spanBeian {
position: absolute;
top: 167px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
left: 445px;
}
- 存在的問題：
li元素的項目符號可以用背景代替（background-image），但是CSS2不能控制背景圖片的大小。這個問題CSS3將可能解決（新的屬性，例如background-image-size）。
- 源文件和資源文件的打包下載：單擊此處下載
浙公網安備 33010602011771號