By GokiSoft.com|
10:04 15/12/2021|
Học HTML5 - CSS3
[Video] Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS - C2108G3
Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS
#calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calendar Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Attendence Sheet</h2>
<div id="navigation">
<span id="week1" onclick="showWeek1()">Week 1</span>
<span id="week2" onclick="showWeek2()">Week 2</span>
<span id="week3" onclick="showWeek3()">Week 3</span>
<span id="week4" onclick="showWeek4()">Week 4</span>
</div>
<table border="1" cellpadding="5" id="tablesectionOne">
<tr>
<th colspan="8" class="CAPTION">Week 1</th>
</tr>
<tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Web</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td></td>
<td>5</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td></td>
<td>5</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td></td>
<td>5</td>
</tr>
</table>
<table border="1" cellpadding="5" id="tablesectionTwo">
<tr>
<th colspan="8" class="CAPTION">Week 2</th>
</tr>
<tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Web</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td></td>
<td>5</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td></td>
<td>5</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td></td>
<td>5</td>
</tr>
</table>
<table border="1" cellpadding="5" id="tablesectionThree">
<tr>
<th colspan="8" class="CAPTION">Week 3</th>
</tr>
<tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Web</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td></td>
<td>5</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td></td>
<td>5</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td></td>
<td>5</td>
</tr>
</table>
<table border="1" cellpadding="5" id="tablesectionFour">
<tr>
<th colspan="8" class="CAPTION">Week 4</th>
</tr>
<tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Web</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td>P</td>
<td></td>
<td>5</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td></td>
<td>3</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td></td>
<td>P</td>
<td></td>
<td>P</td>
<td></td>
<td>3</td>
</tr>
</table>
<script type="text/javascript">
function showWeek1() {
week1 = document.getElementById('tablesectionOne')
week2 = document.getElementById('tablesectionTwo')
week3 = document.getElementById('tablesectionThree')
week4 = document.getElementById('tablesectionFour')
week1.style.display = 'block'
week2.style.display = 'none'
week3.style.display = 'none'
week4.style.display = 'none'
}
function showWeek2() {
week1 = document.getElementById('tablesectionOne')
week2 = document.getElementById('tablesectionTwo')
week3 = document.getElementById('tablesectionThree')
week4 = document.getElementById('tablesectionFour')
week1.style.display = 'none'
week2.style.display = 'block'
week3.style.display = 'none'
week4.style.display = 'none'
}
function showWeek3() {
week1 = document.getElementById('tablesectionOne')
week2 = document.getElementById('tablesectionTwo')
week3 = document.getElementById('tablesectionThree')
week4 = document.getElementById('tablesectionFour')
week1.style.display = 'none'
week2.style.display = 'none'
week3.style.display = 'block'
week4.style.display = 'none'
}
function showWeek4() {
week1 = document.getElementById('tablesectionOne')
week2 = document.getElementById('tablesectionTwo')
week3 = document.getElementById('tablesectionThree')
week4 = document.getElementById('tablesectionFour')
week1.style.display = 'none'
week2.style.display = 'none'
week3.style.display = 'none'
week4.style.display = 'block'
}
</script>
</body>
</html>#style.css
body {
background-color: #FFFFCC;
}
h2 {
text-align: center;
text-decoration: underline;
}
#navigation {
text-align: center;
width: 600px;
margin: 0px auto;
}
#navigation span {
background-color: #65fca4;
padding: 10px;
padding-left: 30px;
padding-right: 30px;
font-weight: bold;
border-radius: 20px;
cursor: pointer;
}
#navigation span:hover {
background-color: orange;
}
#tablesectionOne, #tablesectionTwo, #tablesectionThree, #tablesectionFour {
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: absolute;
top: 10em;
}
/*#week1:active ~#tablesectionOne {
display: block;
}*/
.CAPTION {
background-color: rgb(255,185,115);
font-family: arial;
font-size: 1em;
}
th, td {
border: solid thin #D0D0D0;
empty-cells: show;
}Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
