第三次作业:上海师范大学首页的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)。
- 源文件和资源文件的打包下载:单击此处下载