Div CSS layout example: use dl dt dd to make a list_html/css_WEB-ITnose

When using DIV CSS to make lists, the most commonly used ones are ul and li. However, there are two troublesome places in this way:

1. If you use UL for layout, The right column is more troublesome;
2. It is troublesome to adapt the border outside the text;
3. The height may have to be fixed;

So, take a closer look at this layout and think At first thought, it is reasonable to use DL.DT.DD:

1. The layout is more reasonable;
2. It will be easy to expand in the future;
3. There must be very little CSS;

Try writing it and see if it’s okay! Within control!

Needless to say about layout distribution:

The source code is as follows:

Use DL, DT and DD to make lists

标题

  

    

·博客里的文章是我自己写的！

    

作者：张三

  

  

    

·博客里的文章是我自己写的！

    

作者：张三

  

  

    

·博客里的文章是我自己写的！

   

作者：张三

  

...........

 

title

·Blog The articles in are written by myself!

Author: Zhang San

*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
dd{ position:absolute; right:5px;}
h1{clear:both;font-size:14px;}
 

a href="3232">·The articles in the blog are written by myself!

Author: Zhang San

a href="3232">·The articles in the blog are written by myself!

Author: Zhang San

.....< /div>

CSS part

*{ margin:0; padding:0;} body{ font-size:12px; line-height:1.8; padding:10px;} dl{clear:both; margin-bottom:5px ;float:left;} dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF} dd{ position:absolute; right:5px;} h1{clear: both;font-size:14px;}

Tags: