一百网页制作之1
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <style> 5 *{padding: 0;margin: 0;} 6 li {list-style-type: none;} 7 a{text-decoration:none; } 8 body { min-width: 1002px;width: 1002px; height: 100%;margin: 0 auto;background: #8dd8ef; } 9 .div1 {width: 1002px; } 10 .div2 {width: 1002px; border-top: 1px solid #00a6da; } 11 .div2 ul li {float: left;} 12 .div3 {width: 1002px; background: white;height: 100%;position: relative;overflow: hidden;} 13 .div3_left { width: 209px; height: 100%; overflow: hidden; margin:15px 20px 0 15px;float: left; font-size: 14px;} 14 .div3_ul {border-left:1px solid #a1e3fd;border-right: 1px solid #a1e3fd; padding-left:20px; } 15 .div3_img { vertical-align:middle;} 16 .div3_img2{position: relative; top:-7px;} 17 .div3_right {width: 730px; height: 100%; border: 1px solid #a1e3fd ;margin: 15px 20px 15px 250px;} 18 .div3_right_div {height: 25px;background-image: url("images/backimg.png");width: 710px; margin: 5px 5px;border: 1px solid #a1e3fd } 19 .div3_right_div img {margin: 5px 10px} 20 .div3_right_span {font-size: 12px; position: relative; top: -8px;} 21 .div3_right_span2 {float: right;font-size: 12px; position: relative;top: 5px;right: 3px} 22 .div_right_div2 {width: 730px;height: 100%; border-bottom: solid 1px #a1e3fd;} 23 .div_right_div2_ul {width: 690px; height:100%; margin: 20px auto;} 24 .div_right_div2_ul li {line-height: 30px;border-bottom: 1px #a1e3fd dashed; font-size: 14px; list-style-type: inherit;} 25 .div_right_div2_ul span {float: right;} 26 .div_right_div3 {font-size: 14px} 27 .bottom {width: 1002px;height: 100%; background: #f0f0f0; font-size: 12px; text-align: center; overflow: hidden;} 28 .bottom p {margin: 20px auto;} 29 </style> 30 <meta charset="UTF-8"> 31 <title></title> 32 <script type="text/javascript"> 33 34 </script> 35 </head> 36 <body> 37 <div id="div1" class="div1"> 38 <img src="images/index_01.jpg" width="1002" height="177" style="display: block"> 39 </div> 40 <div id="div2" class="div2"> 41 <!-- <ul> 42 <li><a href="##">首页</a></li> 43 <li><a href="##">机构设置</a></li> 44 <li><a href="##">项目申报与管理</a></li> 45 <li><a href="##">科技成果</a></li> 46 <li><a href="##">科研基地</a></li> 47 <li><a href="##">规章制度</a></li> 48 <li><a href="##">学术会议及交流</a></li> 49 <li><a href="##">学报编辑处</a></li> 50 <li><a href="##">下载中心</a></li> 51 <li><a href="##">意见反馈</a></li> 52 </ul>--> 53 <img src="images/index_02.jpg" width="1002" height="39" border=0 usemap="#pap" style="display: block"/> 54 <map name="pap" id="pap"> 55 <area shape="rect" coords="33,0,78,39" href="##" id="area1" onFocus="styleB(this.id)"/> 56 <area shape="rect" coords="98,0,162,39" href="##" onFocus="this.blur()"/> 57 <area shape="rect" coords="188,1,299,40" href="##" onFocus="this.blur()"/> 58 <area shape="rect" coords="320,0,384,39" href="##" onFocus="this.blur()"/> 59 <area shape="rect" coords="414,0,478,39" href="##" onFocus="this.blur()"/> 60 <area shape="rect" coords="500,0,564,39" href="##" onFocus="this.blur()"/> 61 <area shape="rect" coords="589,2,697,37" href="##" /> 62 <area shape="rect" coords="718,2,798,37" href="##" /> 63 <area shape="rect" coords="823,2,891,37" href="##" /> 64 <area shape="rect" coords="911,2,978,37" href="##" /> 65 </map> 66 </div> 67 <div id="div3" class="div3"> 68 <div id="div3_left" class="div3_left"> 69 <img src="images/xigongda-nei4_03.jpg" style="display: block"> 70 <ul class="div3_ul"> 71 <li><a href="##"> 72 <p><img class="div3_img" src="images/xiaojiantou-left.jpg"> 科研基地1</p> 73 <img class="div3_img2" src="images/xigongda1-nei_05.jpg" > 74 </a> 75 </li> 76 <li><a href="##"> 77 <p><img class="div3_img" src="images/xiaojiantou-left.jpg"> 科研基地2</p> 78 <img class="div3_img2" src="images/xigongda1-nei_05.jpg" > 79 </a> 80 </li> 81 <li><a href="##"> 82 <p><img class="div3_img" src="images/xiaojiantou-left.jpg"> 科研基地3</p> 83 <img class="div3_img2" src="images/xigongda1-nei_05.jpg" > 84 </a> 85 </li> 86 </ul> 87 <img src="images/xigongda-nei4_15.jpg"> 88 </div> 89 <div id="div3_right" class="div3_right"> 90 <div id="div3_right_div" class="div3_right_div"> 91 <img src="images/biao2.jpg" width="6" height="15"/> 92 <span class="div3_right_span"> 93 <strong>科研基地</strong> 94 </span> 95 <span class="div3_right_span2">你现在所在的位置: 96 <a href="##">首页</a> > 科研基地 97 </span> 98 </div> 99 <div id="div_right_div2" class="div_right_div2"> 100 <ul class="div_right_div2_ul"> 101 <li>陕西省产业用纺织品工程技术研究中心<span>2011-06-14</span></li> 102 <li>陕西省产业用纺织品工程技术研究中心<span>2011-06-14</span></li> 103 <li>陕西省产业用纺织品工程技术研究中心<span>2011-06-14</span></li> 104 <li>陕西省产业用纺织品工程技术研究中心<span>2011-06-14</span></li> 105 <li>陕西省产业用纺织品工程技术研究中心<span>2011-06-14</span></li> 106 <li>陕西省产业用纺织品工程技术研究中心<span>2011-06-14</span></li> 107 </ul> 108 <br> 109 <div align="center" class="div_right_div3"> 110 <a href="##" >首页</a> 111 <a href="##" >上一页</a> 112 <a href="##" >下一页</a> 113 <a href="##" >末页</a> 114 共【1】页 现在是第【1】页 转到第 115 <select name="page" onchange="javascript:location=this.options[this.selectedIndex].value"> 116 <option value="##" selected>1</option> 117 </select> 118 页 119 </div> 120 </div> 121 </div> 122 </div> 123 <div id="bottom" class="bottom"> 124 <p>CopyRight © 2012 All Rights Reserved.12级通信3班张泽轩 版权所有 技术支持：<a href="##">泽轩</a><br /> 125 地址：西安市临潼区西安工程大学 电话：029-******** 邮编：716500 </p> 126 </div> 127 </body> 128 </html>
本次制作总结:
- nobr:强制不换行标签
- area:带有可点击区域的图像映射,area 元素总是嵌套在 map 标签中,map标签里用usemap属性调用area,area标签的属性coorde是用于定位鼠标点击的位置，四个数字表示矩形，三个数字是指圆形区域
- overflow:hiddle:在父级div中定义溢出隐藏属性，子div元素的margin属性才能作用到子div元素