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

CSS 当前页面的selector

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

方案

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

所以可以给每个 ahref 加上一个 #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>