Berikut ini adalah pertanyaan dari kalokaradya pada mata pelajaran TI untuk jenjang Sekolah Dasar
Jawaban dan Penjelasan
Berikut ini adalah pilihan jawaban terbaik dari pertanyaan diatas.
Jawaban:
Untuk Melakukan Itu Kita Membutuhkan Perpaduan HTML Dan CSS
Berikut Kode HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Navbar Fixed</title>
<link rel="stylesheet" href="ceseses.css">
</head>
<body>
<nav>
<ul>
<li><a href="#menu1">Menu 1</a></li>
<li><a href="#menu2">Menu 2</a></li>
<li><a href="#menu3">Menu 3</a></li>
</ul>
</nav>
<section id="menu1">
<h2>Menu 1</h2>
<p>
</p>
</section>
<section id="menu2">
<h2>Menu 2</h2>
<p>
</p>
</section>
<section id="menu3">
<h2>Menu 3</h2>
<p>
</p>
</section>
</body>
</html>
Berikut Kode CSS
//=============================
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html, body, section
{
position: relative;
height: 100%;
}
html
{
scroll-behavior: smooth;
}
nav ul
{
list-style-type: none;
background-color: chocolate;
overflow: hidden;
top: 0;
position: fixed;
width: 100%;
z-index: 1;
}
nav li
{
float: left;
margin-left: 20px;
}
nav ul li a
{
display: block;
padding: 15px;
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover
{
background-color:black;
transition-duration: 2s;
}
section
{
padding: 80px;
}
h2
{
margin-bottom: 20px;
}
#menu1
{
background-color: black;
color: white;
}
#menu2
{
background-color: white;
color: black;
}
#menu3
{
background-color: crimson;
color: white;
}
//=============================
Sambungkan file HTML dan CSS tersebut, lewat file HTMLnya. Biasanya pada bagian kode berikut
<link rel="stylesheet" href="nama_file_cssnya.css">
Trimk
Semoga Membantu.
Semoga dengan pertanyaan yang sudah terjawab oleh KenzzH dapat membantu memudahkan mengerjakan soal, tugas dan PR sekolah kalian.
Apabila terdapat kesalahan dalam mengerjakan soal, silahkan koreksi jawaban dengan mengirimkan email ke yomemimo.com melalui halaman Contact
Last Update: Wed, 22 Feb 23