Este é o código da páxina:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<title>Test¿Que personaje Disney eres?</title>
</head>
<body>
<h1>¿Quieres saber que personaje Disney eres?</h1>
<h3><a href="preg1.html"><button class="btn" type="button" onclick="funcionCambiadora()">¡Pues empecemos!</button></a></h3>
</body>
</html>
Esa é a estructura e o botón dirixe á primeira pregunta, que é a que fixo unha das miñas compañeiras.
O estilo da páxina, creado nunha páxina chamada styles.css é o seguinte:
body{background-image: url("Images/Portada.jpg");}
p { border-radius: 25px;
padding: 2px;
width: 20px;
height: auto;
font-family: 'Indie Flower', cursive;
display:block;
margin-top: 5px;
margin-left:10px;
margin-right:auto;
}
h1 { color:white;
border-radius: 25px;
padding: 2px;
width: 2000px;
height: 75px;
front-size:55px;
font-family: 'Gloria Hallelujah', cursive;
}
h2 { color:black;
border-radius: 25px;
background: white;
padding: 20px;
width: 500px;
height: 75px;
front-size:100px;
font-family: 'Glorie Hallelujah', cursive;
display:inline-table;
margin-right:10px;
}
h3{ color:white;
font-family: 'Indie Flower', cursive;}
img { display:block;
margin:10px;
}
Con esto terías a páxina diseñada como a teño eu, pero sempre podes cambiar a aparaiencia.
Por último, fixen o botón que por desgraza, doume moito traballo debido a que non sabía como enlazar ese botón con outra páxina html.
O botón creeino nesta páxina, e o código que me dou pois collino e copieino no styles.css
Igualmente deíxovos o código do meu botón:
.btn {
background: #d934a7;
background-image: -webkit-linear-gradient(top, #d934a7, #2980b9);
background-image: -moz-linear-gradient(top, #d934a7, #2980b9);
background-image: -ms-linear-gradient(top, #d934a7, #2980b9);
background-image: -o-linear-gradient(top, #d934a7, #2980b9);
background-image: linear-gradient(to bottom, #d934a7, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
text-shadow: 5px 4px 2px #0021fa;
-webkit-box-shadow: 0px 1px 3px #ffffff;
-moz-box-shadow: 0px 1px 3px #ffffff;
box-shadow: 0px 1px 3px #ffffff;
font-family: Georgia;
color: #ffffff;
font-size: 49px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #3ca1fa;
background-image: -webkit-linear-gradient(top, #3ca1fa, #34d960);
background-image: -moz-linear-gradient(top, #3ca1fa, #34d960);
background-image: -ms-linear-gradient(top, #3ca1fa, #34d960);
background-image: -o-linear-gradient(top, #3ca1fa, #34d960);
background-image: linear-gradient(to bottom, #3ca1fa, #34d960);
text-decoration: none;
}
E esto sería todo, espero que vos gustase. Un saúdo ;)
Editaches un artigo anterior? Por que me aparece que é do 1 de abril?
ResponderEliminarO código o tes que poñer noutra fonte OBRIGATORIAMENTE, unha monoespaciada tipo Courier e metido dentro dun recadro.
Segundo explicas, ti tiñas que facer unha páxina inicial. Esa páxina ten unha imaxe de fondo, un título e un botón. Non parece un rendemento nada impresionante para as 8 clases que levabamos...
Para que definides estilos no CSS que logo non usades?