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

时间:2019-03-20
本文章向大家介绍用HTML+CSS编写一个计科院网站首页的静态网页,主要包括用HTML+CSS编写一个计科院网站首页的静态网页使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

由于能力的不足,这个网页还有很多功能未完善,比如图片的滚动,在学习了javascript后我会将其完善。

以下是几张成品和工程的截图:

以下是完整的HTML和CSS代码:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>西南石油大学-计算机科学学院</title>
  6 <link rel="stylesheet" type="text/css" href="Style.css" />
  7 </head>
  8 
  9 <body>
 10 <!-- 居中显示 -->
 11 <div style="display: block; margin: 0 auto; width: 50%; background: #fff;">
 12 <!-- 顶部及搜索 -->
 13 <div class="divTop">
 14     <div class="divSearch">
 15     <input type="text" placeholder="请输入关键词搜索">
 16     <input type="submit" value="搜索">
 17     </div>
 18 </div>
 19 
 20 <!-- 导航 -->
 21 <div class="Guide">
 22     <ul class="ul1">
 23         <li class="li1"><a href="#">网站首页</li>
 24         <div class="dropDown">
 25             <a href="#" class="dropBtn">学院概况</a>
 26             <div class="dropDown-content">
 27                 <a href="#">学院简介</a>
 28                 <a href="#">学院领导</a>
 29                 <a href="#">组织机构</a>
 30             </div>
 31         </div>
 32         <div class="dropDown">
 33             <a href="#" class="dropBtn">本科生教育</a>
 34             <div class="dropDown-content">
 35                 <a href="#">计算机科学与技术专业</a>
 36                 <a href="#">软件工程专业</a>
 37                 <a href="#">网络工程专业</a>
 38                 <a href="#">物联网工程专业</a>
 39                 <a href="#">信息管理与信息系统专业</a>
 40                 <a href="#">网络空间安全专业</a>
 41                 <a href="#">数据科学与大数据技术专业</a>
 42                 <a href="#">对外人才合作培养项目</a>
 43                 <a href="#">考试信息</a>
 44                 <a href="#">选课重修信息</a>
 45                 <a href="#">通知公告</a>
 46                 <a href="#">资料下载</a>
 47                 <a href="#">公选课教师视频</a>
 48             </div>
 49         </div>
 50         <div class="dropDown">
 51             <a href="#" class="dropBtn">研究生教育</a>
 52             <div class="dropDown-content">
 53                 <a href="#">招生简章</a>
 54                 <a href="#">计算机科学与技术一级学科</a>
 55                 <a href="#">软件工程一级学科</a>
 56                 <a href="#">网络空间安全一级学科</a>
 57                 <a href="#">研究生导师</a>
 58                 <a href="#">研究生奖助体系</a>
 59                 <a href="#">通知公告</a>
 60                 <a href="#">资料下载</a>
 61             </div>
 62         </div>
 63         <div class="dropDown">
 64             <a href="#" class="dropBtn">师资队伍</a>
 65             <div class="dropDown-content">
 66                 <a href="#">教授</a>
 67                 <a href="#">副教授</a>
 68                 <a href="#">讲师</a>
 69                 <a href="#">实验人员</a>
 70             </div>
 71         </div>
 72         <div class="dropDown">
 73             <a href="#" class="dropBtn">科学研究</a>
 74             <div class="dropDown-content">
 75                 <a href="#">科研团队</a>
 76                 <a href="#">科研平台</a>
 77                 <a href="#">科研成果</a>
 78             </div>
 79         </div>
 80         <div class="dropDown">
 81             <a href="#" class="dropBtn">学生工作</a>
 82             <div class="dropDown-content">
 83                 <a href="#">工作动态</a>
 84                 <a href="#">通知公告</a>
 85                 <a href="#">课外创新实践</a>
 86                 <a href="#">毕业生就业</a>
 87                 <a href="#">心灵之窗</a>
 88                 <a href="#">青春风采</a>
 89                 <a href="#">资料下载</a>
 90             </div>
 91         </div>
 92         <div class="dropDown">
 93             <a href="#" class="dropBtn">招生工作</a>
 94             <div class="dropDown-content">
 95                 <a href="#">学院介绍</a>
 96                 <a href="#">毕业生就业去向</a>
 97                 <a href="#">优秀毕业生简介</a>
 98                 <a href="#">学生获奖</a>
 99                 <a href="#">精英校友介绍</a>
