这篇博客主要收录一些关于HTML,CSS,JS的知识点

CSS 当前页面的selector

假设我们有一个nav bar，有很多个link，我们希望检测当前在哪个页面，然后让当前页面对应的link的img更换一个，怎么办？（不使用javascript，仅用CSS）

方案

可以用CSS中的 Pseudo-classes 中的 target，当网页链接中存在 #some_id 时，所有 id = "some_id" 的tag就会变成 :target 的状态。

所以可以给每个 a 的 href 加上一个 #some_id，然后给 img 加上 id = some_id，如下：

HTML代码 
<nav>
  <div>
    <a href="index.html#index"><img src="images/1.jpg" id="index"></a>
    <a href="aboutus.html#about"><img src="images/2.jpg" id="about"></a>
    <a href="staff.html#staff"><img src="images/3.jpg" id="staff"></a>
  </div>
</nav>
CSS代码

这里以index为例：

nav > div > a[href*="index"] > img:target {
    content:url("images/index_selected.jpg");
}

参考链接

  1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target

HTML/CSS 手机字体大小不一

在手机上发现 font-size 相同的字体大小不一致，怎么办？

方案

  1. 在HTML文件前面加上

    <meta name="viewport" content="width=device-width, initial-scale=1">

  2. 添加上述代码后，网页中可能会出现 horizontal scrollbar。可以在css中添加：

    @media only screen and (max-width: 600px) {
   html, body {
     overflow-x: hidden;
   }
   body {
     position: relative;
   }
 }

    然后在 media query 里面调整一下字体大小，图片大小之类的属性，保证 overflow-x: hidden; 不会隐藏内容。

参考链接

  1. https://stackoverflow.com/questions/27074259/html-css-table-font-size-different-in-mobile-device
  2. https://stackoverflow.com/questions/4192277/disable-horizontal-scroll-on-mobile-web

Hot Reload 网页

使用 browser-sync 即可：

  1. npm install -g browser-sync
  2. browser-sync start --server --files "."

• 注意需要把HTML文件改名为 index.html。

动态网页（带PHP）

  1. cd 进到目标文件夹。
  2. 输入 php -S 127.0.0.1:8000。
  3. 输入 browser-sync start --proxy 127.0.0.1:8000 --files "./"。
  4. 在弹出的窗口中浏览（一般是 127.0.0.1:3000）

JQuery

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>