Misunderstandings in using CSS and HTML-CSS Tutorial-php.cn

Misunderstandings in using CSS and HTML

高洛峰

Release： 2017-02-28 13:47:45

Original

1269 people have browsed it

Misunderstanding 1. Polyp disease

<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>

Copy after login

The above situation of using redundant p tags is called " Polyposis" should be simplified into the following

<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>

Copy after login

Misunderstanding 2. Multiple types of polyps Note that class can be applied to any number of elements on the page, which is very suitable for identifying content types or other similar items

A piece of news (news title, news details)

<h1 class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<p class="news-head">Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Copy after login

The above class names using news-head and news-text are called "Multiple Class Syndrome" manifestations, and there is no need for so many class distinctions Element style

It is better to use p (pision) to represent part instead of having no semantics (most people misunderstand that p has no semantics!!!), in fact p can divide the document into several Meaningful area.

Class name news to identify the entire news item. Then you can use the cascade style to identify news titles and texts. You should modify it as follows

<p class="news">
    <h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    <p>Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</p>

Copy after login

span to group or identify inline elements

<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <span class="date">Februray 22nd, 2009</span>
    By <span class="author">Harry Knowles</span>
</p>

Copy after login

Myth 3. Misunderstanding about the use of id is used to identify specific elements on the page (such as site navigation, header, page foot) and must be unique; can also be used to identify persistent structural elements (such as main navigation, content areas)

/*大量的使用id,很难找到唯一名称混乱*/
#andy, #rich, #jeremy, #james-box, #sophie {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}
/*只需一个普通类替代它*/
.staff {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}

Copy after login

is used Identifies specific elements on the page (such as site navigation, header, footer) and must be unique; it can also be used to identify persistent structural elements (such as main navigation, content area)

Misunderstandings in using CSS and HTML

##For more articles related to misunderstandings in the use of CSS and HTML, please pay attention to the PHP Chinese website!