STEP1

完成语义分析器

我用的vs2013 c语言写的

这个过程会在下一篇文章中详讲

准备好几个编译好的图，放在一个文件夹里，像下面这样

STEP2

规划好html的框架

上代码！

（截图版）

（文本版）

 <body>

 <div class="menu" id="menu">设置class id名称是为了css代码中用选择器

 <div>

 <p>test 1</p>

 <ul>

 <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张图片大小不一样，所以他们的长宽都是独立设置的

 </li>

 </ul>

 </div>

 <div>

 <p>test 2</p>

 <ul>

 <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>

 </ul>

 </div>

 <div>

 <p>test 3</p>

 <ul>

 <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>

 </ul>

 </div>

 <div>

 <p>test 4</p>

 <ul>

 <li>rot is 0;&nbsp;&nbsp;&nbsp;origin is (50, 400);&nbsp;&nbsp;&nbsp;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);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for T from 0 to 300 step 1 draw (t, -t);<br>scale is (2, 0.1);&nbsp;&nbsp;&nbsp;for T from 0 to 55 step 1 draw (t, -t*t);<br>scale is (10, 5);&nbsp;&nbsp;&nbsp;&nbsp;for T from 0 to 60 step 1 draw (t, -sqrt(t));<br>scale is (20, 0.1);&nbsp;&nbsp;for T from 0 to 8 step 0.1 draw (t, -exp(t));<br>scale is (2, 20);&nbsp;&nbsp;&nbsp;&nbsp;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>

 </ul>

 </div>

 <div>

 <p>test 5</p>

 <ul>

 <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>

 </ul>

 </div>

 </div><!-- menu end -->这个注释非常建议写，因为会比较清晰的看出结构

STEP3

