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

冷不防 2022-03-21 03:15 167阅读 0赞

1.先看效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70][]

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.背景图片自己去找

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70]: /images/20220321/1cae50af3d5c4ed6a2fed018d0f56e24.png