Ayuda para limpiar código
Publicado por Marta (1 intervención) el 14/11/2022 21:53:06
Buenas noches.
Estoy tratando de crear una página web con lo que voy aprendiendo leyendo tutoriales. Tengo claro que soy negada para esto, porque por más que leo y me esfuerzo, no consigo retener la información y en algunos temas, ni siquiera comprender.
Tengo un código HTML y su correspondiente CSS, que hace lo que espero, más por casualidad que por conocimientos. Pero viéndolo me doy cuenta de que está hecho un desastre, porque he puesto múltiples etiquetas o clases que no deben ser necesarias. Y el CSS lo he ido haciendo con cosas que averiguo aquí y allí y ni yo misma me entiendo.
No quisiera abusar, pero si alguien lo pudiera ver y simplificarlo o limpiarlo un poco de las cosas innecesarias que debo haber puesto, lo agradecería.
Sé que todavía no hace gran cosa el código, pero es que voy muy, muy despacio, pero la idea es tenerlo terminado algún día.
Código HTML:
Código CSS
Muchas gracias.
Marta
Estoy tratando de crear una página web con lo que voy aprendiendo leyendo tutoriales. Tengo claro que soy negada para esto, porque por más que leo y me esfuerzo, no consigo retener la información y en algunos temas, ni siquiera comprender.
Tengo un código HTML y su correspondiente CSS, que hace lo que espero, más por casualidad que por conocimientos. Pero viéndolo me doy cuenta de que está hecho un desastre, porque he puesto múltiples etiquetas o clases que no deben ser necesarias. Y el CSS lo he ido haciendo con cosas que averiguo aquí y allí y ni yo misma me entiendo.
No quisiera abusar, pero si alguien lo pudiera ver y simplificarlo o limpiarlo un poco de las cosas innecesarias que debo haber puesto, lo agradecería.
Sé que todavía no hace gran cosa el código, pero es que voy muy, muy despacio, pero la idea es tenerlo terminado algún día.
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prueba Web</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="estil.css">
<link rel="icon" type="text/css" href="imatges/icona.ico">
</head>
<body>
<header class="head-menu">
<div class="logo-nav">
<div><img src="imatges/logo.png" alt="Logoi" height="120" width="120"></div>
<div class="txt-nav">
<nav align="center" style="">
<ul>
<li class="botomenu"><a class="menu" href="index.html">Inici</a></li>
<li class="botomenu"><a class="menu" href="electricitat.html">Electricidad</a></li>
<li class="botomenu"><a class="menu" href="solar.html">Energia Solar</a></li>
<li class="botomenu"><a class="menu" href="aerotermia.html">Aerotèrmia</a></li>
<li class="botomenu"><a class="menu" href="aa.html">Aire Acondicionado</a></li>
<li class="botomenu"><a class="menu" href="mobilitat.html">Mobilitat electrica</a></li>
</ul>
</nav>
</div>
</div>
</header>
</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
body{margin: 0;
padding: 0;font-family: Helvetica, Arial, sans-serif;
color: #666;
background: #02353d;
font-size: 1em;
line-height: 1.5em;
background-image: url("imatges/placas.jpg");
background-size: cover;
background-repeat:no-repeat;
background-position: 0 100px;
}.head-menu{
background: #02353d;
color: #fff;
height: 70px;width:100%;
position: fixed; }.logo{
letter-spacing: 3px;
font-size: 40px;
color: #fff;
align-items: center;
}.logo-nav{
padding-left: 10px;
display: flex; color: white;flex-direction: row;
width: 100%;
justify-content: flex-start;
align-items: center;
}.txt-nav{
flex-grow: 1;
}.txt-nav nav ul{
margin-left: 15%;
margin-right: 10%;
font-family: arial sans-serif;
display: flex; color: white;list-style: none;
justify-content: space-around;
}.txt-nav a{
color: white;text-decoration: none;
}.botomenu :hover {
font-size: 1.2em;
/*color: #1278BF #F3F781;*/COLOR: #F3F781;
text-shadow: 0px 0px 9px #F5F6CE;
}Muchas gracias.
Marta
Valora esta pregunta
0
