CSS example: define the list of DL page elements and build a good structure with emphasis on semantics (reprinted 52css)

Everyone is learning CSS web page layout, studying CSS positioning, float, and the application and setting skills of various CSS attributes. This is not a problem. It is also worth studying. But it often ignores an important field, namely HTML. In my article on 52css.com, I emphasized more than once the semantics and structure. You may also get bored. I think this is nothing, and I think it is not important.

Without a good HTML document as the basis, it is often difficult for us to deploy CSS webpages. For example, quality problems exist in a one-stop building. There will be problems with how you do the decoration. In addition to consuming more materials and energy, the final decoration effect will be greatly reduced. The same is true for CSS webpage layout. If HTML documents have unreasonable structure and do not pay attention to semantics, We need to write more CSS styles to define them, which also makes HTML code cumbersome. This is contrary to the concept of web standards.

We will continue to discuss this with you on 52css.com today. Maybe you have read the following cases and you will have a new understanding of HTML. At the same time, we also hope to arouse your desire to learn and realize that CSS web page layout is more than just learning CSS.

　　I. Introduction

On the 52css.com Forum, some netizens raised this question, saying that the page elements were misplaced in ff.

Original post:

Open his page and we can see the following results:

　　

 

View the HTML source file and get the following code:

 
 

  
  

  
  
<div id=product> 
  
  

  
  
 
  
  

  
  
<span><a href="/product/Stainless_Steel_runching_hole_mesh/">Stainless Steel runching hole mesh</a></span><br /> 
  
  

  
  
<div id=list align="left"> 
  
  

  
  
<a href="/product/Stainless_Steel_runching_hole_mesh/"></a> <em>We can provide perforated metals for decoration, screening, separation, sifting,..</em> 
  
  

  
  
</div> 
  
  

  
  
 
  
  

  
  
<span><a href="/product/aluminim_plate_runching_hole_mesh/">aluminim plate runching hole mesh</a></span><br /> 
  
  

  
  
<div id=list align="left"> 
  
  

  
  
<a href="/product/aluminim_plate_runching_hole_mesh/"></a> <em>Weaving and Characteridtic :it is punched to mesh ,including:aluminim plate mesh..</em> 
  
  

  
  
</div> 
  
  

  
  
 
  
  

  
  
<span><a href="/product/Expanded_Metal_Mesh/">Expanded Metal Mesh</a></span><br /> 
  
  

  
  
<div id=list align="left"> 
  
  

  
  
<a href="/product/Expanded_Metal_Mesh/"></a> <em>Material: Superior steel material Processing: Expanded with steel or other meta..</em> 
  
  

  
  
</div> 
  
  

  
  
 
  
  

  
  
<span><a href="/product/crimped_wire_mesh/">crimped wire mesh</a></span><br /> 
  
  

  
  
<div id=list align="left"> 
  
  

  
  
<a href="/product/crimped_wire_mesh/"></a> <em>Material: Stainless steel wire 301 ,302 ,304, 304L ,316 ,316L, 321 Iron Wire Red..</em> 
  
  

  
  
</div> 
  
  

  
  
 
  
  

  
  
<span><a href="/product/Punching_Hole_Mesh/">Punching Hole Mesh</a></span><br /> 
  
  

  
  
<div id=list align="left"> 
  
  

  
  
<a href="/product/Punching_Hole_Mesh/"></a> <em>Also named mine screen mesh, mechanic screen mesh. It can be supplied in folded ..</em> 
  
  

  
  
</div> 
  
  

  
  
 
  
  

  
  
</div> 
 
 

Related CSS code:

 
 

  
  

  
  
#product{  
  
  

  
  
margin: 2px;  
  
  

  
  
}  
  
  

  
  
#product a{  
  
  

  
  
color: #1A9CCE;  
  
  

  
  
}  
  
  

  
  
#product a:hover{  
  
  

  
  
color: #EF8D3D;  
  
  

  
  
}  
  
  

  
  
#product span{  
  
  

  
  
