用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 ...
随机推荐
- Node.js建立服务、路径处理与响应
通过Node.js创建一个web服务器,要写的代码可能不是最少的,但是一定是最容易理解的. 用6行代码创建的web服务器 当在浏览器中访问http://127.0.0.1:1337会看到自定义的字样 ...
- 用AtomicStampedReference解决ABA问题
在运用CAS做Lock-Free操作中有一个经典的ABA问题: 线程1准备用CAS将变量的值由A替换为B,在此之前,线程2将变量的值由A替换为C,又由C替换为A,然后线程1执行CAS时发现变量的值仍然 ...
- HL-D793G七位蓝色+PT6311驱动
和之前那块一起买的.又画了这个屏幕驱动,还画了灯丝电源驱动,和以前画的stm8核心板在JLC拼板. 亚光黑颜色,不单独收钱! 切好水洗吹干! 忘记给排针加丝印,手写代之. 焊接的时候,脑子发热,以为把 ...
- 对于SQL注入的理解
从网上搜索的资料,结合自己的理解整理了一下,网友们在查看时若有发现问题,还请不吝指正,谢谢! 1.什么是SQL注入? ——官方说法:把SQL命令插入到web表单验证的输入框中,提交到服务器,以达到越过 ...
- SAP 查询分析器，查询报表自动生成，SQL查询测试实现说明（转）
在日常的SAP开发和应用中,经常需要通过查询SAP数据表来处理日常业务,比如:数据对账.报表SQL测试.SAP查询功能开发等.通过开发SAP查询分析器,SAP实施和开发人员,可以在较短的时间内查询到需 ...
- Angular4基本网络请求get、post方式
1.在路径C:\AngularProject\AngularTest\src\app\app.module.ts这个文件下面引入 2.在需要用到的js文件引入 3.GET/POST 带参/不带参请求
- Bigger-Mai 养成计划，前端基础学习之HTML
HTML 超文本标记语言(Hyper Text Markup Language) 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ...
- 打包加载 AssetBundle
1.先创建Asset序列化(单个文件夹所在文件夹路径,会遍历这个文件夹所有的Prefab,所有的Prefab名字不能重复,必须保证名字得唯一性),配置好ConfigAB表 /* ######### # ...
- 编译openwrt时报错:g++: internal compiler error: Killed (program cc1plus)
答: 这是内存不足导致的,增大内存或者减少运行的线程即可
- 开发过程中 的一些 补充知识点 + 关于mysql中的日期和时间函数?
参考: https://www.jb51.net/article/23966.htm https://yq.aliyun.com/articles/260389 mysql中的 日期格式是: HHHH ...