【页面背景鼠标点击后左右摇摆。 _属性 _通用 _布局 _属性 _背景图片】

页面背景鼠标点击后左右摇摆。

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(2)

属性通用布局属性背景图片

详细描述

截图

代码

body{
    margin: 0;
}
header{
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 64px;
    color: #F8F8F8;
    text-align: center;
    background-color: #5FC0CD;
}
.arrow{
    position: absolute;
    top: 50%;
    margin-top:-9px;
    left: 17px;
    height: 13px;
    width: 13px;
    border-left: 3px solid #F8F8F8;
    border-bottom: 3px solid #F8F8F8;
    transform: rotate(45deg);
}
main{
    position: absolute;
    top: 64px;
    margin: 0;
    width: 100%;
}
.background{
    position: absolute;
    height: 163px;
    width: 100%;
    background-image: url('../img/bj.png');
    background-size: 100% 101%;
    background-repeat: no-repeat;
}
.photo{
    position: absolute;
    top: 39px;
    left: 15px;
    height: 84px;
    width: 84px;
}
.data{
    position: absolute;
    top: 58px;
    left: 120px;
    width: 96px;
    height: 44px;
    color: #FFFFFF;
}
.name{
    position: absolute;
    top: 0;
    left: 0;
}
.age{
    position: absolute;
    right: 0;
    bottom: 26px;
    font-size: 12px;
}
.landmark{
    position: absolute;
    bottom: 0;
    left: 0;
}
.address{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 10px;
}
ul{
    position: absolute;
    top: 163px;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
.skill{
    position: absolute;
    width: 100%;
    height: 49px;
    border-bottom: 1px solid #E1E5E7;
    line-height: 49px;
    color: #333333;
}
.line{
    position: absolute;
    top: 18px;
    left: 15px;
    width: 2px;
    height: 13px;
    background-color: #5FC0CD;
}
.major{
    position: absolute;
    left: 29px;
}
.condition{
    position: absolute;
    top: 50px;
    margin-left: 5%;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #E1E5E7;
    line-height: 50px;
}
.star{
    position: absolute;
    top :19px;
    left: 31px;
}
.live{
    position: absolute;
    left: 47px;
    color: #333333;
}
.lline{
    position: absolute;
    top: 18px;
    left: 88px;
    width: 1px;
    height: 13px;
    background-color: #E1E5E7;
}
.stars{
    position: absolute;
    top: 19px;
    left: 97px;
}
.meal{
    position: absolute;
    left: 113px;
    color: #333333;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../CSS/taskthree.css">
</head>
<body>
    <header>
        <a class="arrow" href="https://1239937890.github.io/mywork/task1/html/task1.html"></a>
        <h3>个人主页</h3>
    </header>
    <main>
        <div class="background">
            <img class="photo" src="../img/tx.png">
            <div class="data">
                 <span class="name">高素雅</span>
                 <span class="age">51岁</span>
                 <a class="landmark" href="https://1239937890.github.io/mywork/task1/html/task1.html">
                     <img src="../img/dh.png"></a>
                 <span class="address">北京.通州.果园</span>
            </div>
        </div>
        <ul>
             <li class="skill">
                 <span class="line"></span>
                  <span class="major">专业技能</span>
             </li>
             <li class="condition">
                 <img class="star" src="../img/xx.png">
                 <span class="live">住家</span>
                 <span class="lline"></span>
                 <img class="stars" src="../img/xx.png">
                 <span class="meal">不含餐</span>
             </li>
             <li class="time">
                  <span class="employment"></span>
                  <span class="llline"></span>
                  <span class="three"></span>
             </li>
             <li class="work">
                 <span class="work-time"></span>
                 <span class="linee"></span>
                 <span class="day"></span>
             </li>
             <li class="service">
                 <span class="price"></span>
                  <span class="lineee"></span>
                  <strong class="element"></strong>
             </li>
             <li class="self">
                 <span class="introduce"></span>
                 <span class="lineeee"></span>
                 <span class="laundry"></span></span>
             </li>
        </ul>
     </main>
     <footer>

     </footer>
</body>
</html>

编辑于2024-04-17

时间排序

热门排序

[上海|结业弟子]JS-任我行
1

这个是下面的住家不含餐那一栏css样式中设定了margin-left=5%;width:100%导致的，将width设定为95%再试下

查看全部>

编辑于2018-11-01
[北京|]JS-
0

width:calc(100%-5%)

查看全部>

编辑于2019-06-18

去第页