CSS Walk 6 Lists
Let's create one unordered list with two subordered lists and one ordered list
<!DOCTYPE html>
<html lang="en">
<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>CSS course</title>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
<ul>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
<ul>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
<ul>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
</ul>
</ul>
</ul>
<ol>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
<li>item #1</li>
</ol>
</body>
</html>
To change the style
ul {
list-style-type: circle;
font-size: 20px;
}
To choose the sublist(s)
ul > ul {
list-style-type: circle;
font-size: 20px;
}
To choose the second sublist(s)
ul > ul > ul {
list-style-type: circle;
font-size: 20px;
}
Modifying the style of unordered list and ordered list
ul {
list-style-type: square;
}
ol {
list-style-type: decimal-leading-zero;
}
ul {
list-style-type: lower-latin;
}
ol {
list-style-type: lower-greek;
}
Menu
Let's create a menu with list
<body>
<ul class="menu">
<li>Inicio</li>
<li>Nosotros</li>
<li>Desarrollos</li>
<li>Catálogo</li>
<li>Contacto</li>
</ul>
</body>
To make it clickeable add anchor
<body>
<ul class="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Desarrollos</a></li>
<li><a href="#">Catálogo</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</body>
And format the css
.menu {
list-style-type: none;
background: #aaa;
margin: 0;
padding: 0;
}
Now adjust the css for the elements of the list
.menu {
list-style-type: none;
background: #aaa;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
}
Let´s apply css to the anchors, 10px up and down, and 20px left, and right, and must be in a lineblock.
.menu {
list-style-type: none;
background: #aaa;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
}
.menu li a {
padding: 10px 20px;
display: inline-block;
}
Let's adjust the colors a little and the hover action to change the color when mouse pass the item.
.menu {
list-style-type: none;
background: rgb(40, 80, 212);
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
}
.menu li a {
padding: 10px 20px;
display: inline-block;
color: rgb(194, 212, 245);
}
.menu li a:hover {
color: rgb(40, 80, 212);
background: rgb(194, 212, 245);
}
eot
No hay comentarios:
Publicar un comentario