<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter- bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"> </script>
<title>河北科技大学</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.wrap{
width: 100%;
height: 1000px;
/*border: 1px solid #000;*/
background: linear-gradient(180deg,#1E90FF 3px,#fff 90%);
}
.wrap .header{
width: 70%;
height: 120px;
margin: 0 auto;
color: #fff;
background:linear-gradient(180deg,#0000FF ,#1E90FF 50%);
}
.wrap .header h1 {
font-size: 30px;
margin-left: 80px;
margin-top: 30px;
}
.wrap .header p{
margin-left: 80px;
margin-top: 1px;
font-size: 5px;
}
.wrap .header .header-r .english span{
margin-top:30px ;
margin-right: 190px;
}
.wrap .header select {
margin-top: 30px;
width: 100px;
height: 25px;
}
.wrap .header .sousu{
width: 150px;
height: 25px;
border: 1px solid #fff;
background-color: #1E90FF;
color: #fff;
margin-left: 5px;
}
.wrap .header .submit{
width: 48px;
height: 25px;
margin-left: -55px;
background-color: yellow;
}
.wrap .header-bottom{
width: 70%;
height: 40px;
margin: 0 auto;
background: linear-gradient( #3366ff 50%,#0066FF 50%);
/*border: 1px solid red;*/
}
.wrap .header-bottom ul li {
float: left;
color: #fff;
margin: 7px 18px;
font-size: 15px;
}
.wrap .content{
width: 70%;
height: 780px;
margin: 0 auto;
background-color: #fff;
/*border: 1px solid #000;*/
}
.wrap .content .carousel-inner img {
width: 98%;
height: 100%;
margin-left: 10px;
}
.wrap .contentt{
float: left;
width: 920px;
height: 390px;
margin: 10px 10px auto;
background-color: #fff;
/*border: 1px solid red;*/
}
.wrap .contentt-l{
float: left;
width: 270px;
height: 380px;
font-size: 15px;
border: 1px solid lightgray;
}
.wrap .contentt-l td:hover{
color:#0066FF ;
cursor: pointer;
}
.wrap .contentt-m{
float: left;
width: 390px;
top: 0;
margin: 10px auto;
/*border: 1px solid lightgray;*/
height: 400px;
}
.wrap .contentt-m span{
font-size: 14px;
margin-left: 13px;
text-align: center;
margin-top: 200px;
}
.wrap .contentt-m .content-mt{
width: 370px;
height: 180px;
margin: 8px;
border: 1px solid lightgray;
}
.wrap .contentt-m .content-mm{
width: 370px;
height: 250px;
/*margin: 8px;*/
border: 1px solid lightgray;
}
.wrap .contentt-m .content-mt .container ul{
width: 360px;
height: 40px;
}
.wrap .contentt-m .content-mt #tab-con ul{
border: 1px solid lightgray;
width: 350px;
height: 110px;
margin-top: -20px;
margin-left: -20px;
}
.wrap .contentt-m .content-mt .container ul li a {
color:blue ;
font-size: 15px;
}
.wrap .contentt-m .content-mt #tab-con ul li:hover{
color: blue;
cursor: pointer;
}
.wrap .contentt-m .content-mt #tab-con ul li{
font-size: 13px;
}
.wrap .contentt-m .content-mm #tab-con ul{
border: 1px solid lightgray;
width: 350px;
height: 90px;
margin-top: -20px;
margin-left: -20px;
}
.wrap .contentt-m .content-mm .container ul li a {
color:blue ;
font-size: 15px;
margin-left: 10px;
}
.wrap .contentt-m .content-mm #tab-con ul li{
font-size: 13px;
}
.wrap .contentt-m .content-mm #tab-con ul li:hover{
color: blue;
cursor: pointer;
}
.wrap .contentt-m .content-mm{
width: 370px;
height: 175px;
margin: 8px;
border: 1px solid lightgray;
}
.wrap .contentt-r{
float: left;
width: 250px;
height: 380px;
border: 1px solid lightgray;
}
.wrap .contentt-r span{
}
.wrap .contentt-r .people{
margin-top: 30px;
margin-left: 10px;
width: 240px;
height: 320px;
border: 1px solid lightgray;
}
.wrap .contentt-r .people li {
margin: 2px;
color:red;
font-size: 15px;
}
.wrap .footer {
width: 920px;
margin-top: 420px;
margin-left: 240px
height: 1px;
/*border: 1px solid red;*/
}
.wrap .footer ul{
width: 760px;
height: 30px;
margin: 10px;
border: 1px solid lightgray;
}
.wrap .footer ul li a{
font-size: 13px;
color: #000;
float:left;
/*margin-left:2px;*/
text-align: center;
margin: 5px 5px auto;
}
.height{
width: 1000px;
border: 2px solid #3366ff;
margin-left: 160px;
margin-top: 10px;
}
.qq{
width: 1000px;
height: 100px;
/*border: 1px solid #3366ff;*/
margin-left: 160px;
margin-top: 10px;
}
.qq .all {
width: 900px;
height: 30px;
/*border: 1px solid red;*/
}
.qq .all li{
float: left;
margin: -10px 50px 0;
}
.qq .num li a{
float: left;
margin: -10px 50px ;
}
</style>
<script src="./jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="header-top">
<div class="header-l" style="float: left;">
<h1 style="letter-spacing: 20px;">河北科技大学</h1>
<p>HEBEI UNIVERSITY OG SCIENCE AND TECHNOLOGY</p>
</div>
<div class="header-r" style="float: right;">
<div class="english"><span style="display: block;" > English version | French version</span></div>
<select name="" id="" >
<option value="">教育机构</option>
<option value="">研究生学院</option>
<option value="">经济管理学院</option>
<option value="">化学与制药工程学院</option>
<option value="">环境工程与工程学院</option>
</select>
<select name="" id="" >
<option value="">研究机构</option>
<option value="">河北省药用分子化学重点实验室</option>
<option value="">河北省分析测试研究中心</option>
<option value="">高等教育研究所</option>
<option value="">学报编辑部</option>
</select>
<form action="" style="display: inline;">
<input class="sousu" type="text" value ="搜素关键字">
<input class = "submit" type="submit"></form>
</div>
</div>
</div>
<div class="header-bottom">
<ul style="float: left;">
<li>首页</li>
<li>校情总览</li>
<li>人才培养</li>
<li>科学研究</li>
<li>组织机构</li>
<li>师资队伍</li>
<li>招生就业</li>
<li>开放办学</li>
<li>校园文化</li>
<li>服务指南</li>
</ul>
</div>
<div class="content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<!-- <li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
<li data-target="#demo" data-slide-to="4"></li>
<li data-target="#demo" data-slide-to="5"></li> -->
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://www.hebust.edu.cn/images/content/2017-11/20171122091552043607.jpg">
</div>
<div class="carousel-item">
<img src="http://www.hebust.edu.cn/images/content/2017-11/20171120170819959131.jpg">
</div>
<div class="carousel-item">
<img src="http://www.hebust.edu.cn/images/content/2017-11/20171120170949390426.jpg">
</div>
<div class="carousel-item">
<img src="http://www.hebust.edu.cn/images/content/2019-06/20190606163027768836.jpg">
</div>
<div class="carousel-item">
<img src="http://www.hebust.edu.cn/images/content/2017-11/20171122091536243525.jpg">
</div>
<div class="carousel-item">
<img src="http://www.hebust.edu.cn/images/content/2019-05/20190531080209086140.jpg">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<div class="contentt">
<div class="contentt-l" style="background-color:#AEEEEE;">
<div class="container">
<table class="table table-sm ">
<th style="color: red;">
<span style="float: left;">热点关注</span><a href="#" style="float: right;">MORE</a></th>
<tbody>
<tr>
<td style="color: red;">中共河北科技大学第三次代表大会</td>
</tr>
<tr>
<td style="color: red;">媒体聚焦</td>
</tr>
<th style="color: #3366ff;">
<span style="float: left;">专题网站</span><a href="#" style="float: right;">MORE</a> </th>
<tr>
<td>处级班子换届专题网站</td>
</tr>
<tr>
<td>人才招聘系统</td>
</tr>
<tr>
<td>中外合作办学评估</td>
</tr>
<tr>
<td>思想政治工作</td>
</tr>
<tr>
<td>干部培训平台</td>
</tr>
<tr>
<td>2019年职称工作专题网站</td>
</tr>
<tr>
<td>本科教学质量工程</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="contentt-m">
<div class="content-mt">
<div class="container">
<!-- Nav pills -->
<ul class="nav nav-pills nav-sm " role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">综合新闻 </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">院系动态</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">新闻纵深</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu3">MORE</a>
</li>
</ul>
<!-- Tab panes -->
<div id="tab-con" class="tab-content tab-bordered">
<div id="home" class="container tab-pane active"><br>
<ul>
<li><a href="#">图解党代会报告</a><span style="margin-left: 159px; ">[2019-06-05 ]</span></li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
</ul>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<ul>
<li><a href="#">图解党代会报告</a><span style="margin-left: 159px; ">[2019-06-05 ]</span></li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
</ul>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<ul>
<li><a href="#">图解党代会报告</a><span style="margin-left: 159px; ">[2019-06-05 ]</span></li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
</ul>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<ul>
<li><a href="#">图解党代会报告</a><span style="margin-left: 159px; ">[2019-06-05 ]</span></li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
<li>喜迎党代会 | 奋进的河北科技大学————教... [2019-06-05 ]</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content-mm">
<div class="container">
<!-- Nav pills -->
<ul class="nav nav-pills nav-sm " role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">通知 </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">通告</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">招标信息</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu3">MORE</a>
</li>
</ul>
<!-- Tab panes -->
<div id="tab-con" class="tab-content tab-bordered">
<div id="home" class="container tab-pane active"><br>
<ul>
<li>河北科技大学2019年高层次人才招聘公告 [2019-06-05 ]</li>
<li>关于开展河北省2019年度师德标兵推荐评选... [2019-06-05 ]</li>
<li> 关于赴大洲洋及非洲毛里求斯志愿者报名通知[2019-06-05 ]</li>
<li> 关于赴大洲洋及非洲毛里求斯志愿者报名通知[2019-06-05 ]</li>
</ul>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<ul>
<li>河北科技大学2019年高层次人才招聘公告 [2019-06-05 ]</li>
<li>关于开展河北省2019年度师德标兵推荐评选... [2019-06-05 ]</li>
<li> 关于赴大洲洋及非洲毛里求斯志愿者报名通知[2019-06-05 ]</li>
<li> 关于赴大洲洋及非洲毛里求斯志愿者报名通知[2019-06-05 ]</li>
</ul>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<ul>
<li>河北科技大学2019年高层次人才招聘公告 [2019-06-05 ]</li>
<li>关于开展河北省2019年度师德标兵推荐评选... [2019-06-05 ]</li>
<li> 关于赴大洲洋及非洲毛里求斯志愿者报名通知[2019-06-05 ]</li>
<<li> 关于赴大洲洋及非洲毛里求斯志愿者报名通知[2019-06-05 ]</li>
</ul>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<ul>
<li>河北科技大学2019年高层次人才招聘公告 [2019-06-05 ]</li>
<li>关于开展河北省2019年度师德标兵推荐评选... [2019-06-05 ]</li>
<li> 关于赴大洲洋及非洲毛里求斯志愿者报名通知[2019-06-05 ]</li>
<li> 关于赴大洲洋及非洲毛里求斯志愿者报名通知[2019-06-05 ]</li>
</ul>
</div>
<div>
<span style="color:blue;font-size: 15px;">校内消息</span>
<span style="color:blue;">今天有条新信息</span>
<span>MORE</span>
</div>
</div>
</div>
</div>
</div>
<div class="contentt-r">
<span style="float:left; margin-left: 20px; background: #0066FF; border-radius: 5px;margin-top: 5px;">
学术动态
</span>
<span><a href="#" style="float: right; color: black;">MORE</a></span>
<ul class="people">
<li><a href="#">人工智能历史、现状与趋势</a></li>
<li><a href="#">并联机构研究现状及过约束并...</a></li>
<li><a href="#">超分子纳米药物</a></li>
<li><a href="#">低熔点金属熔融沉积三维打印...</a></li>
<li><a href="#">大数据与数据压缩</a></li>
<li><a href="#">艺术大讲堂:西方艺术200...</a></li>
<li><a href="#">无人机系统概、趋势与技术...</a></li>
<li><a href="#">电力装备行业智能制造实践与...</a></li>
<li><a href="#">知途求远-计宇教授谈在美国...</a></li>
<li><a href="#">管理科学系列讲座之五--虚...</a></li>
<li><a href="#">未来5g网络核心技术的发展...</a></li>
<li><a href="#">管理科学系列讲座之四-CL...</a></li>
<li><a href="#">弱电网下分布式电源的关键计...</a></li>
</ul>
</div>
</div>
<div class="footer">
<ul class="email">
<li><a href="#">电子邮件</a></li>
<li><a href="#">|</a></li>
<li><a href="#">课程中心</a></li>
<li><a href="#">|</a></li>
<li><a href="#">图书馆</a></li>
<li><a href="#">|</a></li>
<li><a href="#">理工学院</a></li>
<li><a href="#">|</a></li>
<li><a href="#">分心测试中心</a></li>
<li><a href="#">|</a></li>
<li><a href="#">VPN远程登录</a></li>
<li><a href="#">|</a></li>
<li><a href="#">校园一卡通</a></li>
<li><a href="#">|</a></li>
<li><a href="#">科大云盘</a></li>
<li><a href="#">|</a></li>
<li><a href="#">学生邮箱</a></li>
</ul>
<select name="" id="" style="float: right; margin-top: -40px; width: 140px;height: 28px; border: 1px solid #3366ff ;">
<option value="——常用链接——">——常用链接——</option>
<option value="">中华人民共和国教育部</option>
<option value="">河北省教育厅</option>
<option value="">河北省科学技术厅</option>
<option value="">中国教育和科研计算机网</option>
<option value="">CERNET河北主节点</option>
</select>
</div>
</div>
<div class="height"></div>
<div class="qq">
<ul class="all">
<li>地址:河北省石家庄市裕华街26号</li>
<li>版权所有河北科技大学</li>
<li>冀ICP备05002802号></li>
</ul>
<ul>
<li style="margin:-15px 50px;">冀公网安备:13010802000638号</li>
</ul>
<ul class="num">
<li><a href="#">邮政编码:050018</a></li>
<li><a href="#">邮箱:webmasster@hebust.edu.cn</a></li>
<li><a href="#">官方微博</a></li>
<li><a href="#">官方微信</a></li>
</ul>
</div>
</div>
</body>
</html>
用bootstrap来实现学校网页
最新推荐文章于 2023-03-23 00:23:58 发布