Tabs_test_2

Developer
Vivi Lai
Size
2,242 Kb
Views
38,456
  1. Tabs_test_2 Previews
  2. Tabs_test_2 HTML Codes
  3. Tabs_test_2 CSS Codes

How do I make an tabs_test_2?

What is a tabs_test_2? How do you make a tabs_test_2? This script and codes were developed by Vivi Lai on 04 August 2022, Thursday.

Tabs_test_2 Previews
IQ Test

Tabs_test_2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tabs_test_2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <h1>Tabs_test_1</h1> <ul class="nav"> <li class="tab1"><a href="page1.html">Page.1</a></li> <li class="tab2"><a href="page2.html">Page.2</a></li> <li class="tab3"><a href="page3.html">Page.3</a></li> <li class="tab4"><a href="page4.html">Page.4</a></li> </ul>
</head>
<section id="content"> <div class="con_p1"> <p>Tabs don’t have to be horizontal but they usually are so our first step is going to be to create a horizontal list.</br> We’re going to try a few different things with CSS, but we’ll be sticking with the following basic HTML structure</P> </div> <div class="con_p2"> <p>When setting the style for several link states, there are some order rules:</br> a:hover MUST come after a:link and a:visited</br> a:active MUST come after a:hover</P> </div> <div class="con_p3"> <p>Hello</br> LINE1</br> a:active MUST come after a:hover</P> </div>
</section>
</body>
</html>

Tabs_test_2 - Script Codes CSS Codes

.nav ul { list-style: none; padding: 0; margin: 0
}
/* Inline list-items
The most obvious first thing we can do is make the list horizontal. The most straight-forward solution for this is to set the display property of the boxes created by the li elements to inline: */
.nav li { display: block; height: 60px; float: left; border: solid rgba(0, 0, 0, 0.1); border-width: 1px 1px 0 1px; margin: 0 5px 0 0; background-color: rgba(0, 0, 0, 0.2);
}
.nav li a { position: relative; top: 20px; padding: 50px;
}
.nav li:hover { background-color: rgba(0, 0, 0, 0.8);
}
nav a:link { color: rgba(0, 0, 0, 0.8)
}
.nav a:hover { color: #fff
}
.section div:nth-child(3) > p{ display: block; height: 60px; margin: 0; padding: 0 50px; background-color: rgba(0, 0, 0, 0.8); color: #fff;
}
.tab2:focus{