回忆第一次网页制作

第一次涉及网页制作，是大二上学期选修的《网页设计技术》。期末设计的时候，从刚开始的无从下手，到渐入佳境，最后完成的时候，看着自己完成的第一个有效果的作品，很是满意，虽然当时的作品在现在看来满是青涩和稚嫩，但想起那时努力的态度和想要尽善尽美的心情还是可以令自己热血澎湃。

当时还不熟悉“外部样式表”的用法，所以几乎用的都是"内部样式表"。以至于css样式占了整个文本的4/5。

查看笔记的时候，发现了一种现在很少用到的“嵌入外部样式表”用法：

<style type="text/css">
@import url("xxx");
</style> //在<style>标签内使用@import关键字导入外部样式文件。xxxxxxxxx.css

css的样式很单一，下面的样式是重复类型最多的一款。本来以为样式都是差不多的，所以代码都是直接复制的，仔细看却发现，采用absolute绝对定位的每一个div的top、left、width、height的数值都是不同的。。。当时的我真是天真而且不嫌麻烦。

#apDiv14 {
position: absolute;
left: 834px;
top: 873px;
width: 487px;
height: 742px;
z-index: 11; //而且更有特点的是，几乎每一个div都有z-index 属性来设置元素的堆叠顺序。
}

网页内容的设计也很简单，top、container、foot三大框，里面铺满了div，几乎每个div都是用来放图片或者超链接的。

而且为了使网页看起来不平凡，还自学了当时以为是插件的jquery。

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.imageLens.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$("#q1").imageLens({ lensSize: 200 });
$("#q2").imageLens({ lensSize: 200 });
$("#q3").imageLens({ lensSize: 200 });
$("#q4").imageLens({ lensSize: 200 });
});
</script>//图片放大镜功能

运用到插件SpryEffects.js来做图片的特效：

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0;i<(args.length-2);i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }//图片显示与隐藏
}
function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter)
{
Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, toggle: toggle, referHeight:referHeight, growCenter: growFromCenter});图片缩小
}
</script>

当鼠标在图片上时显示，鼠标移开时隐藏：

<div id="apDiv17"οnmοuseοver="MM_showHideLayers('a3','','show')" 
οnmοuseοut="MM_showHideLayers('a3','','hide')">
<img src="images/T2Z2iJXaBcX.jpg" name="q3" width="180" height="239" id="q3" />
</div>

鼠标经过时缩小：

<div id="apDiv25"><a href="cnxinshang.html">
<img src="images/llll.jpg" name="l3" width="70" height="70" id="l3"
 οnmοuseοver="MM_effectGrowShrink('l3', 800, '50%', '100%', false, false, true)" /></a>
</div>