今天在推上看到一个同事推了LESS,于是去看,感觉很新颖,可能我一直都在写很传统很传统的css,于是对一些新的技术没有怎么观察。就看了LESS的几行代码,就觉得有些激动,css还能这么写啊,于是马上把我的这个皮肤改为LESS实现了。
那么,LESS是什么东西呢,请看下面。
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
其实很早就想写HTML5和CSS3的文章了,但是一直都没什么时间写,最近闲下来了,于是就写一下HTML5和CSS3的文章。HTML5出来了有一段时间了,各个主流浏览器基本上都能够支持HTML5,HTML5能够为我们做很多事情,并且轻松的就能够实现非常酷的效果。我们不仅能在网页前端制作上面可以使用HTML5和CSS3,我们还能够在浏览器插件中使用HTML5和CSS3(因为Chrome和Firefo浏览器都支持HTML5),那么我们不如来尝试写一个HTML5的网页或插件。
不过写之前,我们要看看为什么要使用HTML5。关于HTML5的概念,可以去这里看。
我们一般写一个HTML网页的时候,基本上会写如下代码。
<div id=”blog”>
<div id=”sidebar” class=”sidebarmain”>
</div>
<div id=”content”>
</div>
</div>
我们可以看到上面的代码是通过Table进化过来的,曾经有一段时间,网页开发人员喜欢使用Table去布局,但是现在,网站开发人员更喜欢使用div去布局,原因就是Table布局不够语义化,也不够方便。使用div去布局就能够语义化,比如 id,class。不过随着网络的发展,这样也有一些坏处,比如,重复的去写id让这个div更有意义,比如有一个id,又包括一个class等等。其实,最主要的还是语义上不清楚,对搜索引擎的优化不够好。那么有了HTML5,我们就可以写成如下代码。
<blog>
<sidebar>
</sidebar>
<content>
</content>
</blog>
按照上面的方式,我们的代码就更具备意义,所以,HTML5就是为我们解决了这样一个问题,我们无论在写网站还是写浏览器插件的时候,语义不仅能够方便我们的搜索引擎去抓取页面内容,另外一方面更能够方便我们去维护,因为语义,我们写CSS代码也更加简单。
blog
{
color
:black;
}
blog sidebar
{
float
:right;
}
blog content
{
float
:right;
}
这样,我们的CSS代码也更具有语义性了。好了,说了这么多,简单的来说,使用HTML和CSS3,我们可以去掉所有的class属性和id属性,让分层更加清晰,让代码更加可读,让结构更加简单。
说了这么多,终于可以开始写代码了,这里我写的是一个Chrome插件,不过可以用浏览器去访问,很简单,做的一个下拉菜单,有三种效果,我这里截取了两种效果的图。先看图。


好了,我们有了目标,就写相应的代码把。首先写HTML代码。
<!DOCTYPE html>
<html>
<head>
<title>Amazon Button</title>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/main.js”></script>
<link type=”text/css” href=”css/css.css” rel=”stylesheet” />
</head>
<body>
<rmenu>
<rmenupopup>
<tmenu>
Bestsellers
<menupopup>
<tmenu>
Bestsellers Item1
<menupopup>
<menuitem>
Google
</menuitem>
</menupopup>
</tmenu>
<menuitem>
Bestsellers Item2
</menuitem>
<menuitem>
Bestsellers Item3
</menuitem>
</menupopup>
</tmenu>
<tmenu>
Bestsellers
</tmenu>
</rmenupopup>
</rmenu>
</body>
</html>
不用我多说,你也应该知道是什么意思了,tmenu是菜单,menupopup是菜单一个容器,menuitem就是每个菜单项了。OK,现在我们再来写CSS代码。
body
{
margin
:0px;
font-size
:12px;
font-family
:arial;
width
:400px;
height
:300px;
}
rmenu,rmenupopup,tmenu,menuitem,menupopup
{
display
:block;
margin
:0px;
color
:black;
}
tmenu,menuitem
{
background
:#f0f0f0;
border-bottom
:1px solid #e0e0e0;
border-top
:1px solid white;
min-width
:200px;
padding
:5px;
max-width
:500px;
}
tmenu
{
background
:#f0f0f0 url(“../images/dropdown.png”) no-repeat center right;
}
menupopup
{
border
:1px solid #ccc;
}
menupopup
{
display
:none;
margin-left
:10px;
}
a
{
text-decoration
:none;
color
:black;
}
CSS代码也是非常好理解的,现在我们就要写菜单的相应的JS代码了,这里我就不贴出JS代码了,代码可以从源代码中下载得到。
小结
其实最后我们从编程实例中可以看出,虽然HTML5和CSS3对开发人员来说没有特别好的编码方面的提升,但是在效果上和语义化上面有了很大的提升,节约了开发人员很多步骤。也随着HTML5的发展,在线视频,在线游戏,在线3D的提出和实现,可以看出未来网络的发展越来越快,越来越丰富,真正的基于浏览器的网络游戏和3D游戏也会随着时间和浏览器的支持流行起来,到时候网络应用和桌面应用的界限也会越来越模糊。
代码下载
Prototype.zip (183.52 kb)
We have read a lot of rules for creating a good logo; "Do not use more than three colors", "Avoid intricate details", "It should not be distracting" and etc. No doubt that those are really great fundamentals for logo designing, there is one particular logo that is free from all these rules and is forever changing but yet we all can still recognize it.






