search

Home >Web Front-end >HTML Tutorial >Question: About the implementation of friend classification menu_html/css_WEB-ITnose

Question: About the implementation of friend classification menu_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:56:471256browse

Source: http://www.ido321.com/868.html

Post friends’ needs and realize the classification of icon menus

I would like to ask for corrections on the deficiencies in the implementation of this problem.

html: 

   1: <body>
   2:     <div class="test">
   3:         <h3>所有分类</h3>
   4:         <div class="fenlei">
   5:             <h4>精美包包</h4>
   6:             <ul>
   7:                 <li>双肩包</li>
   8:                 <li style="margin-left:40px;">手提包</li>
   9:                 <li>女包</li>
  10:                 <li style="margin-left:57px;">男包</li>
  11:             </ul>
  12:         </div>
  13:         <div class="fenlei">
  14:             <h4>时尚手表</h4>
  15:             <ul>
  16:                 <li>充电器</li>
  17:                 <li style="margin-left:40px;">男表</li>
  18:                 <li>女表</li>
  19:                 <li style="margin-left:57px;">情侣表</li>
  20:             </ul>
  21:         </div>
  22:         <div class="fenlei">
  23:             <h4>时尚化妆品</h4>
  24:             <ul>
  25:                 <li>润肤霜</li>
  26:                 <li style="margin-left:40px;">面膜</li>
  27:                 <li>彩妆用品</li>
  28:             </ul>
  29:         </div>
  30:         <div class="fenlei">
  31:             <h4>潮流卫衣</h4>
  32:             <ul>
  33:                 <li>男士卫衣</li>
  34:                 <li style="margin-left:30px;">女士卫衣</li>
  35:                 <li>进口卫衣</li>
  36:             </ul>
  37:         </div>
  38:     </div>
  39: </body>

css:

   1: *
   2: {
   3:     margin: 0 auto;
   4: }
   5: .test
   6: {
   7:     width: 200px;
   8:     height: 350px;
   9:     border: 1px solid red;
  10: }
  11: h3
  12: {
  13:     background-color: #B90101;
  14:     padding: 5px;
  15:     color: white;
  16: }
  17: .fenlei
  18: {
  19:     border-bottom: 1px solid #ccc;
  20:     width: 190px;
  21:     margin-top: 5px;
  22:     margin-left: 5px;
  23:     float: left;
  24: }
  25: .fenlei ul
  26: {
  27:     position: relative;
  28:     margin-left: -30px;
  29:     float: left;
  30: }
  31: .fenlei li
  32: {
  33:     float: left;
  34:     text-align: left;
  35:     margin-left: 20px;
  36:     margin-top: 5px;
  37: }

The effect is as shown:

Demo address: http://jsfiddle.net /Web_Code/yhLnj7gh/embedded/result/

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：:before和 :after_html/css_WEB-ITnoseNext article：:before和 :after_html/css_WEB-ITnose

Related articles

See more