Array Assosiatif dan Css Query

- November 01, 2018

Assalamualaikum semuanyaaa, kali ini aku mau membahas tentang Array Asosiatif dan Css Query, langsung ajayuuu

LatArrayAsosiatif

Array Asosiatif Feat Looping

CSS Media Query

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Media Query</title>
<style>
body {
 background: url(sponge.gif);
 font-family: 'Segoe UI', serif;
 }
 header {
  text-align: center;
 }
 header h1 {
  padding: 0;
  margin: 0;
 }
 nav {
  margin-top: 10px;
  display: inline-block;
 }
 nav ul {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
 }
 nav ul li {
  display: inline-block;
  margin-right: 10px;
  font-size: 24px;
 }
 nav a {
    transition: .3s;
    color: #666;
    text-decoration: none;
 }
 nav a:hover {
     transition: .3s;
     font-weight: bold;
 }
 @media (max-width: 320px) {
  /* Tulis Style CSS untuk ukuran layar maksimal 320px disini */
  nav {
   width: 100%;
  }
  nav ul li {
      margin-bottom: 10px;
      border-bottom: 1px solid #ddd;
      width: 100%;
  }
  nav a {
      font-size: 12px;
  }
 }          
</style>       
</head>
<body>
<header>
<h1 class="title">
Brand Name</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Favorite</a></li>
<li><a href="#">Promo</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Location</a></li>
</ul>
</nav>
</header>
</body>
</html>

Studi Kasus Data Siswa

dan ini hasilnyaa:

Cari Blog Ini

Regita Jasmine

Array Assosiatif dan Css Query

Komentar

Posting Komentar

Postingan populer dari blog ini

HTML 5 (Membuat Bottom Index,Layout Split,Left index,Top index)

Array Pada JavaScript - Praktikum 13

PRAKTIKUM 2 DAN 3