// studikasus.css
header,nav,inner,content,aside,footer {
display: block;
}
header{
height: 80px;
border: 2px solid red;
}
nav{
height: 60px;
border:2px solid green;
}
home,articles, download,aboutus {
height: 25px;
float: left;
text-align: center;
margin-top: 15px;
margin-left: 10px;
width: 100px;
border: 1px solid green;
}
search{
height: 20px;
text-align: center;
margin-top: 15px;
margin-right: 30px;
float: right;
width: 100px;
border: 1px solid green;
}
inner {
width: 500;s
height: 300;
float: left;
border: 2px solid red;
}
sidebar{
float: right;
margin-right: 20px;
margin-top: 20px;
margin-left: 20px;
width: 130px;
height: 270px;
border: 2px daished red;
}
login{
float: left;
width: 125px;
height: 30px;
border: 2px solid blue;
}
contents {
float: right;
margin-right: 20px;
margin-top: 20px;
margin-left: 20px;
width: 494px;
height: 270px;
border: 2px dashed green;
}
footer{
clear: both;
height: 50px;
border: 2px solid blue;
}
//studikasus.html
<!DOCTYPE HTML> <html lang="en"> <head> <title> Tugas Studi Kasus Modul 4 </title> <link rel="stylesheet" href="studikasus.css" type=text/css /> </head> <body> <header>Header</header> <nav> <home>Home</home> <articles>Articles</articles> <download>Download</download> <aboutus>About Us</aboutus> <search>Search</search> </nav> <inner> <sidebar> <login>Login</login> <br/>Aside </sidebar> <contents>Content</contents> Section </inner> <footer>Footer</footer> </body> </html>
<!DOCTYPE HTML> <html lang="en"> <head> <title> Tugas Studi Kasus Modul 4 </title> <link rel="stylesheet" href="studikasus.css" type=text/css /> </head> <body> <header>Header</header> <nav> <home>Home</home> <articles>Articles</articles> <download>Download</download> <aboutus>About Us</aboutus> <search>Search</search> </nav> <inner> <sidebar> <login>Login</login> <br/>Aside </sidebar> <contents>Content</contents> Section </inner> <footer>Footer</footer> </body> </html>
0 comments:
Post a Comment