您当前的位置:首页 > 网页设计 > Web开发 > 正文

52 Framework: 有史以来第一个HTML5和CSS3的框架

【字体大小: 2010-07-03 07:53 来源:shamoxia.com 作者:丕子 

  今天,我们要去 看看从Enavu所谓52框架的新项目。该框架是一个新的综合Html5和CSS3的框架。

  HTML5和CSS3仍是新技术,是不是有点太早开始为他们创造框架?绝对不是。对这些新标准都支持在迅速增加,而且应用越来越广。

  无论是时间开始使用HTML5的和CSS3完全是另一场辩论,这里的想法是,它是完美的时 间开始建造系统, 以方便他们在不久的将来使用。永远不会有一个时候停止不断发展的Web标准,因此建立完善的气候框架的建立。而不是落后,像这些应该跟上新技术和 发展与他们的工具。鉴于发展商的方式决定,其实时间是开始实施的HTML5和CSS3, 这些工具都已经到位,他们这样做。

  

screenshot

 

  下面是框架的基本文件,是不是很简单。

  

screenshot

 

  正如你可以看到,该框架文件的大小是相当小,甚至与包括PSD,可以明显地消除了每个站点设计问题。

  下载的三个CSS文件组成,两个HTML文件,一个JS文件,一个JPG和2PSD。

  一旦你下载了框 架,就像看看Demo。

  

screenshot

 

  正如你可以看到,该框架可以帮助你设置了一个最常见的元素数。您的标题标签(H1,H2和H3)的风格以及基本的页面排版,表单元素准备去和奖金自定义按钮的设计,有一个地方的显示代码,并在地方甚至是其他样式一束方法像强,粗体,斜体,插入的文本不同的 元素,大文字等

  下面详细分析下Demo的代码:

  开头短小精悍:

  <!DOCTYPE html>

  引入js也超级方便:

  <script src="html5.js"></script>

  然后就是整体结构了:  

  1. <body>
  2.      <header>
  3.         <nav>
  4.         </nav>
  5.      </header>
  6.      <aside>
  7.         <form>
  8.         </form>
  9.      </aside>
  10.     <section>
  11.         <article>
  12.         </article>
  13.         <article>
  14.              <code>
  15.              </code>
  16.             <article>
  17.             </article>
  18.         </article>
  19.     </section>
  20.     <footer>
  21.     </footer>
  22. </body> 

  显而易见,非常的简单精悍。使用52框架 将迫使你创建你的网页使用这些新的元素,因此是一个伟大的方式跳进HTML5的到时候。

  下面再看看CSS的经典的网格实现:

  

screenshot

 

  下面是对应的经典的代码:  

  1. .col_1 {width:40px;}.col_2 {width:100px;}.col_3 {width:160px;}.col_4 {width:220px;}.col_5 {width:280px;}.col_6 {width:340px;}.col_7 {width:400px;}.col_8 {width:460px;}.col_9 {width:520px;}.col_10 {width:580px;}.col_11 {width:640px;}.col_12 {width:700px;}.col_13 {width:760px;}.col_14 {width:820px;}.col_15 {width:880px;}.col_16 {width:940px;} 

 

  下面再看看一般的CSS代码这里是怎样实现的:主要包含了有用的CSS样式的数目,让您开始。在上述网页的一切都随着像其他基本项目的数目,具体的方式结算类和浮动块报价。

  这里是一个实用的功能,你可以设置 一个网页浏览器来覆盖默认选择的颜色。这意味着,当您选择的文本行,重点将是您定义的颜色。  

  1. ::selection {    background#525252/* Safari */    }::-moz-selection {    background#525252/* Firefox */    color:#fff;}  

 

  你还能看到经典的Css3的圆角的控制代码:  

  1. { -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;} 

 

  还有CSS的滤镜以及阴影等:  

  1. header .logo {font-size:2.5emheight:52px;padding-top:28px;font-weight:700;text-shadow:1px 1px 2px #000;color:#fff;filter: Shadow(Color=#666666, Direction=135, Strength=3);} 

 

  52框架还有好多好多新的强大的功能,期待一下吧。英文原文

    顶一下
    (2)
    100%
    踩一下
    (0)
    0%
    【责任编辑:绝口不提】 标签:
    最新评论 查看所有评论
    发表评论 查看所有评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名:密码:验证码: