web page

Usinga CSSin webpage Designing
body{
background-color:#1A2858;
width:100%;
height:100%;
}
.bg{
background-image:url('../images/bg.jpg');
background-repeat:repeat-x;
width:100%;
height:245px;
margin-top:-8px;
margin-left:auto;
margin-right:auto;
}
.header{
background-image:url('../images/header_bg.jpg');
width:1000px;
height:243px;
margin-left:auto;
margin-right:auto;

background-repeat:no-repeat;
}
.logo{
background-image:url('../images/logo.gif');
width:274px;
height:70px;
margin-left:270px;
}
.container1{
width:787px;
height:20px;
margin-left:auto;
margin-right:auto;
margin-top:-40px;
}
.bt1{
background-image:url('../images/bt.gif');
width:122px;
height:28px;
margin-left:240px;
margin-right:auto;
margin-top:-20px;
float:left;
}

.bt2{
width:122px;
height:28px;
margin-left:10px;;
margin-right:auto;
margin-top:-20px;
float:left;
}
.bt3{
width:122px;
height:28px;
margin-left:10px;
margin-right:auto;
margin-top:-20px;
float:left;
}
.content{
line-height:28px;
font-style:italic;
font-size:20px;
margin-left:30px;
}

.bt4{
width:122px;
height:28px;
margin-left:10px;
margin-right:auto;
margin-top:-20px;
float:left;
}
.container_top_bg{
background-image:url('../images/container_top_bg.jpg');
width:787px;
height:202px;
margin-top:-40px;
margin-left:auto;
margin-right:auto;
}
.container2{
width:83px;
height:22px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;

}
.title_welcome{
width:787px;
height:22px;
margin-left:-315px;
margin-top:-150px;
}
.container3{
width:787px;
height:2px;
margin-left:-315px;
margin-right:auto;
margin-top:-8px;
margin-bottom:auto;
}
.p4{
background-image:url('../images/p4.gif');
width:67px;
height:150px;
margin-left:-300px;
margin-top:20px;
float:left;
}
.content1{

width:410px;
height:150px;
margin-left:-200px;
margin-top:25px;
margin-right:-700px;
margin-bottom:auto;
font-size:13px;
}
.container_center_bg{
background-image:url('../images/container_center_bg.jpg');
width:787px;
height:350px;
background-repeat:repeat-y;
margin-left:-352px;
margin-top:-42px;
}
.container4{
width:787px;
height:22px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}
.title_products{

background-image:url('../images/title_products.gif');
width:83px;
height:22px;
margin-left:-315px;
margin-top:-305px;
}
.container5{
width:787px;
height:2px;
margin-left:-315px;
margin-right:auto;
margin-top:-7px;
margin-bottom:auto;
}
.container6{
width:787px;
height:61px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}
.i1{
width:70px;
height:61px;

margin-left:-315px;
margin-top:10px;
}
.i_divider{
width:1px;
height:67px;
margin-left:-220px;
margin-top:-50px;
}
.i2{
width:70px;
height:67px;
margin-left:-210px;
margin-top:-65px;
}
.i_divider1{
width:1px;
height:67px;
margin-left:-130px;
margin-top:-70px;
}
.i3{
width:49px;
height:76px;
margin-left:-110px;

margin-top:-65px;
}
.i_divider2{
width:1px;
height:67px;
margin-left:-40px;
margin-top:-76px;
}
.i4{
width:89px;
height:68px;
margin-left:-30px;
margin-top:-70px;
}
.i_divider3{
width:1px;
height:67px;
margin-left:80px;
margin-top:-65px;
}
.i5{
width:80;
height:79;
margin-left:100px;
margin-top:-65px;

float:left;
}
.i_divider4{
width:1px;
height:67px;
margin-left:20px;
margin-top:-65px;
float:left;
}
.i6{
width:43px;
height:77px;
margin-left:20px;
margin-top:-65px;
float:left;
}
.content2{
width:787px;
height:150px;
margin-left:auto;
margin-top:25px;
margin-right:auto;
margin-bottom:auto;
font-size:13px;
}

Creatinga webpage
<!DOCTYPE html>

<html>

<head>
<linkrel="stylesheet"type="text/css"href="style/style.css"/>
</head>


<body>
<divclass="bg">
<divclass="header">
<divclass="logo">
</div>
</div>
</div>
<divclass="container1">
<divclass="bt1"><divclass="content">Home</div></div>
<divclass="bt2"><divclass="content">Aboutus</div></div>
<divclass="bt3"><divclass="content">product</div></div>
<divclass="bt4"><divclass="content">contact</div></div>

</div>
<divclass="container_top_bg">
</div>
<divclass="title_welcome"><imgsrc="images/title_welcome.gif"></div>
<divclass="container3">---------------------------------------------------------------
-------------------------------</div>
<divclass="p4"></div>
<divclass="content1"><pstyle="color:blue">A musical
instrumentsisadevice constructedormodifiedforthe purpose of makingmusic.
In principle anythingthatproducessoundcanserve as a musical
instruments.</p>
<p style="color:blue">The
expression,howeverisreservedgenerallyforthe itemsthathave aspecificmusical
purpose.The academicstudyof
musical instrumentiscalledorganology.</p>
</div>
<divclass="container_center_bg">
</div>
<divclass="title_products"></div>
<divclass="container5">----------------------------------------------------
------------------------------------------------------------</div>
</div>
<divclass="i1"><imgsrc="images/i1.gif"></div>
<divclass="i_divider"><imgsrc="images/i_divider.gif"></div>

<divclass="i_divider1"><img
src="images/i_divider.gif"></div>
<divclass="i_divider2"><img
src="images/i_divider.gif"></div>
<divclass="i4"><img
src="images/i4.gif"></div>
<div
class="i_divider3"><imgsrc="images/i_divider.gif"></div>
<div
class="i5"><imgsrc="images/i5.gif"></div>
<div
class="i_divider4"><imgsrc="images/i_divider.gif"></div>
<divclass="content1"><pstyle="color:blue">A musical
instrumentsisadevice constructedormodifiedforthe purpose of makingmusic.
In principle anythingthatproducessoundcanserve as a musical
instruments.
The expression,howeverisreserved
generallyforthe itemsthathave a specificmusical
purpose.The academicstudyof
musical instrumentiscalledorganology.</p>
</div>
</div>
</body>

</html>

web page

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

Similar to web page

Similar to web page (20)

web page