HTML5的结构和语义——语义性的块级元素（三）

   1: <table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">

   2: <tbody><tr><td width="10">

   3: <img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>

   4: <td>

   5: <table border="1" cellpadding="5" cellspacing="0" width="100%">

   6: <tbody><tr><td bgcolor="#eeeeee">

   7: <p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>

   8: <p>

   9: The <code type="inline">.xf-value</code> selector used here styles the input

  10: field value but not its label. This is actually inconsistent

  11: with the current CSS3 draft. The example really should use the

  12: <code type="inline">::value</code> pseudo-class instead like so:

  13: </p>

  14: <table border="0" cellpadding="0" cellspacing="0" width="100%">

  15: <tbody><tr><td class="code-outline">

  16: <pre class="displaycode">input::value { width: 20em; }

  17: #ccnumber::value { width: 18em }

  18: #zip::value { width: 12em }

  19: #state::value { width: 3em  }</pre>

  20: </td></tr></tbody></table><br>

  21:  

  22: <p>

  23: However, Firefox doesn't yet support this syntax. 

  24: </p>

  25: </td></tr></table>

   1: <aside>

   2: <h3>.xf-value</h3>

   3: <p>

   4: The <code type="inline">.xf-value</code> selector used here styles the input

   5: field value but not its label. This is actually inconsistent

   6: with the current CSS3 draft. The example really should use the

   7: <code type="inline">::value</code> pseudo-class instead like so:

   8: </p>

   9:   

  10: <pre class="displaycode">input::value { width: 20em; }

  11: #ccnumber::value { width: 18em }

  12: #zip::value { width: 12em }

  13: #state::value { width: 3em  }</pre>

  14:  

  15: <p>

  16: However, Firefox doesn't yet support this syntax. 

  17: </p>

  18: </aside>

   1: <a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />

   2: <img alt="A Web site is requesting permission to install the following item: 

   3:    Mozilla XForms 0.7 Unsigned"</span> 

   4:   src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />

   5: <br />

   1: <figure id="fig2">

   2:   <legend>Figure 2. Install Mozilla XForms dialog</legend>

   3:   <img alt="A Web site is requesting permission to install the following item: 

   4:     Mozilla XForms 0.7 Unsigned"</span> 

   5:     src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />

   6: </figure>

   1: <dialog>

   2:     <dt>Simplicius </dt> 

   3:     <dd>According to the straight line AF,

   4:     and not according to the curve, such being already excluded

   5:     for such a use.</dd>

   6:  

   7:     <dt>Sagredo </dt> 

   8:     <dd>But I should take neither of them,

   9:     seeing that the straight line AF runs obliquely. I should

  10:     draw a line perpendicular to CD, for this would seem to me

  11:     to be the shortest, as well as being unique among the

  12:     infinite number of longer and unequal ones which may be

  13:     drawn from the point A to every other point of the opposite

  14:     line CD. </dd>

  15:  

  16:     <dt>Salviati </dt> 

  17:     <dd><p> Your choice and the reason you

  18:     adduce for it seem to me most excellent. So now we have it

  19:     that the first dimension is determined by a straight line;

  20:     the second (namely, breadth) by another straight line, and

  21:     not only straight, but at right angles to that which

  22:     determines the length. Thus we have defined the two

  23:     dimensions of a surface; that is, length and breadth. </p>

  24:  

  25:     <p> But suppose you had to determine a height—for

  26:     example, how high this platform is from the pavement down

  27:     below there. Seeing that from any point in the platform we

  28:     may draw infinite lines, curved or straight, and all of

  29:     different lengths, to the infinite points of the pavement

  30:     below, which of all these lines would you make use of? </p>

  31:     </dd>

  32: </dialog>