font-family: Arial, Helvetica, sans-serif;  
  
  

  
  
font-size: 13px;  
  
  

  
  
line-height: 25px;  
  
  

  
  
font-weight: bold;  
  
  

  
  
color: #5199DB;  
  
  

  
  
float: left;  
  
  

  
  
margin-left: 2px;  
  
  

  
  
width: 250px;  
  
  

  
  
text-align: left;  
  
  

  
  
display: block;  
  
  

  
  
}  
  
  

  
  
.list{}  
  
  

  
  
.list img{  
  
  

  
  
float: left;  
  
  

  
  
height: 50px;  
  
  

  
  
width: 50px;  
  
  

  
  
border: 1px solid #CCCCCC;  
  
  

  
  
padding: 2px;  
  
  

  
  
margin: 2px;  
  
  

  
  
}  
  
  

  
  
.list em{  
  
  

  
  
clear: none;  
  
  

  
  
float: left;  
  
  

  
  
height: 50px;  
  
  

  
  
font-family: Arial, Helvetica, sans-serif;  
  
  

  
  
font-size: 12px;  
  
  

  
  
line-height: normal;  
  
  

  
  
color: #3587B3;  
  
  

  
  
padding: 2px;  
  
  

  
  
margin: 2px;  
  
  

  
  
font-style: normal;  
  
  

  
  
} 
 
 

The above Code may not be comprehensive.

1. The ID must be enclosed in quotation marks. For example, div id = product, should be, div id = "product"

2. The ID in the same page is unique. The landlord sets the ID of multiple Div to list

3. Completely separate styles into CSS, rather than in HTML files. Code like align = "Left" must be removed.

4. Do not pay attention to HTML structure semantics. The HTML Tag application is not standard. For example, the title is span, and the descriptive image and text are Div.

5. Let's talk about semantics. The structure of the page element is the list. You can use an unordered list or a defined list. Rather than the label organization method that the landlord understands.

6. The page may have the CSS definition with ID as list. The selector is. List, and the style does not work. It may also be caused by differences in width understanding.

　　Ii. Thinking

The above code writing ideas are often considered correct and understandable when you are a beginner. As long as the content is organized with tags, and then the CSS style is applied for definition, so that the HTML document shows the desired effect in the browser, that is, the CSS webpage layout is carried out, the table layout is no longer in line with web standards.

