北京师范大学主页

北京师范大学主页  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                 <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">&nbsp;&nbsp;&nbsp;教育基金会 | 信息网络服务</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             width: 1170px; height: 676px;
 4             background-color: #FFFFFF;
 5         }
 6         
 7         #xwlzz{
 8             position: relative; float: left;
 9             width: 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             width: 360px; height: 656px;
17             margin-top: 20px; padding: 0px 15px 0px 15px;
18         }
19         
20         #xwlqt{
21             position: relative; float: left;
22             width: 165px; height: 613px;
23             padding: 0px 15px 0px 15px;
24             background-color: #f3f9fc;
25         }
26         
27         #qta{
28             position: relative; top: 18px;
29             width: 165px; height: 240px;
30         }
31         
32         .qtas{
33             position: relative; 
34             width: 165px; height: 50px;
35             margin: 5px 0px 5px 0px;
36         }
37         
38         .qtas img{
39             width: 165px; height: 50px;
40             cursor: pointer;
41         }
42         
43         #qtb{
44             width: 165px; height: 136px;
45         }
46         
47         #qtfgx{
48             position: relative;
49             width: 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             width: 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             width: 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             width: 165px; height: 201px;
80         }
81         
82         #qtd{
83             position: relative;
84             width: 165px; height: 28px;
85         }
86         
87         .qtdc{
88             position: relative;
89             width: 72px; height: 28px;
90         }

   效果

 

 

4 底部

  内容

1 <div id="zdibu">
2         <div id="zdbla">&copy; 版权所有 北京师范大学&nbsp;&nbsp;地址：北京市新街口外大街19号&nbsp;&nbsp;邮编：100875&nbsp;&nbsp;京ICP备05066832号-1 &nbsp;&nbsp;京公网安备        110402430002号&nbsp;&nbsp;电话查号台：010-58806183&nbsp;&nbsp;后勤服务热线：010-58801111
3         </div>
4         
5         <div id="zdblc">Site designed by MONOKEROS</div>
6         
7     </div>
8

   样式

 1         #zdibu{
 2             position: relative;
 3             width: 1130px; height: 41px;
 4             padding: 20px; 
 5             background-color: #e5eaee;
 6         }
 7         
 8         #zdbla{
 9             position: relative; float: left;
10             width: 916.656px; height: 40px;
11         }
12         
13         #zdblc{
14             position: relative; float: right;
15             width: 183px; height: 20px;
16             text-align: center;
17         }
18         
19         #zdbla,#zdblc{
20             font-size: 12px; line-height: 20px;
21             color: #333;
22         }
23

  效果

 

posted @ 2018-01-15 11:27  风の花雪月  阅读(572)  评论(0)  编辑  收藏  举报