• body
  • #branding.header <header>
    • h1
    • #content-introduction
    • #tagline
  • ul#site.nav <nav> (Andy had #main.nav)
  • .section <section> (hAtom: .hfeed)
    • .article <article> (hAtom: .hentry)
      • .header <header>
        • h1(.title) (hAtom: .entry-title)
        • p(.meta) (see below for additional inline hAtom elements)
      • .entry-content (hAtom: optional content wrapper, don’t include .entry-title, .published or .author children)
      • p.summary (hAtom: .entry-summary)
      • p…
      • .figure <figure> (on div or dl)
        • img (also audio/video embed)
        • .legend <legend>
      • ul.datagrid
      • .colgroup (columnar data)
        • .col
        • .col…
      • dl.dialog <dialog> (for conversations)
    • .aside <aside> (sidebar, pullquote etc)
      • p.summary (hAtom: .entry-summary)
      • ul.sub.nav (or #sub.nav for page-level sub-navigation)
    • .footer <footer> (for section)
  • [#page].footer (Andy had #footer but this means no .section .footers)
    • ul#supp.nav (“supp” is short for supplementary)
    • .vcard (µF)
      • .adr
        • .street-address
        • .locality (=city/town/village)
        • .region (=prefecture/state/county)
        • .postal-code
        • .country-name
      • .tel

Tags: html5  divcss  web  编程这点事  

　　截字是一个很恶心的问题。为了照顾表现上的需要，通常需要把过长的句子，比如一个列表中的新闻标题，截短。

　　通常这由程序员使用后台技术(各种流行的语言，PHP, JSP等)或者前台技术(JavaScript)来处理。我个人倾向于使用前台技术，因为这对提高网页的亲和力(accessibility)有好处。在非桌面型的浏览器中，用户可以更方便的掌握信息完整性。

　　text-overflow是CSS3的一个性质(property)，它可以截短过长的字符串，并依据值(v...

Tags: divcss  

一、CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<style>#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>2, IE6/IE77对FireFox*+html 与 *html 是IE特有的标签, f...
Tags: divcss  

今天看到灵丹发的好东西,赶快收起来,哈哈今天有朋友问我，怎么做一个这样的blog皮肤：三栏；左右都固定宽度，中间宽度随分辨率变化（自适应）。我之前帮人调整blog皮肤的时候，也遇到这个问题，但没找解决办法。这次也就借机会找找看了，重点就在position:absolute;（绝对定位）上：<div style="width:200px;margin:0 auto;height:400px;background:#bbb;position:absolute;left:0px;&qu...
Tags: divcss  Zblog  

1、刪除線:<font style="text-decoration:line-through">刪除線效果</font>刪除線效果2、加上一道上线：<font style="text-decoration:overline">加上一道上线</font>加上一道上线3、中文直书:<div style="writing-mode :tb-rl;width:10px;height:55px&quo...
Tags: divcss  

不小心看到的好东西,收藏先:一、图片静态倒影代码 效果： 代码如下：<P align=center><IMG height=高度 src="图片地址" width=宽度><BR><IMG style="FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" height=高度 src="图片地址"...
Tags: divcss  

正确使用a标签超链接是blog中用的最多的html标签，它用来链接到其他的文章或者站点链接，建议大家用a标签时将下列属性都添加上： href：设置链接的url地址或锚点 target：设置鼠标点击链接后的目标窗口或框架页面，一般常用的是target="_blank"，表示新开一个窗口打开链接，向在当前页面打开链接就不用加这个属性了 title：设置鼠标移动到链接上时显示的提示信息 rel：这个是最近才开始流行的新属性。rel="nofollow"...
Tags: divcss  

一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事 线，你可以通过CSS，javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ，class= "Gandalf"， class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。 　　至于 ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头< masthead>，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中 很少会出现大于一次的情况。 　　归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。
Tags: divcss  

在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现（不涉及滑动门和AJAX），附有实例，无图片，兼容性较好，方便大家直接使用。 第一种形式: 通过更换显示样式实现，这种很常见，就不多说了。 第二种形式: 这种结构比较复杂一些，外面加一个相对层(.menu1box)，设置溢出隐藏，将选项卡(#menu1)设为绝对定位，设置层指针为1(z-index:1;)，以便可以遮住下主区块(.main1box)1px的高度。设置主区块的边框为1px的黑边，上空白(margin-top)为-1px，使上边框伸到选项卡下。当改变选项卡某项(li)的背景为白色时便可遮住一部分主区块的上边框。这样效果就实现了。 第三种形式: 这也是一种不常用的方式，加一个相对层(.menu2box)，利用一个背景层(#tip2)定位，通过改变层的左距离(left)实现效果。
Tags: divcss  

这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。 首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在中加入这么一段就可以了，你可以试试： ..大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。.....
Tags: divcss  

使用列表< li >制作菜单 以上是这部分的结构，有关于< ul >< /ul >、< li >< /li >这两个HTML元素大家自己去参考相关的内容吧，它们最主要的作用就是在HTML中以列表的形式来显示一些信息。 还有一点需要大家一定要分清楚的，当在HTML中定义为id=divID时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class=divID时，则在CSS中对应的设置语法是.divID。 如果id=divID这个层中包括了一个< img >< /img > ，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在class=divID这个层中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了。
Tags: divcss  

当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。 * 为什么要使用GIF格式？使用JPEG不是更好吗？ 因为GIF格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色，当我们使用了GIF格式时，从肉眼上并不能看出图片有什么太大的变化，因此这是可行的。 * 接下来的Banner部分还能使用GIF格式吗？ 答案是不能，因为Banner部分是一个细致的图片，如果使用GIF格式颜色会有太大的损失，所以必须使用JPEG格式，将文件导出为banner.jpg。 * 合理的切片是非常之重要的，因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。 这里，我们没有指定header层的高度，为什么不指定呢？ 因为header层中还有菜单和banner项，所以层的高度暂时是未知的，而层的属性又可以让层根据内容自动设定调整，因此我们并不需要指定高度。
Tags: divcss