2021-04-17发表2023-10-19更新日常学习6 分钟读完 (大约897个字)

记一次失败的接单

学习，如果不是为了赚钱，有谁有动力呢？

需求详情：

昨天在 Q 群看到有人需要进行样式修改，于是我接下了这个任务，发现实际上只是爬取了一个网站的内容，但样式不符合要求。

我从描述中就能够看出这是一个路径问题，而当我收到任务包后，发现确实是路径问题。如大家所知，某些网页是通过加载来显示内容的，爬取后并不包含后续内容。

奇怪的是雇主只需样式，不需要 JavaScript 效果，但我们都知道，滚动图（轮播图）大多需要 JavaScript 的支持。因此，我告诉雇主需要修改 JavaScript 路径，并下载新的资源等。然而，雇主坚持只要效果。

所以，我简单地爬取了图片，修改了路径并发送了出去。不过，遗憾的是每个页面底部都有一块空白。当时我以为是我的问题，但后来发现是网站设置的。我想着直接修改 height 并添加 !important 可能会解决问题，但结果并不如预期。

之前看过许多文章和帖子，讲述了遇到扯皮的雇主有多糟糕，但没想到我第一个项目就遇到了一个。因为我没有实现效果，没有去除底部的空白，我当时以为是 JavaScript 的问题，因为我在控制台看到了大约20个错误。虽然雇主说我在扯，但我还是想试试看。所以今天早上继续查看网页，并采取了不同的方法，检查页面元素，包括height、top、bottom、padding、margin等属性，因为它们容易影响网页的格式。

height：我发现每个页面的 height 都是固定的，然后通过 JavaScript 来修改。我尝试为 div 元素添加了 height !important，但效果不明显。
top：今天早上我发现了 top 元素，我们都知道网页由头部和底部组成，所以我检查了头部，发现了问题。底部的 footer 设置了 top 为 1712px，而且我发现所有页面的 footer 都有这个设置。我简单地修改了这个设置，问题得以解决。

其实，一开始尝试修改 height 时我并没有成功，甚至添加了 !important 也没有效果，我当时觉得这太神奇了。然后我简单地添加了一个边框来测试效果，发现修改高度后，边框位置明显在变化，但内部元素没有变化，然后我注意到有浮动定位。所以，我很快就分析出问题出在底部元素上。

为什么昨晚没有想到呢？我认为是因为脑子被问题困住了，所以在编程时，不管何时卡住了，换个思路，出去散步一下，就可能找到其他解决方法。虽然我睡了一觉，但这个问题还是得以解决。

最终，我将修改后的结果发送给了雇主，尽管这个项目非常失败，但我还是从中学到了许多经验。

2020-12-16发表2023-10-19更新技术分享4 分钟读完 (大约632个字)

html实现图片旋转显示背面内容

其实说是HTML，实际上还是要通过CSS来实现具体效果的，毕竟实际上HTML是框架，而CSS则是填充框架的东西。这篇文章是介绍一个简单的案例，鼠标触碰图片，然后图片发生旋转，进而展现文字。

可以看一下动图演示:

html实现图片旋转显示背面内容

其实这个是通过transform旋转以及backface-visibiliity来实现图片隐藏的。

简单介绍一下这个HTML实现图片旋转显示背面文字的案例思路。

首先是创建一个框架，用来储存这些图片以及文字。然后将搭配的图片文字储存在同一个div里，用以日后的地位修改。然后接下来先将文字进行旋转180°，之后设置hover属性即可。之所以要设置先旋转180°是因为如果不设置的话，那么图片旋转之后实现的效果就会使反向的，文字变成反向的文字，而我们事先旋转后，再进行触碰旋转的话，则会使的文字正向了。

主要用到的还是上面两个属性，一个是transform: rotateY(180deg); 这个是设置内容旋转180°，然后再一个是backface-visibility: hidden; 这个是隐藏旋转的内容的背面，也就是你旋转之后，不会显示东西，这样子可以实现上面的效果了。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #0d3462;
    }
    .wutai {
        width: 760px;
        height: 220px;
        margin: 100px auto;
    }
    .fu {
        width: 170px;
        height: 190px;
        margin: 10px;
        transition: 1.5s;
        transform-style: preserve-3d;
        float: left;
        position: relative;
    }
    .fu:hover {
        transform: rotateY(180deg);
    }
    .box {
        /* position: absolute; */
        width: 170px;
        height: 190px;
        position: absolute;
    }
    .face {
        border: 2px solid #4b2518;
        backface-visibility: hidden;
    }
    .hip {
        border: 2px solid white;
        background-color: #4b2518;
        color: white;
        text-align: center;
        transform: rotateY(180deg);
        backface-visibility: hidden;
    }
