2022.7.13 vue界面优化遇到的问题

最新推荐文章于 2023-11-14 16:38:08 发布

海涵丶

最新推荐文章于 2023-11-14 16:38:08 发布

阅读量104

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq1830882455/article/details/125756695

版权

1.查阅得到的方法有很多，但是最简单有效的方法是给锚点加上 padding-top 和 margin-top 注意正负，数值就是导航栏的高度。其他解决方案已经收藏到了收藏夹

#index1{
  padding-top: 100px;
  margin-top: -100px;
}

2.页面缩放图片会遮挡住文字

解决方案：给div加一个 min-width

3.鼠标悬浮图片放大效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .test{
    width: 200px;
    height: 200px;
    background: orange;
    transition: all 0.4s;
    -moz-transition:all .4s;
    -webkit-transition:all .4s;
    -o-transition:all .4s;
    background-image: url("@/assets/aboutImg10.jpg");
    /* background: url('https://picsum.photos/300/600?random=5'); */
    background-repeat:no-repeat;   /* 不会重复 */
    background-position: center;   
    /* 是为了让图片放大的时候从中部放大，不会偏移 */
    background-size: 100% 100%;
  }
  .test:hover{
    background-size: 110% 110%;
  }
    </style>
</head>
<body>
    <div class="test"></div>
</body>
</html>

简化代码。此方法在简单html中试用，复杂vue项目最好用上图代码

      div img {
        cursor: pointer;
        transition: all 0.5s;
        width: 500px;
        height: 500px;
      }
      div img:hover {
        transform: scale(1.1);
      }