Laporan Praktikum Pemrograman Web 1 Modul 4

NAMA  : Muhammad Fahmi

NIM      : 20160910131

KELAS : SI 2015 C

 

1. PERTANYAAN DAN TUGAS

Buatlah design WEB dengan menggunakan CSS!

Untuk dapat membuat sebuah tampilan seperti diatas, kita membutuhkan 2 file yaitu 1 file css dan 1 file html

 Script css nya
* {margin:0; padding:0;}

body {
 background-color:#fff;
 font-family:Arial, Helvetica, sans-serif;
 color:#000;}

nav {
 margin:auto;
 text-align: center;
 width: 100%;}

nav ul ul {
 display: none;}

nav ul li:hover > ul{
display: block;
width: 150px;}

nav ul {
 background: #53bd84;
 padding: 0 20px;
 list-style: none;
 position: relative;
 display: inline-table;
 width: 100%;}

nav ul:after {
 content: "";
 clear:both;
 display: block;}

nav ul li{
 float:left;}

nav ul li:hover{
 background:#666;}

nav ul li:hover a{
 color:#fff;}

nav ul li a{
 display: block;
 padding: 25px;
 color: #fff;
 text-decoration: none;}

nav ul ul{
 background: #53bd84;
 border-radius: 0px;
 padding: 0;
 position: absolute;
 top:100%;}

nav ul ul li{
 float:none;
 border-top: 1px soild #53bd84;
 border-bottom: 1px solid #53bd84;
 position: relative;}

nav ul ul li a{
 padding: 15px 40px;
 color: #fff;}

nav ul ul li a:hover{
 background-color: #666;}

nav ul ul ul{
 position: absolute;
 left: 100%;
 top: 0;}

Script HTML nya
link rel="stylesheet" type="text/css" href="CSS.css">
<nav>
    <ul>
        <li><a href="Tugas.html">Home</a></li>
        <li><a href="Tugas.html">News</a></li>
        <li><a href="Tugas.html">Contacs</a></li>
        <li><a href="Tugas.html">About</a></li>
    </ul>
</nav> 

Maka Hasilnya adalah :

 

 

 2. POST TEST

Buatlah Design Website Gallery Transparan dengan CSS

1. Siapkan dahulu 3 Buah File Gambar

2. Script Programnya adalah :

 

 

 dan hasilnya adalah