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

Posted biu嘟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用HTML+CSS编写一个计科院网站首页的静态网页相关的知识,希望对你有一定的参考价值。

一.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计科院网站首页静态网页

计科院静态网页

用HTML+CSS实现一个计科院网站首页静态页面

计科院静态首页

计科院静态网页

ssm开发计科院网站