北京师范大学主页 http://www.bnu.edu.cn/
主页可以分为
1 顶部菜单和导航栏
2 图片区
3 新闻区
4 底部菜单
自己制作 没有新闻区
1 顶部菜单
内容
1 <div id="top"> 2 <div id="tops"> 3 <div id="topsa"> 4 <a href="http://english.bnu.edu.cn/">ENGLISH VERSION</a> 5 </div> 6 7 <div id="topsb"> 8 <div class="opss"> 9 <a href="mailto:bnu_chengjianping@bnu.edu.cn">书记信箱</a> 10 </div> 11 <div class="opss"> 12 <a href="mailto:xzxx@bnu.edu.cn">校长信箱</a> 13 </div> 14 <div id="ss1"> 15 <a href="http://www.bnu.edu.cn/xfzc/80823.html">校领导信箱</a> 16 </div> 17 <div id="ss2"> 18 <a href="http://www.bnu.edu.cn/xfzc/52576.html">接待日</a> 19 </div> 20 21 <form method="get" name="33" action="#" > 22 <input id="textk" type="text" name="33" value="" /> 23 <input type="image" src="tp/searchbtn-bg.png" name="33" value="" /> 24 </form> 25 </div> 26 </div> 27 </div> 28 29 <div id="topb"> 30 <div id="topc"> 31 <div id="topctp"></div> 32 33 <div id="topccdl"> 34 35 <div class="cdl">师大新闻 36 <div class="cdlc"> 37 <div class="cdlcl"><a href="#">图文报道</a></div> 38 <div class="cdlcl"><a href="#">网络电视</a></div> 39 <div class="cdlcl"><a href="#">校报在线</a></div> 40 <div class="cdlcl"><a href="#">媒体师大</a></div> 41 </div> 42 </div> 43 44 <div class="cdl">学校概况 45 <div class="cdlc"> 46 <div class="cdlcl"><a href="#">学校简介</a></div> 47 <div class="cdlcl"><a href="#">校史沿革</a></div> 48 <div class="cdlcl"><a href="#">现任校领导</a></div> 49 <div class="cdlcl"><a href="#">历任书记</a></div> 50 <div class="cdlcl"><a href="#">历任校长</a></div> 51 <div class="cdlcl"><a href="#">著名学者</a></div> 52 <div class="cdlcl"><a href="#">历史名人</a></div> 53 </div> 54 </div> 55 56 <div class="cdl">院系设置</div> 57 58 <div class="cdl">机构管理</div> 59 60 <div class="cdl">人才招聘</div> 61 62 <div class="cdl">科学研究</div> 63 64 <div class="cdl">招生就业 65 <div class="cdlc"> 66 <div class="cdlcl"><a href="#">本科生招生</a></div> 67 <div class="cdlcl"><a href="#">研究生招生</a></div> 68 <div class="cdlcl"><a href="#">博士后</a></div> 69 <div class="cdlcl"><a href="#">留学生招生</a></div> 70 <div class="cdlcl"><a href="#">继续教育与教师培训</a></div> 71 <div class="cdlcl"><a href="#">就业与创业</a></div> 72 </div> 73 </div> 74 75 <div class="cdl">合作交流 76 <div class="cdlc"> 77 <div class="cdlcl"><a href="#">国际交流与合作</a></div> 78 <div class="cdlcl"><a href="#">国内合作</a></div> 79 <div class="cdlcl"><a href="#">港澳台事务</a></div> 80 <div class="cdlcl"><a href="#">教育基金会</a></div> 81 </div> 82 </div> 83 84 <div class="cdl">图书档案 85 <div class="cdlc"> 86 <div class="cdlcl"><a href="#">图书馆</a></div> 87 <div class="cdlcl"><a href="#">档案馆</a></div> 88 </div> 89 </div> 90 91 <div class="cdl">走进师大 92 <div class="cdlc"> 93 <div class="cdlcl"><a href="#">校园地图</a></div> 94 <div class="cdlcl"><a href="#">校园风光</a></div> 95 <div class="cdlcl"><a href="#">校历</a></div> 96 <div class="cdlcl"><a href="#">黄页</a></div> 97 </div> 98 </div> 99 100 </div> 101 </div> 102 </div>
样式
1 #top{ 2 position: relative; 3 100%; height: 38px; 4 background-image: url(tp/topbg.jpg); 5 } 6 7 #tops{ 8 position: relative; top: 7px; 9 1170px; height: 24px; 10 } 11 12 #topsa{ 13 position: relative; float: left; 14 390px; height: 24px; 15 } 16 17 #topsb{ 18 position: relative; float: right; 19 417px; height: 24px; 20 } 21 22 .opss{ 23 position: relative; float: left; 24 margin-left: 10px; 25 48px; height: 24px; 26 } 27 28 #ss1,#ss2{ 29 position: relative; float: left; 30 margin-left: 10px; 31 } 32 33 #ss1{ 34 60px; height: 24px; 35 } 36 37 #ss2{ 38 36px; height: 24px; 39 } 40 41 #textk{ 42 position: relative; float: left; 43 margin-left: 10px; padding: 5px; 44 125px; height: 14px; 45 background-color: rgba(255,255,255,0.3); 46 box-shadow: 0px 0px 6px #7C7C7C; 47 } 48 49 #topsa a,.opss a,#ss1 a,#ss2 a{ 50 font-size: 12px; color: #FFFFFF; 51 text-decoration: none; 52 } 53 54 #topsa a:hover,.opss a:hover,#ss1 a:hover,#ss2 a:hover{ 55 text-decoration: underline; 56 } 57 58 #topb{ 59 position: relative; 60 border-top: 15px #FFFFFF; 61 100%; height: 79px; 62 background-color: #FFFFFF; 63 } 64 65 #topc{ 66 position: relative; 67 1170px; height: 59px; 68 } 69 70 #topctp{ 71 position: relative; top: 10px; float: left; 72 292.5px; height: 59px; 73 background-image: url(tp/BNU-logo.png); 74 background-size: 269px 59px; 75 background-repeat: no-repeat; 76 } 77 78 #topccdl{ 79 position: relative; top: 15px; float: left; 80 877.5px; height: 54px; 81 } 82 83 .cdl{ 84 position: relative; top:6px; float: left; 85 86.25px; height: 38px; 86 border-right: 1px solid #C9C9C9; 87 text-align: center; line-height: 38px; 88 font-size: 14px; color: rgb(191, 37, 1); 89 font-family: "微软雅黑"; cursor: pointer; 90 } 91 92 .cdlc{ 93 position: relative; float: left; 94 130px; height: 210px; 95 display: none; 96 } 97 98 .cdlcl{ 99 position: relative; float: left; 100 129px; height: 30px; 101 background-color: #e8f3fb; 102 background-image: url(tp/listdash.png); 103 background-repeat: no-repeat; 104 background-position:left 18px top 15px; 105 } 106 107 .cdlcl a{ 108 text-decoration: none; 109 color: rgb(191, 37, 1) ; 110 } 111 112 .cdl:hover{ 113 background-color: #e8f3fb; 114 } 115 116 .cdlcl:hover{ 117 background-color: #D1EBFF; 118 } 119 120 .cdl:hover .cdlc{ 121 display: block; z-index: 1; 122 }
效果
2 图片区
内容
1 <div id="tpk"> 2 <div id="tpkx"></div> 3 </div>
样式
1 #tpk{ 2 position: relative; 3 1170px; height: 397px; 4 background-image: url(tp/20180111085449531124.jpg); 5 background-size: 1170px 397px; 6 } 7 8 #tpkx{ 9 position: relative; top: 227px; 10 1170px; height: 170px; 11 background-image: url(tp/hover.png); 12 }
效果
3 新闻区（部分）
1 <div id="xwlai"> 2 3 <div id="xwlzz"></div> 4 5 <div id="xwlyy"></div> 6 7 <div id="xwlqt"> 8 9 <div id="qta"> 10 <div class="qtas"><img src="tp/weixin.png" /></div> 11 <div class="qtas"><img src="tp/lxyz.png" /></div> 12 <div class="qtas"><img src="tp/shisanwu.png" /></div> 13 <div class="qtas"><img src="tp/qigongjiang.png" /></div> 14 </div> 15 16 <div id="qtb"> 17 <div id="qtbs">快速登录</div> 18 <div class="qtbs">信息门户 | 信息公开</div> 19 <div class="qtbs">校务信息 | 管理系统</div> 20 <div class="qtbs">教师邮箱 | 学生邮箱</div> 21 <div id="qtfgx"></div> 22 </div> 23 24 <div id="qtc"> 25 <div id="qtcs">常用链接</div> 26 <div class="qtbs"> 教育基金会 | 信息网络服务</div> 27 <div class="qtbs">新校区建设指挥部</div> 28 <div class="qtbs">校友总会 | 学风建设</div> 29 <div class="qtbs">教师教育机构 | 教育科学期刊</div> 30 <div class="qtbs">京师心晴</div> 31 <div class="qtbs">IPv6教师教育创新支持系统</div> 32 33 <div id="qtd"> 34 <div class="qtdc" style="float: left;" ><img src="tp/weibo.jpg" style="float: right;" /></div> 35 <div class="qtdc" style="float: right;" ><img src="tp/weixin.jpg" style="float: left;" /></div> 36 </div> 37 38 </div> 39 40 </div> 41 42 </div>
样式
1 #xwlai{ 2 position: relative; 3 1170px; height: 676px; 4 background-color: #FFFFFF; 5 } 6 7 #xwlzz{ 8 position: relative; float: left; 9 554px; height: 650px; 10 margin-top: 20px; padding: 0px 15px 0px 15px; 11 border-right: 1px solid #E3E3E3; 12 } 13 14 #xwlyy{ 15 position: relative; float: left; 16 360px; height: 656px; 17 margin-top: 20px; padding: 0px 15px 0px 15px; 18 } 19 20 #xwlqt{ 21 position: relative; float: left; 22 165px; height: 613px; 23 padding: 0px 15px 0px 15px; 24 background-color: #f3f9fc; 25 } 26 27 #qta{ 28 position: relative; top: 18px; 29 165px; height: 240px; 30 } 31 32 .qtas{ 33 position: relative; 34 165px; height: 50px; 35 margin: 5px 0px 5px 0px; 36 } 37 38 .qtas img{ 39 165px; height: 50px; 40 cursor: pointer; 41 } 42 43 #qtb{ 44 165px; height: 136px; 45 } 46 47 #qtfgx{ 48 position: relative; 49 165px; height: 2.38px; 50 background-image: url(tp/split.png); 51 background-size: 165px 2.38px; 52 background-repeat: no-repeat; 53 margin: 20px 0px 20px 0px; 54 } 55 56 #qtbs,#qtcs{ 57 position: relative; 58 165px; height: 20px; 59 margin: 5px 0px 5px 0px; 60 text-align: center; 61 font-family: "KaiTi"; 62 font-size: 16px; 63 line-height: 20px; 64 color: #BF2501; 65 } 66 67 .qtbs{ 68 position: relative; 69 165px; height: 18px; 70 margin: 5px 0px 5px 0px ; 71 text-align: center; 72 line-height: 18px; 73 font-size: 12px; 74 color: #333; cursor: pointer; 75 } 76 77 #qtc{ 78 position: relative; 79 165px; height: 201px; 80 } 81 82 #qtd{ 83 position: relative; 84 165px; height: 28px; 85 } 86 87 .qtdc{ 88 position: relative; 89 72px; height: 28px; 90 }
效果
4 底部
内容
1 <div id="zdibu"> 2 <div id="zdbla">© 版权所有 北京师范大学 地址：北京市新街口外大街19号 邮编：100875 京ICP备05066832号-1 京公网安备 110402430002号 电话查号台：010-58806183 后勤服务热线：010-58801111 3 </div> 4 5 <div id="zdblc">Site designed by MONOKEROS</div> 6 7 </div> 8
样式
1 #zdibu{ 2 position: relative; 3 1130px; height: 41px; 4 padding: 20px; 5 background-color: #e5eaee; 6 } 7 8 #zdbla{ 9 position: relative; float: left; 10 916.656px; height: 40px; 11 } 12 13 #zdblc{ 14 position: relative; float: right; 15 183px; height: 20px; 16 text-align: center; 17 } 18 19 #zdbla,#zdblc{ 20 font-size: 12px; line-height: 20px; 21 color: #333; 22 } 23
效果
