北京交通大学官网页面模仿_官网模仿代码-程序员宅基地
技术标签： css html javascript css3
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北京交通大学</title>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div class="header">
<img class="logo" src="img/logo_01.png" alt="">
<div class="user">
<a id="xiaoyou" href="#&">校友</a>
<a id="fangke" href="#&">访客及考生</a>
<a id="jiaozhigong" href="#&">教职工</a>
<a id="xuesheng" href="#&">学生</a>
<a id="English" href="#&">English</a>
<img src="img/search.jpg" alt="">
</div>
</div>
<div class="menu">
<div class="slideshow-container">
<div class="mySlides">
<img src="img/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="img/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="img/img_mountains_wide.jpg" style="width:100%">
</div>
</div>
<div class="menuBar">
<ul class="clearfix">
<li><a href="#&">学校概况</a>
<ul class="subMenu">
<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>
</ul>
</li>
<li><a href="#&">教学培养</a>
<ul class="subMenu">
<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>
</li>
<li><a href="#&">科学研究</a>
<ul class="subMenu">
<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>
</li>
<li><a href="#&">学科师资</a>
<ul class="subMenu">
<li><a href="#&">学科建设</a></li>
<li><a href="#&">两院院士</a></li>
<li><a href="#&">教授</a></li>
<li><a href="#&">人才招聘</a></li>
</ul>
</li>
<li><a href="#&">招生就业</a>
<ul class="subMenu">
<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>
<ul class="subMenu">
<li><a href="#&">港澳台项目</a></li>
<li><a href="#&">国际项目</a></li>
<li><a href="#&">国际项目SQA</a></li>
<li><a href="#&">硕士项目</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#&">信息资源</a>
<ul class="subMenu">
<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>
</ul>
</li>
<li><a href="#&">院系设置</a>
<ul class="subMenu">
<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="#&">软件学院</a></li>
<li><a href="#&">建筑与艺术学院</a></li>
<li><a href="#&">法学院</a></li>
</ul>
</li>
<li><a href="#&">合作交流</a>
<ul class="subMenu">
<li><a href="#&">国际交流</a></li>
<li><a href="#&">来华留学</a></li>
<li><a href="#&">在校生出国</a></li>
<li><a href="#&">北京交大留学服务中心</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="row clearfix">
<div class="col-3-4"></div>
<div class="col-1-4"></div>
</div>
<div class="row"></div>
<div class="row"></div>
</div>
</body>
</html>```
```css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
clearfix::after{
content: "";
display: block;
clear: both;
}
body{
min-width: 1200px;
}
a{
text-decoration: none;
}
ul li {
list-style: none;
}
.user{
float: right;
margin-right: 150px;
margin-top: 17px;
border: 5px 10px;
}
.header{
background-color: rgb(0,91, 170);
width: 100%;
}
.logo{
margin: 15px 0 20px 200px;
}
.user>img{
vertical-align: middle;
}
.user>a{
font-size: 14px;
display: inline-block;
margin: 0 15px;
}
#xiaoyou{
color: rgb(252, 182, 58);
padding: 5px 10px;
}
#fangke{
color: rgb(63, 176, 0);
}
#jiaozhigong{
color: rgb(0, 216, 192);
}
.user>#English{
color: rgb(252, 89, 56);
margin: 30px;
}
.menu{
position: relative;
}
.menu img{
width: 100%;
display: block;
}
.menuBar{
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba(84, 61, 97, 0.438);
}
.menuBar>ul>li>a{
color: rgb(255, 255, 255);
}
.menuBar>ul{
width: 11000px;
}
.menuBar>ul>li{
float: left;
padding: 17px 45px;
position: relative;
}
.menuBar>ul>li:hover{
border-top:5px solid rgb(293,163,0);
background-color:rgb(204, 226, 250) ;
}
.subMenu{
display: none;
position: absolute;
top:55px;
left: 0;
width: 200px;
}
.menuBar>ul>li:hover>.subMenu{
display: block;
background-color: rgba(213, 203,209,0.7);
}
.subMenu>li{
padding: 10px ;
}
.row{
height: 70px;
background-color: darkseagreen;
}
.menuBar>ul>li>.subMenu>li:hover{
background-color: rgb(0,91, 170);
width: 200px;
}
[class*="col"]{
float: left;
height: 50px;
}
.col-3-4{
width: 75%;
background-color: aquamarine;
}
.col-1-4{
width: 25%;
background-color: #c3bbcf;
}
var slideIndex=0;
showSlides();
function showSlides(){
var slides=document.getElementsByClassName("mySlides");
for(i=0;i<slides.length;i++){
slides[i].style.display="none";
}
slideIndex++;
if(slideIndex>=slides.length)
slideIndex=0;
slides[slideIndex].style.display="block";
setTimeout(showSlides,2000);
}
智能推荐
oop面向对象第七天：引用数据类型:interface接口→被实现多接口多继承(先继承后实现)、只包含常量和抽象方法、不能被实例化、可向上造型(超类+所实现的接口)_pingpang砰砰的博客-程序员宅基地
面向对象第七天：潜艇游戏第一天：设计6个类，设计World类并测试潜艇游戏第二天：给6个类添加构造方法，并测试潜艇游戏第三天：设计SeaObject超类，6个类继承SeaObject给SeaObject设计两个构造方法，6个派生类分别调用设计潜艇数组、水雷数组、深水炸弹数组，并测试潜艇游戏第四天：在6个类中重写move()移动给类中成员添加访问控制修饰符设计Images图片类潜艇游戏第五天：将窗口的宽和高设计为常量，适当地方做修改画窗口：在World类中—共3步，不要求掌握，.
C语言判断回文数的几种方法。_c 判断一个数是否是回文数-程序员宅基地
回文数：正读倒读都一样的整数。回文字符串：指从左到右读和从右到左读完全相同的字符串。下面说几种判断回文的方法。方法一 通过字符串数组来判断回文思路：使用两个数组，将整数转换成字符串，然后反着赋值给另一个数组，对比原数组和新数组是否一样。如果一样就是回文，反之不是。（这种方法有点沙雕而且局限性好大我感觉！！！）（只能用来判断18位以内的整数！！！）#define _CRT_SECURE..._c 判断一个数是否是回文数
【TSC_WL_EVK STM32WL评估板】上手体验_evb_stm32wl-程序员宅基地
【TSC_WL_EVK STM32WL评估板】上手体验一、前言最近，腾讯云加社区发布了【LoRa 社区网关点亮活动】，详情见：腾讯云物联网LoRa社区狂欢送鹅厂公仔，更有多款开发套件优惠购！通过该活动的优惠价格39.9元我拿到了一块TSC_WL_EVK STM32WL评估板，评估版到手后如下：接下来就是完成活动所说的 LoRa 社区网关点亮，官方提供在gitee的资料连接为：https://gitee.com/TencentOS/TencentOS-tiny/blob/master/doc/26._evb_stm32wl
(二)常用Shuffle类算子：groupByKey、reduceByKey、aggregateByKey 和 sortByKey_聚合类型的shuffle算子-程序员宅基地
在数据分析场景中，典型的计算类型分别是分组、聚合和排序。而 groupByKey、reduceByKey、aggregateByKey 和 sortByKey 这些算子的功能，恰恰就是用来实现分组、聚合和排序的计算逻辑。 这些算子看上去相比其他算子的适用范围更窄，也就是它们只能作用（Apply）在 Paired RDD 之上，所谓 Paired RDD，它指的是元素类型为（Key，Value）键值对的 RDD。 但是在功能方面，可以说，它们承担了数据分析场景中的大..._聚合类型的shuffle算子
Centos7.5安装GNOME桌面_centos7.5安装gmone桌面-程序员宅基地
本文主要介绍如何在Centos7.5上安装GNOME桌面步骤：新开通的cento7.5云主机，登录后按照如下步骤进行操作即可1、yum -y upgrade2、yum -y install fwupdate-efi3、yum groupinstall "GNOME Desktop" "Graphical Administration Tools" "Xfce"安装完成..._centos7.5安装gmone桌面
web robotframework xpath元素定位_robotframework定位标签td-程序员宅基地
1.定位购买按钮在这里，我写的是 //td[@class='text-center']/button[@class='ng-isolate-scope']/span[text()='购买'] ，提示找不到元素，原因是button的class值，我把他改成class='btn btn-outline ng-isolate-scope btn-xs btn-danger'就能够捕捉到了。_robotframework定位标签td
随便推点
怎样在服务器上设置无线上网,设置无线路由器步骤 电信无线路由器的设置方法...-程序员宅基地
设置无线路由器步骤主要分为九步，设置无线路由器对于没有基础的人来说是有一定难度的，而对于有基础的人来说就非常简单。那么下面就和大家分享一下设置无线路由器步骤吧! 第一步：首先将无线路由器连接好，然后在在浏览器里输入在路由器上看到的地址，一般是192.168.1.1，家里如果是用电话线上网还要准备一个调制解调器的。第二步：然后输入相应的账号跟密码，如果是新买的都是admin。第三步：然后进入操作界面..._服务器路由给网
Https协议中SSL协议的认证过程-程序员宅基地
在Https协议传输的过程中，如何确认接收方是真正的服务器端，而不是黑客呢？ SSL证书可以解决这个问题。 SSL（Secure Socket Layer，安全套接字层）：1994年为 Netscape 所研发，SSL 协议位于 TCP/IP 协议与各种应用层协议之间，为数据通讯提供安全支持。 TLS（Transport Layer Secur...
Linux 内核网络协议栈运行原理_在tcp/ip结构中,数据封装和协议栈是如何工作的?_厦门微思网络的博客-程序员宅基地
封装：当应用程序用 TCP 协议传送数据时，数据首先进入内核网络协议栈中，然后逐一通过 TCP/IP 协议族的每层直到被当作一串比特流送入网络。对于每一层而言，对收到的数据都会封装相应的协议首部信息（有时还会增加尾部信息）。TCP 协议传给 IP 协议的数据单元称作 TCP 报文段，或简称 TCP 段（TCP segment）。IP 传给数据链路层的数据单元称作 IP 数据报（IP datagram），最后通过以太网传输的比特流称作帧（Frame）。分用：..._在tcp/ip结构中,数据封装和协议栈是如何工作的?
基于Pytorch的自编码（AutoEncoder）学习_autoencoder pytorch_独不懂的博客-程序员宅基地
基于Pytorch的自编码（AutoEncoder）学习前言一、什么是自编码（What is AutoEnconder）?二、具体代码和效果欢迎学习交流！个人网站：https://zephyrhours.github.io/邮箱：[email protected]前言笔者在学习深度学习过程中，首先针对AutoEncoder进行了简单的学习，虽然网上有很多相关资料，但是绝大多部分写的很粗，尤其是包含代码和详细介绍的少之又少。不过笔者发现一篇博文写的非常不错，非常适合新手学习和了解自编码，文_autoencoder pytorch
超详细的Centos7.5安装Oracle11g_xiaTianCsDN的博客-程序员宅基地
文章目录安装环境Oracle安装包安装要求使用工具安装步骤1、操作系统配置(1)、编辑文件 /etc/security/limits.conf(2)、编辑文件 /etc/sysctl.conf(3)、使/etc/sysctl.conf配置立即生效(4)、编辑文件 /etc/pam.d/login(5)、编辑文件 /etc/profile(6)、添加用户组和用户(7)、创建数据库软件目录和数据文件存放目录，目录的位置(8)、更改目录属主为Oracle用户所有(9)、安装Oracle 11g依赖包(10)、查看_centos7.5安装oracle11g
LNMP的搭建 wordpress-程序员宅基地
环境：centos 7.4关闭防火墙关闭selinux1.安装包 开启服务yum -y install nginx mariadb-server php-fpm php-mysqlnginxsystemctl start mariadbsystemctl start php-fpm2、修改nginx的配置文件vim /etc/nginx/nginx.conf 修改下面几...