Lectra Wilcom

Apparel Software

» » CSS Programming for Wordpress Website Part2

CSS Programming for Wordpress Website Part2

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
  1. Horizontal and 
  2. 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:

CSS Programming for Wordpress Website Part6

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:

 



Share :

Facebook Twitter Google+
0 Komentar untuk "CSS Programming for Wordpress Website Part2"

Back To Top