STEP1
完成语义分析器
我用的vs2013 c语言写的
这个过程会在下一篇文章中详讲
准备好几个编译好的图，放在一个文件夹里，像下面这样
STEP2
规划好html的框架
上代码！
（截图版）
（文本版）
1 <body> 2 <div class="menu" id="menu">设置class id名称是为了css代码中用选择器 3 <div> 4 5 <p>test 1</p> 6 <ul> 7 <li>origin is (20, 200);<br>rot is 0;<br>scale is (40, 40);<br>for T from 0 to 2*pi step pi/50 draw (t, -sin(t));<br>origin is (20, 240);<br>for T from 0 to 2*pi step pi/50 draw (t, -sin(t));<br>origin is (20, 280);<br>for T from 0 to 2*pi step pi/50 draw (t, -sin(t));<br><br><a><img src="1.png" width="485" height="170"/></a>我的5张图片大小不一样，所以他们的长宽都是独立设置的 8 </li> 9 </ul> 10 </div> 11 12 <div> 13 14 <p>test 2</p> 15 <ul> 16 <li>origin is (380, 240);<br>scale is (80, 80/3);<br>rot is pi/2+0*pi/3 ;<br>for T from -pi to pi step pi/50 draw (cos(t), sin(t));<br>rot is pi/2+2*pi/3;<br>for T from -pi to pi step pi/50 draw (cos(t), sin(t));<br>rot is pi/2-2*pi/3;<br>for T from -pi to pi step pi/50 draw (cos(t), sin(t));<br><br><a><img src="2.png" width="200" height="180" /></a><br></li> 17 </ul> 18 </div> 19 20 <div> 21 22 <p>test 3</p> 23 <ul> 24 <li>origin is(580, 240);<br>scale is (80, 80);<br>rot is 0;<br>for t from 0 to 2*pi step pi/50 draw(cos(t),sin(t));<br>for t from 0 to Pi*20 step Pi/50 draw<br>((1-/(0/7))*Cos(T)+/(10/7)*Cos(-T*((10/7)-1)),<br>(1-1/(10/7))*Sin(T)+1/(10/7)*Sin(-T*((10/7)-1)));<br><br><a><img src="3.png" width="200" height="180"/></a></li> 25 </ul> 26 </div> 27 28 <div> 29 30 <p>test 4</p> 31 <ul> 32 <li>rot is 0; origin is (50, 400); scale is (2, 1);<br>for T from 0 to 300 step 1 draw (t, 0);<br>for T from 0 to 300 step 1 draw (0, -t);<br>scale is (2, 1); for T from 0 to 300 step 1 draw (t, -t);<br>scale is (2, 0.1); for T from 0 to 55 step 1 draw (t, -t*t);<br>scale is (10, 5); for T from 0 to 60 step 1 draw (t, -sqrt(t));<br>scale is (20, 0.1); for T from 0 to 8 step 0.1 draw (t, -exp(t));<br>scale is (2, 20); for T from 0 to 300 step 1 draw (t, -ln(t));<br><br><a><img src="4.png" width="485" height="200"/></a></li> 33 </ul> 34 </div> 35 36 <div> 37 38 <p>test 5</p> 39 <ul> 40 <li>origin is (100, 300);<br>rot is 0;<br>scale is (1, 1);<br>for T from 0 to 200 step 1 draw (t, 0);<br>for T from 0 to 150 step 1 draw (0, -t);<br>for T from 0 to 120 step 1 draw (t, -t);<br><br><a><img src="5.png" width="300" height="220"/></a></li> 41 </ul> 42 </div> 43 44 </div><!-- menu end -->这个注释非常建议写，因为会比较清晰的看出结构
STEP3
完成css部分
1 <style type="text/css"> 2 *{margin:0; 3 padding:0; 4 list-style:none;}开始先清除原来所有格式 5 body{background-image: url(two.jpg)}设置背景图片，要注意把图片和代码放在同一个文件夹里 6 .menu{width:550px; 7 margin-top: 50px; 8 margin-left: 500px; 9 /* border:1px solid #ccc;*/ 10 } 11 .menu p{height:25px; 12 line-height:25px; 13 font-weight:bold; 14 background:#B7EECF;16进制表示颜色 15 border-bottom:1px solid gray;英文表示颜色 16 cursor:pointer;鼠标放在text1（text2等等）上面，会显示手指的样子 17 padding-left:5px; 18 text-align: center;} 19 20 .menu div ul{display:none;}点进页面的初态，测试代码和编译图片是不显示的，通过js改变显示状态 21 22 .menu li{ 23 padding-left:5px; 24 /*background-color: #B1F4C3;*/ 25 background-color: #D3D3B1;}挑一个好看的颜色~ 26 27 p:hover{color: #F1ADA2;text-decoration: underline;font-style: italic;font-size:27px; 28 }当鼠标滑过text1（text2等）上面时，字会变成粉色（#F1ADA2），加下划线，斜体，放大2号 29 li:active{color:brown; 30 }当鼠标点击测试代码时，测试代码会变成棕色 31 a:hover{border-bottom:2px solid gold;} 32 33 当鼠标滑过图片时，图片会加金色的底边线 34 </style>
STEP4
JavaScript部分
1 <script type="text/javascript"> 2 window.onload=function() 3 { 4 var menu=document.getElementById('menu'), 5 ps=menu.getElementsByTagName('p'), 6 uls=menu.getElementsByTagName('ul'); 7 for(var i in ps) 8 { 9 ps[i].id=i; 10 ps[i].onclick=function() 11 { 12 var u=uls[this.id]; 13 14 更改测试代码和编译图片的显示状态 15 if(u.style.display=='block') 16 { 17 u.style.display='none'; 18 }else 19 { 20 u.style.display='block'; 21 } 22 } 23 } 24 25 } 26 </script>
STEP5
来看最终效果图
需要注意备选背景图的大小，因为这个图片要铺满整个网页。
喵~