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元素
博客中所涉及到的图片都有版权，请谨慎使用
