关于动态门户WEB博雅互动的源代码（HTML+CSS+javascript）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博雅互动</title>
<link rel="stylesheet" href="./CSS/index.css"> </head>
<body>
<div class = "box">
<div class = "nav">
<span><a href="http://www.boyaa.com"><img src="./images/logo.png"></a></span>
<ul>
<li class = "frist"><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 class = "last"><img src="./images/jrwm.png"></li>
</ul>
</div>
</div>
<div class = "banner">
<img src="./images/banner1.jpg" alt="" name = "banner">
</div> <div class = "bpt">
<div>
<img src="./images/bpt1.jpg" alt=""><p align = "center">BPT宣传片</p><p align = "center"><a href="#">点击播放</a></p>
</div><div>
<img src="./images/bpt2.jpg" alt=""><p align = "center">博雅互动宣传视频</p><p align = "center"><a href="#">点击播放</a></p>
</div><div>
<img src="./images/bpt3.jpg" alt=""><p align = "center">斗地主</p><p align = "center"><a href="#">点击播放</a></p>
</div><div class="bptlast">
<img src="./images/bpt4.jpg" alt="" class="imglast"><p align = "center">德州扑克</p><p align = "center"><a href="#">点击播放</a></p>
</div> </div>
<!--博雅新闻开始-->
<div class= "new">
<div class = "newone"><img src="./images/bynewsbg.jpg" alt="">
<ul>
<li><script type="text/javascript">
var today = new Date();
var y = today.getFullYear();
var m = today.getMonth()+1;
document.write(y+"/"+m)
</script> <a href="http://www.gdzsxx.com/news/dx/201612/106161.html"><strong>第三届宠物文化节在华南农业大学正式落幕</strong></a></li>
<li><script type="text/javascript">
var today = new Date();
var y = today.getFullYear();
var m = today.getMonth()+1;
document.write(y+"/"+m)
</script> <a href="http://gd.people.com.cn/n/2015/0122/c123932-23644282.html"><strong>杂交水稻之父袁隆平院士两度光临华农</strong></a></li>
<li>
<script type="text/javascript">
var today = new Date();
var y = today.getFullYear();
var m = today.getMonth()+1;
document.write(y+"/"+m)
</script> <a href="https://idol001.com/news/liyifeng/detail/54fd09997a1173350e8b49ba"><strong>李易峰，何炅《栀子花开》在华南农业大学取景</strong></a>
</li>
<li><script type="text/javascript">
var today = new Date();
var y = today.getFullYear();
var m = today.getMonth()+1;
document.write(y+"/"+m)
</script> <a href="http://hi.people.com.cn/n2/2016/0904/c231182-28944338.html"><strong>科比，库里在华南农业大学田家炳训练场</strong></a></li>
<li class=" last"><a href=""><img src="./images/more.png" alt=""></a></li>
</ul>
</div> <div class = "newtwo"><img src="./images/zczp.jpg" alt="">
<div>
<ul>
<li><img src="./images/zczp.png" alt=""></li>
<li class = "IMG2"><img src="./images/more2.png" alt=""></li>
</ul>
</div>
<div class="zp">
<ol>
<li><strong>专场招聘岗位</strong></li>
<li><a href="">PHP开发工程师</a></li>
<li><a href="">WEB前端开发工程师</a></li>
<li><a href="">JAVA开发工程师</a></li>
<li><a href="">IOS开发工程师</a></li>
</ol> </div> </div> </div>
<!--
1、图片轮播函数 开始定义 -->
<script>
var imgObjet = document.images[2];
console.log(imgObjet); setInterval(imgplay, 2000); var i =2;
function imgplay(){
imgObjet.src ="./images/banner"+i+".jpg"; i++;
if(i>4){
i = 1
}
} </script> <!-- 底部收尾栏开始 -->
<div class = "bottom">
<div class = "botone">
<ul>
<font color="#ffffff">
<li>网站地图 | 免责声明</li>
<li>Copyright®2017-2030博雅互动（Boyaa Interactive）粤ICP备999999号 增值电信业务许可证</li>
</font>
<li><img src="./images/govIcon.gif" alt="" width="60" height="85"></li>
</ul>
</div>
</div> </body>
</html>
*{
margin:0px;
padding:0px;
}
/* 清除HTML样式 */
a{
text-decoration: none;
color:#b12ff2;
}
a:hover{
text-decoration: underline;
color: #4d90fe;
}
.box{
width:100%;
height:58px;
border:1px solid;
background-color: #191d3a;
position: fixed;
z-index: 3px;
}
.nav span {
float: left;
margin-right: 60px;
}
.nav {
width:1248px;
height:58px;
margin:0 auto;
}
.nav li{
list-style-type: none;
float: left;
width: 100px;
height: 58px;
line-height: 58px;
text-align: center;
border-right: 2px solid #252947;
}
.nav .frist{
border-left: 2px solid #252947;
background-color: #252947;
}
.nav .last{
padding-left: 48px;
padding-top: 12px;
border-right: 0px;
}
/* 图片轮播栏开始 */
.banner{
width：100%;
height:463px;
padding-top: 58px;
}
.bpt{
width: 1050px;
height: 230px;
margin:0 auto;
margin-top: 50px;
border-bottom: 1px solid #dbe1e7;
}
.bpt div{
display: inline-block;
margin-right: 43px;
height:230px;
}
.bpt div img{
width:218px;
height: 130px
}
.bpt div .imglast{
width:217px;
}
.bpt a{
color:#38b774;
font-weight: bold;
}
/* 图片轮播栏结束 */
/* 博雅新闻开始 */
.new {
width:1000px;
height: 310px;
margin:12px auto;
}
.newone{
width:500px;
height: 310px;
display:inline-block;
}
.newtwo{
width:500px;
height: 310px;
position: relative;
left: 500px;
bottom: 507px;
}
.newone li{
display: block;
width:500px;
height: 40px;
line-height: 40px;
list-style-type: none;
position: relative;
bottom: 165px;
left:20px;
border-bottom: 1px solid #dbe1e7;
}
.newone .last{
border-bottom: none;
position: relative;
left:220px;
bottom: 440px;
}
.newtwo li{
list-style-type: none;
position: relative;
left:100px;
bottom: 275px;
}
.newtwo .IMG2{
position: relative;
left:250px;
bottom: 325px;
}
.zp{
position: relative;
right: 80px;
bottom: 20px;
}
.zp li{
width: 350px;
height: 37px;
line-height: 37px;
border-bottom: 1px solid #ffffff;
}
.zp a{
color: #ffffff;
}
/* 博雅新闻结束 */
/* 底部栏开始 */
.bottom{
width: 100%;
height: 130px;
background-color: #191d3a;
margin-top: 130px;
}
.botone{
width: 1000px;
height: 130px;
margin:0 auto;
}
.botone li{
list-style-type: none;
float: left;
height: 91px;
line-height: 130px;
margin-right: 35px;
}
.botone img{
margin-top: 20px;
}
预览图：（因为谷歌浏览器不支持全屏保存图片，因此用的是360浏览器打开，可能一些字体存在兼容性的问题，望忽略！）
关于动态门户WEB博雅互动的源代码（HTML+CSS+javascript）的更多相关文章
- how to create one single-file Web Component just using the HTML, CSS, JavaScript
how to create one single-file Web Component just using the HTML, CSS, JavaScript web components html ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...
- 在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript
需求描述: 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示,具体表现如下图: 如果如果输入框内容有一项为空,弹出对话框‘请将数据填入完全 步骤: 1.按钮注册单击事件 2.获取并判断 ...
- 深圳--博雅互动 Android面试打酱油归来
公司在TCL工业园E4,坐地到西丽站,那边在修路,不好走.B796公交站台在A出口的反方向,还要顺着施工的屏障打个弯,在西丽法院1上车.公司那边比较偏了,附近只有两趟公交.办公地点在10楼,出电梯就可 ...
- 动态调用web服务
通常我们在程序中需要调用WebService时,都是通过“添加Web引用”,让VS.NET环境来为我们生成服务代理,然后调用对应的Web服务.这样是使工作简单了,但是却和提供Web服务的URL.方法名 ...
- 在javaEE下学习web（在eclipse中开发动态的WEB工程，servlet的环境搭建，及servlet的一些方法）
一个简便的方法实现javaee版的eclipse开发动态的WEB工程(javaWEB项目)1.把开发选项切换到javaEE2. 可以在window->shou view 中找到package e ...
- 在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启（另添加一个Config文件用于管理用户数据）
原文:在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据) 我们都知道,在asp.net中修改 ...
- Eclipse拷贝动态的web工程修改context root的值
Eclipse拷贝动态的web工程修改context root的值 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. context root的名称一般是我们访问URL时的PATH路径 ...
随机推荐
- bash切割文件
split -l 100 ./x01.txt -d -a 3 --additional-suffix=.txt 将 x01.txt文件,-l 100 按照每个100行, -d 以数字累加, -a 3 ...
- 关于clear与清除浮动
今天看bootstrap突然看到了 .container:after { clear: both; } 好像对clear的用法有点模糊,于是于是又研究一下用法. 上面搜资料总会搜到张鑫旭老师的相关文章 ...
- window.location和document.location的区别分析
用户不能改变document.location(因为这是当前显示文档的位置).但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而 ...
- Maven 打包的时候报 Failed to execute goal org.codehaus.mojo:native2ascii-maven-plugin
错误信息: [ERROR] Failed to execute goal org.codehaus.mojo:native2ascii-maven-plugin:1.0-alpha-1:native2 ...
- CountDownLatch 使用（模拟一场比赛）
java.util.concurrency中的CountDownLatch,主要用于等待一个或多个其他线程完成任务.CountDownLatch在初始化时,会被赋一个整数,每次执行countDown( ...
- UOJ #188. 【UR #13】Sanrd
Description 给定 \(\sum_{i=l}^r f[i]\) \(f[i]=\) 把 \(i\) 的每一个质因子都从小到大排列成一个序列(\(p_i^{c_i}\)要出现 \(c_i\) ...
- 问题集录--Android:解决Studio新建项目时，在 Building gradle project info 一直卡住
Android Studio导入项目的时候,一直卡在Building gradle project info这一步,主要原因还是因为被墙的结果.gradle官网虽然可以访问,但是速度连蜗牛都赶不上.. ...
- <深入理解JavaScript>学习笔记(2)_揭秘命名函数表达式
写在前面的话 注:本文是拜读了 深入理解JavaScript 之后深有感悟,故做次笔记方便之后查看. 感觉这章的内容有点深奥....略难懂啊. 先坐下笔记,加深一下印象吧. 我主要记一下自己感觉有用的 ...
- 七、spark核心数据集RDD
简介 spark RDD操作具体参考官网:http://spark.apache.org/docs/latest/rdd-programming-guide.html#overview RDD全称叫做 ...
- Hunger Snake
除了驱动的效果.