文档章节

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

o
 osc_fmg49rzg
发布于 2019/03/20 13:10
字数 2625
阅读 16
收藏 0

精选30+云产品,助力企业轻松上云!>>>

由于能力的不足,这个网页还有很多功能未完善,比如图片的滚动,在学习了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></li>
194                 <li class="li2"><a href="#">计科院工会组织学院女教职工庆祝第109个“三八妇女节”</a></li>
195                 <li class="li2"><a href="#">学术讲座——人工智能改变我们的未来生活</a></li>
196                 <li class="li2"><a href="#">计算机科学学院各年级辅导员集中走访学生寝室</a></li>
197                 <li class="li2"><a href="#">学院召开2018年度领导班子民主生活会</a></li>
198             </ul>
199         </p>
200     </div>
201     <!-- 空行 -->
202     <div class="q"></div>
203     <!-- 党建动态 -->
204     <div class="q2">
205         <div class="p2">
206             <div class="t1">
207                 党建动态
208             </div>
209             <div class="t2">
210                 <a href="#"><img alt="more" src="images/more.png"></a>
211             </div>
212         </div>
213         <p>
214             <ul>
215                 <li class="li3"><a href="#">学院召开党委中心组学习会暨党风...</a></li>
216                 <li class="li3"><a href="#">学院召开教职工大会学习传达中层...</a></li>
217                 <li class="li3"><a href="#">学院召开2018年领导班子民主生...</a></li>
218                 <li class="li3"><a href="#">刘翔同志任计算机科学学院党委副...</a></li>
219                 <li class="li3"><a href="#">学院党委组织师生收看庆祝改革开...</a></li>
220                 <li class="li3"><a href="#">【审核评估】学院召开本科教学工...</a></li>
221                 <li class="li3"><a href="#">【聚焦评估】学院召开本科教学工...</a></li>
222                 <li class="li3"><a href="#">学院党委开展迎校庆主题党日活动</a></li>
223             </ul>
224         </p>
225     </div>
226     
227     <!-- 通知公告 -->
228     <div class="q1" style="height:350px;">
229         <div class="p1">
230             <div class="t1">
231                 通知公告
232             </div>
233             <div class="t2">
234                 <a href="#"><img alt="more" src="images/more.png"></a>
235             </div>
236         </div>
237         <p>
238             <ul>
239                 <li class="li2"><a href="#">自组团出访前公示信息表(彭博)</a></li>
240                 <li class="li2"><a href="#">计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a></li>
241                 <li class="li2"><a href="#">西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a></li>
242                 <li class="li2"><a href="#">2018年秋季学期期末考试情况总结</a></li>
243                 <li class="li2"><a href="#">计算机科学学院2018年度教职工考核优秀名单公示</a></li>
244                 <li class="li2"><a href="#">国际学术会议(ICCIS2019)征稿通知</a></li>
245                 <li class="li2"><a href="#">计算机科学学院领导班子2018年度民主生活会征求意见</a></li>
246                 <li class="li2"><a href="#">关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a></li>
247             </ul>
248         </p>
249     </div>
250     <!-- 空行 -->
251     <div class="q"></div>
252     <!-- 专题列表 -->
253     <div class="q2" style="height:350px;">
254         <div class="p2">
255             <div class="t1">
256                 专题列表
257             </div>
258             <div class="t2">
259                 <a href="#"><img alt="more" src="images/more.png"></a>
260             </div>
261         </div>
262         <p>
263             <ul>
264                 <li class="li3"><a href="#">中美联合高性能和大数据实验室</a></li>
265                 <li class="li3"><a href="#">石油工程计算机模拟技术重点实验室</a></li>
266                 <li class="li3"><a href="#">思科网络技术学院教师培训中心</a></li>
267             </ul>
268         </p>
269     </div>
270 </div>
271 </div>
272 <!-- 底部 -->
273     <div style="width:100%;height:70px;background-color:#224B77;color: white;text-align: center;line-height:70px;">
274         Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院
275     </div>
276 </body>
277 </html>

 

  1 @CHARSET "UTF-8";
  2 
  3 .divTop{width: 974px;
  4          height:117px;
  5          background-image:url(images/top-bg.jpg);}
  6     
  7 .divSearch{ width:280px;
  8             height:100px;
  9             float:right;
 10             margin-top:45px;
 11             margin-right:0px;}
 12 
 13 .Guide{width:974px;
 14         height:80px;
 15         background-color:white;
 16         }
 17         
 18 .ul1{
 19     width:974px;
 20     list-style-type: none;
 21     margin: 0px;
 22     padding: 0px;
 23     overflow: hidden;
 24     background-color: #0B6CB8;
 25 }
 26 .li1{
 27     float:left;
 28 }
 29 .li1 a,.dropBtn{
 30     display: inline-block;
 31     color: white;
 32     text-align: center;
 33     padding: 15px 13px;
 34     text-decoration: none;
 35 }
 36 .dropDown{
 37     display:inline-block;
 38 }
 39 .dropDown-content{
 40     display:none;
 41     position: absolute;
 42     background-color: #0A5894;
 43     min-width: 160px;
 44 }
 45 .dropDown-content a {
 46     display: block;
 47     color: white;
 48     padding: 10px 10px;
 49     text-decoration: none;
 50 }
 51 .dropDown-content a:hover {
 52     background-color: #0D6DB9;
 53 }
 54 .dropDown:hover .dropDown-content{
 55     display:block;
 56 }
 57 
 58 .divPicture{
 59     width:974px;
 60     height:200px;
 61 }
 62 
 63 .q{
 64     float:left;
 65     width:24px;
 66     height:300px;
 67 }
 68 
 69 .q1{
 70     float:left;
 71     width:630px;
 72     height:300px;
 73     background-color:white;
 74 }
 75 .q2{
 76     float:left;
 77     width:320px;
 78     height:300px;
 79     background-color:white;
 80 }
 81 .p1{
 82     float:left;
 83     width:630px;
 84     height:30px;
 85     background-color:#dddddd;
 86 }
 87 .p2{
 88     float:left;
 89     width:320px;
 90     height:30px;
 91     background-color:#dddddd;
 92 }
 93 .t1{
 94     color:white;
 95     text-align: center;
 96     float:left;
 97     width:100px;
 98     height:30px;
 99     background-color:#2780CB;
100 }
101 .t2{
102     align:center;
103     float:right;
104     width:50px;
105     height:30px;
106 }
107 #sp{
108     width:350px;
109     height:250px;
110     background-color:white;
111     float:left;
112 }
113 .li2{
114      padding: 10px 10px;
115 }
116 .li2 a{
117     text-decoration: none;
118     color:gray;
119 }
120 .li3{
121     padding: 5px 0px;
122 }
123 .li3 a{
124     text-decoration: none;
125     color:gray;
126 }

 

