1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <style>
5 *{padding: 0;margin: 0;}
6 a {text-decoration:none;}
7 li {list-style-type: none;}
8 body {width: 1004px; height:100%;background: url("images/backclor.png") repeat-x; margin: 0 auto;}
9 .title {width: 1004px; height: 90px; background: url("images/背景%20(124).gif") repeat;}
10 .search {float: right; width:455px; height: 90px;overflow: hidden; text-align: center;}
11 .search input {width: 150px; margin-top: 20px; height: 25px; margin-left: 110px;}
12 .search img {vertical-align:middle;}
13 .search_span {font-size: 12px;margin-left: 20px;}
14 .nav_ul {background:url("images/背景%20(322).gif") repeat-x; width:1004px; height: 36px; }
15 .nav_ul li {float: left;margin-left:40px; overflow: hidden; width: 80px;text-align: center;}
16 .nav_ul a {width: 80px; height: 27px;display: block;padding-top:9px;}
17 .nav_ul li :hover{background: red;}
18 .nav_ul a:link{color: yellow;}
19 .nav_ul a:visited{color: yellow;}
20 .nav_ul a:active{color: yellow;}
21 /***********图片轮播*/
22 #banner {position:relative; width:1002px; height:400px; border:1px solid #666; }
23 #banner_list img {border:0;}
24 #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;}
25 #banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
26 #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;}
27 #banner ul li { padding:0 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
28 #banner ul li.on { background:#900}
29 #banner_list a{position:absolute;width:1002px; height:400px;overflow: hidden}
30 /*****图片循环*************/
31 .Img-xunhuan {position: relative;width: 800px;overflow: hidden;margin: 0 auto;}
32 .Img_xunhuan_top {position: relative;margin: 5px;background-color: #FFF; }
33 .Img_xunhuan_top img{vertical-align:middle;}
34 .Img_xunhuan_body {padding-top: 5px;position: relative;left: 0}
35 .Img_xunhuan_body img{float: left; padding: 4px;}
36 .div1 {width: 1024px;background: black;height:50px;color: white;overflow: hidden;}
37 .div1 p {margin:15px 100px;}
38 .div1 span {float: right;margin-right: 115px;}
39 .div1 span img{vertical-align: middle;}
40 .div2 {width: 800px;height: 100%; margin: 0 auto;position: relative}
41 .left {width: 395px;float: left;}
42 .right {width: 395px;float:right;}
43 .right ul li { list-style-type: square; list-style-position: inside;line-height: 30px;border-bottom: dashed 1px #ccc;}
44 .right ul span {float: right;}
45 .div3 {width: 1024px;background: black; position: relative; top:10px; color: white;overflow: hidden;text-align: center;display: block;}
46 </style>
47 <meta charset="UTF-8">
48 <title></title>
49 <script type="text/javascript">
50 function onBlur () {
51 var oInt = document.getElementById('int1');
52 var oIntV = oInt.value;
53 if(oIntV==''){
54 oInt.value ='请输入搜索内容';
55 }
56 }
57 function onFocus () {
58 var oInt = document.getElementById('int1');
59 var oIntV = oInt.value;
60 if(oIntV==oInt.defaultValue){
61 oInt.value = '';
62 }
63 }
64 window.onload = function () {
65 var oNav = document.getElementById('nav_ul');
66 var aNavA = oNav.getElementsByTagName('a');
67 var i=0;
68 for (i=0; i<aNavA.length; i++) {
69 aNavA[i].index = i;
70 aNavA[i].onclick = function () {
71 for(i=0; i<aNavA.length; i++){
72 aNavA[i].style.backgroundColor='';
73 }
74 aNavA[this.index].style.backgroundColor = 'red';
75 }
76 }
77
78 var oImg =document.getElementById('Img_xunhuan_body');
79 var aImg =oImg.getElementsByTagName('img');
80 var timer = null;
81 var iSpeed = -3;
82 oImg.innerHTML += oImg.innerHTML;
83 oImg.style.width = aImg[0].offsetWidth * aImg.length +'px';
84 function starMove () {
85 if (oImg.offsetLeft < -(oImg.offsetWidth/2)){
86 oImg.style.left =0;
87 }
88 oImg.style.left = oImg.offsetLeft + iSpeed + 'px';
89 }
90 timer= setInterval(starMove,30);
91 oImg.onmouseover = function () {
92 clearInterval(timer);
93 };
94 oImg.onmouseout = function (){
95 timer = setInterval(starMove,30)
96 }
97 }
98 </script>
99 </head>
100 <body>
101 <div id="title" class="title">
102 <img src="images/logo.png">
103 <div id="search" class="search">
104 <img src="images/图标%20(662).gif"><a href="javascript:" style="font-size: 12px;"> 中文</a>
105 <img src="images/图标%20(662).gif"><a href="javascript:" style="font-size: 12px;"> English</a><br>
106 <input id="int1" type="text" onblur="onBlur()" onfocus="onFocus()" value="请输入搜索内容">
107 <a href="javascript:"><img src="images/图标%20(270).gif"></a>
108 <span class="search_span"><a href="javascript:">设为首页</a><span> /</span>
109 <a href="javascript:">加入收藏</a></span>
110 </div>
111 </div>
112 <div id="nav" class="nav">
113 <ul id="nav_ul" class="nav_ul">
114 <li><a href="##" style="background-color: red">首 页</a></li>
115 <li><a href="##">关于百川</a></li>
116 <li><a href="##">新闻资讯</a></li>
117 <li><a href="##">产品中心</a></li>
118 <li><a href="##">招商合作</a></li>
119 <li><a href="##">人才招聘</a></li>
120 <li><a href="##">在线留言</a></li>
121 <li><a href="##">联系我们</a></li>
122 </ul>
123 </div>
124 <div id="banner">
125 <div id="banner_bg"></div><!--标题背景-->
126 <div id="banner_info">此处是第三个图片</div><!--标题-->
127 <ul>
128 <li class="on">1</li>
129 <li>2</li>
130 <li>3</li>
131 <li>4</li>
132 </ul>
133 <div id="banner_list" class="banner_list">
134 <a href="##"><img src="images/back.png" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
135 <a href="##"><img src="images/back2.png" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
136 <a href="##"><img src="images/back3.png" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
137 </div>
138 </div>
139 <div id="Img-xunhuan" class="Img-xunhuan">
140 <div id="Img_xunhuan_top" class="Img_xunhuan_top">
141 <img src="images/图标%20(338).gif" >
142 <span>产品展示</span>
143 <a href="##"><img src="images/图标%20(455).gif" style="float: right"></a>
144 </div>
145 <div id="Img_xunhuan_body" class="Img_xunhuan_body">
146 <img src="images/1.jpg">
147 <img src="images/2.jpg">
148 <img src="images/3.jpg">
149 <img src="images/4.jpg">
150 <img src="images/5.jpg">
151 <img src="images/6.jpg">
152 <img src="images/7.jpg">
153 <img src="images/8.jpg">
154 </div>
155 </div>
156 <div id="div1" class="div1">
157 <p>科技带来美好生活，百川竭诚为您服务<span><img src="images/图标%20(175).gif"></span></p>
158 </div>
159 <div id="div2" class="div2">
160 <div id="left" class="left">
161 <img src="images/图标%20(541).gif"><span>关于我们</span><img src="images/图标%20(455).gif" style="float: right; padding-top:10px;">
162 <br>
163 <br>
164 <p> 西安百川生物科技有限责任公司（原泰宇提取二厂），始建于2002年，是一家致力于动物提取物、植物提取物及天然活性有效成份的研发、生产的综合型
165 企业。其中，健康高效的动物催便机理、有机再生、无痛切割列入行业标杆典范，引领行业迈步向前。07年公司获得省先进单位奖。
166 同年，我司国内首创搭建国内天然成分发酵一体化设备平台，至今已经拥有成熟的发酵技术以及完善的化学合成车间。</p>
167
168 </div>
169 <div id="right" class="right">
170 <img src="images/图标%20(541).gif"><span>新闻动态</span><img src="images/图标%20(455).gif" style="float: right; padding-top:10px;">
171 <br>
172 <br>
173 <ul>
174 <li><a href="##">我刚中药通过...</a><span>2015/12/20</span> </li>
175 <li><a href="##">我公司最近完成...</a><span>2015/12/20</span> </li>
176 <li><a href="##">那是在六年前...</a><span>2015/12/20</span> </li>
177 <li><a href="##">西安百川公司...</a><span>2015/12/20</span> </li>
178 <li><a href="##">我刚才有做了...</a><span>2015/12/20</span> </li>
179 </ul>
180 </div>
181 </div>
182 <div id="div3" class="div3">
183 <br>
184 <p>版权所有张泽轩</p>
185 <p>此网页为了答谢我的初中同学</p>
186 <p>联系电话：45661561,216516516，,311651651,13513513505,31351303551</p>
187 <p>QQ号:6515116,32165160,316510652</p>
188 <br>
189 </div>
190 </body>
191 </html>
本次学习心得：
vertical-align:middle;配置元素垂直对齐方式，比如给图片和input添加对齐时，只有给图片加vertical-align属
性即可；
onblur :当鼠标失去焦点时发生的事；
onfocus：当鼠标获得焦点时发生的事；
defaultValue：设置或返回文本框的初始内容；
伪类只能作用于a标签；
博客中所涉及到的图片都有版权，请谨慎使用
