北京师范大学主页
Posted 汐梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了北京师范大学主页相关的知识，希望对你有一定的参考价值。
北京师范大学主页 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 width: 100%; height: 38px; 4 background-image: url(tp/topbg.jpg); 5 } 6 7 #tops{ 8 position: relative; top: 7px; 9 width: 1170px; height: 24px; 10 } 11 12 #topsa{ 13 position: relative; float: left; 14 width: 390px; height: 24px; 15 } 16 17 #topsb{ 18 position: relative; float: right; 19 width: 417px; height: 24px; 20 } 21 22 .opss{ 23 position: relative; float: left; 24 margin-left: 10px; 25 width: 48px; height: 24px; 26 } 27 28 #ss1,#ss2{ 29 position: relative; float: left; 30 margin-left: 10px; 31 } 32 33 #ss1{ 34 width: 60px; height: 24px; 35 } 36 37 #ss2{ 38 width: 36px; height: 24px; 39 } 40 41 #textk{ 42 position: relative; float: left; 43 margin-left: 10px; padding: 5px; 44 width: 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 width: 100%; height: 79px; 62 background-color: #FFFFFF; 63 } 64 65 #topc{ 66 position: relative; 67 width: 1170px; height: 59px; 68 } 69 70 #topctp{ 71 position: relative; top: 10px; float: left; 72 width: 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 width: 877.5px; height: 54px; 81 } 82 83 .cdl{ 84 position: relative; top:6px; float: left; 85 width: 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 width: 130px; height: 210px; 95 display: none; 96 } 97 98 .cdlcl{ 99 position: relative; float: left; 100 width: 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 width: 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 width: 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 <热门从另一个片段导航到主页片段