北京师范大学主页

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                 <热门从另一个片段导航到主页片段

从片段返回主页活动而不启动新活动(主页)

985大学的高材生只会写代码片段,丢人吗?

985大学的高材生只会写代码片段,丢人吗?

985大学的高材生只会写代码片段,丢人吗?

985大学的高材生只会写代码片段,丢人吗?