典型的DIV＋CSS布局——左中右版式

2022-05-24 01:57:58

【效果】

典型的DIV＋CSS布局——左中右版式

【HTML】

  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5. <title>左中右版式</title>
  6. </head>
  7. <body>
  8. <form id="form1" runat="server">
  9. <div id="wrap">
  10. <div id="header">header</div>
  11. <div id="container">
  12. <div id="left_side">left_side</div>
  13. <div id="content">content</div>
  14. <div id="right_side">right-side</div>
  15. </div>
  16. <div id="footer">footer</div>
  17. </div>
  18. </form>
  19. </body>
  20. </html>

【CSS】

  1. #wrap{
  2. width:700px;
  3. margin:0 auto;
  4. }
  5. #header{
  6. margin:20px;
  7. height:80px;
  8. border:solid 1px #0000FF;
  9. }
  10. #container{
  11. position:relative;
  12. margin:20px;
  13. height:400px;
  14. }
  15. #left_side{
  16. position:absolute;
  17. top:0px;
  18. left:0px;
  19. border:solid 1px #0000FF;
  20. width:170px;
  21. height:100%;
  22. }
  23. #content{
  24. margin:0px 190px 0px 190px;
  25. border:solid 1px #0000FF;
  26. height:100%;
  27. }
  28. #right_side{
  29. position:absolute;
  30. top:0px;
  31. right:0px;
  32. border:solid 1px #0000FF;
  33. width:170px;
  34. height:100%;
  35. }
  36. #footer{
  37. margin:20px;
  38. height:80px;
  39. border:solid 1px #0000FF;
  40. }

【说明】

典型的DIV＋CSS布局——固定宽度且居中的版式中，运用的是浮动属性；这个实例，则运用了绝对定位属性。

1、在#container中设置“position:relative;”，其作用是使得后面的绝对定位的基准为#container而不是以浏览器为其准。

2、左侧列#left_side和右侧#right_side列采用绝对定位，并且固定这两个div的宽度，而中间列#content由于需要根据浏览器自动调整，因此不设置类似属性。

但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px。

3、左中右布局，也可以运用浮动属性，具体可参考典型的DIV＋CSS布局——固定宽度且居中的版式。

上一篇：Java 中 String 类和StringBuilder 类的常用方法


下一篇：day11 匿名函数