简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

问题：关于贴友分类菜单的实现_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:56:47
asal
1194 orang telah melayarinya

来源：http://www.ido321.com/868.html

 

贴友需求，实现图示菜单的分类

我对于这个问题的实现，不足之处，请求指正。

html：

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

css:

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

效果如图：

演示地址：http://jsfiddle.net/Web_Code/yhLnj7gh/embedded/result/

Label berkaitan：
分类 菜单
sumber：php.cn
Artikel sebelumnya：:before和 :after_html/css_WEB-ITnose Artikel seterusnya：一款纯css3实现的动画加载导航_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Tatasusunan PHP yang diperoleh daripada parameter URL tidak berkelakuan seperti yang diharapkan Saya mempunyai parameter URL yang mengandungi id kategori dan saya mahu menganggapnya seba...
daripada 2024-04-06 22:09:02
0
1
1428
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Bagaimana untuk mencetuskan render (dengan penapis dan penomboran) pada kaedah isihan dalam React? Berikut ialah komponen gaya Sort.js saya: <SortWrapper><SortText>SortBy</So...
daripada 2024-04-06 21:28:37
0
1
2257
Tetapkan ahli persendirian kelas sebagai parameter pembina classFoo{#satu#dua#tiga#empat#lima#enam#tujuh#lapan#sembilan#sepuluh#sebelas#dua belas#tig...
daripada 2024-04-06 21:48:47
0
1
637
Pertanyaan dan formula membentuk keseluruhan jadual, dengan lajur baharu, dengan lajur baharu ialah formula yang melibatkan nilai lajur bersyarat lain EDIT: Formula mestilah lajur "nilai" - lajur "nilai" dengan user_id te...
daripada 2024-04-06 21:23:40
0
2
530
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！