Laporan Praktikum Pemograman Web 1 Modul 4

   

LAPORAN PRAKTIKUM

Pemograman WEB 1

Modul 4

“CSS, Class dan Id CSS”

Nama         : Radea Nurlaila

NIM           : 2015091083

Prodi          : SI 2015 C

LABORATORIUM KOMPUTER

FAKULTAS ILMU KOMPUTER

UNIVERSITAS KUNINGAN

2017

                 Jl. Cut NyakDien, No.36A CijohoKuninganTelp/Faks : 0232-974824

     

     

Tugas

1.   Buatlah  design web dengan menggunakan  CSS

Jawab : 

Script CSS :

      * {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;}

Scipt HTML untuk pemanggilannya :

    <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 :

          

POST TEST

Buatlah Design Website Gallery Transparan dengan CSS

1. Siapkan dahulu 3 Buah File Gambar

2. Script Programnya adalah :

        <h1> Image Transparency</h1>
<style>
div.img{
            margin:5px;
            padding:5px;
            border:1px solid #0000ff;
            height:auto;
            widht:auto;
            float:left;
            text-align:center;

}
div.img img {
            display:inline;
            margin:5px;
            border:1px solid #ffffff;

}
div.img  a:hover img{
            border: 1px solid #0000ff;
 opacity:0.5;
}
div.desc{
            text-align:center;
            font-weight:normal;
            width:120px;
            margin:5px;
}
</style>

<div class="img">
<a target="_blank" href="modul4.1.html"><img src="we.jpg" alt="1" width="110" height="90"></a>
</div>

<div class="img">
<a target="_blank" href="modul4.2.html"><img src="1.jpg" alt="we" width="110" height="90"></a>
</div>

<div class="img">
<a target="_blank" href="modul4.3.html"><img src="2.jpg" alt="1" width="110" height="90"></a>
</div>
<br>
<br>
<br>
<br>
<br> <br> <br>
<p> Note : Arahkan Mouse ke gambar </p>

Maka Hasilnya adalah :