html中设置相对位置

602052

发布于
2019-04-10

图片描述
浏览器全屏的时候显示如上图，但是缩小浏览器窗口大小时

如何才能保持这四个按钮的相对位置呢，和全屏的时候一样,试了很久也没试出来，代码如下，哪位大哥帮我看一下

<html>
<style>
/*
css3Menus {
background: url(keimg.gif) repeat;
width: 506px;
height: 260px;
padding: 20px;
border: 5px solid #88DBF6;
margin:0 auto;
}
*/
body{
background-color:#BBFFFF;
max-width: 85%;
margin:0 auto;
}
ul {
list-style: none;
}
li {
float: left;
font: 14px/10px Arial, Verdana, sans-serif;
color: #FFF;
background-color: #CCCC00;
width: 80px;
height: 80px;
padding: 20px;
margin: 0 30px 0 0;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
box-shadow: 3px 3px 3px #666;
}
li#btn1 {
background-color: #FF9933;
position:absolute;
left:40%;
top:20%;
margin-top:-;
margin-left:-;
}
li#btn2 {
background-color: #FF7799;
position:absolute;
left:55%;
top:20%;
margin-top:-;
margin-left:-;
}
li#btn3 {
background-color: #33FF66;
position:absolute;
left:40%;
top:45%;
margin-top:-;
margin-left:-;
}
li#btn4 {
background-color: #D15FEE;
position:absolute;
left:55%;
top:45%;
margin-top:-;
margin-left:-;
}
li a {
color: #FFF;
text-decoration: none;
display: block;
width: 80px;
height: 45px;
text-align: center;
padding: 35px 0 0 0;
margin: 0 40px 0 0;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
font-size: 14px;
font-weight: bold;
-o-text-shadow: 1px 1px 0px #333333;
-ms-text-shadow: 1px 1px 0px #333333;
-webkit-text-shadow: 1px 1px 0px #333333;
text-shadow: 1px 1px 0px #333333
}
li#btn1 a {
background-color: #FF6600;
-o-box-shadow: 1px 10px 5px #B04600 inset;
-ms-box-shadow: 1px 10px 5px #B04600 inset;
-webkit-box-shadow: 1px 10px 5px #B04600 inset;
box-shadow: 1px 10px 5px #B04600 inset
}
li#btn2 a {
background-color: #FF3366;
-o-box-shadow: 1px 10px 5px #AA002B inset;
-ms-box-shadow: 1px 10px 5px #AA002B inset;
-webkit-box-shadow: 1px 10px 5px #AA002B inset;
box-shadow: 1px 10px 5px #AA002B inset
}
li#btn4 a {
background-color: #9400D3;
-o-box-shadow: 1px 10px 5px #B04600 inset;
-ms-box-shadow: 1px 10px 5px #B04600 inset;
-webkit-box-shadow: 1px 10px 5px #B04600 inset;
box-shadow: 1px 10px 5px #B04600 inset
}
li#btn3 a {
background-color: #009900;
-o-box-shadow: 1px 10px 5px #005B00 inset;
-ms-box-shadow: 1px 10px 5px #005B00 inset;
-webkit-box-shadow: 1px 10px 5px #005B00 inset;
box-shadow: 1px 10px 5px #005B00 inset
}
li a:hover, li a:focus, li a:active { 
width: 120px; 
height: 65px; 
padding: 55px 0 0 0; 
margin: -20px 0 0 -20px; 
-webkit-border-radius: 60px;
-moz-border-radius: 60px; 
border-radius: 60px; 
} 
li a:hover, li a:focus, li a:active { 
-webkit-animation-name: bounce; 
-webkit-animation-duration: 1s; 
-webkit-animation-iteration-count: 4; 
-webkit-animation-direction: alternate; 
}
</style>
<script>
</script>
<body>
<!--<div class="css3Menus">-->
<div>
<ul>
<li id="btn1"><a href="https://www.baidu.com">送餐程序</a></li>
<li id="btn2"><a href="">房内用餐服务</a></li>
<li id="btn3"><a href="">灵活服务</a></li>
<li id="btn4"><a href="">课后提升</a></li>
</ul>
</div>
</body>
</html>

html css javascript

阅读 3.7k

3 个回答

得票最新

Fury

2731930

发布于
2019-04-10

viewport缩放时的宽高比和全屏时并不一样，所以你这和全屏一样的效果就不能用百分比，或者外层套个div，div的宽高比和全屏时一样,li宽高也等比缩放

landmass

14714

发布于
2019-04-10

更新于
2019-04-10

不考虑低版本浏览器，可以尝试使用 grid。grid 的兼容情况可以参考
代码修改如下：

