昨天一个前辈跟我说“多写才会写”，上午看了sinkcup的这篇和后续几篇东西，脚本代码能看懂一些，自信心一下子有了，好吧，那我就揣着学来的水底去晃荡下写一写。
想先找个简单的网页仿一下，正好昨天另一位前辈建议我写个简书的主页，那就拿它试水吧。结果查看源代码发现简单的简书主页也要将近700行代码，CSS我还完全没学，h5很多标签和属性也完全看不懂，百度之后也不知所云，无比忧伤。h5我除了插入文字、图片、表格、文本框并简单修改他们的格式之外其实一无所知，所以只好写了一小段弱爆的代码
<html>
<title>首页-简书</title>
<link href="http://baijii-common.b0.upaiyun.com/icons/favicon.ico" rel="icon">
<div class="dropdown">
<ul class="dropdown-menu pull-right" role="button" aria-labelledby="dLabel">
<li class="">
<a href="/" >
<i class="icon-home"></i>home
</a></li>
<li>
<a href="/">
<i class="icon-home"></i> 首页
</a> </li>
<li>
<a href="/collections/following">
<i class="icon-th"></i> 专题
</a> </li>
<li>
<a href="/timeline">
<i class="icon-rss"></i> 最新动态
</a> </li>
<li>
<a href="/writer#/">
<i class="icon-pencil"></i> 写文章
</a> </li>
</ul>
</div>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<a href="/users/d355a0fc651e" target="_blank"><i class="icon-user"></i> 我的主页</a>
</li>
<li>
<a href="/favourites">
<i class="icon-heart"></i> 我喜欢的
</a> </li>
<li>
<a href="/bookmarks">
<i class="icon-bookmark"></i> 我的书签
</a> </li>
<li>
<a href="/notifications">
<i class="icon-bell"></i> 提醒
</a> </li>
<li>
<a href="/messages/inbox">
<i class="icon-envelope"></i> 简信
</a> </li>
<li><a href="/settings"><i class="icon-cogs"></i> 设置</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#"><i class="icon-question-sign"></i> 帮助</a>
<ul class="dropdown-menu">
<li><a href="http://www.jianshu.com/notebooks/547/latest" target="_blank">帮助中心</a></li>
<li><a href="http://www.jianshu.com/p/ZzzUat" target="_blank">联系我们</a></li>
</ul>
</li>
<li>
<a data-method="DELETE" href="/sign_out" rel="nofollow">
<i class="icon-signout"></i> 登出
</a> </li>
</ul>
</html>
最后实现结果是这样的
QQ截图20141114230315.png
我承认就这一些还是借鉴了源代码的思路写的，不知道为什么图片地址我都复制过来了还是无法显示，每项左边都还是默认圆点。还有一些属性我不知道什么意思，修改之后显示方面也没有特殊差异，比如 aria-labelledby="dLabel" 另外我也很好奇为什么原网页下半部分目录是在下面的，我即使把dropdown改成dropup也没有变化。不过下午忙了导师交代的活，晚上看着自己这丑到不能忍的页面，实在懒得研究了，明天再说。
btw，这一次用了markdown编译器，引用那部分真是很难搞，看来我离一个开发还差了几个光年。加油！
网友评论