Site e-commerce html css php
saida22
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour, je voudrais de l'aide car je dois créer un site e-commerce avec du PHP , css et du html mais je bloque sur les liste déroulantes je ne sais pas comment faire pour que si on clique dessus sa nous ramène sur la page je suis désolé je suis débutante dans la matière.
***** Pour une lecture plus facile du code, à l'avenir utilisez les balises, voir cette page.
voici mon code html :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Le monde de la glisse</title> <link rel="stylesheet" href="style.css"> <forme action="menu.php" method="POST"> </head> <body> <header class="navbar"> <nav class="navbar"> <a href="#" class="logo">LE MONDE DE LA GLISSE</A> <ul class="liste-items"> <li class="items">Acceuil</li> <li class="items">Vetement<span>▼</span> <ul class="sous_liste"> <li class="items-sous-liste">Femme</li> <li class="items-sous-liste">Homme</li> <li class="items-sous-liste">Enfant</li> </ul> </li> <ul class="liste-items"> <li class="items">Accessoires<span>▼</span> <ul class="sous_liste"> <li class="items-sous-liste">Ski nautique</li> <li class="items-sous-liste">Planche à voile</li> <li class="items-sous-liste">SUP</li> <li class="items-sous-liste">canoë kayak</li> </ul> </li> <li class="items">Tutoriel</li> <li class="items">contact</li> <li class="items">Panier</li> </ul> </nav> </header> </html>
Et voici mon code css:
*,::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-family: Arial, Helvetica, sans-serif;
}
body{
background: rgb(242, 243, 245);
height: 100vh;
}
nav{
width: 100%;
height: 50px;
background: rgb(151, 105, 108);
border-bottom: 0.5px solid rgb(0, 2, 5);
}
.liste-items {
display: flex;
justify-content: center;
color:black;
list-style-type: none;
height: 100%;
line-height: 20px;
font-size: 20px;
}
.items {
cursor: pointer;
margin: 0 10px;
flex-shrink: 0;
}
.items span{
font-size: 17px;
}
.items:nth-child(3) {
margin-left: 0;
}
/* Sous liste */
.sous-liste{
position: relative;
top:-1px;
display:none ;
}
.items-sous-liste{
list-style-type:none ;
text-align: center;
padding:0 10px;
background: rgb(215, 195, 198);
border-bottom: 0.5px solid rgb(151, 105, 108);
}
.items-sous-liste:hover {
background: rgb(151, 105, 108);
}
header{
height: 100vh;
width: 100vw;
background-image:url(image/fond.jpg);
background-size: cover;
}
.navbar .logo {
font-size: 20px;
font-weight: bold;
color: black;
margin-left: 30px;
padding: 50px;
}
A voir également:
- Site e-commerce html css php
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
- Site pour vendre des objets d'occasion - Guide