以下是百度云链接:

 链接:https://pan.baidu.com/s/1WZXI_YZEeN8uz-_eAbyPbw
提取码:avfv
复制这段内容后打开百度网盘手机App,操作更方便哦

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
用HTML+CSS编写一个计科院网站首页的静态网页

用HTML+CSS编写一个计科院网站首页的静态网页 学号:201631062509 姓名:杨菓 1.观察计科院主页 网站所有图片可以从开发者工具中审查找到。 计科院静态网站并没有占满整个网页,而是在中间,...

osc_y8yehimr
2019/03/20
1
0
用HTML+CSS编写一个计科院网站首页的静态网页

用HTML+CSS编写一个计科院网站首页的静态网页 利用浏览器查看网页源代码,并将一些图片分门别类的下载到本地,然后删除javascript脚本。项目的文件目录 最终效果 百度云 链接: https://pan.b...

osc_y8yehimr
2019/03/20
2
0
用HTML+CSS实现一个计科院网站首页静态页面

思路: 首先观察我校计科院网站首页,按F12观察它的各个板块的布局。 然后用<div>从上到下从左到右一块一块仿照着来实现。 需要用到的图片全都从原本网站上保存下来使用。 效果: HTML代码(...

osc_tvqwfyak
2019/03/19
4
0
用HTML+CSS编写一个计科院网站首页的静态网页

先展示效果 单用html表格布局 源码如下 <!DOCTYPE html><html> </html> 下面是css+html <!DOCTYPE html><html> </html> css样式 *{ } .heading{ } .heading img{ }.wrapper{ } .nav{ }.nav ......

osc_giiz8kdh
2019/03/16
0
0
用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" a......

osc_f3l9buge
2019/03/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-07-10

更新时间: 2020-07-10 01:15 US Supreme Court deems half of Oklahoma a Native American Reservation - (reuters.com) 美国最高法院认为俄克拉荷马州的一半是印第安人保留地 得分:131 | 评...

FalconChen
17分钟前
12
0
OSChina 周五乱弹 —— 求求你吃了我吧,不要再玩弄食物的感情了

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :张喆的单曲《陷阱 》 这首歌已经在网易找不到原唱了,不知道被哪家买了版权。#今日歌曲推荐# 《陷阱 》- 张喆 手机党少年们想听歌...

小小编辑
28分钟前
18
1
清华陈文光教授:AI 超算基准测试的最新探索和实践。

道翰天琼认知智能平台为您揭秘新一代人工智能。 无规矩不成方圆。放在超级计算机的研发领域,没有一个大家普遍接受的算力评测指标,便难以推动超算迅猛发展。 而现在伴随着人工智能的发展,大...

jackli2020
43分钟前
7
0
@RequestMapping, consumes 提交简单有意思的测试

getParm @GetMapping("getParm")public Result getParm(String id){ System.out.println(); return ResultFactory.success(id);} 等同于 == bodyParm @PostMapping("bodyParm......

莫库什勒
53分钟前
25
0
63. Unique Paths II

题目: 63. Unique Paths II A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The robot can only move either down or right at any p......

JiaMing
今天
46
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部