Membuat Layout Web dengan css

Share

Fungsi CSS dalam pembuatan web adalah untuk mengatur tata letak (layout) dari tampilan web. Yaitu mulai dari body web secara keseluruhan, menu, header, sidebar, content dan footer.
Berikut merupahan contoh CSS yang dapat digunakan sebagai acuan membuat layout web

[sourcecode language="css"]
/* CSS Document */

body {
margin: 30px auto;
width: 800px;
}

header, nav, section, article, aside, footer {
display: block;
}

header {
height: 80px;
border: 1px solid yellow;
text-align: center;
}

#nav {
float: left;
width: 800px;
height: 40px;
border: 1px solid green;
}

section {
float: left;
width: 800px;
height: 350px;
border: 1px solid orange;
}

article {
float: left;
height: 300px;
width: 500px;
margin: 20px 50px 50px 30px;
border: 1px dashed red;
text-align: center;
}

aside {
margin: 20px 50px 50px 570px;
height: 300px;
width: 200px;
border: 1px dashed red;
text-align: center;
}

footer {
clear: both;
width: 800px;
height: 20px;
border: 1px solid blue;
}

tombol, login {
display: block;
cursor: pointer;
float: left;
height: 25px;
width: 90px;
margin: 6px 10px 10px 20px;
border: 1px solid blue;
text-align: center;
}

login {
margin: 10px 10px 10px 50px;
}
[/sourcecode]

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Translate »