<html>
<style>
    body {
        background-color: #BBFFFF;
        max-width: 85%;
        margin: 0 auto;
    }

    .wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
        grid-auto-rows: minmax(100px, auto);
    }

    .one {
        grid-column: 1;
        grid-row: 1;
    }

    .two {
        grid-column: 2;
        grid-row: 1;
    }

    .three {
        grid-row: 2;
        grid-column: 1;
    }

    .four {
        grid-column: 2;
        grid-row: 2;
    }

    ul {
        list-style: none;
        
    }

    li {
        /* float: left; */
        font: 14px/10px Arial, Verdana, sans-serif;
        color: #FFF;
        background-color: #CCCC00;
        width: 80px;
        height: 80px;
        padding: 20px;
        margin: 0 30px 0 0;
        -webkit-border-radius: 60px;
        -moz-border-radius: 60px;
        border-radius: 60px;
        box-shadow: 3px 3px 3px #666;
    }

    li#btn1 {
        background-color: #FF9933;
        /* position: absolute;
        left: 40%;
        top: 20%;
        margin-top: -;
        margin-left: -; */
    }

    li#btn2 {
        background-color: #FF7799;
        /* position: absolute;
        left: 55%;
        top: 20%;
        margin-top: -;
        margin-left: -; */
    }

    li#btn3 {
        background-color: #33FF66;
        /* position: absolute;
        left: 40%;
        top: 45%;
        margin-top: -;
        margin-left: -; */
    }

    li#btn4 {
        background-color: #D15FEE;
        /* position: absolute;
        left: 55%;
        top: 45%;
        margin-top: -;
        margin-left: -; */
    }

    li a {
        color: #FFF;
        text-decoration: none;
        display: block;
        width: 80px;
        height: 45px;
        text-align: center;
        padding: 35px 0 0 0;
        margin: 0 40px 0 0;
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        font-size: 14px;
        font-weight: bold;
        -o-text-shadow: 1px 1px 0px #333333;
        -ms-text-shadow: 1px 1px 0px #333333;
        -webkit-text-shadow: 1px 1px 0px #333333;
        text-shadow: 1px 1px 0px #333333
    }

    li#btn1 a {
        background-color: #FF6600;
        -o-box-shadow: 1px 10px 5px #B04600 inset;
        -ms-box-shadow: 1px 10px 5px #B04600 inset;
        -webkit-box-shadow: 1px 10px 5px #B04600 inset;
        box-shadow: 1px 10px 5px #B04600 inset
    }

    li#btn2 a {
        background-color: #FF3366;
        -o-box-shadow: 1px 10px 5px #AA002B inset;
        -ms-box-shadow: 1px 10px 5px #AA002B inset;
        -webkit-box-shadow: 1px 10px 5px #AA002B inset;
        box-shadow: 1px 10px 5px #AA002B inset
    }

    li#btn4 a {
        background-color: #9400D3;
        -o-box-shadow: 1px 10px 5px #B04600 inset;
        -ms-box-shadow: 1px 10px 5px #B04600 inset;
        -webkit-box-shadow: 1px 10px 5px #B04600 inset;
        box-shadow: 1px 10px 5px #B04600 inset
    }

    li#btn3 a {
        background-color: #009900;
        -o-box-shadow: 1px 10px 5px #005B00 inset;
        -ms-box-shadow: 1px 10px 5px #005B00 inset;
        -webkit-box-shadow: 1px 10px 5px #005B00 inset;
        box-shadow: 1px 10px 5px #005B00 inset
    }

    li a:hover,
    li a:focus,
    li a:active {
        width: 120px;
        height: 65px;
        padding: 55px 0 0 0;
        margin: -20px 0 0 -20px;
        -webkit-border-radius: 60px;
        -moz-border-radius: 60px;
        border-radius: 60px;
    }

    li a:hover,
    li a:focus,
    li a:active {
        -webkit-animation-name: bounce;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: 4;
        -webkit-animation-direction: alternate;
    }
</style>
<script>
</script>

<body>
    <!--<div class="css3Menus">-->
    <div>
        <ul class="wrapper">
            <li id="btn1" class="one"><a href="https://www.baidu.com">送餐程序</a></li>
            <li id="btn2" class="two"><a href="">房内用餐服务</a></li>
            <li id="btn3" class="three"><a href="">灵活服务</a></li>
            <li id="btn4" class="four"><a href="">课后提升</a></li>
        </ul>
    </div>
</body>

</html>

Teletubbies

557128

发布于
2019-04-10

更新于
2019-04-10

给ul设置相对定位，然后固定宽高就好了，这样所有li都是根据ul定位。

  ul {
    position: relative;
    list-style: none;
    height:600px;
    width:900px;
  }

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

html中设置相对位置

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？