En este artículo, crearemos una plantilla de página web con el tema de un cuaderno usando CSS simple.
Código HTML: El código HTML se utiliza para crear una estructura básica del cuerpo. Para crear un diseño de cuaderno, usamos elementos de lista desordenados para agregar texto dentro de las líneas. Después de eso, usamos algunas propiedades de CSS para ajustar la lista desordenada de elementos dentro de las líneas del cuaderno.
<!DOCTYPE html> <html> <head> <title>Notebook Design using CSS</title> </head> <body> <br /> <h2>Geeks For Geeks</h2> <div class="verticalLines"></div> <ul class="listItemClass"> <li>Courses</li> <li>Contribute</li> <li>Practice</li> <li>Internships</li> <li>Jobs</li> <li>Articles</li> <li>Profiles</li> <li>Placements</li> <li>Tutorials</li> </ul> </body> </html>
Código CSS: las propiedades CSS se utilizan para crear un diseño de cuaderno.
body {
width: 480px;
height: 450px;
margin: 0 auto;
}
h2 {
color: green;
text-align: center;
letter-spacing: -2px;
}
.listItemClass {
color: #858585;
font-size: 21px;
padding: 0;
width: 500px;
border: 2px solid #cecece;
}
.listItemClass li {
list-style: none;
border-bottom: 2px dotted #cecece;
text-indent: 20px;
height: auto;
padding: 10px;
}
.listItemClass li:hover {
background-color: #f5f5f5;
}
.verticalLines {
width: 1px;
float: left;
height: 425px;
margin-left: 35px;
border-left: 1px solid green;
border-right: 1px solid green;
}
Combine el código completo: en esta sección, combinaremos las dos secciones anteriores de códigos (códigos HTML y CSS) para diseñar el cuaderno.
<!DOCTYPE html>
<html>
<head>
<title>Notebook Design using CSS</title>
<style>
body {
width: 480px;
height: 450px;
margin: 0 auto;
}
h2 {
color: green;
text-align: center;
letter-spacing: -2px;
}
.listItemClass {
color: #858585;
font-size: 21px;
padding: 0;
width: 500px;
border: 2px solid #cecece;
}
.listItemClass li {
list-style: none;
border-bottom: 2px dotted #cecece;
text-indent: 20px;
height: auto;
padding: 10px;
}
.listItemClass li:hover {
background-color: #f5f5f5;
}
.verticalLines {
width: 2px;
float: left;
height: 425px;
margin-left: 35px;
border-left: 1px solid green;
border-right: 1px solid green;
}
</style>
</head>
<body>
<h2>Geeks For Geeks</h2>
<div class="verticalLines"></div>
<ul class="listItemClass">
<li>Courses</li>
<li>Contribute</li>
<li>Practice</li>
<li>Internships</li>
<li>Jobs</li>
<li>Articles</li>
<li>Profiles</li>
<li>Placements</li>
<li>Tutorials</li>
</ul>
</body>
</html>
Producción: