用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
- IT中的闰秒问题(r5笔记第85天)
- 浅谈exp/imp(下) (r5笔记第84天)
- 多线程编程学习五(线程池的创建)
- 再学习之Spring(面向切面编程).
- Hybris CronJob
- tomcat源码编译和环境搭建(r5笔记第83天)
- NumPy 将停止支持 Python 2,这里有一份给数据科学家的 Python 3 使用指导
- Apache solr(一).
- dataguard中MRP无法启动的问题分析和解决(r5笔记第82天)
- Apache solr(二).
- Git 使用技巧
- 4.训练模型之准备训练数据
- 关于dg broker的简单配置(r5笔记第99天)
- 三天速成 TensorFlow课件分享
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Virtualenv 搭建 Py项目运行环境的教程详解
- python字符串的index和find的区别详解
- 浅谈Python 参数与变量
- 宝塔面板成功部署Django项目流程(图文)
- Python celery原理及运行流程解析
- Python Scrapy图片爬取原理及代码实例
- Python-for循环的内部机制
- 解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
- 基于python实现模拟数据结构模型
- keras的siamese(孪生网络)实现案例
- 浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
- Python数据可视化图实现过程详解
- Python matplotlib 绘制双Y轴曲线图的示例代码
- keras 读取多标签图像数据方式
- python新手学习可变和不可变对象