Tạo timetable với CSS

  Bài viết hay nhất1
HTML:

// College Timetable
.tab
%table(cellspacing="0" cellpadding="0" border="0")
%tr.days
%th
%th Monday
%th Tuesday
%th Wednesday
%th Thursday
%th Friday
%tr
%td.time 9.00
%td.cs335.blue{"data-tooltip" => "Software Engineering & Software Process"} CS335 [JH1]
%td.cs426.purple{"data-tooltip" => "Computer Graphics"} CS426 [CS1]
%td
%td
%td -
%tr
%td.time 10.00
%td
%td.cs335.blue.lab{"data-tooltip" => "Software Engineering & Software Process"} CS335 [Lab]
%td.md352.green{"data-tooltip" => "Multimedia Production & Management"} MD352 [Kairos]
%td
%td -
%tr
%td.time 11.00
%td
%td.cs335.blue.lab{"data-tooltip" => "Software Engineering & Software Process"} CS335 [Lab]
%td.md352.green{"data-tooltip" => "Multimedia Production & Management"} MD352 [Kairos]
%td.cs240.orange{"data-tooltip" => "Operating Systems"} CS240 [CH]
%td -
%tr
%td.time 12.00
%td
%td.md303.navy{"data-tooltip" => "Media & Globalisation"} MD303 [CS2]
%td.md313.red{"data-tooltip" => "Special Topic: Multiculturalism & Nationalism"} MD313 [Iontas]
%td
%td -
%tr
%td.time 13.00
%td
%td
%td
%td
%td -
%tr
%td.time 14.00
%td
%td
%td.cs426.purple{"data-tooltip" => "Computer Graphics"} CS426 [CS2]
%td.cs240.orange{"data-tooltip" => "Operating Systems"} CS240 [TH1]
%td -
%tr
%td.time 15.00
%td
%td
%td
%td.cs240.orange.lab{"data-tooltip" => "Operating Systems"} CS240 [Lab]
%td -
%tr
%td.time 16.00
%td
%td
%td
%td.cs240.orange.lab{"data-tooltip" => "Operating Systems"} CS240 [Lab]
%td -
%tr
%td.time 17.00
%td.cs335.blue{"data-tooltip" => "Software Engineering & Software Process"} CS335 [TH1]
%td
%td
%td
%td -



CSS:

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);


$blue: #3498db;
$purple: #9b59b6;
$navy: #34495e;
$green: #2ecc71;
$red: #e74c3c;
$orange: #f39c12;

.blue { background: $blue }
.purple { background: $purple }
.navy { background: $navy }
.green { background: $green }
.red { background: $red }
.orange { background: $orange }

.cs335, .cs426, .md303, .md352, .md313, .cs240 {
font-weight: 300;
cursor:pointer;
}

body {
background: $red;
padding: 20px;
}

*, *:before, *:after {
margin:0; padding:0; border:0; outline: 0;
@include box-sizing(border-box);
}

table {
font-family: 'Open Sans', Helvetica;
color: #efefef;


tr {

&:nth-child(2n){
background: #eff0f1;
}

&:nth-child(2n+3){
background: #fff;
}
}

th, td {
padding: 1em;
width: 10em;
}
}

.days, .time {
background: $navy;
text-transform: uppercase;
font-size: 0.6em;
text-align: center;
}

.time {
width: 3em!important;
}


// Tooltip Stuff by Chris Bracco
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;

}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
@include opacity(0);
pointer-events: none;
@include transition(0.5s ease all);
}

/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 110%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
@include border-radius(6px);

background-color: black;
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 110%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid black;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
bottom: 90%;
@include opacity(1);
}
Bạn không có quyền trả lời bài viết