Author: 52css.com If You Need To reprint please establish site Link (http://www.52css.com/), and do not arbitrarily modify the content of the article, retain the copyright statement text!

Otherwise, HTML tags and page elements must be set for CSS webpage layout. If these are not organized, powerful CSS knowledge may be powerless. The preceding Code makes CSS settings cumbersome and error-prone. Style itself is not easy to manage, and so on.

How can we define such page elements?

You may think of an unordered list ul. Each group of units is considered as a list item Li, which contains the title, thumbnail, and description text ..

　　

 

Our HTML code can be like this:

 
 

  
  

  
  
<Ul>
  
  

  
  
<Li>
  
  

  
  
<Strong> <a href = ""> CSS instance: a simple form search form </a> </strong>
  
  

  
  
<P> <a href = ""> </a> </P>
  
  

  
  
Forms are inevitable in CSS webpage layout. Some netizens raised this question. Form...
  
  

  
  
</LI>
  
  

  
  
</Ul>
 
 

However, this application is not appropriate. In XHTML, there is another form of list, defining the list DL.

You can refer to here:

DT -- indicates the title of the HTML custom list

The title can be considered as the title DT of the List Group in the definition list.

Dd -- indicates the description of the HTML custom list

Thumbnails and description text can be considered as the Title Description and meaning DD in the List Group.

.

　　

 

Our encoding can be like this:

 
 

  
  

  
  
<DL>
  
  

  
  
<DT> <a href = ""> CSS instance: a simple form search form </a> </DT>
  
  

  
  
<DD> <a href = ""> </a> forms are inevitable in CSS webpage layout. Some netizens raised this question. Form... </DD>
  
  

  
  
</Dl>
 
 

　　Iii. Solution

Based on the above thinking, we started to rewrite the page element. HTML encoding.

 
 

  
  

  
  
<DL id = "product">
  
  

  
  
<DT> <a href = ""> CSS instance: a simple form search form </a> </DT>
  
  

  
  
<DD> <a href = ""> </a> forms are inevitable in CSS webpage layout. Some netizens raised this question. Form... </DD>
  
  

  
  
<DT> <a href = ""> Use ul + Li to create a book catalog </a> </DT>
  
  

  
  
<DD> <a href = ""> </a> the UL unordered list is an important HTML Tag, many elements in the page use it for organization. Library directory... </DD>
  
  

  
  
<DT> <a href = ""> classic CSS skills: Text-indent hide text </a> </DT>
  
  

  
  
<DD> <a href = ""> </a> image conversion is a very common method in CSS layout., because the image text is sometimes better than the optional text... </DD>
  
  

  
  
<DT> <a href = ""> Create a floating layer with CSS translucent effect </a> </DT>
  
  

  
  
<DD> <a href = ""> </a> CSS web page layout often encounters various problems, because of the needs of products and projects... </DD>
  
  

  
  
<DT> <a href = ""> Chinese and English navigation menus with pure CSS </a> </DT>
  
  

  
  
<DD> <a href = ""> </a> CSS navigation menus have always been a matter of interest to everyone. 52css has launched many instances. We will introduce them to you today... </DD>
  
  

  
  
</Dl>
 
 

The preceding code is used to define CSS styles.

　　

Reset the CSS style.

 
 

  
  

  
  
* {  
  
  

  
  
    margin:0;  
  
  

  
  
    padding:0;  
  
  

  
  
} 
 
 

Defines the width of the entire DL and sets the outer margin, inner margin, and border.

 
 

  
  

  
  
#product {  
  
  

  
  
    width:240px;  
  
  

  
  
    margin:30px auto;  
  
  

  
  
    padding:0 4px 8px 4px;  
  
  

  
  
    border:1px solid #ccc;  
  
  

  
  
} 
 
 

Define the style of the DT title, set the width and height, and define the top margin and line spacing. It is forcibly displayed on one row, and overflow is hidden. It can avoid the phenomenon that too many texts support DT.

 
 

  
  

  
  
#product dt {  
  
  

  
  
    width:240px;  
  
  

  
  
    height:26px;  
  
  

  
  
    margin-top:8px;  
  
  

  
  
    line-height:26px;  
  
  

  
  
    white-space:nowrap;  
  
  

  
  
    overflow:hidden;  
  
  

  
  
} 
 
 

Define the link style of the DT title.

 
 

  
  

  
  
#product dt a {  
  
  

  
  
    font-size:14px;  
  
  

  
  
    color:#06f;  
  
  

  
  
    text-decoration:none;  
  
  

  
  
}  
  
  

  
  
#product dt a:hover {  
  
  

  
  
    color:#00f;  
  
  

  
  
    text-decoration:underline;  
  
  

  
  
} 
 
 

Define the CSS style described by DD, set the width and height, and define the text size and line spacing. Set overflow hiding. In this way, the CSS style of the text section in the description is compiled.

 
 

  
  

  
  
#product dd {  
  
  

  
  
    width:240px;  
  
  

  
  
    height:64px;  
  
  

  
  
    font-size:13px;  
  
  

  
  
    line-height:21px;  
  
  

  
  
    color:#333;  
  
  

  
  
    overflow:hidden;  
  
  

  
  
} 
 
 

Define the CSS style of link Element A in the DD description, float to the left, define the border, and define the right margin. Make the image and text at a certain distance.

Define the size of the thumbnail. The border connecting element a is 1 px away from the image, and the margin is set to 1 px. Set the border to 0.

Author: 52css.com If You Need To reprint please establish site Link (http://www.52css.com/), and do not arbitrarily modify the content of the article, retain the copyright statement text!

When hovering, the border color of link element a is blue.

The encoding is complete.

Final effect: