div布局解决float浮动随窗体变化问题

1.先看效果图

2.代码

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <style>
       .administration {
           color: white;
           font-family: "微软雅黑";
           float: left;
           width: 200px;
           height: 30px;
           text-align: center;
           font-size: 20px;
           border: 1px solid white;
           -moz-border-radius: 3px;
           /*边框圆形大小*/
           -webkit-border-radius: 3px;
           border-radius: 6px;
           padding-top: 5px;
           /*字体离div顶部距离*/
           margin-left: 150px;
           font-weight: 300;
           /*字体加粗大小*/
           margin-top: 6%;
           letter-spacing: 4px;
           /*设置字间距 */
           cursor: pointer;
           /*鼠标悬停，光标出现小手*/
       }
       /*鼠标移动div背景改变颜色*/

       .administration:hover {
           background-color: #0099CC;
       }

       .w1200{
           width:1200px;
           margin:0 auto;
       }

       a {
           text-decoration: none;
           color: white;
       }

       body {
           height: auto;
           width: 100% auto;
           margin: 0;
           background: url(img/b292fed8155ec98ab27190f6dd97d7c.jpg) no-repeat center fixed;
           -webkit-background-size: cover;
           -moz-background-size: cover;
           -o-background-size: cover;
           background-size: cover;
           color: rgba(255, 255, 255, .95)
       }

</style>

<body>
       <div class="main">
       <div class="w1200">
       <div id="property" class="administration">
               <a href="#">物业公司登录</a>
           </div>
           <div id="platform" class="administration">
               <a href="#">平台管理登录</a>
           </div>
           <div id="village" class="administration">
               <a href="#">小区管理员登录</a>
           </div>
       </div>

           
       </div>
   </body>

</html>

3.背景图片自己去找

div布局解决float浮动随窗体变化问题

相关推荐