Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

web page

135 views

Published on

  • Login to see the comments

  • Be the first to like this

web page

  1. 1. 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;
  2. 2. 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; }
  3. 3. .bt2{ background-image:url('../images/bt.gif'); width:122px; height:28px; margin-left:10px;; margin-right:auto; margin-top:-20px; float:left; } .bt3{ background-image:url('../images/bt.gif'); 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; }
  4. 4. .bt4{ background-image:url('../images/bt.gif'); 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;
  5. 5. } .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{
  6. 6. 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{
  7. 7. 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;
  8. 8. 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;
  9. 9. 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;
  10. 10. 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; }
  11. 11. Creatinga webpage <!DOCTYPE html> <!---------------------htmlsectionstart-------------> <html> <!---------------------headsectionstart-------------> <head> <linkrel="stylesheet"type="text/css"href="style/style.css"/> </head> <!---------------------headsectionclose-------------> <!--------------------bodysectionstart-------------> <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>
  12. 12. </div> <divclass="container_top_bg"> </div> <divclass="container2"> <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="container4"> <divclass="title_products"></div> <divclass="container5">---------------------------------------------------- ------------------------------------------------------------</div> </div> <divclass="container6"> <divclass="i1"><imgsrc="images/i1.gif"></div> <divclass="i_divider"><imgsrc="images/i_divider.gif"></div>
  13. 13. <divclass="i2"><imgsrc="images/i2.gif"></div> <divclass="i_divider1"><img src="images/i_divider.gif"></div> <divclass="i3"><imgsrc="images/i3.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="i6"><imgsrc="images/i6.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> <!--------------------bodysectionstart------------>
  14. 14. </html> <!--------------------html sectionclose------------->

×