简单html首页模版（滚动条，滚动图）
2016-12-01 21:36
357 查看
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页布局</title>
<style type="text/css">
body{background-image:url(首页/背景.jpg);}
#nav {list-style:none;font-size:18px;line-height:58px;}
#nav li{float:left;}
.home{width:184px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
.person{width:184px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
.photo{width:184px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
.active{width:184px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
.note{width:184px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
.gun{width:350px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
#nav a:link,#nav a:visited{height:26px;background:url("首页/1.jpg") repeat-x left top;text-decoration:none;color:#fff;padding:20px 16px 0px 16px;}
#nav a:hover,#nav a:active{color:#fb7d02;background-position:left -46px;}
.p1{border-top:4px dotted #ffff00;border-bottom:4px dotted #ffff00;}
.p2{border-top:4px dashed #ffff00;border-bottom:4px dashed #ffff00;}
.scroll_div {width:600px; height:200px;margin:0 auto; overflow: hidden; white-space: nowrap;}
.scroll_div img {width:120px;height:100px;border: 0;margin: auto 8px; border:1px #efefef solid;}
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}
</style>
<script type="text/javascript">
function show(){
alert("欢迎来到首页布局");
}
</script>
</head>
<body>
<body onload="show()">
<center>
<img src="首页/横幅.gif">
</center>
<div style="width: 100%;height: 10%">
<ul id="nav">
<center>
<li class="home"><a href="#.html">#</a></li>
<li class="person"><a href="#.html">#</a></li>
<li class="photo"><a href="#.html">#</a></li>
<li class="active"><a href="#.html">#</a></li>
<li class="note"><a href="#.html">#</a></li>
<li class="gun"><marquee onmouseover=this.stop() onmouseout=this.start()>网站首页！</marquee></li>
</center>
</ul>
</div>
<div style="background:url(首页/标志.jpg); width: 340px; height:450px; margin-left:40px; float: left">
<p class="p1"> <img src="首页/标志.png"></p>
<script language="javascript">
function ScrollImgLeft(){
var speed=20
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar)}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
<div style="text-align:center"><br>
<font face="楷体" size="6" color="ffff00"><center>###</center></font><br>
<div class="sqBorder">
<!--#####滚动区域#####-->
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href="1.jpg"><img src="1.jpg" /></a></li>
<li><a href="3.jpg"><img src="3.jpg" /></a></li>
<li><a href="5.jpg"><img src="5.jpg" /></a></li>
<li><a href="7.jpg"><img src="7.jpg" /></a></li>
<li><a href="9.jpg"><img src="9.jpg" /></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->
</div>
<script type="text/javascript">ScrollImgLeft();</script>
</div>
<!--//向左滚动代码结束-->
</div>
<div style="background:url(首页/背景1.jpg); width: 930px; height:410px; float: left;">
<center><video src="###.mp4" width="700" height="400" controls="controls"></video>
</center>
</div>
<div class="p1" style="background:url(首页/背景2.jpg); width: 930px; height:30px; float: left;">
<center><font size="5" face="楷体" color="ffff00">####</font></center>
</div>
</div>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>首页布局</title>
<style type="text/css">
body{background-image:url(首页/背景.jpg);}
#nav {list-style:none;font-size:18px;line-height:58px;}
#nav li{float:left;}
.home{width:184px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
.person{width:184px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
.photo{width:184px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
.active{width:184px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
.note{width:184px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
.gun{width:350px;height:46px;background:url("首页/1.jpg") repeat-x left top;}
#nav a:link,#nav a:visited{height:26px;background:url("首页/1.jpg") repeat-x left top;text-decoration:none;color:#fff;padding:20px 16px 0px 16px;}
#nav a:hover,#nav a:active{color:#fb7d02;background-position:left -46px;}
.p1{border-top:4px dotted #ffff00;border-bottom:4px dotted #ffff00;}
.p2{border-top:4px dashed #ffff00;border-bottom:4px dashed #ffff00;}
.scroll_div {width:600px; height:200px;margin:0 auto; overflow: hidden; white-space: nowrap;}
.scroll_div img {width:120px;height:100px;border: 0;margin: auto 8px; border:1px #efefef solid;}
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}
</style>
<script type="text/javascript">
function show(){
alert("欢迎来到首页布局");
}
</script>
</head>
<body>
<body onload="show()">
<center>
<img src="首页/横幅.gif">
</center>
<div style="width: 100%;height: 10%">
<ul id="nav">
<center>
<li class="home"><a href="#.html">#</a></li>
<li class="person"><a href="#.html">#</a></li>
<li class="photo"><a href="#.html">#</a></li>
<li class="active"><a href="#.html">#</a></li>
<li class="note"><a href="#.html">#</a></li>
<li class="gun"><marquee onmouseover=this.stop() onmouseout=this.start()>网站首页！</marquee></li>
</center>
</ul>
</div>
<div style="background:url(首页/标志.jpg); width: 340px; height:450px; margin-left:40px; float: left">
<p class="p1"> <img src="首页/标志.png"></p>
<script language="javascript">
function ScrollImgLeft(){
var speed=20
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar)}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
<div style="text-align:center"><br>
<font face="楷体" size="6" color="ffff00"><center>###</center></font><br>
<div class="sqBorder">
<!--#####滚动区域#####-->
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href="1.jpg"><img src="1.jpg" /></a></li>
<li><a href="3.jpg"><img src="3.jpg" /></a></li>
<li><a href="5.jpg"><img src="5.jpg" /></a></li>
<li><a href="7.jpg"><img src="7.jpg" /></a></li>
<li><a href="9.jpg"><img src="9.jpg" /></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->
</div>
<script type="text/javascript">ScrollImgLeft();</script>
</div>
<!--//向左滚动代码结束-->
</div>
<div style="background:url(首页/背景1.jpg); width: 930px; height:410px; float: left;">
<center><video src="###.mp4" width="700" height="400" controls="controls"></video>
</center>
</div>
<div class="p1" style="background:url(首页/背景2.jpg); width: 930px; height:30px; float: left;">
<center><font size="5" face="楷体" color="ffff00">####</font></center>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于HTML中的滚动条/去掉滚动条
- HTML 中让DIV不随滚动条滚动，使终显示在浏览器的固定位置
- css+html展示去滚动条,但保留滚动效果
- JS及jQuery获取各种宽度、高度的简单介绍以及判断滚动条滚动到底部事件
- JS简单判断滚动条的滚动方向实现方法
- ActiveX flicker ,ActiveX控件闪烁,在html中,只要有滚动条,一滚动就闪烁
- HTML - 隐藏滚动条但可以滚动
- 推荐一个图片管理的html模版和简单的js交互
- 关于滚动条滚动到指定位置触发jq事件和html锚点
- 简单的Jquery控制滚动条滚动
- 简单暴力的禁止html页面滚动的方法
- Study Html《如何让DIV固定在页面的某个位置而不随着滚动条随意滚动》
- JavaScript-html标题滚动效果的简单实现
- 使用HTML编写简单的邮件模版
- 建站，不是改改html模版这么简单的事。
- 模仿angularjs写了一个简单的HTML模版和js数据填充的示例
- WM_SYSCOMMAND包括很多功能，比如：拖动左边框、拖动标题栏、滚动条滚动、点击最小化、双击标题栏——Delphi 通过事件代替了大部分常用的消息，所以Delphi 简单、易用、高效
- HTML在网页中插入音频视频简单的滚动效果
- 有关于css，html超出部分滚动，但是不出现滚动条
- js将滚动条滚动到指定位置的简单实现方法