图片做成几何形状 〖学习VML图片填充及画图〗
<DIV style="position:relative; top:30px; left:30px; width:550px; height:380px; overflow: hidden"><?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />
<v:Roundrect style="position: absolute; top: 10px; left: 10px; width:500px; height:300px;" stroked="t" strokecolor="#666666" filled="t" fillcolor="#0000cc" strokeweight="6px" arcsize="0.10">
<v:fill src="http://www.photophoto.cn/m64/024/072/0240720015.jpg" type="frame" opacity=".9"/>
</v:RoundRect>
<v:Roundrect style="position: absolute; top: 39px; left: 40px; width:440px; height:240px;" stroked="t" strokecolor="#999999" filled="t" fillcolor="#0000FF" strokeweight="1px" arcsize="0.10">
<v:fill src="http://www.photophoto.cn/m1/006/011/0060110073.jpg" type="frame" opacity="1.0"/>
<v:shadow on="T" type="single" color="#333333" offset="3px,3px"/>
</v:RoundRect>
<v:shape style="position: absolute; top: 78px; left: 286px; width:160px; height:160px;" stroked="t" strokecolor="#66ffff" filled="t" fillcolor="#000000" strokeweight="2px" coordsize="100 100">
<v:path v="m 10 26 l 12 8,22 4,40 2,80 10,92 30,86 60,66 90,56 92,58 100,14 100,28 92,24 92,12 93,8 90,12 80,8 78,10 76,8 74,9 72,11 68,2 65,1 63,12 46,13 43,7 38,13 37,18 23 xe"/>
<v:fill src="http://www.photophoto.cn/m64/024/068/0240680110.jpg" type="frame" opacity=".9"/>
<v:shadow on="T" type="single" color="#000000" offset="3px,3px"/>
</v:shape>
</DIV>
图片做几何形状,实际上就是将图片放到各种形状的容器里.
<BR>
容器分两种:
<BR>
一种是VML现成的,有矩形,圆角矩形,圆(椭圆)等,如上图那个圆角矩形风景。
<BR>
另一种是自己用VML画出来的图形,如上图那个我画的人头像.
<BR><BR>
这里讲的是最简单而实用的几种.
<BR><BR>
[ 本帖最后由 gaoss33 于 2009-10-27 22:57 编辑 ] <BR><BR>
先学习圆角矩形的制作
<DIV style=\"position:relative; top:0px; left:0px; width:500px; height:200px; overflow: hidden\">
<?import namespace=v urn=\"urn:schemas-microsoft-com:vml\" implementation=\"#default#VML\" declareNamespace />
<v:Roundrect style=\"position: absolute; top: 50px; left: 100px; width:100px; height:100px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\"/>
</v:RoundRect>
</DIV>
代码:
<BR><BR>
<P><DIV style=\"position:relative; top:0px; left:0px; width:500px; height:200px; overflow: hidden\"></P>
<P><?import namespace=v urn=\"urn:schemas-microsoft-com:vml\" implementation=\"#default#VML\" declareNamespace /></P>
<BR>
<v:Roundrect style=\"position: absolute; top: 50px; left: 100px; width:100px; height:100px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\">
<BR>
</v:RoundRect>
<BR><BR>
<P></DIV></P>
<BR><BR><BR>
代码分析:
<BR><BR>
<DIV style=\"position:relative; top:0px; left: 0px; width:660px; height:120px; overflow: hidden\">
<BR>
............
<BR>
<P>
</DIV>
</P><BR>
这是定位和定显示大小代码.很重要.
<BR>
1.因为很多VML代码里都是用CSS绝对定位的,在论坛里会满天飞,所以就必须用这个CSS相对定位代码来固定显示范围(width:500px; height:200px;)
<BR>
2.用该代码做成效果后,靠top: 0px;(离顶距离) left: 0px;离左边距离)来调节放到帖子里的位置.这个距离数值还可以用负数.
<BR><BR>
<?import namespace=v urn=\"urn:schemas-microsoft-com:vml\" implementation=\"#default#VML\" declareNamespace />
</P><BR>
这是指定空间在使用VML代码,没有他许多VML指令不能实现.该代码不用更改的,原样放上就行了.
<BR>
永远把<DIV.....>和他放在最上面,在他们下面就可以编写VML代码了.别忘了收尾</DIV>
<BR><BR> <BR><BR>
VML代码分析:
<BR><BR>
<v:Roundrect style=\"position: absolute; top: 50px; left: 100px; width:100px; height:100px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\">
<BR>
</v:RoundRect>
<BR><BR>
RoundRect
<BR>
是圆角矩形的标签.
<BR>
style=\"position: absolute; top: 50px; left: 100px; width:100px; height:100px;\"
<BR>
矩形的定位和大小.
<BR>
stroked=\"t\"
<BR>
有无边框,t有,f无.
<BR>
strokecolor
<BR>
描述边框的颜色 ＊默认黑色(black)
<BR>
filled=\"t\"
<BR>
有无背景,t有,f无.
<BR>
fillcolor
<BR>
背景颜色(填充色),默认白色(white)
<BR>
strokeweight
<BR>
边框的厚度
<BR>
arcsize=\"0.15\"
<BR>
四角的弧度,值0-0.5,0.5最大,默认值0.05.
<BR>
<BR>
＊默认就是指不写这个属性时的显示.
<BR><BR> <BR><BR>
将图片填进这个框内:
<DIV style=\"position:relative; top:0px; left:0px; width:500px; height:200px; overflow: hidden\">
<?import namespace=v urn=\"urn:schemas-microsoft-com:vml\" implementation=\"#default#VML\" declareNamespace />
<v:Roundrect style=\"position: absolute; top: 60px; left: 100px; width:100px; height:100px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\">
<v:fill src=\"http://up2009.topzj.com/data/bbs/10/96/1096/a/01_2Yxn1zsWqird.gif\" type=\"frame\" opacity=\"1\"/>
</v:RoundRect>
</DIV>
代码:
<BR><BR>
<P><DIV style=\"position:relative; top:0px; left:0px; width:500px; height:200px; overflow: hidden\"></P>
<P><?import namespace=v urn=\"urn:schemas-microsoft-com:vml\" implementation=\"#default#VML\" declareNamespace /></P>
<BR>
<v:Roundrect style=\"position: absolute; top: 50px; left: 100px; width:100px; height:100px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\">
<BR>
<v:fill src=\"http://up1.googletounion.com/data/bbs/10/96/1096/a/forumid_27181/m2m3_tjn8PGEyP2W3.jpg\" type=\"frame\" opacity=\"1\"/>
<BR>
</v:RoundRect>
<BR><BR>
<P></DIV></P>
<BR><BR><BR>
红色代码为填充代码.
<BR><BR>
fill
<BR>
填充标签.
<BR>
type=\"frame\"
<BR>
填充模式.
<BR>
opacity
<BR>
设置图片的透明度,值0.0-1.0,0全透明,1全不透明.
<BR><BR>
几点重要说明:
<BR>
● 图片不设尺寸的,是按主标签设定的宽和高来显示.
<BR>
所以必须考虑在设定容器的宽高比例时,要和图片的原始宽高比例基本一致.不然图像会变形.
<BR>
● 这个图在这里实际上就是背景图,可以放字画等上去,
<BR>
具体操作放在<v:Roundrect .....>和</v:RoundRect>中间,紧挨</v:RoundRect>上面.
<BR><BR>
将主标签RoundRect 换成 oval (圆)的效果:
<DIV style=\"position:relative; top:0px; left:0px; width:500px; height:200px; overflow: hidden\">
<?import namespace=v urn=\"urn:schemas-microsoft-com:vml\" implementation=\"#default#VML\" declareNamespace />
<v:oval style=\"position: absolute; top: 50px; left: 100px; width:100px; height:100px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\">
<v:fill src=\"http://up1.googletounion.com/data/bbs/10/96/1096/a/forumid_27181/m2m3_tjn8PGEyP2W3.jpg\" type=\"frame\" opacity=\"1\"/>
</v:oval>
</DIV>
其他数据全没动.不要忘记收尾也要换.
<BR>
当宽高不同的时候就是椭圆.
<BR>
还有矩形标签: Rect
<BR><BR>
去掉边框(stroked=\"f\")的效果:
<DIV style=\"position:relative; top:0px; left:0px; width:500px; height:200px; overflow: hidden\">
<?import namespace=v urn=\"urn:schemas-microsoft-com:vml\" implementation=\"#default#VML\" declareNamespace />
<v:Roundrect style=\"position: absolute; top: 60px; left: 100px; width:100px; height:100px;\" stroked=\"f\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\">
<v:fill src=\"http://up1.googletounion.com/data/bbs/10/96/1096/a/forumid_27181/m2m3_tjn8PGEyP2W3.jpg\" type=\"frame\" opacity=\"1\"/>
</v:RoundRect>
<v:oval style=\"position: absolute; top: 62px; left: 280px; width:100px; height:100px;\" stroked=\"f\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"6px\" arcsize=\"0.15\">
<v:fill src=\"http://up1.googletounion.com/data/bbs/10/96/1096/a/forumid_27181/m2m3_tjn8PGEyP2W3.jpg\" type=\"frame\" opacity=\"1\"/>
</v:oval>
</DIV>
<BR><BR>
[ 本帖最后由 gaoss33 于 2009-10-27 20:35 编辑 ] <BR><BR>
这是我画的一个图形:
<DIV style=\"position:relative; top:20px; left:0px; width:560px; height:210px; overflow: hidden\">
<?import namespace = v urn = \"urn:schemas-microsoft-com:vml\" implementation = \"#default#VML\" declareNamespace />
<v:shape style=\"position: absolute; top: 10px; left: 80px; width:230px; height:160px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"2px\" coordsize=\"100 100\">
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 xe\"/>
</v:shape>
</DIV>
代码:
<BR><BR>
<DIV style=\"position:relative; top:20px; left:0px; width:560px; height:210px; overflow: hidden\"> <br>
<?import namespace = v urn = \"urn:schemas-microsoft-com:vml\" implementation = \"#default#VML\" declareNamespace /> <br><br>
<v:shape style=\"position: absolute; top: 0px; left: 80px; width:230px; height:160px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"2px\" coordsize=\"100 100\"><br>
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 xe\"/><br>
</v:shape><br><br>
</DIV>
<BR><BR>
解释几个新的代码:
<BR>
shape
<BR>
多边形标签
<BR>
coordsize
坐标的结束点,在右下角.
<BR>
左上角为0,0 (coordorigin=\"0 0\"没写,默认).
<BR>
coordsize=\"100 100\" 可理解为向右,向下各分成100等份的坐标.
<BR>
path
<BR>
描述多边形的形状.就是自己用坐标点画的多边形.
<BR><BR>
将图片放进去:
<DIV style=\"position:relative; top:20px; left:0px; width:560px; height:210px; overflow: hidden\">
<?import namespace = v urn = \"urn:schemas-microsoft-com:vml\" implementation = \"#default#VML\" declareNamespace />
<v:shape style=\"position: absolute; top: 10px; left: 80px; width:230px; height:160px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"2px\" coordsize=\"100 100\">
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 xe\"/>
<v:fill src=\"http://bbs.e-yu.cn/attachments/month_0910/0910262234e397b0b2d6c645ff.gif\" type=\"frame\" opacity=\"1\"/>
</v:shape>
</DIV>
代码:
<BR><BR>
<DIV style=\"position:relative; top:20px; left:0px; width:560px; height:210px; overflow: hidden\"> <br>
<?import namespace = v urn = \"urn:schemas-microsoft-com:vml\" implementation = \"#default#VML\" declareNamespace /> <br><br>
<v:shape style=\"position: absolute; top: 0px; left: 80px; width:230px; height:160px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"2px\" coordsize=\"100 100\"><br>
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 xe\"/><br>
<v:fill src=\"http://bbs.e-yu.cn/attachments/month_0910/0910262234e397b0b2d6c645ff.gif\" type=\"frame\" opacity=\"1\"/><BR>
</v:shape><br><br>
</DIV>
<BR><BR>去掉边框效果(stroked=\"f\"):
<DIV style=\"position:relative; top:20px; left:0px; width:560px; height:210px; overflow: hidden\">
<?import namespace = v urn = \"urn:schemas-microsoft-com:vml\" implementation = \"#default#VML\" declareNamespace />
<v:shape style=\"position: absolute; top: 10px; left: 80px; width:230px; height:160px;\" stroked=\"f\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"2px\" coordsize=\"100 100\">
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 xe\"/>
<v:fill src=\"http://image.photophoto.cn/nm-1/001/004/0010040170.jpg\" type=\"frame\" opacity=\"1\"/>
</v:shape>
</DIV> <br><br>
这个多边形其实就是通过坐标点画出的图形:
<BR>
v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 xe\"
<BR>
mxe 是折线的格式，每两个数字组成一个坐标点(X Y)，数字间空一格,每组间用逗号隔开。 l 前面的20 40表示起始点坐标，以下按顺时针方向将图形走向的坐标点依此写出。
<BR><BR>
说到现在还不知道怎么画吧,
<BR>
下面我用VML画一张示意图,对照看这些点就很清楚了:
<BR><BR>
<DIV style=\"position:relative; top:0px; left:10px; width:700px; height:560px; overflow: hidden\">
<DIV style=\"position:relative; top:0px; left:0px; width:610px; height:530px;overflow: hidden; background-color:#000000;border:9px #006699 double;\">
</DIV>
<?import namespace = v urn = \"urn:schemas-microsoft-com:vml\" implementation = \"#default#VML\" declareNamespace />
<v:rect style=\"position: absolute; top: 90px; left: 110px; width:300px; height:300px;\" filled=\"t\" fillcolor=\"#3A3733\"/>
<v:line style=\"position: absolute; top: 90px; left: 30px\" strokecolor=\"#00FF00\" strokeweight=\"2px\" to=\"500 .1\">
<v:stroke EndArrow=\"Block\"/></v:line>
<v:line style=\"position: absolute; top: 120px; left: 110px\" strokecolor=\"#00FF00\" to=\"368 .1\"/>
<v:line style=\"position: absolute; top: 150px; left: 110px\" strokecolor=\"#00FF00\" to=\"350 .1\"/>
<v:line style=\"position: absolute; top: 180px; left: 110px\" strokecolor=\"#00FF00\" to=\"339 .1\"/>
<v:line style=\"position: absolute; top: 210px; left: 110px\" strokecolor=\"#00FF00\" to=\"340 .1\"/>
<v:line style=\"position: absolute; top: 240px; left: 110px\" strokecolor=\"#00FF00\" to=\"365 .1\"/>
<v:line style=\"position: absolute; top: 270px; left: 110px\" strokecolor=\"#00FF00\" to=\"345 .1\"/>
<v:line style=\"position: absolute; top: 300px; left: 110px\" strokecolor=\"#00FF00\" to=\"353 .1\"/>
<v:line style=\"position: absolute; top: 330px; left: 110px\" strokecolor=\"#00FF00\" to=\"336 .1\"/>
<v:line style=\"position: absolute; top: 360px; left: 110px\" strokecolor=\"#00FF00\" to=\"346 .1\"/>
<v:line style=\"position: absolute; top: 390px; left: 110px\" strokecolor=\"#00FF00\" to=\"379 .1\"/>
<v:line style=\"position: absolute; top: 40px; left: 110px\" strokecolor=\"#00FF00\" strokeweight=\"2px\" to=\".1 420\">
<v:stroke EndArrow=\"Block\"/></v:line>
<v:line style=\"position: absolute; top: 90px; left: 140px\" strokecolor=\"#00FF00\" to=\".1 340\"/>
<v:line style=\"position: absolute; top: 90px; left: 170px\" strokecolor=\"#00FF00\" to=\".1 315\"/>
<v:line style=\"position: absolute; top: 90px; left: 200px\" strokecolor=\"#00FF00\" to=\".1 308\"/>
<v:line style=\"position: absolute; top: 90px; left: 230px\" strokecolor=\"#00FF00\" to=\".1 308\"/>
<v:line style=\"position: absolute; top: 90px; left: 260px\" strokecolor=\"#00FF00\" to=\".1 320\"/>
<v:line style=\"position: absolute; top: 90px; left: 290px\" strokecolor=\"#00FF00\" to=\".1 326\"/>
<v:line style=\"position: absolute; top: 90px; left: 320px\" strokecolor=\"#00FF00\" to=\".1 306\"/>
<v:line style=\"position: absolute; top: 90px; left: 350px\" strokecolor=\"#00FF00\" to=\".1 313\"/>
<v:line style=\"position: absolute; top: 90px; left: 380px\" strokecolor=\"#00FF00\" to=\".1 307\"/>
<v:line style=\"position: absolute; top: 90px; left: 410px\" strokecolor=\"#00FF00\" to=\".1 319\"/>
<v:line style=\"position: absolute; top: 90px; left: 440px\" strokecolor=\"#00FF00\" to=\".1 156\"/>
<v:line style=\"position: absolute; top: 600px; left: 440px\" strokecolor=\"#00FF00\" to=\".1 76\"/>
<v:line style=\"position: absolute; top: 90px; left: 470px\" strokecolor=\"#00FF00\" to=\".1 16\"/>
<v:line style=\"position: absolute; top: 350px; left: 470px\" strokecolor=\"#00FF00\" to=\".1 53\"/>
<v:line style=\"position: absolute; top: 89px; left: 109px\" strokecolor=\"#ffffff\" to=\".1 .1\">
<v:stroke EndArrow=\"Oval\"/></v:line>
<v:line style=\"position: absolute; top: 60px; left: 145px\" strokecolor=\"#cccccc\" to=\"-29 25\">
<v:stroke EndArrow=\"Classic\"/></v:line>
<v:line style=\"position: absolute; top: 389px; left: 409px\" strokecolor=\"#ffffff\" to=\".1 .1\">
<v:stroke EndArrow=\"Oval\"/></v:line>
<v:line style=\"position: absolute; top: 323px; left: 463px\" strokecolor=\"#cccccc\" to=\"-46 60\">
<v:stroke EndArrow=\"Classic\"/></v:line>
<v:shape style=\"position: absolute; top: 90px; left: 110px; width:300px; height:300px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"f\" fillcolor=\"#6666FF\" strokeweight=\"3px\" coordsize=\"100 100\">
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 xe\"/>
</v:shape>
<div style=\"position: absolute; top: 203px; left:113px\">
<P style=\"color:#ffffff; FONT-SIZE: 13px;\">
<B> 起始点 ★
</div>
<div style=\"position: absolute; top: 470px; left:66px;\">
v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 xe\"
<br>
将代码从起始点开始顺时针对照一下坐标点,你会理解得更清楚些.
</div>
<div style=\"position: absolute; top: 296px; left:419px\">
coordsize=\"100 100\"
</div>
<div style=\"position: absolute; top: 40px; left:149px\">
coordorigin=\"0 0\"
</div>
</DIV>
<BR><BR><BR>
图形出来后,填进图片,图片就变成你设计的形状了,还可以加上阴影,立体.
<BR>
要注意的是,实际显示尺寸是按主标签里设定的宽高 (width:230px; height:160px;) 显示的.所以这个形状还会随宽高的变化而变化.方形可以变矩形，圆形可以变椭圆形.
<BR><BR>
懂了这些就可以自己动手了.找一张坐标纸(文具店有卖的),画图,坐标点写进代码......
<BR>
coordsize=\"100 100\"可以将他定得更细点,如coordsize=\"1000 1000\",这样画出的图就会更细腻漂亮了.
不过那个坐标点数字就长得吓人了,但对电脑而言长短还是一样的.
<BR><BR>
[ 本帖最后由 gaoss33 于 2009-10-27 20:36 编辑 ] <BR><BR>
用上面图形做一张效果:
<BR><BR>
<DIV style=\"position:relative; top:0px; left:0px; width:580px; height:500px; overflow: hidden\">
<?import namespace = v urn = \"urn:schemas-microsoft-com:vml\" implementation = \"#default#VML\" declareNamespace />
<v:shape style=\"position: absolute; top: -63px; left: -73px; width:560px; height:560px;\" stroked=\"t\" strokecolor=\"#cc9966\" filled=\"t\" fillcolor=\"#cc0000\" strokeweight=\"6px\" coordsize=\"100 100\">
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 x e\"/>
<v:fill src=\"http://up2009.topzj.com/data/bbs/10/96/1096/a/forumid_27181/060_mxjXok5u7zVW.jpg\" type=\"frame\" opacity=\"1\"/>
</v:shape>
<v:shape style=\"position: absolute; top: -8px; left: -18px; width:460px; height:460px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#0000FF\" strokeweight=\"8px\" coordsize=\"100 100\">
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 x e\"/>
<v:fill src=\"http://up2009.topzj.com/data/bbs/10/96/1096/a/forumid_27181/k2_NP7i0KCgbtgS.gif\" type=\"frame\" opacity=\".3\"/>
</v:shape>
<v:shape style=\"position: absolute; top: 30px; left: 20px; width:390px; height:390px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"t\" fillcolor=\"#0000FF\" strokeweight=\"5px\" coordsize=\"100 100\">
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 x e\"/>
<v:fill src=\"http://up2009.topzj.com/data/bbs/10/96/1096/a/VVV_kfvJqcav2Y2s.gif\" type=\"frame\" opacity=\"1\"/>
</v:shape>
<v:shape style=\"position: absolute; top: 37px; left: 27px; width:377px; height:377px;\" stroked=\"t\" strokecolor=\"#FF9999\" filled=\"f\" fillcolor=\"#0000FF\" strokeweight=\"2px\" coordsize=\"100 100\">
<v:path v=\"m 20 40 l 40 20,70 20,90 40,90 70,70 90,40 90,20 70 x e\"/>
</v:shape>
</DIV>
[ 本帖最后由 gaoss33 于 2009-10-27 20:37 编辑 ]
一楼人头像坐标
<DIV style=\"position:relative; top:0px; left:10px; width:700px; height:560px; overflow: hidden\"><DIV style=\"position:relative; top:0px; left:0px; width:610px; height:530px;overflow: hidden; background-color:#000000;border:9px #006699 double;\">
</DIV>
<?import namespace = v urn = \"urn:schemas-microsoft-com:vml\" implementation = \"#default#VML\" declareNamespace />
<v:rect style=\"position: absolute; top: 90px; left: 110px; width:300px; height:300px;\" filled=\"t\" fillcolor=\"#3A3733\"/>
<v:line style=\"position: absolute; top: 90px; left: 30px\" strokecolor=\"#00FF00\" strokeweight=\"2px\" to=\"500 .1\">
<v:stroke EndArrow=\"Block\"/></v:line>
<v:line style=\"position: absolute; top: 120px; left: 110px\" strokecolor=\"#00FF00\" to=\"368 .1\"/>
<v:line style=\"position: absolute; top: 150px; left: 110px\" strokecolor=\"#00FF00\" to=\"350 .1\"/>
<v:line style=\"position: absolute; top: 180px; left: 110px\" strokecolor=\"#00FF00\" to=\"339 .1\"/>
<v:line style=\"position: absolute; top: 210px; left: 110px\" strokecolor=\"#00FF00\" to=\"340 .1\"/>
<v:line style=\"position: absolute; top: 240px; left: 110px\" strokecolor=\"#00FF00\" to=\"365 .1\"/>
<v:line style=\"position: absolute; top: 270px; left: 110px\" strokecolor=\"#00FF00\" to=\"345 .1\"/>
<v:line style=\"position: absolute; top: 300px; left: 110px\" strokecolor=\"#00FF00\" to=\"353 .1\"/>
<v:line style=\"position: absolute; top: 330px; left: 110px\" strokecolor=\"#00FF00\" to=\"336 .1\"/>
<v:line style=\"position: absolute; top: 360px; left: 110px\" strokecolor=\"#00FF00\" to=\"346 .1\"/>
<v:line style=\"position: absolute; top: 390px; left: 110px\" strokecolor=\"#00FF00\" to=\"379 .1\"/>
<v:line style=\"position: absolute; top: 40px; left: 110px\" strokecolor=\"#00FF00\" strokeweight=\"2px\" to=\".1 420\">
<v:stroke EndArrow=\"Block\"/></v:line>
<v:line style=\"position: absolute; top: 90px; left: 140px\" strokecolor=\"#00FF00\" to=\".1 340\"/>
<v:line style=\"position: absolute; top: 90px; left: 170px\" strokecolor=\"#00FF00\" to=\".1 315\"/>
<v:line style=\"position: absolute; top: 90px; left: 200px\" strokecolor=\"#00FF00\" to=\".1 308\"/>
<v:line style=\"position: absolute; top: 90px; left: 230px\" strokecolor=\"#00FF00\" to=\".1 308\"/>
<v:line style=\"position: absolute; top: 90px; left: 260px\" strokecolor=\"#00FF00\" to=\".1 320\"/>
<v:line style=\"position: absolute; top: 90px; left: 290px\" strokecolor=\"#00FF00\" to=\".1 326\"/>
<v:line style=\"position: absolute; top: 90px; left: 320px\" strokecolor=\"#00FF00\" to=\".1 306\"/>
<v:line style=\"position: absolute; top: 90px; left: 350px\" strokecolor=\"#00FF00\" to=\".1 313\"/>
<v:line style=\"position: absolute; top: 90px; left: 380px\" strokecolor=\"#00FF00\" to=\".1 307\"/>
<v:line style=\"position: absolute; top: 90px; left: 410px\" strokecolor=\"#00FF00\" to=\".1 319\"/>
<v:line style=\"position: absolute; top: 90px; left: 440px\" strokecolor=\"#00FF00\" to=\".1 156\"/>
<v:line style=\"position: absolute; top: 600px; left: 440px\" strokecolor=\"#00FF00\" to=\".1 76\"/>
<v:line style=\"position: absolute; top: 90px; left: 470px\" strokecolor=\"#00FF00\" to=\".1 16\"/>
<v:line style=\"position: absolute; top: 350px; left: 470px\" strokecolor=\"#00FF00\" to=\".1 53\"/>
<v:line style=\"position: absolute; top: 89px; left: 109px\" strokecolor=\"#ffffff\" to=\".1 .1\">
<v:stroke EndArrow=\"Oval\"/></v:line>
<v:line style=\"position: absolute; top: 60px; left: 145px\" strokecolor=\"#cccccc\" to=\"-29 25\">
<v:stroke EndArrow=\"Classic\"/></v:line>
<v:line style=\"position: absolute; top: 389px; left: 409px\" strokecolor=\"#ffffff\" to=\".1 .1\">
<v:stroke EndArrow=\"Oval\"/></v:line>
<v:line style=\"position: absolute; top: 323px; left: 463px\" strokecolor=\"#cccccc\" to=\"-46 60\">
<v:stroke EndArrow=\"Classic\"/></v:line>
<v:shape style=\"position: absolute; top: 90px; left: 110px; width:300px; height:300px;\" stroked=\"t\" strokecolor=\"#FF9966\" filled=\"f\" fillcolor=\"#6666FF\" strokeweight=\"3px\" coordsize=\"100 100\">
<v:path v=\"m 10 26 l 12 8,22 4,40 2,80 10,90 30,86 60,66 90,56 92,58 100,14 100,28 92,24 92,12 93,8 90,12 80,8 78,10 76,8 74,9 72,11 68,2 65,1 63,12 46,13 43,7 38,13 37,18 23 x e\"/>
</v:shape>
<div style=\"position: absolute; top: 156px; left:135px\">
<P style=\"color:#ffffff; FONT-SIZE: 13px;\">
●<B> 起始点
</div>
<div style=\"position: absolute; top: 470px; left:72px;\">
v=\"m 10 26 l 12 8,22 4,40 2,80 10,90 30,86 60,66 90,56 92,58 100,<BR>14 100,28 92,24 92,12 93,8 90,12 80,8 78,10 76,8 74,9 72,11 68,<BR>2 65,1 63,12 46,13 43,7 38,13 37,18 23 x e\"
</div>
<div style=\"position: absolute; top: 296px; left:419px\">
coordsize=\"100 100\"
</div>
<div style=\"position: absolute; top: 40px; left:149px\">
coordorigin=\"0 0\"
</div>
</DIV>
[ 本帖最后由 gaoss33 于 2009-10-27 20:37 编辑 ] 有水平哦，谢谢gaoss33~学习了~ <DIV style=\"position:relative; top:0px; left:0px; width:500px; height:500px; overflow: hidden\">
<?import namespace=v urn=\"urn:schemas-microsoft-com:vml\" implementation=\"#default#VML\" declareNamespace />
<v:oval style=\"position: absolute; top: 100px; left: 100px; width:180px; height:360px;\" stroked=\"t\" strokecolor=\"#9999ff\" filled=\"t\" fillcolor=\"#6666FF\" strokeweight=\"1px\" arcsize=\"0.15\">
<v:fill src=\"http://pic.qiannao.com:83/r.jsp?fn=//uu1001/share/2009/11/3/32_21901.jpg\" type=\"frame\" opacity=\"1\"/>
<v:shadow on=\"T\" type=\"single\" color=\"#b3b3b3\" offset=\"8px,3px\"/>
</v:oval>
</DIV>
页:
[1]
2