-Calendario código html:
Os códigos que vos vou poñer a continuación van crear este calendario que vos deixo aquí:
Para crear este calendario, escríbese na túa páxina de html, onde desexas poñer o calendario, este código:
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li>
May<br>
<span style="font-size:18px">2017</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days">
<li><span class="active">1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li><span class="active">17</span></li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
Eu, por exemplo puxen o mes de Mayo porque é o mes que cumplo, pero cada un pode poñer o mes que queira onde está escrito, no código anterior, esto:
<li>
May<br>
<span style="font-size:18px">2017</span>
</li>
Logo fun añadindo coa opción <li> os días do mes. Para marcar un día en concreto, no codigo anterior ves o día 1 e o día 17 cun código, o cal podes usar para calquer día que desexes marcar:
<li><span class="active">1</span></li>
Despois de ter escrito o teu calendario, agora toca ir ao CSS escribir o código e darlle forma ao teu calendario coa fonte ou color que desexes. O código do CSS é o seguinte:
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}
.month {
padding: 70px 25px;
width: 96.25%;
background: #1abc9c;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color:#ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color:#777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
Con este código tes o calendario que ensinei antes, pero cada un pode telo da cor ou forma que máis lle guste.
Esto sería todo polo calendario, agora explicareivos como fixen o botón.
-Botón código html:
Con este botón que vos ensinarei, facedes que ao clicar nel volva ao empezo da páxina. O botón e este que aparece cada vez que baixades:
Entón, unha vez ligadas as páxinas ás que desexas ter este botón, pois nesas páxinas html escribes este código:
<button onclick="topFunction()" id="myBtn" title="Go to top">Arriba</button>
Onde teño escrito "Arriba" podédesllo cambiar por calquera outra cousa.
Logo de ter este código posto nas túas páxinas, tes que ir ao CSS, escribir este código e poñelo ao teu gusto:
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: Black;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #555;
}
Este código está posto coa forma e cor do meu botón, pero podedes cambiar todo.
E por último, tendes que ir ao script.js e escribir este código:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Con esto o voso botón xa funcionaria.
ESTO É TODO! Espero que vos servira de gran axuda, un saúdo ;)
