Hay Sobat !!
Bagaimana kabar kalian.. semoga sehat..
Pada kesempatan kali ini saya akan memberikan informasi cara membuat web dengan bahasa CSS.
Contoh :
pertama kita buat dulu headernya / bagian atas. untuk membuatnya kita kitikkan source code berikut ini pada notepad++ / text editor.
Contoh 1:
#head{
width:100px;
heigth:15px;
text align:center;
color:#ee44ee;
background-color:#ee45ee;
border-top-left-radius:5px;
border-top-right-radius:5px;
background-image:url('1.png');
box-shadow:5px 5px 5px 5px rgba(222, 222, 222, 0,9);
}
</style>
<body>
<div id="head">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;" id="myBlueDiv"></div>
<div style="background-color:khaki;"></div>
</div>
</body>
Contoh 2:
<style>
#form{
width:auto;
height:auto;
color:#ffccff;
background-color:blue;
border-radius:10px 10px 10px 10px;
padding:10px;
margin-top:20px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
#form1{
width:30px;
height:auto;
text-align:center;
background-color:6655ff;
border-radius:5px 5px 5px 5px;
padding:5px;
margin-top:10px;
float:left;
}
#form1:hover{
width:30px;
height:auto;
background-color:aqua;
border-radius:10px 10px 10px 10px;
padding:10px;
margin-top:20px;
margin-right:auto;
}
</style>
<body>
<div id="conf">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
<li><a href="about.asp">Login</a></li>
</ul>
</div>
</body>
contoh 3:
#left {
width:24px;
height:60px;
float:left;
color:black;
text-align:center;
margin-top:6px;
background-color:#ee45ee;
border-top-left-radius:10px;
box-shadow:2px 2px 2px 2px rgba(122, 122, 122, 0.9);
}
</style>
<body>
<div id="left">
<br><br><br>
Login<br><br><hr>
Email:<br>
<input type="text" id="email"><br><br>
Password:<br>
<input type="password" id="password"><br><br>
<input type="submit" value="Login">
<input type="reset" value="bersih">
</div>
</body>
Contoh 4:
#right {
width:75px;
height:60px;
float:right;
color:black;
background-color:#ee45ee;
border-top-right-radius:10px;
margin-left:2px;
margin-top:6px;
box-shadow:2px 2px 2px 2px rgba(122, 122, 122, 0.9);
}
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100px;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999px;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999px;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100px;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<div id="right">
<div class="responsive">
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</div>
</body>
Contoh 5:
#footer {
width:100px;
height:14px;
text-align:center;
color:black;
background-color:#ee45ee;
margin-top:375px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
box-shadow:2px 2px 2px 2px rgba(122, 122, 122, 0.9);
}
</style>
<body>
<div id="footer">
<br>
<p>Copyright by Febri Imam</p>
</div>
</body>
Terima kasih sudah baca artikel saya, jangan lupa baca artikel saya yang lainnya.
0 komentar:
Posting Komentar