一百网页制作之1

简介: 1 DOCTYPE html> 2 3 4 5 *{padding: 0;margin: 0;} 6 li {list-style-type: none;} 7 a{text-decor...
  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>&nbsp;&nbsp;
111                 <a href="##" >上一页</a>&nbsp;&nbsp;
112                 <a href="##" >下一页</a>&nbsp;&nbsp;
113                 <a href="##" >末页</a>&nbsp;&nbsp;
114                 共【1】页&nbsp;&nbsp;现在是第【1】页&nbsp;&nbsp;转到第
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 &copy; 2012 All Rights Reserved.12级通信3班张泽轩 版权所有 技术支持:<a href="##">泽轩</a><br />
125         地址:西安市临潼区西安工程大学 电话:029-******** 邮编:716500 </p>
126 </div>
127 </body>
128 </html>
View Code

本次制作总结:

 

  • nobr:强制不换行标签
  • area:带有可点击区域的图像映射,area 元素总是嵌套在 map 标签中,map标签里用usemap属性调用area,area标签的属性coorde是用于定位鼠标点击的位置,四个数字表示矩形,三个数字是指圆形区域
  • overflow:hiddle:在父级div中定义溢出隐藏属性,子div元素的margin属性才能作用到子div元素

 

目录
相关文章
|
4月前
|
前端开发
|
6月前
|
Web App开发 前端开发 JavaScript
学习Web标准
【5月更文挑战第1天】学习Web标准
49 6
|
移动开发 前端开发 JavaScript
零基础10天学会网页制作之前言
网页制作,顾名思义,就是在互联网上开发网页,对于互联网中网页,我们肯定司空见惯,你所浏览的任何网站,比如,百度,头条,淘宝,京东,大学网站,公司官网等等,都是网页,也就是说,你在Pc端浏览器,所看到的,都是一个网页,与我们的生活息息相关。
|
前端开发
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
411 0
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
|
移动开发 前端开发
动漫网站-前端网页技术精美网站源码HTML+CSS+JS
动漫网站-前端网页技术精美网站源码HTML+CSS+JS
256 0
动漫网站-前端网页技术精美网站源码HTML+CSS+JS
|
移动开发 数据库
初学习—网页制作
通过云服务器进行动态网页的制作
165 0
|
XML JavaScript 前端开发
web标准 | 学习笔记
快速学习web标准
160 0
web标准 | 学习笔记
|
XML 前端开发 数据格式
那些酷炫的网页你也可以做到——第七篇(初识“CSS“)
那些酷炫的网页你也可以做到——第七篇(初识“CSS“)
162 0
那些酷炫的网页你也可以做到——第七篇(初识“CSS“)
|
Web App开发 前端开发 JavaScript
【青训营】- Web标准与前端开发
【青训营】- Web标准与前端开发
202 0
【青训营】- Web标准与前端开发