Common use of CSS and HTML errors

This time for everyone to bring CSS and HTML common use of the error, CSS and HTML use the attention of what, the following is the actual case, together to see.

misunderstanding one. Multiple P syndrome

<p class= "NAV" >    <ul>       <li><a href= "/home/" >Home</a></li>       <li ><a href= "/about/" >About</a></li>       <li><a href= "/concact/" >Concact</a> </li>    </ul></p>

The use of redundant P-tags as described above is called " Multi-P syndrome " and should be simplified into

<ul class= "NAV" >      <li><a href= "/home/" >Home</a></li>      <li><a href= "/ about/">About</a></li>      <li><a href="/concact/">Concact</a></li>< /ul>

Myth Ii. Multi-class class Syndrome note class can be applied to any number of elements of a page, and is ideal for identifying content types or other similar entries

A piece of news (news headlines, news details content)

<H1 class= "News-head" >elastic Layout example-view Source for the HTML and css
The above class names using News-head and News-text are called " Multi-class " manifestations and do not require so many classes to differentiate element styles

It is best to use  p (pision) to represent parts rather than without semantics (most people misunderstand p without semantics!!!) In fact, p can divide the document into several meaningful areas.

The class name news thus identifies the entire news item. You can then use the cascading (Cascade) style to identify news headlines, text, and should be modified as follows

<p class= "News" >    
span groups or identifies inline elements


Myth three. ID usage myths are used to identify specific elements on a page (such as site navigation, headers, footers) and must be unique; can also be used to identify persistent structural elements (such as main navigation, content area)

/* Large number of Use IDs, difficult to find unique name confusion */#andy, #rich, #jeremy, #james-box, #sophie {    font-size:1em;    Font-weight:bold;    border:1px solid #ccc;} /* Simply replace it with a common class */.staff {    font-size:1em;    Font-weight:bold;    border:1px solid #ccc;}
Used to identify specific elements on a page (such as site navigation, headers, footers) and must be unique; can also be used to identify persistent structural elements (such as main navigation, content area)


Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Baidu Post-3D flop effect

CSS3 to achieve animated bike effects