100                 <a href="#">招生工作宣传报道</a>
101             </div>
102         </div>
103         <div class="dropDown">
104             <a href="#" class="dropBtn">实验中心</a>
105             <div class="dropDown-content">
106                 <a href="#">中心简介</a>
107                 <a href="#">实验分室</a>
108                 <a href="#">规章制度</a>
109                 <a href="#">资料下载</a>
110                 <a href="#">开放预约</a>
111             </div>
112         </div>
113         <div class="dropDown">
114             <a href="#" class="dropBtn">党建之窗</a>
115             <div class="dropDown-content">
116                 <a href="#">党建动态</a>
117                 <a href="#">学习园地</a>
118                 <a href="#">党务政务公开</a>
119                 <a href="#">资料下载</a>
120             </div>
121         </div>
122     </ul>
123 </div>
124 <br>
125 <!-- 滚动图片(暂时静态) -->
126 <div class="divPicture">
127     <a href="#"><img alt="welcome" src="images/welcome.jpg"></a>
128 </div>
129 
130 <!-- 文字新闻版块 -->
131 <div style="width:974px;height:970px;background-color:white;">
132     <!-- 图片新闻 -->
133     <div class="q1">
134         <div class="p1">
135             <div class="t1">
136                 图片新闻
137             </div>
138             <div class="t2">
139                 <a href="#"><img alt="more" src="images/more.png"></a>
140             </div>
141         </div>
142         <div id="sp">
143             <a><img alt="chat" src="images/chat.jpg" style="width:350px;width:300px"></a>
144         </div>
145         <p>
146             <ul>
147                 <li class="li2"><a href="#">计算机科学学院举办2019寒...[02-01]</a></li>
148                 <li class="li2"><a href="#">学院召开党委中心组学习会... [03-18]</a></li>
149                 <li class="li2"><a href="#">学院召开教职工大会学习传... [03-15]</a></li>
150                 <li class="li2"><a href="#">计科院工会组织学院女教职... [03-15]</a></li>
151                 <li class="li2"><a href="#">学术讲座——人工智能改变... [03-15]</a></li>
152                 <li class="li2"><a href="#">计算机科学学院各年级辅导... [03-15]</a></li>
153             </ul>
154         </p>
155     </div>
156     <!-- 空行 -->
157     <div class="q"></div>
158     <!-- 学术交流 -->
159     <div class="q2">
160         <div class="p2">
161             <div class="t1">
162                 学术交流
163             </div>
164             <div class="t2">
165                 <a href="#"><img alt="more" src="images/more.png"></a>
166             </div>
167         </div>
168         <p>
169             <ul>
170                 <li class="li2"><a href="#">人工智能改变我们的未来生活</a></li>
171                 <li class="li2"><a href="#">计算时代的虚假信息传播</a></li>
172                 <li class="li2"><a href="#">人工智能+:视界充满AI</a></li>
173                 <li class="li2"><a href="#">零行列式策略及其网络演化动力学</a></li>
174                 <li class="li2"><a href="#">视频遇上云服务</a></li>
175                 <li class="li2"><a href="#">计科院关于举行2018年校庆论文报告会的通知</a></li>
176             </ul>
177         </p>
178     </div>
179     
180     <!-- 新闻速递 -->
181     <div class="q1">
182         <div class="p1">
183             <div class="t1">
184                 新闻速递
185             </div>
186             <div class="t2">
187                 <a href="#"><img alt="more" src="images/more.png"></a>
188             </div>
189         </div>
190         <p>
191             <ul>
192                 <li class="li2"><a href="#">学院召开党委中心组学习会暨党风廉政建设专题会</a></li>
193                 <li class="li2"><a href="#">学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</a