DIVCSS5 module under the heading introduction list div CSS layout

Similar upper and lower structure under the heading of the introduction list div CSS Layout instance module

Big title + Simple Introduction List module CSS layout, layout explanation, Graphics + code introduction, online demo, package download the module complete source code.

Introduction to the upper and lower structure list under the title CSS layout effect

Layout such a module, the title is generally only one line, the title text too much text will be automatically hidden processing, introduction content word control to display up to two rows, usually Shanghai premature ejaculation treatment Hospital programmers will consider the maximum number of words to call.

First, DIVCSS module layout analysis-TOP

From the local module analysis is easy to find the law, each column is the title + Introduction Way layout, below the bottom border line effect. To find such a law generally we do not use div layout such a list of parts, generally using the UL Li list label to layout such a regular list.

In the layout of such a local module, from the analysis of the title text is relatively large, introduction text is relatively small, usually the title we use H3 layout, Introduction we use div layout can.

Second, CSS local layout preparation-TOP

Initialize template preparation: In order to be compatible with major browsers still using DIVCSS5 to provide initialization templates, this module layout is based on the best sexual function treatment Hospital in Shanghai. To avoid incompatible with the major browsers.

Basic modifications are made based on the provision of the initialization template to accommodate the CSS layout of this local module.

Because this local DIV+CSS production module case does not involve a picture or background picture, so you do not need to prepare to cut out the picture material.

third, the local layout key HTML+CSS code and effect-TOP

1. Key HTML code

1. 2. <ul class="list">
   4. <li>
   6.          <h3>< a href= "#"  target=" _blank "> Hypermarket to the convenience store retail giants re-seek transformation </a></ h3> 
   8. <div> is to cooperate with the future expansion in China, and the integration of the donor market has begun to try to facilitate the operation of the store business,
      After the mature franchise model for the national expansion ... </div>
   10. </li>
   14. <li>
   16.          <h3>< a href= "#"  target=" _blank "> Hypermarket to the convenience store retail giants to re-seek transformation   The long dot title will not wrap up the placeholder </a></h3> 
   18. <div> is to cooperate with the future expansion in China, and the integration of the donor market has begun to try to facilitate the operation of the store business,
       After the mature franchise model for the national expansion ... </div>
   20. </li>
   22. <li>
   24.          <h3>< a href= "#"  target=" _blank "> Hypermarket to the convenience store retail giants re-seek transformation </a></ h3> 
   26. <div> is to cooperate with the future expansion in China, and the integration of the donor market has begun to try to facilitate the operation of the store business,
       After the mature franchise model for the national expansion ... </div>
   28. </li>
   30. <li>
   32.          <h3>< a href= "#"  target=" _blank "> Hypermarket to the convenience store retail giants re-seek transformation </a></ h3> 
   34. <div> is to cooperate with the future expansion in China, and the integration of the donor market has begun to try to facilitate the operation of the store business,
       After the mature franchise model for the national expansion ... </div>
   36. </li>
   38. </ul>

The above uses the text content for the internet arbitrarily copies some of the text to do the test occupies the position.

The key note UL Li uses the layout to implement this case instance module.

2. Key CSS Code

1. 1. ul.list{ width:356px; margin:0 auto; padding:10px 0} 
   2. ul.list li{ padding:4px 0 8px 0; text-align:left; border-bottom:1px  solid  #EBEBEB} 
   3. ul.list  li h3{ height:40px; line-height:40px; font-weight:bold; 
      overflow:hidden; font-size:16px} 

Because only once H3 and Div appear in each Li, the CSS style is set directly on H3 and Div, there is no new CSS naming class, which saves the code.

Using the Overflow:hidden instructions for H3 and Div, using this CSS style, is to avoid too much text, exceeding the limit of height wrapping, so this is used Overflow:hidden css to hide the effect beyond the content.

3. Browser Test browsing Effect

About CSS Layout effects under the title

This CSS module layout summary-TOP

Encounter regular similar list layout, generally think of using the UL Li List layout, and this CSS div local module layout, Li is divided into the upper and lower structure, on the title, under the introduction, because each LI only 1 titles and a brief description of the local, so directly with H3 and Div layout Title and introduction, You do not need to add class names to save code.

DIVCSS5 module under the heading introduction list div CSS layout