用HTML+CSS编写一个计科院网站首页的静态网页

news/2024/5/9 18:01:10/文章来源:https://blog.csdn.net/weixin_33774308/article/details/94672338

一.HTML代码

  1     <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>首页</title>
  6 
  7 </head>
  8 <body>
  9 <div id="page">
 10     <div id="page_head">
 11         <div id="logo" align=center><img src="logo.png" /></div>
 12     </div>
 13     <div id="leader">
 14         <ul style="padding:0 0;">
 15         <li id="mainmenu">
 16             <a id="link" >网站首页</a>         
 17         </li>
 18         <li id="mainmenu">
 19             <a id="link" >学院概况</a>
 20         </li>
 21         <li id="mainmenu">
 22             <a id="link" >本科生教育</a>
 23         </li>
 24         <li id="mainmenu">
 25             <a id="link" >研究生教育</a>
 26         </li>
 27         <li id="mainmenu">
 28             <a id="link">师资队伍</a>
 29         </li>
 30         <li id="mainmenu">
 31             <a id="link">科学研究</a>
 32         </li>
 33         <li id="mainmenu">
 34             <a id="link">学生工作</a>
 35         </li>
 36         <li id="mainmenu">
 37             <a id="link">招生工作</a>
 38         </li>
 39         <li id="mainmenu">
 40             <a id="link">实验中心</a>
 41         <li id="mainmenu">
 42             <a id="link">党建之窗</a>
 43         </ul>
 44     </div>
 45     <div id="img_welcome"><img src="welcome.jpg" width="975" height="195" ></div>
 46     <div id="page_body">
 47         <div style="height:30%;blackground-color:grey">
 48             <div id="leftli">
 49                 <div id="topli">
 50                     <div id="topli-leftpart"><b>图片新闻</b></div>
 51                     <div id="topli-rightpart"><img src="more.png" ></div>
 52                 </div>
 53                 <div id="downimg">
 54                 <img src="abc.jpg" width="300" height="180">
 55                 </div>
 56                 <div id="leftfloat">
 57                 <ul id="forul">
 58                 <li>
 59                     <a>计算机科学学院举办2019年寒假留...[02-01]</a>
 60                 </li>
 61                 <li>
 62                     <a>学院召开党委中心组学习会暨党风廉...[03-18]</a>
 63                 </li>
 64                 <li>
 65                     <a>学院召开教职工大会学习传达中层干...[03-15]</a>
 66                 </li>
 67                 <li>
 68                     <a>计科院工会组织学院女教职工庆祝第...[03-12]</a>
 69                 </li>
 70                 <li>
 71                     <a>学术讲座——人工智能改变我们的未...[03-05]</a>
 72                 </li>
 73                 <li>
 74                     <a>计算机科学学院各年级辅导员集中走...[01-21]</a>
 75                 </li>
 76                 </ul>
 77                 </div>
 78             </div>
 79             <div id="rightli">
 80                 <div id="topli">
 81                     <div id="topli-leftpart"><b>学术交流</b></div>
 82                     <div id="topli-rightpart"><img src="more.png" ></div>
 83                 </div>
 84                 <ul type="square">
 85                 <li>
 86                     <a>人工智能改变我们的未来生活</a>
 87                 </li>
 88                 <li>
 89                     <a>计算时代的虚假信息传播</a>
 90                 </li>
 91                 <li>
 92                     <a>人工智能+：视界充满AI</a>
 93                 </li>
 94                 <li>
 95                     <a>零行列式策略及其网络演化动力学</a>
 96                 </li>
 97                 <li>
 98                     <a>视频遇上云服务</a>
 99                 </li>