</style>
<body>
    <div class="wutai">
        <div class="fu">
            <div class="box face">
                <img src="1.jpg" alt="">
            </div>
            <div class="box hip">
                <h3>浓缩咖啡</h3>
            </div>
        </div>
        <!-- 其他图片和文字部分 -->
    </div>
</body>

具体详情内容可以通过上面的代码进行自我测试，其实最容易实现效果的就是先全部复制上去，然后再将不明白的属性给加上注释，查看发生了什么变化，如果没有变化，可以先记下来然后继续注释别的内容，最后将实在不明白效果的复制到百度进行查询。

如果有什么不懂的可以在评论区留言，我会在看到的第一时间进行回复的。

2020-11-28发表2023-10-19更新技术分享3 分钟读完 (大约514个字)

为什么在div中加的是左浮动但是div会向右浮动

为什么在 div 中加的是左浮动但是 div 会向右浮动呢？这一点我相信有好多人都会遇到，至于原因，你懂的。因为我也遇到了，而且为此困惑了好久，不过我遇到的是我屏幕大的话，网页就会发生偏移，而我这种小屏却没什么事。之前右朋友跟我说过，但是一直没上心，今天晚上准备修复一下。

他这个浮动其实是因为在你的 div 之前的标签中也有使用浮动或者别的什么属性，导致该标签的位置发生变化，进而引发了它后面的标签也发生了偏移。我们解决的方法非常容易，只需要给偏移的第一个标签加上 clear 属性就行了。

先进行一下 gif 图片展示吧，

为什么在div中加的是左浮动但是div会向右浮动

如图，我们把 clear 这个属性给去掉，然后我们的内容就会发生偏移了，而我们加上，就会恢复正常了。这篇文章其实可以做一下之前那篇文章的反驳，哈哈，之前那是因为学的太少了，不过方法还算正确，但是判断的原因出错了，主要是当时解决了，所以后面就懒得想了，这次一道给正好了。之前那篇文章，说的是我删除栏目的时候，之后不论怎么修改页面的元素都会发生偏移，大概率就是因为这个浮动搞得鬼，不过我并没有进行测试哦，只是说一下，如果有朋友正好遇到这个问题可以尝试一下。最后说一下，只需要在我们不正常的标签加上 clear: both; 这个就行了。

2020-11-24发表2023-10-19更新日常学习7 分钟读完 (大约1076个字)

网页音乐播放器音乐播放器 html+css+js

首先准备工作为 jQuery、HTML、CSS、JavaScript，别的其实并不需要，而且其实 JavaScript 也不需要。最初是准备不使用 jQuery 的，但是发现用 jQuery 只需要几行代码就能实现的功能，而用原生的 JavaScript 却需要好多，而且也不容易实现，所以最后才准备使用 jQuery 了。

jQuery 的安装各位应该都会吧，如果不会的话，我放一下代码。通过使用 Node.js 来安装，在你的 JS 文件夹里按住 Shift 键并右键，选择打开 PowerShell 窗口，之后只需要输入 cnpm install jquery 即可，或者直接去中文站下载也行，这里不多讲述了。

音乐播放器

列表的点击显示和隐藏就是通过 jQuery 来实现的，很简单，如果使用 JavaScript 还是那句话，麻烦。

之后文字的打字机效果是通过 typed 这个库来实现的，GitHub 跳转链接。其实这个效果加不加都是无所谓的，只是好看了一丢丢而已，并且其实我的 CSS 只是随便写了一下，完全可以稍微优化一下 CSS。

目前的效果也就是点击列表的歌曲，会自动切换音乐和图像，然后上面的目前播放的名字也会换成该音乐的名字。这个网页实现音乐播放器的功能很容易，基本上一眼就能看懂了，后期可能会加一些别的效果，并且把样子做一下，搞一下 CSS。

以下是代码和一些简单的讲解：

// JS，名字我是叫的 music.js
// 记录图片和音乐以及正在播放的名字
var mslists = ['./music/jar_of_love.mp3', './music/see_you_again.mp3', './music/sunshine_in_the_rain.mp3'];
var imglists = ['http://p1.music.126.net/8jt2KnGDF0qMP9JbidOtVA==/573945069746475.jpg', 'http://p2.music.126.net/JIc9X91OSH-7fUZqVfQXAQ==/7731765766799133.jpg', 'http://p1.music.126.net/bHQlt-zzDQlsnPydiYKsHw==/109951165124500529.jpg'];
var namelists = ["Jar of love", 'See you again', 'Sunshine in the rain'];

// 点击隐藏和显示
$(".liebiao").click(function() {
  if ($(".msxulie").is(":hidden")) {
    $(".msxulie").show();
  } else {
    $(".msxulie").hide();
  }
});

// 文字效果
window.onload = function() {
  var typed = new Typed(".zzbf", {
    strings: ['', '音乐播放器正在播放:'],
    startDelay: 300,
    typeSpeed: 100,
    loop: true,
    backSpeed: 50,
    showCursor: true,
    cursorChar: '➼'
  });
}

