一百网页制作之5
2015-06-01 22:48
295 查看
<!DOCTYPE html>
<html>
<head lang="en">
<style>
*{padding: 0;margin: 0;}
a {text-decoration:none;}
li {list-style-type: none;}
body {width: 1004px; height:100%;background: url("images/backclor.png") repeat-x; margin: 0 auto;}
.title {width: 1004px; height: 90px; background: url("images/背景%20(124).gif") repeat;}
.search {float: right; width:455px; height: 90px;overflow: hidden; text-align: center;}
.search input {width: 150px; margin-top: 20px; height: 25px; margin-left: 110px;}
.search img {vertical-align:middle;}
.search_span {font-size: 12px;margin-left: 20px;}
.nav_ul {background:url("images/背景%20(322).gif") repeat-x; width:1004px; height: 36px; }
.nav_ul li {float: left;margin-left:40px; overflow: hidden; width: 80px;text-align: center;}
.nav_ul a {width: 80px; height: 27px;display: block;padding-top:9px;}
.nav_ul li :hover{background: red;}
.nav_ul a:link{color: yellow;}
.nav_ul a:visited{color: yellow;}
.nav_ul a:active{color: yellow;}
/***********图片轮播*/
#banner {position:relative; width:1002px; height:400px; border:1px solid #666; }
#banner_list img {border:0;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000; cursor:pointer; width:478px;}
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002; margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;width:1002px; height:400px;overflow: hidden}
/*****图片循环*************/
.Img-xunhuan {position: relative;width: 800px;overflow: hidden;margin: 0 auto;}
.Img_xunhuan_top {position: relative;margin: 5px;background-color: #FFF; }
.Img_xunhuan_top img{vertical-align:middle;}
.Img_xunhuan_body {padding-top: 5px;position: relative;left: 0}
.Img_xunhuan_body img{float: left; padding: 4px;}
.div1 {width: 1024px;background: black;height:50px;color: white;overflow: hidden;}
.div1 p {margin:15px 100px;}
.div1 span {float: right;margin-right: 115px;}
.div1 span img{vertical-align: middle;}
.div2 {width: 800px;height: 100%; margin: 0 auto;position: relative}
.left {width: 395px;float: left;}
.right {width: 395px;float:right;}
.right ul li { list-style-type: square; list-style-position: inside;line-height: 30px;border-bottom: dashed 1px #ccc;}
.right ul span {float: right;}
.div3 {width: 1024px;background: black; position: relative; top:10px; color: white;overflow: hidden;text-align: center;display: block;}
</style>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function onBlur () {
var oInt = document.getElementById('int1');
var oIntV = oInt.value;
if(oIntV==''){
oInt.value ='请输入搜索内容';
}
}
function onFocus () {
var oInt = document.getElementById('int1');
var oIntV = oInt.value;
if(oIntV==oInt.defaultValue){
oInt.value = '';
}
}
window.onload = function () {
var oNav = document.getElementById('nav_ul');
var aNavA = oNav.getElementsByTagName('a');
var i=0;
for (i=0; i<aNavA.length; i++) {
aNavA[i].index = i;
aNavA[i].onclick = function () {
for(i=0; i<aNavA.length; i++){
aNavA[i].style.backgroundColor='';
}
aNavA[this.index].style.backgroundColor = 'red';
}
}
var oImg =document.getElementById('Img_xunhuan_body');
var aImg =oImg.getElementsByTagName('img');
var timer = null;
var iSpeed = -3;
oImg.innerHTML += oImg.innerHTML;
oImg.style.width = aImg[0].offsetWidth * aImg.length +'px';
function starMove () {
if (oImg.offsetLeft < -(oImg.offsetWidth/2)){
oImg.style.left =0;
}
oImg.style.left = oImg.offsetLeft + iSpeed + 'px';
}
timer= setInterval(starMove,30);
oImg.onmouseover = function () {
clearInterval(timer);
};
oImg.onmouseout = function (){
timer = setInterval(starMove,30)
}
}
</script>
</head>
<body>
<div id="title" class="title">
<img src="images/logo.png">
<div id="search" class="search">
<img src="images/图标%20(662).gif"><a href="javascript:" style="font-size: 12px;"> 中文</a>
<img src="images/图标%20(662).gif"><a href="javascript:" style="font-size: 12px;"> English</a><br>
<input id="int1" type="text" onblur="onBlur()" onfocus="onFocus()" value="请输入搜索内容">
<a href="javascript:"><img src="images/图标%20(270).gif"></a>
<span class="search_span"><a href="javascript:">设为首页</a><span> /</span>
<a href="javascript:">加入收藏</a></span>
</div>
</div>
<div id="nav" class="nav">
<ul id="nav_ul" class="nav_ul">
<li><a href="##" style="background-color: red">首 页</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>
</div>
<div id="banner">
<div id="banner_bg"></div><!--标题背景-->
<div id="banner_info">此处是第三个图片</div><!--标题-->
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="banner_list" class="banner_list">
<a href="##"><img src="images/back.png" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
<a href="##"><img src="images/back2.png" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
<a href="##"><img src="images/back3.png" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
</div>
</div>
<div id="Img-xunhuan" class="Img-xunhuan">
<div id="Img_xunhuan_top" class="Img_xunhuan_top">
<img src="images/图标%20(338).gif" >
<span>产品展示</span>
<a href="##"><img src="images/图标%20(455).gif" style="float: right"></a>
</div>
<div id="Img_xunhuan_body" class="Img_xunhuan_body">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<img src="images/8.jpg">
</div>
</div>
<div id="div1" class="div1">
<p>科技带来美好生活，百川竭诚为您服务<span><img src="images/图标%20(175).gif"></span></p>
</div>
<div id="div2" class="div2">
<div id="left" class="left">
<img src="images/图标%20(541).gif"><span>关于我们</span><img src="images/图标%20(455).gif" style="float: right; padding-top:10px;">
<br>
<br>
<p> 西安百川生物科技有限责任公司（原泰宇提取二厂），始建于2002年，是一家致力于动物提取物、植物提取物及天然活性有效成份的研发、生产的综合型
企业。其中，健康高效的动物催便机理、有机再生、无痛切割列入行业标杆典范，引领行业迈步向前。07年公司获得省先进单位奖。
同年，我司国内首创搭建国内天然成分发酵一体化设备平台，至今已经拥有成熟的发酵技术以及完善的化学合成车间。</p>
</div>
<div id="right" class="right">
<img src="images/图标%20(541).gif"><span>新闻动态</span><img src="images/图标%20(455).gif" style="float: right; padding-top:10px;">
<br>
<br>
<ul>
<li><a href="##">我刚中药通过...</a><span>2015/12/20</span> </li>
<li><a href="##">我公司最近完成...</a><span>2015/12/20</span> </li>
<li><a href="##">那是在六年前...</a><span>2015/12/20</span> </li>
<li><a href="##">西安百川公司...</a><span>2015/12/20</span> </li>
<li><a href="##">我刚才有做了...</a><span>2015/12/20</span> </li>
</ul>
</div>
</div>
<div id="div3" class="div3">
<br>
<p>版权所有张泽轩</p>
<p>此网页为了答谢我的初中同学</p>
<p>联系电话：45661561,216516516，,311651651,13513513505,31351303551</p>
<p>QQ号:6515116,32165160,316510652</p>
<br>
</div>
</body>
</html>View Code
本次学习心得：
vertical-align:middle;配置元素垂直对齐方式，比如给图片和input添加对齐时，只有给图片加vertical-align属
性即可；
onblur :当鼠标失去焦点时发生的事；
onfocus：当鼠标获得焦点时发生的事；
defaultValue：设置或返回文本框的初始内容；
伪类只能作用于a标签；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Google Protobuf 使用 Java 版
- Project Euler：Problem 25 1000-digit Fibonacci number
- poj 1703 Find them, Catch them 【带权并查集】
- String对象不可改变的特性
- [010] 百度地图API之根据经纬度查询地址信息(Android)
- 看php手册2015-03-19版后备注
- DJ's WebGL Tutorial 005--3D渲染与所需矩阵变换
- ios动画学习(二)
- JavaScript RegExp 对象
- 第二章节 活动
- SpringMVC＋MyBatis 导入数据到数据库
- PHP超全局变量-$_POST
- For life，For what。
- int 类的计算，不好犯这种低级错误
- [009] 百度地图API之MyLocationOverlay的使用(Android)
- mysql 小知识
- C++ 不用 < > 与 : ?运算符判断 a,b大小
- Contains Duplicate III - LeetCode 220
- [008] 百度地图API之ItemizedOverlay的使用(Android)
- s3c2440启动过程详解 （主要讲启动时nand nor的地址映射）