一百网页制作之5
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标签；
博客中所涉及到的图片都有版权，请谨慎使用
