HTML - layout CSS HTML

 
Vista:
sin imagen de perfil
Val: 2
Ha disminuido su posición en 41 puestos en HTML (en relación al último mes)
Gráfica de HTML

layout CSS HTML

Publicado por admin (3 intervenciones) el 05/04/2021 11:18:37
Hola, estoy intentando hacer este layout usando grid, pero no me sale, haber si algún de vosotros sabe hacerlo, os dejo la captura y el HTML que llevo hecho.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./grid.css"  />
</head>
<body>
    <ul class="container">
        <li class="item item1">Cover photo</li>
        <li class="item itemhorizontal">horizontal</li>
        <li class="item item2">menu</li>
        <li class="item item3">content</li>
        <li class="item item4">footer</li>
 
      </ul>
 
 
</body>
</html>

Captura
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 1.441
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

layout CSS HTML

Publicado por joel (453 intervenciones) el 05/04/2021 20:29:39
Puedes mostrar el contenido del archivo css?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

layout CSS HTML

Publicado por Admin (3 intervenciones) el 05/04/2021 20:32:18
No tengo css, no se ni por dónde empezar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 1.441
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

layout CSS HTML

Publicado por joel (453 intervenciones) el 06/04/2021 08:07:40
Pero si cargas un archivo css en tu código: grid.css
1
<link rel="stylesheet" type="text/css" href="./grid.css"  />
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

layout CSS HTML

Publicado por Admin (3 intervenciones) el 06/04/2021 08:44:58
Si, pero nose que poner en el css, lo tengo enlazado pero está vacío.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kabuto
Val: 12
Ha aumentado su posición en 7 puestos en HTML (en relación al último mes)
Gráfica de HTML

layout CSS HTML

Publicado por Kabuto (3 intervenciones) el 08/04/2021 01:20:25
Hola.

La verdad es que yo de HTML y CSS se muy poquito, lo básico, tirando a poco...
Pero con los códigos que pongo a continuación sale algo parecido a lo que se ve en la captura.
A ver si te sirve de inspiración, y ojalá alguien con más conocimientos nos diga como mejorarlo, qué es correcto, qué no debería hacerse,... y todos podamos aprender

Un saludo.

Código HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="grid.css">
<meta charset ="UTF-8">
<title>Prueba CSS</title>
</head>
<body>
    <header><div class="foto"><span>Cover Photo</span></div></header>
    <nav><ul>
        <li class="bordeDer"><a href="index.html">Home</a></li>
        <li class="bordeDer"><a href="#">Menu 1</a></li>
        <li class="bordeDer"><a href="#">Menu 2</a></li>
        <li class="bordeDer"><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <article class="content">
                <header><h2>Content Header</h2></header>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula vestibulum diam ac faucibus. Maecenas lobortis accumsan ipsum eu suscipit. Praesent imperdiet ultricies pulvinar. Duis vulputate erat pulvinar felis vestibulum sodales. Donec cursus fringilla metus, eu condimentum diam congue sed. Aliquam est ex, laoreet sit amet sem sit amet, ullamcorper condimentum risus. Vivamus in consequat tellus, hendrerit bibendum sapien. Mauris in erat ac velit elementum laoreet vitae ac elit. Ut sagittis, ligula sit amet finibus laoreet, dui lorem pharetra urna, a aliquam ex metus nec felis. Nulla vestibulum magna et arcu viverra, sed congue lorem dictum. Sed elementum pellentesque neque, vel dictum nisi fermentum nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis in metus erat. Suspendisse vel velit mauris. Morbi bibendum lectus et massa consectetur condimentum.</p>
                <p>Nunc purus libero, laoreet in condimentum vel, hendrerit ut tortor. Duis sed lacinia tortor, egestas lacinia nisl. Cras mollis dictum arcu. Duis non urna blandit, suscipit odio et, convallis dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec porttitor mi eget risus ullamcorper, non maximus neque suscipit. In facilisis justo vel lectus malesuada molestie non ut urna. Vivamus ut pretium justo, in feugiat massa.</p>
                <p>Nunc accumsan mi tellus, egestas luctus tellus pharetra eu. Nam et eleifend nisl. Nulla vehicula erat quis condimentum maximus. Proin auctor risus ultricies finibus fermentum. Quisque consectetur augue orci, ac hendrerit ex rutrum sit amet. Sed accumsan, erat ut tempus sodales, dolor risus dictum sem, eget accumsan lectus ex viverra enim. Vivamus et semper turpis.</p>
            </article>
        </section>
        <section>
            <article class="list">
                <header><h2>List Header</h2></header>
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                    <li>Item 6</li>
                    <li>Item 7</li>
                </ul>
            </article>
        </section>
    </main>
    <footer><p>Copyright dialog</p></footer>
</body>
</html>

Código CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
body {
    width: 1280px;
    height: 720px;
    margin: auto;
}
 
.foto {
    width: 100%;
    height: 12em;
    border: 5px solid blue;
}
.foto span {
    display: block;
    text-align: center;
    margin-top: 1.3em;
    color: blue;
    font-size: 4em;
}
nav a{
    text-decoration:none;
    color:inherit;
    font-size: 1.2em;
}
nav ul {
    margin: 0%;
    padding: 0%;
    width: 100%;
    border: 5px solid green;
    background-color: yellow;
}
nav li {
    display:inline-block;
    width: 19%;
    padding: 10px 0px;
    text-align: center;
    font-weight: bold;
}
.bordeDer {
    border-right: solid 5px green;
}
.content {
    width: 55%;
    height: 28em;
    border: solid 5px red;
    padding: 1em 2em 2em;
    margin: 3em 2.5em;
    float: left;
}
h2 {
    text-align: center;
    color: blue;
}
.list {
    width: 20%;
    height: 29em;
    border: solid 5px red;
    padding: 1em 2em;
    float: left;
    margin: 3em 2.5em;
}
.list ul {
    list-style-type: none;
    padding: 0;
}
.list li {
    border: solid 5px green;
    padding: 10px;
    width: 90%;
    text-align: center;
    margin-bottom: 5px;
    background-color:aquamarine;
}
footer {
    clear: both;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar