用HTML+CSS编写一个计科院网站首页的静态网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算机科学学院</title>
<link href="css/bgcss.css" rel="stylesheet">
</head>
<body>
<!--顶部图片部分-->
<div class="top">
<!--搜索部分-->
<div class="serach">
<input type="text" value="请输入关键字搜索" class="serach_text">
<div class="serach_pic">
<input type="submit" class="btnSubmit" value style="cursor: hand">
</div>
</div>
</div>
<!-- 导航栏部分-->
<div class="navagator">
<ul>
<li class="top_li">网站首页</li>
<li class="top_li">学院概况</li>
<li class="top_li">本科生教育</li>
<li class="top_li">研究生教育</li>
<li class="top_li">师资队伍</li>
<li class="top_li">科学研究</li>
<li class="top_li">学生工作</li>
<li class="top_li">招生工作</li>
<li class="top_li">实验中心</li>
<li class="top_li">党建之窗</li>
</ul>
</div>
<!--轮播图部分-->
<div class="picNews"></div>
<!--图片新闻与学术交流部分-->
<div class="contentOne">
<!--图片新闻-->
<div class="news">
<div class="newsTitle">
<h2>图片新闻</h2>
<span class="picSpan"><img src="img/more.png"></span>
</div>
<!--左边图片部分,实现方式为table标签-->
<div class="" style="width: 310px;margin: 12px 0 0 0;display: block;float: left">
<table class="">
<tbody>
<tr>
<td>
<div class="news_pictuure">
<img src="img/news_pic2.jpg" style="width: 310px;height: 174px">
</div>
</td>
</tr>
<tr>
<td>
<div class="news_intro" align="center">
<a href="#" class="pic_text" target="_blank" style="text-decoration: none;">计算机科学学院隆重举行第八届“盛特杯”大学生课外...</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--右边新闻列表部分-->
<div class="news_list">
<ul style="width: 314px;height: 180px;padding: 0 0 0 20px">
<li class="item">
<a target="_blank" href="#">
<em>计算机科学学院举办2019年寒假留校学生新春</em>
<span>[02-01]</span>
</a> </li>
<li class="item">
<a target="_blank" href="#">
<em>学院召开教职工大会学习传达中层干部大会精</em>
<span>[03-15]</span>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>计科院工会组织学院女教职工庆祝第109个“</em>
<span>[03-12]</span>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>学术讲座——人工智能改变我们的未来生活</em>
<span>[03-05]</span>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>计算机科学学院各年级辅导员集中走访学生寝</em>
<span>[01-21]</span>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>学院召开2018年度领导班子民主生活会</em>
<span>[02-14]</span>
</a>
</li>
</ul>
</div>
</div>
<!--学术交流-->
<div class="communicate">
<div class="newsTitle">
<h2>学术交流</h2>
<span class="picSpan"><img src="img/more.png"></span>
</div>
<!--右边新闻列表部分-->
<div class="news_list">
<ul style="width: 314px;height: 180px;padding: 0 0 0 20px">
<li class="item">
<a target="_blank" href="#">
<em>人工智能改变我们的未来生活</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>计算时代的虚假信息传播</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>人工智能+：视界充满AI</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>零行列式策略及其网络演化动力学</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>视频遇上云服务</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>计科院关于举行2018年校庆论文报告会的通知</em>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--新闻速递与党建动态-->
<div class="contentTwo">
<!--新闻速递-->
<div class="newsPass">
<div class="newsTitle">
<h2>新闻速递</h2>
<span class="picSpan"><img src="img/more.png"></span>
</div>
<div class="news_list_2">
<h3>
<a>计算机科学学院举办2019年寒假留校学生新春团拜会</a>
</h3>
<p>在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。
2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…<span style="color: #0b6cb8">[详细信息]</span></p>
<ul style="width: 644px;height: 286px;padding-left: 0">
<li class="item_2">
<a target="_blank" href="#">
<em>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</em>
<span>03/15</span>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>计科院工会组织学院女教职工庆祝第109个“三八妇女节”</em>
<span>03/12</span>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>学术讲座——人工智能改变我们的未来生活</em>
<span>03/05</span>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>计算机科学学院各年级辅导员集中走访学生寝室</em>
<span>01/21</span>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>学院召开2018年度领导班子民主生活会</em>
<span>01/14</span>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>计科院与川庆安检院技术交流大会</em>
<span>01/10</span>
</a>
</li>
</ul>
</div>
</div>
<!--党建动态-->
<div class="party">
<div class="newsTitle" style="width: 320px">
<h2>党建动态</h2>
<span class="picSpan"><img src="img/more.png"></span>
</div>
<!--右边新闻列表部分-->
<div class="news_list">
<ul style="width: 314px;height: 180px;padding: 0 0 0 20px">
<li class="item">
<a target="_blank" href="#">
<em>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>学院召开2018年领导班子民主生活会</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>刘翔同志任计算机科学学院党委副书记、纪委书记</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>学院党委组织师生收看庆祝改革开放40周年大会</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>【审核评估】学院召开本科教学工作审核评估办学定位与目标宣讲大会</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>【聚焦评估】学院召开本科教学工作审核评估工作会</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>学院党委开展迎校庆主题党日活动</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>学院党委组织收看2018年全国科学道德和学风建设宣讲教育报告会</em>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--通知公告与专题列表-->
<div class="contentThree">
<!--通知公告-->
<div class="inform">
<div class="newsTitle">
<h2>新闻速递</h2>
<span class="picSpan"><img src="img/more.png"></span>
</div>
<div class="news_list_2">
<ul style="width: 644px;height: 280px;padding-left: 0">
<li class="item_2">
<a target="_blank" href="#">
<em>自组团出访前公示信息表（彭博）</em>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</em>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</em>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>2018年秋季学期期末考试情况总结</em>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>计算机科学学院2018年度教职工考核优秀名单公示</em>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>国际学术会议（ICCIS2019）征稿通知</em>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>计算机科学学院领导班子2018年度民主生活会征求意见</em>
</a>
</li>
<li class="item_2">
<a target="_blank" href="#">
<em>关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</em>
</a>
</li>
</ul>
</div>
</div>
<!--专题列表-->
<div class="subject">
<div class="newsTitle" style="width: 320px">
<h2>专题列表</h2>
<span class="picSpan"><img src="img/more.png"></span>
</div>
<!--右边新闻列表部分-->
<div class="news_list">
<ul style="width: 314px;height: 180px;padding: 0 0 0 20px">
<li class="item">
<a target="_blank" href="#">
<em>中美联合高性能和大数据计算实验室</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>石油工程计算机模拟技术重点实验室</em>
</a>
</li>
<li class="item">
<a target="_blank" href="#">
<em>思科网络技术学院教师培训中心</em>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--底部信息-->
<div class="footer">
<p>
Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院
</p> </div>
</body>
</html>
body{
margin:;
}
.top{
width: 100%;
height:112px;
background: no-repeat url("../img/top-bg.jpg") center;
}
.serach{
width: 287px;
height: 38px;
background: url("../img/top_hunt_bg.png") no-repeat;
margin-top: 32px;
margin-right: 320px;
float: right;
}
.serach_text{
float: left;
width: 195px;
margin-top: 2px;
margin-left: 15px;
height: 30px;
line-height: 30px;
color: rgb(200,200,200);
outline: none;
border: medium none;
}
.serach_pic{
height: 18px;
float: right;
margin-top: 6px;
}
.btnSubmit{
width: 22px;
height: 22px;
margin-right: 10px;
margin-top: 2px;
outline:none;
cursor: pointer;
background: url("../img/top_hunt.png") no-repeat;
border: medium none;
}
.navagator{
background: #0b6cb8;
height: 50px;
line-height: 50px;
margin: 0 auto;
width: 974px;
}
ul{
margin:;
}
.top_li{
list-style: none;
color: #fff;
font-size: 15px;
float: left;
padding: 0 15px;
}
div{
display: block;
}
.picNews{
width: 974px;
height: 195px;
margin: 20px auto;
background: url("../img/welcome.jpg") no-repeat center;
}
.contentOne{
height: 268px;
width: 974px;
margin: 0 auto;
}
.news{
height: 100%;
width: 644px;
float: left;
padding: 0 10px 0 0;
}
.newsTitle{
width: 100%;
height: 34px;
line-height: 34px;
background: #ddd;
}
h2{
width: 74px;
background: #0b6cb8;
color: #fff;
font-size: 16px;
padding: 0 5px;
float: left;
margin-top:;
margin-bottom:;
font-weight: normal;
}
.picSpan{
float: right;
display: block;
padding: 0 5px;
}
table{
width: 100%;
height: 200px;
}
.news_pictuure{
width: 310px;
height: 174px;
overflow: hidden;
}
.pic_text{
line-height: 220%;
color: #222222;
font-size: 9pt;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.news_list{
width: 334px;
height: 180px;
margin-top: 12px;
float: right;
}
.item{
overflow: hidden;
font-size: 14px;
line-height: 30px;
height: 30px;
width: 100%;
background: url(../img/xdd.png) no-repeat 0px 14px;
text-indent: 12px;
}
.item a{
width: 314px;
height: 30px;
text-decoration: none;
display: block;
}
.item em{
overflow: hidden;
color: #5c5c5c;
width: 250px;
float: left;
height: 30px;
font-style: normal;
text-overflow:ellipsis
}
.item span{
width: 60px;
height: 30px;
color: #5c5c5c;
}
.communicate{
width: 320px;
height: 226px;
float: right;
}
.contentTwo{
width: 996px;
height: 324px;
margin: 0 auto;
}
.newsPass{
width: 644px;
height: 304px;
padding: 0 10px;
float: left;
}
.news_list_2{
width: 644px;
height: 258px;
margin-top: 12px;
float: right;
}
.news_list_2 h3{
margin:;
padding:;
text-indent: 12px;
}
.news_list_2 h3 a{
width: 422px;
height: 25px;
color: #0b6cb8;
font-size: 18px;
cursor: pointer;
}
.news_list_2 p{
margin-top: 4px;
font-size: 12px;
color: #999999;
/*首行缩进两个字符*/
text-indent: 2em;
line-height: 22px;
padding-bottom: 4px;
/*下划线*/
border-bottom: 1px dashed #eeeeee;
}
.item_2{
overflow: hidden;
font-size: 14px;
line-height: 30px;
height: 30px;
width: 644px;
background: url(../img/xdd.png) no-repeat 0px 14px;
text-indent: 12px;
}
li.item_2 a{
width: 644px;
height: 30px;
text-decoration: none;
display: block;
}
.item_2 a em{
color: #5c5c5c;
width: 570px;
float: left;
height: 30px;
font-style: normal;
text-overflow:ellipsis
}
.item_2 a span{
width: 66px;
height: 30px;
color: #c3c3c3;
float: right;
}
.party{
width: 332px;
height: 286px;
float: right;
}
.contentThree{
width: 996px;
height: 296px;
margin: 0 auto;
}
.inform{
width: 644px;
height: 304px;
padding: 0 10px;
float: left;
}
.subject{
width: 332px;
height: 126px;
float: right;
}
.footer{
width: 100%;
height: 60px;
background: blue;
color:black;
font-size: 13px;
line-height: 60px;
}
.footer p{
text-align: center;
}
效果截图：
用HTML+CSS编写一个计科院网站首页的静态网页的更多相关文章
- 用HTML+CSS实现一个计科院网站首页静态页面
链接:https://pan.baidu.com/s/1akwyc89q3nzKDQQulaFelQ 提取码:s6ys
- 北工大耿丹学院16级计科院3班C语言课程助教学期总结
很荣幸得到邹老师,周老师,以及北工大耿丹学院各位老师的认可,担任计科院3班C语言课程助教,班主任为李光杰老师,很感谢李老师一学期的帮助,使得我更好的担任助教一职.我班学生31名,很愉快的与同学们度过一 ...
- 使用SSM重新开发计科院网站
一.游览 在游览器地址栏输入:http://localhost:8080/index,即访问计科院首页,由于前期对数据库以及JavaBean的设计考虑不够充分,导致后期的代码臃肿,所以项目启动时对首页 ...
- .net 网站首页，本次的项目中用到的一个网站首页中统计网页访问量的工具方法，我觉得它应该在pagebase里面，拿来用一下
需要建立一个根文件夹 ~/xml/couter.txt #region 网站访问量 protected void pageviews() { int count ...
- ssm重新开发计科院新闻网站
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例
首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...
- 基于SCRUM方法实践的西油计科党建设计与实现
基于SCRUM方法实践的西油计科党建设计与实现 序言 所属课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesig ...
- 如何自己编写一个easyui插件续
接着如何自己编写一个easyui插件继续分享一下如何从上一节写的“hello”插件继承出一个“hello2”. 参考了combobox的源码中继承combo,当然我这个简单很多了.都是根据自己的理解来 ...
- 如何自己编写一个easyui插件
本文介绍如何通过参考1.4.2版本的progressbar的源码自己编写一个HelloWorld级别的easyui插件,以及如何拓展插件的功能. 有利于我们理解easyui插件的实现,以及了解如何对e ...
随机推荐
- go语言入门教程：基本语法之变量声明及注意事项
一.变量的使用 1.1 什么是变量 变量是为存储特定类型的值而提供给内存位置的名称.在go中声明变量有多种语法. 所以变量的本质就是一小块内存,用于存储数据,在程序运行过程中数值可以改变 1.2 声明 ...
- python———day1
1.计算机基础:CPU,内存,硬盘,操作系统 2.python出生于应用 3.python2与python3的区别(宏观): python2:源码不标准,混乱,重复代码太多 python3:统一标准, ...
- webview 监听及获取cookie
https://www.cnblogs.com/pjl43/p/9866753.html https://www.jianshu.com/p/55092eb06c17 requests: https: ...
- 使用kubesql进行kubernetes资源查询
kubesql kubesql(https://github.com/xuxinkun/kubesql)是我最近开发的一个使用sql查询kubernetes资源的工具.诸如node,pod等kuber ...
- day06深浅拷贝，元组，字典，集合
深浅拷贝 # 值拷贝:应用场景最多 ls = [1, 'abc', [10]] ls1 = ls # ls1直接将ls中存放的地址拿过来 # ls内部的值发生任何变化,ls1都会随之变化 ls2 = ...
- word模板导出的几种方式：第二种：C#通过模板导出Word(文字,表格,图片) 占位符替换
原文出处:https://www.cnblogs.com/ilefei/p/3508463.html 一:模板的创建 (注意文件后缀只能是.docx或.doct) 在需要位置 插入-文档部件-域, ...
- 编译openwrt时报错:g++: internal compiler error: Killed (program cc1plus)
答: 这是内存不足导致的,增大内存或者减少运行的线程即可
- 销售及SAP销售业务方案思维导图
销售: SAP销售方案:
- Xilinx Vivado的使用详细介绍（1）：创建工程、编写代码、行为仿真
Xilinx Vivado的使用详细介绍(1):创建工程.编写代码.行为仿真 Author:zhangxianhe 新建工程 打开Vivado软件,直接在欢迎界面点击Create New Projec ...
- P2678 跳石头
传送门 思路: 二分跳跃的最短距离 mid .暴力判断如果有两个石头直接的距离小于 mid ,就把这个石头拿走.如果拿走的石头数目 cnt ≤ m,说明二分的答案可行,ans = mid,接着二分更短 ...