100                 <li>
101                     <a>计科院关于举行2018年校庆论文报告会的...</a>
102                 </li>
103                 </ul>
104             </div>
105         </div>
106         <div style="height:35%;blackground-color:grey">
107             <div id="leftli">
108                 <div id="topli">
109                     <div id="topli-leftpart"><b>新闻速递</b></div>
110                     <div id="topli-rightpart"><img src="more.png" ></div>
111                 </div>
112                 <div style="padding-top:10px">
113                 <a id="blue" style="font-weight:bold;padding-left:10px;font-size:16px;" >计算机科学学院举办2019年寒假留校学生新春团拜会</a>
114                 </div>
115                 <div>
116                 <p id="grey" style="font-size:12px;">&nbsp&nbsp&nbsp&nbsp在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…[<a herf=“”>详细信息</a>]</p>
117                 </div>
118                 <ul>
119                 <li>
120                     <a>学院召开党委中心组学习会暨党风廉政建设专题会03/18</a>
121                 </li>
122                 <li>
123                     <a>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作03/15</a>
124                 </li>
125                 <li>
126                     <a>计科院工会组织学院女教职工庆祝第109个“三八妇女节”03/12</a>
127                 </li>
128                 <li>
129                     <a>学术讲座——人工智能改变我们的未来生活03/05</a>
130                 </li>
131                 <li>
132                     <a>计算机科学学院各年级辅导员集中走访学生寝室01/21</a>
133                 </li>
134                 <li>
135                     <a>学院召开2018年度领导班子民主生活会01/14</a>
136                 </li>
137                 </ul>
138             </div>
139             <div id="rightli">
140                 <div id="topli">
141                     <div id="topli-leftpart"><b>党建动态</b></div>
142                     <div id="topli-rightpart"><img src="more.png" ></div>
143                 </div>
144                 <ul>
145                 <li>
146                     <a>学院召开党委中心组学习会暨党风廉政建...</a>
147                 </li>
148                 <li>
149                     <a>学院召开教职工大会学习传达中层干部大...</a>
150                 </li>
151                 <li>
152                     <a>学院召开2018年领导班子民主生活会</a>
153                 </li>
154                 <li>
155                     <a>刘翔同志任计算机科学学院党委副书记、...</a>
156                 </li>
157                 <li>
158                     <a>学院党委组织师生收看庆祝改革开放40周...</a>
159                 </li>
160                 <li>
161                     <a>【审核评估】学院召开本科教学工作审核...</a>
162                 </li>
163                 <li>
164                     <a>【聚焦评估】学院召开本科教学工作审核...</a>
165                 </li>
166                 <li>
167                     <a>学院党委开展迎校庆主题党日活动</a>
168                 </li>
169                 </ul>
170             </div>
171         </div>
172         <div style="height:35%;blackground-color:grey">
173             <div id="leftli">
174                 <div id="topli">
175                     <div id="topli-leftpart"><b>通知公告</b></div>
176                     <div id="topli-rightpart"><img src="more.png" ></div>
177                 </div>
178                 <ul>
179                 <li>
180                     <a>自组团出访前公示信息表（彭博）</a>
181                 </li>
182                 <li>
183                     <a>计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a>
184                 </li>
185                 <li>
186                     <a>西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a>
187                 </li>
188                 <li>
189                     <a>2018年秋季学期期末考试情况总结</a>
190                 </li>
191                 <li>
192                     <a>计算机科学学院2018年度教职工考核优秀名单公示</a>
193                 </li>
194                 <li>
195                     <a>国际学术会议（ICCIS2019）征稿通知</a>
196                 </li>
197                 <li>
198                     <a>计算机科学学院领导班子2018年度民主生活会征求意见</a>
199                 </li>
200                 <li>
201                     <a>关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a>
202                 </li>
203                 </ul>
204             </div>
205             <div id="rightli">
206                 <div id="topli">
207                     <div id="topli-leftpart"><b>专题列表</b></div>
208                     <div id="topli-rightpart"><img src="more.png" ></div>
209                 </div>
210                 <ul>
211                 <li>
212                     <a>中美联合高性能和大数据计算实验室</a>
213                 </li>
214                 <li>
215                     <a>石油工程计算机模拟技术重点实验室</a>
216                 </li>
217                 <li>
218                     <a>思科网络技术学院教师培训中心</a>
219                 </li>
220                 </ul>
221             </div>
222         </div>
223     </div>
224     <div id="pag_foot" align=center>
225     <b>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</b>
226     </div>
227 </div>
228 
229 </body>
230 </html>

View Code

二.CSS代码

 1     #page{
 2         margin:0px;padding:0px
 3     }
 4     #page_head{
 5         background-color:white;
 6         height:113px;width:100%;
 7         margin:auto;
 8     }
 9     #page_body{
10         height:900px;width:975px;
11         margin:auto;margin-top:10px;
12     }
13     #pag_foot{
14         background-color:#224b77;
15         height:60px;
16         margin:auto;line-height:60px;
17         text-align:center;font-size:13px;color:#fff;
18     }
19     #logo{
20     
21     }
22     #leader{
23         background-color:#0b6cb8;
24         height:50px;width:975px;
25         margin:auto;
26     }
27     #img_welcome{
28     margin:auto;text-align:center;padding-top:0px;
29     }
30     #link{
31         padding-left:28px;
32         padding-top:0px;
33         font-size:16px;color:#fff;
34     }
35     #mainmenu{
36         list-style-type:none;
37         float:left;
38         height:50px;margin:    0px;
39         text-align:center;
40         line-height:30px;
41     }
42     #leftli{
43         width:64%;float:left;height:100%;
44         background-color:white;
45     }
46     #rightli{
47         width:34%;float:right;height:100%;
48         background-color:white;
49     }
50     #topli{
51     height:35px;
52     background-color:#dddddd;
53     }
54     #topli-leftpart{
55     float:left;line-height:35px;
56     width:80px;height:100%;
57     background-color:#0b6cb8;
58     text-align:center;color:#fff;
59     }
60     #topli-rightpart{
61     float:right;line-height:30px;
62     width:40px;height:100%;
63     }
64     #downimg{
65     float:left;
66     width:50%;
67     padding-top:10px
68     }
69     #leftfloat{
70     float:left;
71     }
72     #grey{
73     color:grey;
74     }
75     #blue{
76     color:blue;
77     }
78     ul {list-style-type:square;color:grey;font-size:13px;padding-left:15px}