用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 ...
随机推荐
- Python中的7种可调用对象
Python中有七种可调用对象,可调用对象可使用内置函数callable来检测 一.用户自定义的函数: 使用def语句或者lambda表达式创建的函数. 二.内置函数: 使用C语言实现的函数,如len ...
- python numpy 科学计算通用函数汇总
import numpy as np #一元函数 #绝对值计算 a = -1b = abs(a)print(b)输出: 1 #开平方计算 a = 4b = np.sqrt(a)print(b)输出: ...
- 《视觉SLAM十四讲课后作业》第一讲
1. 如何在 Ubuntu 中安装软件(命令⾏界⾯)?它们通常被安装在什么地⽅? 答:一般有两种安装方式(1)apt-get install (2)dpkg -i package.deb.系统软件一般 ...
- spring-mvc（基础）
一.MVC框架的概述 1.作用 ①支持直接一个方法对一请求 ② 支持数据的自动封装 ③ 自动支持上传组件 ④ 自动支持JSON的转成 2.配置流程图 3.基于xml的配置 ...
- Python day 04
Day 04 今日内容 补充 1.解释器/编译器 补充:编译型语言和解释型语言? # 编译型:代码写完后,编译器将其变成成另外一个文件,然后交给计算机执行. # 解释型:写完代码交给解释器,解释器会从 ...
- python第二天3.1
算数运算符arithmetic operator: + - * / % % : 取余,取模.取的是第一个操作数和第二个操作数除法的余数.整除结果为0. 10 % 3 1 10 ...
- BZOJ-1721|线性dp-缆车支柱
Ski Lift 缆车支柱 Description Farmer Ron in Colorado is building a ski resort for his cows (though budge ...
- Java包装类介绍与类型之间相互转换
1.包装类存在的意义 通俗解释就是由于Java是面对对象的语言,而基本类型不具有面对对象的概念,为了弥补不足,引入了包装类方便使用面对对象的变成思想操作基本类型. 2.基本类型和包装类对应关系 byt ...
- C++_day06_运算符重载_智能指针
1.只有函数运算符可以带缺省函数,其他运算符函数主要由操作符个数确定 2.解引用运算符和指针运算符 示例代码: #include <iostream> using namespace st ...
- C#的Monitor.Enter和Monitor.Exit
C#的lock 语句实际上是调用Monitor.Enter和Monitor.Exit,中间夹杂try-finally语句的简略版,下面是实际发生在之前例 子中的Go方法: 1 2 3 4 5 6 7 ...