用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 ...
随机推荐
- 融云亮相GDG谷歌女性开发者大会 揭秘IMSDK网络优化策略
4 月 20 日,冷雨阻碍不了天津GDG谷歌女性开发者大会的热烈召开,一众开发者.架构师和科技公司创业者云集一堂,就女性开发者的技术.职场.人生多方面话题展开深入探讨.活动由GDG (谷歌开发者社区) ...
- 用iPhone查看pc电脑上写的html(Mac电脑Charles)简单版
对于客户端同学开发来说,写一段代码想在真机上看看,是非常容易的. 那么在这么一个大前端的环境下,客户端开发想写点html和js代码,又想在手机上看看效果,怎么办呢? 需要以下几个步骤: 大体流程:1. ...
- 【WEB】带边框的网页页面实现
前言 这是编程入学者尝试各种技术的备忘记录和自我激励,内容非常简单而单纯. 正文 成品 样式参考 http://tenhou.net/ 上边框 http://tenhou.net/img/f0t ...
- ECS上nginx搭建反向代理通过内网访问阿里云OSS服务
对于付不起钱的小伙计,为了给公司省钱,想尽一切招数.今天就来分享一个使用阿里云OSS存储搭配CDN使用的网站服务器部署方法. 简介 阿里云OSS 阿里云提供的一种文件存储方案,和我们以前接触的百度云B ...
- ORACLE中INSERT插入多条数据
insert ALL into u_role_permission(rid,pid) values (4,12) into u_role_permission(rid,pid) values (3,4 ...
- Java 学习笔记- classpath classpath*
转自:https://blog.csdn.net/javaloveiphone/article/details/51994268 1.src不是classpath, WEB-INF/classes,l ...
- 20165306 Exp4 恶意代码分析
Exp4 恶意代码分析 一.实践概述 1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生 ...
- 支付宝支付之App支付
与微信支付对比,支付宝支付就没有那么多坑了,毕竟支付宝开放平台的文档还是描述的很详细的. 支付宝开放平台地址:https://docs.open.alipay.com/204/105297/ 支付宝支 ...
- hadoop搭建笔记（一）
环境:mac/linux hadoop版本:3.1.1 安装特性:非HA 准备: 1. jdk8以上 2. ssh 3. 下载hadoop安装包 配置文件,这里都只有简易配置: 1. core-sit ...
- OpenGL.Qt532.cube
1.官方的例子(安装好代源码的Qt532就有该例子) E:\Project_Qt532\Official_Examples\opengl\cube E:\Project_Qt532\Official_ ...