简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer： 2016-06-24 11:56:47
original
1194 Les gens l'ont consulté

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

 

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

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

html：

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

css:

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

效果如图：

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

Étiquettes associées：
分类 菜单
source：php.cn
Article précédent：:before和 :after_html/css_WEB-ITnose Article suivant：一款纯css3实现的动画加载导航_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Les tableaux PHP obtenus à partir des paramètres d'URL ne se comportent pas comme prévu J'ai un paramètre d'URL qui contient l'identifiant de la catégorie et je souhaite le trait...
Depuis 2024-04-06 22:09:02
0
1
1428
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Comment déclencher le rendu (avec filtre et pagination) sur la méthode de tri dans React ? Voici mon composant de style Sort.js : <SortWrapper><SortText>SortBy</SortT...
Depuis 2024-04-06 21:28:37
0
1
2257
Définir un membre privé d'une classe comme paramètre de constructeur classFoo{#one#two#third#four#five#six#seven#eight#nine#ten#eleven#twelve#thirteen#fourteen...
Depuis 2024-04-06 21:48:47
0
1
637
La requête et la formule forment la table entière, avec de nouvelles colonnes, où les nouvelles colonnes sont des formules impliquant d'autres valeurs de colonnes conditionnelles. EDIT : La formule doit être la colonne "valeur" - la colonne "valeur" ...
Depuis 2024-04-06 21:23:40
0
2
530
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！