By GokiSoft.com| 18:38 19/11/2021|
Học HTML5 - CSS3

[Video] Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS BT2643

Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS


#style.css


body {
	background-mau: #FFFFCC;
}

h2 {
	text-align: center;
	text-decoration: underline;
}

#navigation {
	position: absolute;
	/*margin-left: 25%;*/
	width: 100%;
	text-align: center;
}

#tablesectionOne, #tablesectionTwo, #tablesectionThree, #tablesectionFour {
	position: absolute;
	text-align: center;
	background-mau: #FFFFDD;
	table-layout: fixed;
	margin-top: 7e;
}

#tablesectionOne, #tablesectionTwo, #tablesectionThree, #tablesectionFour {
	display: none;
}

#menu_2:hover ~ #tablesectionOne {
	display: block;
}
/*#menu_2:hover ~ #tablesectionFour {
	display: none;
}
#menu_2:hover ~ #tablesectionThree {
	display: none;
}
#menu_2:hover ~ #tablesectionTwo {
	display: block;
}*/

.CAPTION {
	background-mau: rgb(255,185,115);
	font-size: 1em;
}

th, td {
	border: solid #D0D0D0 1px;
	empty-cells: show;
}


#week1.jpg


https://gokisoft.com/uploads/stores/49/2021/11/week1.jpg


#week2.jpg


https://gokisoft.com/uploads/stores/49/2021/11/week2.jpg


#week3.jpg


https://gokisoft.com/uploads/stores/49/2021/11/week3.jpg


#week4.jpg


https://gokisoft.com/uploads/stores/49/2021/11/week4.jpg


#index.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>BT1577 - Calendar Page</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<h2>Attendence Sheet</h2>
	<div id="navigation">
		<img src="photos/week1.jpg" id="menu_1">
		<img src="photos/week2.jpg" id="menu_2">
		<img src="photos/week3.jpg" id="menu_3">
		<img src="photos/week4.jpg" id="menu_4">
	</div>

	<table id="tablesectionOne">
		<tr>
			<th colspan="8" class="CAPTION">WEEK 1</th>
		</tr>
		<tr>
			<th></th>
			<th>Mon</th>
			<th>Tue</th>
			<th>Wed</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></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
	</table>
	<table id="tablesectionTwo">
		<tr>
			<th colspan="8" class="CAPTION">WEEK 2</th>
		</tr>
		<tr>
			<th></th>
			<th>Mon</th>
			<th>Tue</th>
			<th>Wed</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></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
	</table>
	<table id="tablesectionThree">
		<tr>
			<th colspan="8" class="CAPTION">WEEK 3</th>
		</tr>
		<tr>
			<th></th>
			<th>Mon</th>
			<th>Tue</th>
			<th>Wed</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></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
	</table>
	<table id="tablesectionFour">
		<tr>
			<th colspan="8" class="CAPTION">WEEK 4</th>
		</tr>
		<tr>
			<th></th>
			<th>Mon</th>
			<th>Tue</th>
			<th>Wed</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></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
		<tr>
			<th>Smile</th>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td>P</td>
			<td></td>
			<td>P</td>
			<td>5</td>
		</tr>
	</table>
</body>
</html>


#test.html


<!DOCTYPE html>
<html>
  <head>
    <style>
      .rel {
        margin: 20px;
        position: relative;
        height: 300px;
        border: 4px solid blue;
        width: 500px;
        mau: navy;
        font-size: 20px;
      }

      .abs {
        position: absolute;
        width: 300px;
        height: 150px;
        top: 98px;
        right: 0;
        border: 3px solid brown;
        font-size: 20px;
      }

      p {
        mau: navy;
        font-size: 20px;
        border: 3px solid brown;
      }

      h1 {
        mau: green;
        text-align: center;
      }

      span {
        mau: red;
      }
    </style>
  </head>
  <body>
    <h1>Difference between position absolute and relative values</h1>
    <p>The CSS absolute is value for position property. This position property is used to sets how an element is positioned in the document.</p>
    <div class="rel">
      <span>This is relative area.</span> An element with position: absolute is arranged relative to the nearby positioning element. If an absolute arranged element does not have any element then it will use the document body area and moving along with the page scrolling. <div class="abs">
        <span>This is absolute area.</span> Generally position property is used to arrange elements in top, bottom, left and right directions.
      </div>
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  </body>
</html>


#test2.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.showme{ 
	        display: none;
	    }
	    #hideme2 {
	    	display: none;
	    }
	    .showhim:hover .showme{
	        display : block;
	    }
	    .showhim:hover .hideme{
	        display : none;
	    }
	    .showhim:hover ~ #hideme2{ 
	        display:block;
	    }
	</style>
</head>
<body>
<div class="showhim">
    HOVER ME
    <div class="showme">hai</div> 
    <div class="hideme">bye</div>
</div>
<span id="hideme2">bye bye</div>
</body>
</html>


Tags:

Liên kết rút gọn:

https://gokisoft.com/2643

Bình luận