css布局和漂浮

漂浮:

float:left;  使元素向左漂浮

float:right;  使元素向右飘

css布局:

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <style>
  6   body{
  7     margin:0px;
  8 
  9   }
 10      #main{
 11       width:980px;
 12 
 13       background-color:#000;
 14       margin:0 auto;
 15      }
 16      #top{
 17       width:100%;
 18       height:80px;
 19       background-color:#ccc;
 20       text-align:center;
 21      }
 22      #content{
 23       width:100%;
 24       height:640px;
 25       background:white;
 26      }
 27      #footer{
 28       width:100%;
 29       height:80px;
 30       background:#ccc;
 31      }
 32      .nav{
 33       width:100%;
 34       height:15px;
 35      }
 36      #content #left{
 37       width:480px;
 38       height:500px;
 39       background:#ccc;
 40       float:left;
 41       margin-top:70px;
 42      }
 43      #content #right{
 44       width:480px;
 45       height:500px;
 46       background:white;
 47       float:right;
 48       margin-top:70px;
 49 
 50      }
 51     #right .right1{
 52   height:118px;
 53   width:100%;
 54   background:#ccc;
 55   font-size:70px;
 56   text-align:center;
 57   line-height:118px;
 58   color:green;
 59 }
 60 #right .rightnav{
 61   width:100%;
 62   height:10px;
 63 }
 64 #top span{
 65   font-size:50px;
 66   font-family:楷体;
 67   line-height:80px;
 68 
 69 }
 70  ul li{
 71   list-style:none;
 72   float:left;
 73   font-size:30px;
 74   line-height:80px;
 75   margin-right:20px;
 76   margin-left:85px;
 77   color:red;
 78 }
 79 ul{
 80     padding:0px;
 81     margin:0px;
 82 }
 83 a:hover{
 84         color:green;
 85         text-decoration:underline;
 86         font-size:20px;
 87 
 88 }
 89 #left a:hover{
 90   width:300px;
 91   height:300px;
 92 }
 93 a{
 94   text-decoration:none;
 95 }
 96  #left img{
 97   position:relative;
 98   left:50%;
 99   top:50%;
100   margin-left:-60px;
101   margin-top:-60px;
102 }
103         </style>
104 </head>
105 <body>
106    <div id="main">
107      <div id="top">
108        <span>我的个人网站</span>
109      </div>
110      <div class="nav"></div>
111      <!-- <hr> -->
112      <div id="content">
113        <div id="left">
114          <a href=""><img src="a.gif"/></a>        
115        </div>
116        <div id="right">
117          <div class="right1">第一篇文章</div>
118          <div class="rightnav"></div>
119          <div class="right1">第二篇文章</div>
120          <div class="rightnav"></div>
121          <div class="right1">第三篇文章</div>
122          <div class="rightnav"></div>
123          <div class="right1">第四篇文章</div>
124        </div>
125      </div>
126      <div class="nav"></div>
127      <!-- <hr> -->
128      <div id="footer">
129      <ul>
130       <li><a href="">网站首页</a></li>
131       <li><a href="">关于我们</a></li>
132       <li><a href="">联系方式</a></li>
133       <li><a href="">公司简介</a></li>
134      </ul>  
135      </div>
136    </div>
137     </body>
138     </html>

 

posted @ 2015-01-11 12:34  D-ding  阅读(379)  评论(0)    收藏  举报