完成css部分

 <style type="text/css">

 *{margin:;

 padding:;

 list-style:none;}开始先清除原来所有格式

 body{background-image: url(two.jpg)}设置背景图片，要注意把图片和代码放在同一个文件夹里

 .menu{width:550px;

 margin-top: 50px;

 margin-left: 500px;

 /* border:1px solid #ccc;*/

 }

 .menu p{height:25px;

 line-height:25px;

 font-weight:bold;

 background:#B7EECF;16进制表示颜色

 border-bottom:1px solid gray;英文表示颜色

 cursor:pointer;鼠标放在text1（text2等等）上面，会显示手指的样子

 padding-left:5px;

 text-align: center;}

 .menu div ul{display:none;}点进页面的初态，测试代码和编译图片是不显示的，通过js改变显示状态

 .menu li{

 padding-left:5px;

 /*background-color: #B1F4C3;*/

 background-color: #D3D3B1;}挑一个好看的颜色~

 p:hover{color: #F1ADA2;text-decoration: underline;font-style: italic;font-size:27px;

 }当鼠标滑过text1（text2等）上面时，字会变成粉色（#F1ADA2），加下划线，斜体，放大2号

 li:active{color:brown;

 }当鼠标点击测试代码时，测试代码会变成棕色

 a:hover{border-bottom:2px solid gold;}

 当鼠标滑过图片时，图片会加金色的底边线

 </style>

STEP4

JavaScript部分

 <script type="text/javascript">

 window.onload=function()

 {

 var menu=document.getElementById('menu'),

 ps=menu.getElementsByTagName('p'),

 uls=menu.getElementsByTagName('ul');

 for(var i in ps)

 {

 ps[i].id=i;

 ps[i].onclick=function()

 {

 var u=uls[this.id];

 更改测试代码和编译图片的显示状态

 if(u.style.display=='block')

 {

 u.style.display='none';

 }else

 {

 u.style.display='block';

 }

 }

 }

 }

 </script>

STEP5

来看最终效果图

需要注意备选背景图的大小，因为这个图片要铺满整个网页。

喵~

用sublime写出的第一个网页的更多相关文章

  1. 让你用sublime写出最完美的python代码--windows环境

    至少很长一段时间内,我个人用的一直是pycharm,也感觉挺好用的,也没啥大毛病 但是pycharm确实有点笨重,啥功能都有,但是有很多可能这辈子我也不会用到,并且pycharm打开的速度确实不敢恭维 ...

  2. python爬虫——写出最简单的网页爬虫

    在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌面壁纸,或者用来做设计的素材.我们可以通过python 来实现这样一个简单的爬虫功能,把我们想要的 ...

  3. Swing：LookAndFeel 教程第一篇——手把手教你写出自己的 LookAndFeel

    本文是 LookAndFeel 系列教程的第一篇. 是我在对 Swing 学习摸索中的一些微薄经验. 我相信,细致看全然系列之后.你就能写出自己的 LookAndFeel. 你会发现 Swing 原来 ...

  4. 如何写出优雅的CSS代码 ？(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

  5. 如何写出优雅的css代码 ？

    如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...

  6. 如何写出优雅的JavaScript代码 ？ && 注释

    如何写出优雅的JavaScript代码 ? 之前总结过一篇<如何写出优雅的css代码?>, 但是前一段时间发现自己的js代码写的真的很任性,没有任何的优雅可言,于是这里总结以下写js时应当 ...

  7. 优雅的使用sublime写lua~ sublime lua相关必装插件推荐~~

    缘起 lua脚本语言虽好,代码写得飞快,可是写错了调试起来却很困难,lua使用者经常容易犯得一个错误是--写错变量名了,if end 嵌套太多没匹配~,多打了一个逗号, 假设定义了一个变量 local ...

  8. #WEB安全基础：HTML/CSS | 0x0 我的第一个网页

    #WEB安全基础:HTML/CSS系列,本系列采用第二人称以免你不知道我在对着你说话,以朋友的视角和你交流 HTML的中文名叫做超文本标记语言,CSS叫做层叠样式表 用HTML设计你的第一个网页,你需 ...

  9. (转)Python新手写出漂亮的爬虫代码2——从json获取信息

    https://blog.csdn.net/weixin_36604953/article/details/78592943 Python新手写出漂亮的爬虫代码2——从json获取信息好久没有写关于爬 ...

随机推荐

  1. 第一个JSP

    还是大一暑假学的Java,知识掌握了第一阶段的Java基础知识, 后面想自己进阶第二阶段,学习JavaWeb,一直拖到现在直接从Java第二阶段写了~~~ 希望指正: 这次主要还是第一个Hello W ...

  2. css中选择器的使用技巧

    td:first-child{选择第一个} td:last-child{选择最后一个} td:nth-child(3){选择第3个} 一个简单的选择方法,很方便

  3. 站点SEO优化日记之设置目标关键词

    一.怎样确定关键词? 根据百度指数,选择搜索指数较高的作为候选关键词.一个关键词的搜索结果中,若大部分都为非首页链接,则该关键词可在短时间内通过优化获得好的排名,可选择此类关键词作为目标关键词. 二. ...

  4. C#学习笔记---Dispose(),Finalize(),SuppressFinalize

    http://www.cnblogs.com/eddyshn/archive/2009/08/19/1549961.html 在.NET的对象中实际上有两个用于释放资源的函数:Dispose和Fina ...

  5. execl表格VLOOKUP函数的使用

    使用场景:最近在处理一个表格数据的时候出现了一点麻烦.想把另外表2里面对应的的数据放到表1里面,本来表2的ID是乱序的(这里为好看,就顺序排了.),一个个查找复制粘贴比较麻烦,后经大师指点VLOOKU ...

  6. 【Java EE 学习 25 下】【网上图书商城js小技术点总结】

    1.日历控件的使用 日历控件源代码: /** * add auto hide when mouse moveout * * @version 1.0.1 * @date 2010-11-23 * @a ...

  7. 3.通过现有的PDB创建一个新的PDB

    实验说明:创建PDB除了可以通过种子PDB创建外,现在测试通过一个现有的用户PDB克隆创建新的PDB数据库 实验步骤: 1.创建测试数据 SQL> alter session set conta ...

  8. Win7+Ubuntu双系统安装完成后时间不一致相差大概8小时

    Win7+Ubuntu双系统时间不一致 解决方法: 第一种在Windows下进行如下修改: 在 注册表项:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Con ...

  9. 常见开发需求之前端利器webstorm中的git和快捷键

    需求   前端开发中我们最常用的一般是webstorm.hbuilder和sublime,因为以前使用过一段时间eclipse所以我对webstorm的感觉比较良好,再加上以前使用hbuilder维护 ...

  10. JavaOO面向对象中的注意点

    1.JavaOO宗旨思想: ★万物皆对象,对象因关注而产生★ ☆类是对象的抽取,对象是类的实例☆ 2.JavaOO的三大特征: 封装.继承.多态  (第四大特征 抽象 现还有争议) 3.属性与行为: ...