// 点击切换音乐
$(".jol").click(function() {
  $(".mscontrol").attr("src", mslists[0]);
  $(".msimg").attr("src", imglists[0]);
  $(".msplayingtext").html(namelists[0]);
  $(".mscontrol")[0].play();
});

$(".sya").click(function() {
  $(".mscontrol").attr("src", mslists[1]);
  $(".msimg").attr("src", imglists[1]);
  $(".msplayingtext").html(namelists[1]);
  $(".mscontrol")[0].play();
});

$(".sitr").click(function() {
  $(".mscontrol").attr("src", mslists[2]);
  $(".msimg").attr("src", imglists[2]);
  $(".msplayingtext").html(namelists[2]);
  $(".mscontrol")[0].play();
});

下面是 CSS 代码，这个我是叫的 index.css：

/* 播放器位置 */
.msplayer {
  float: left;
  background-color: aqua;
  border-radius: 20%;
}

/* 播放器图片 */
.msplayer .msimg {
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* 播放器控制器 */
.msplayer .mscontrol {
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  width: 200px;
}

/* 播放器列表按钮 */
.msplayer .liebiao {
  position: relative;
  bottom: 25px;
}

/* 音乐列表 */
.msplayer .msxulie {
  text-align: center;
  width: 315.14px;
  position: absolute;
  display: block;
  background-color: bisque;
  top: 20px;
  left: 315.14px;
  border-radius: 20%;
  cursor: pointer;
}

/* 正在播放 */
.msplaying {
  position: absolute;
  top: 0px;
  left: 80px;
  font-size: 10px;
}

$(".mscontrol").attr("src",mslists[0]);
$(".msimg").attr("src",imglists[0]);
$(".msplayingtext").html(namelists[0]);
$(".mscontrol")[0].play();

第一行是获取 audio 的 src 值，把它设置为我们数组里的值，第二行是更改图片，第三行是修改名字，最后一行其实加不加无所谓的，就是一个自动播放效果，如果换歌就进行自动播放。

然后我那两行注释是修改那个 typed 的效果的，但是发现函数执行了就很难停止，所

以就给注释掉了，效果也是很容易的，就是将那个 typed 效果创建成一个函数，之后调用即可，然后在里面设置一个变量用于接受我们传递的参数就好了，不过目前来说不会怎么停止已经运行的函数，所以这个想法就搁浅了。

CSS 代码没什么难度吧，应该，就是简单的浮动定位效果，把列表给浮动过去，然后 HTML 也是没什么难度的，自己看一眼就好了。

如果有什么不懂的可以在评论区评论，我会在看到的第一时间回复的。

2020-11-19发表2023-10-19更新技术分享3 分钟读完 (大约404个字)

网站媒体查询@media详解

通过使用 @media 查询，可以针对不同的媒体类型来定义不同的样式。@media 可以根据不同的屏幕尺寸来设置不同的样式，特别是如果需要创建响应式的网页，@media 非常有用。当浏览器窗口大小改变时，页面会根据浏览器的宽度和高度进行重新渲染。

用法非常简单，例如：

@media screen and (max-width:1000px) {
    .topbox .logo {
        display: none;
    }
}

类似于上面的小例子，在CSS中设置了一个媒体查询，它会检查浏览器的宽度是否小于1000px，如果是，则执行查询块中的样式，从而实现不同屏幕大小下的不同页面显示。

然而，这种方法通常更适合小型网站。对于大型网站，通常会开发更复杂的自适应方法，例如淘宝和京东等，它们为了提供极致的用户体验会实施更高级的适配策略。

另一种简单的方法是在HTML中使用不同的CSS文件，根据不同的页面宽度引入不同的CSS文件，如下所示：

1 2	<link rel="stylesheet" media="screen and (max-width:1400px)" href="./css/public2.css"> <link rel="stylesheet" media="screen and (max-width:1000px)" href="./css/public3.css">

这样，不同的页面宽度将加载不同的CSS文件，实现了自适应效果。

如果需要更多关于 @media 查询的信息，推荐阅读菜鸟教程中关于CSS @media 查询的教程。如果有任何疑问，请随时在评论区提出，我会尽快回答。

记一次失败的接单

html实现图片旋转显示背面内容

为什么在div中加的是左浮动但是div会向右浮动

网页音乐播放器音乐播放器 html+css+js

网站媒体查询@media详解

链接

分类

最新文章

归档

标签

订阅更新

follow.it

记一次失败的接单

html实现图片旋转显示背面内容

为什么在div中加的是左浮动但是div会向右浮动

网页音乐播放器 音乐播放器 html+css+js

网站媒体查询@media详解

链接

分类

最新文章

归档

标签

订阅更新

follow.it

网页音乐播放器音乐播放器 html+css+js