Introduction:
Main layout: Wrapper, Container
Margin: 0 Auto
Menu:
Menu have different name
- Nav/Menu
- Nav/Menu ul
- Nav/Menu li
- Nav /Menu a
- Nav/Menu a:hover
Generally menu is two types
- Horizontal and
- Vertical
Step 1: First we will select the area of menu bar
Step 2: menu ul code should be used because it will remove bullet under list.
Step 3: menu li code will bring all menu item in a line
Step 4 : menu a . It will enhance property of single button like About, Home, Policy etc
Step 5: menu a:hover. It is special types of code when we move cursor on button it will change the define effects
HTML Code:
<!doctype html - Date: 060217>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/under_box.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main_layout">
<div class="sub_main_layout">
<div class="sub_layout"> </div>
</div>
</div>
</body>
</html>
CSS Code:
@charset "utf-8";
/* CSS Document */
body
{ background-color: #FCF; margin:0px; }
.main_layout
{ width:800px; height:800px; margin:0px auto; background-color:#030;
}
.sub_main_layout
{ width:600px; height:600px; margin:100px; background-color: #F00; float:left;
}
.sub_layout
{ width:400px; height:400px; margin:100px; background-color: #FF0; float:left;
}
Result of Above HTML and CSS Code:
HTML Layout Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/css_layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main_layout">
<div class="header"></div>
<div class="nav"> </div>
<div class="left_area"> </div>
<div class="text_area"> </div>
<div class="footer"> </div>
</div>
</body>
</html>
CSS Layout Code:
@charset "utf-8";
/* CSS Document */
body
{background-color:#09F; margin:0px;
}
.main_layout
{ width:900px; height:800px; margin:0px auto; background-color:#99C;}
.header
{width:900px; height:150px; margin:0px; background-color: #603; float:left; }
.nav
{width:900px; height:35px; margin:0px; background-color: #036; float:left; }
.left_area
{width:200px; height:500px; margin:0px; background-color: #0CC; float:left; }
.text_area
{width:700px; height:500px; margin:0px; background-color: #993; float:left; }
.footer
{width:900px; height:120px; margin:0px; background-color: #603; float:left; }
Result of Above Layout Code:
Margin HTML Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/margin.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
<div class="box5"> </div>
</body>
</html>
Margin CSS Code:
@charset "utf-8";
/* CSS Document */
body
{ background-color:#060; margin:0px;}
.box1
{ width:200px; height:200px; float:left;
margin:0px 0px 0px 0px; background-color:#F30;}
.box2
{ width:200px; height:200px; float:left;
margin:200px 0px 0px 0px; background-color: #0C9;}
.box3
{ width:200px; height:200px; float:left;
margin:0px 0px 0px 0px; background-color: #F30;}
.box4
{ width:200px; height:200px; float:left;
margin:400px 0px 0px -600px; background-color: #300;}
.box5
{ width:200px; height:200px; float:left;
margin:400px 0px 0px -200px; background-color: #00F;}
Margin Result:
0 Komentar untuk "CSS Programming for Wordpress Website Part2"