用sublime写出的第一个网页
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; 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>
</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写出的第一个网页的更多相关文章
- 让你用sublime写出最完美的python代码--windows环境
至少很长一段时间内,我个人用的一直是pycharm,也感觉挺好用的,也没啥大毛病 但是pycharm确实有点笨重,啥功能都有,但是有很多可能这辈子我也不会用到,并且pycharm打开的速度确实不敢恭维 ...
- python爬虫——写出最简单的网页爬虫
在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌面壁纸,或者用来做设计的素材.我们可以通过python 来实现这样一个简单的爬虫功能,把我们想要的 ...
- Swing：LookAndFeel 教程第一篇——手把手教你写出自己的 LookAndFeel
本文是 LookAndFeel 系列教程的第一篇. 是我在对 Swing 学习摸索中的一些微薄经验. 我相信,细致看全然系列之后.你就能写出自己的 LookAndFeel. 你会发现 Swing 原来 ...
- 如何写出优雅的CSS代码 ？(转)
对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...
- 如何写出优雅的css代码 ？
如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...
- 如何写出优雅的JavaScript代码 ？ && 注释
如何写出优雅的JavaScript代码 ? 之前总结过一篇<如何写出优雅的css代码?>, 但是前一段时间发现自己的js代码写的真的很任性,没有任何的优雅可言,于是这里总结以下写js时应当 ...
- 优雅的使用sublime写lua~ sublime lua相关必装插件推荐~~
缘起 lua脚本语言虽好,代码写得飞快,可是写错了调试起来却很困难,lua使用者经常容易犯得一个错误是--写错变量名了,if end 嵌套太多没匹配~,多打了一个逗号, 假设定义了一个变量 local ...
- #WEB安全基础：HTML/CSS | 0x0 我的第一个网页
#WEB安全基础:HTML/CSS系列,本系列采用第二人称以免你不知道我在对着你说话,以朋友的视角和你交流 HTML的中文名叫做超文本标记语言,CSS叫做层叠样式表 用HTML设计你的第一个网页,你需 ...
- (转)Python新手写出漂亮的爬虫代码2——从json获取信息
https://blog.csdn.net/weixin_36604953/article/details/78592943 Python新手写出漂亮的爬虫代码2——从json获取信息好久没有写关于爬 ...
随机推荐
- Firefox下载自动保存
profile.setPreference("browser.download.folderList", 2); profile.setPreference("brows ...
- ASM:《X86汇编语言-从实模式到保护模式》越计卷：实模式下对DMA和Sound Blaster声卡的控制
说实话越计卷作者用了16页(我还是删过的),来讲怎么控制声卡,其实真正归纳起来就那么几点. ★PART1:直接存储访问 1. 总线控制设备(bus master) 在硬件技术不发达的早期,处理器是最重 ...
- 在yii框架中如何连接数据库mongodb
在文件夹common/config/main_local.php中加入如下代码: <?php return [ 'components' => [ 'mongodb' => [ 'c ...
- mac 安装nginx
首先准备工作,打开mac终端 1.安装brew 输入命令 curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar x ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室 实战系列
ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(零) 前言 http://www.cnblogs.com/panzi/p/5742089.html ASP.NET S ...
- TFS二次开发系列：五、工作项查询
本节将讲述如何查询工作项,用于二次开发中定义获取工作项列表. 使用WorkItemStore.Query方法进行查询工作项,其使用的语法和SQL语法类似: Select [标题] from worki ...
- LeetCode之387. First Unique Character in a String
-------------------------------------------------- 最开始的想法是统计每个字符的出现次数和位置,如下: AC代码: public class Solu ...
- 文本切割软件Replace Pioneer
工作中遇到一些大文本,或者一些文件需要在特定的行切割开的.Replace Pioneer正好用于此的软件. 把一个文本切分不同文本的步骤: 1先把文本数据放到打开
- 如何使用的Ue4自带的SQLiteSupport
在UE4.6版本加入的模块.可以让开发者使用SQLite数据库.SQlite是个轻量型的本地数据库. 我下面就来介绍一下如何使用这个模块. 第一步:下载SQLite源代码以及SQLite GUI管理工 ...
- web api :Action Results in Web API 2
原文:http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/action-results Web api 返回 ...