简单html首页模版（滚动条，滚动图）
来源：互联网 发布：importnew java面试 编辑：程序博客网 时间：2024/05/08 08:49
<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>
0 0
- 简单html首页模版（滚动条，滚动图）
- 关于首页滚动条
- HTML自定义滚动条（仿网易邮箱滚动条）
- HTML中的滚动条/去掉滚动条
- html 滚动条
- html滚动条
- HTML 滚动条
- html DIV 滚动条
- HTML 页面滚动条
- 透明滚动条 HTML
- html滚动条
- HTML滚动条
- HTML实现滚动条
- html写滚动条
- html设计滚动条
- html滚动条样式
- 【JQuery】HTML自定义滚动条（mCustomScrollbar）
- Jquery应用案例之单条新闻的滚动效果(仿雅虎首页新闻滚动）
- 线程练习2
- linux中 sed 替换
- Dialog所遇到的坑
- POJ1862 Stripies
- python把函数作为参数的函数
- 简单html首页模版（滚动条，滚动图）
- 16SpringMVC——MVC的概念(一)
- 跟小马哥学算法leetcode_06
- git的常用操作
- 移动端点击事件、滑动事件、长按事件封装
- [问题记录]NotServingRegionException: Region hbase:meta
- VelocityTracker的简单使用
- git learn
- 1211
