程序员经验分享-hwhale

Web开发权威指南笔记（一）

2023-11-17

书：Web开发权威指南，[美] Chris Aquino, Todd Gandee著。为1st实战项目Ottergram练习以及代码整理。全为个人借鉴本书产出，若需要转载请联系通知我，谢谢~

最终成果展示

第一章 配置开发环境

文档与参考资料

DevDocs API Documentation：Mozilla开发者网络（MDN）是HTML、CSS和JavaScript最好的参考文档。

HTML5 Please - Use the new and shiny responsibly：查询特性支持程度，查询该特性是否被推荐使用

Can I use... Support tables for HTML5, CSS3, etc：了解浏览器的那些版本支持某一特性时。

常用命令行

命令行：

查看当前地址，windows：echo %cd% Mac,linux: pwd

创建目录：mkdir+目录名称

切换目录：cd+目录名称（若为..返回上机）

列出目录中的文件：ls（+目录名称）

获取管理员权限：sudo

退出指令：ctrl+c

Node.js和browser-sync

  1. Node：自带功能node和npm

    node：运行JavaScript程序

    npm：在线安装开源开发工具

  2. browser-sync：修改并保存代码时，浏览器会自动重新加载，启动后会一直运行直到ctrl+c才能退出，完成项目之后最好退出。

    npm install -g browser-sync

第二章 开始第一个项目

代码展示

ottergram.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ottergram</title>
  <link rel="stylesheet" href="stylesheets/styles.css">
</head>
<body>
<header>
  <h1>ottergram</h1>
</header>
<ul>
  <li>
    <a href="#">
      <img src="img/otter1.png" alt="Barry the Otter">
      <span>Barry</span>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="img/otter2.png" alt="Robin the Otter">
      <span>Robin</span>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="img/otter3.png" alt="Maurice the Otter">
      <span>Maurice</span>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="img/otter4.png" alt="Lesley the Otter">
      <span>Lesley</span>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="img/otter5.png" alt="Barbara the Otter">
      <span>Barbara</span>
    </a>
  </li>
</ul>
</body>
</html>

第三章 为HTML添加样式

nomalize.css

让CSS代码在不同的浏览器上表现一致（不同浏览器都有一组默认样式）。访问normalize - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers，找到以.min.css结尾的文件。

normalize.css托管在cdnjs.com上，这是一个公共服务器，是内容分发网络（Content Delivery Network, CDN）的一部分。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ottergram</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
        <link rel="stylesheet" href="stylesheets/styles.css">
    </head>
....

颜色工具

色輪、調色盤產生器 | Adobe Color：Adobe提供了一个免费的在线工具帮助完成配色

关系选择器

类别 样例 解释
后代选择器 body span{/* style declarations */} 可以匹配body所有的后代span元素
子选择器 li > span{/* style declarations */} 匹配所有父元素为li的span元素
兄弟选择器 header ul{/* style declarations */} 匹配所有位于header后面的ul元素
相邻兄弟选择器 li + li{/* style declarations */} 匹配近邻li元素之后的li元素

优先级

优先级 - CSS（层叠样式表） | MDN (mozilla.org)：优先级介绍

Specificity Calculator (keegan.st)：优先级计算器是一个计算不同选择器优先级的遍历工具。

代码展示

ottergram.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ottergram</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
        <link rel="stylesheet" href="stylesheets/styles.css">
    </head>
    <body>
        <header>
            <h1 class="logo-text">ottergram</h1>
        </header>
        <ul class="thumbnail-list">
            <li class="thumbnail-item">
                <a href="#">
                    <img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
                    <span class="thumbnail-title">Barry</span>
                </a>
            </li>
            <li class="thumbnail-item">
                <a href="#">
                    <img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
                    <span class="thumbnail-title">Robin</span>
                </a>
            </li>
            <li class="thumbnail-item">
                <a href="#">
                    <img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
                    <span class="thumbnail-title">Maurice</span>
                </a>
            </li>
            <li class="thumbnail-item">
                <a href="#">
                    <img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
                    <span class="thumbnail-title">Lesley</span>
                </a>
            </li>
            <li class="thumbnail-item">
                <a href="#">
                    <img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
                    <span class="thumbnail-title">Barbara</span>
                </a>
            </li>
        </ul>
    </body>
</html>

styles.css

body {
    font-size: 10px;
    background: rgb(149, 194,215);
}
​
a {
    text-decoration: none;
}
​
.logo-text {
    background: white;
​
    text-align: center;
    text-transform: uppercase;
    font-size: 37px;
}
​
.thumbnail-item + .thumbnail-item {
    margin-top: 10px;
}
​
.thumbnail-item {
    display: block;
    border: 1px solid rgb(100%, 100%, 100%);
    border: 1px solid rgba(100%, 100%, 100%, 0.8);
}
​
.thumbnail-list {
    list-style: none;
    padding: 0;
}
​
.thumbnail-image {
    width: 100%;
    display: block;
}
​
.thumbnail-title {
    display: block;
    margin: 0;
    padding: 4px 10px;
​
    background: rgb(96, 125, 139);
    color: rgb(202, 238, 255);
​
    font-size: 18px;
}

第四章 flexbox响应式布局

代码展示

ottergram.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ottergram</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
        <link rel="stylesheet" href="stylesheets/styles.css">
    </head>
    <body>
        <header class="main-header">
            <h1 class="logo-text">ottergram</h1>
        </header>
        <main class="main-content">
            <ul class="thumbnail-list">
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
                        <span class="thumbnail-title">Barry</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
                        <span class="thumbnail-title">Robin</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
                        <span class="thumbnail-title">Maurice</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
                        <span class="thumbnail-title">Lesley</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
                        <span class="thumbnail-title">Barbara</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
                        <span class="thumbnail-title">Barry</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
                        <span class="thumbnail-title">Robin</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
                        <span class="thumbnail-title">Maurice</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
                        <span class="thumbnail-title">Lesley</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
                        <span class="thumbnail-title">Barbara</span>
                    </a>
                </li>
            </ul>
            <div class="detail-image-container">
                <div class="detail-image-frame">
                    <img class="detail-image" src="img/otter1.png" alt="">
                    <span class="detail-image-title">Stayin' Alive</span>
                </div>
            </div>
        </main>
    </body>
</html>

styles.css

@font-face {
    font-family: 'josefinsans';
    src: url("fonts/JosefinSans-Bold.ttf");
    font-weight: normal;
    font-style: normal;
}
html, body {
    height: 100%; /*高度设置为100%，允许内容填满浏览器或设备窗口*/
}
​
body {
    display: flex; /*flex声明，将body变为flex容器*/
    flex-direction: column; /*对调了flex容器的主轴和侧轴*/
​
    font-size: 10px;
    background: rgb(149, 194,215);
}
​
a {
    text-decoration: none;
}
​
.main-header {
    flex: 0 1 auto; /*无需进行拉伸，如有必要将会收缩，自动计算大小*/
}
​
.logo-text {
    background: white;
​
    text-align: center;
    text-transform: uppercase;
    font-size: 37px;
}
​
.main-content {
    flex: 1 1 auto; /*第一个值对应flex-grow属性，值为1意味着会尽可能拉伸,flex: flex-grow flex-shrink flex-basis*/
    display: flex;
    flex-direction: column;
}
​
.thumbnail-item {
    display: inline-block; /*元素盒子会如display: inline-block一般呈现，但不会产生换行*/
    /*width: 120px;!*共同的父元素设置宽度，内部元素根据容器自适应*!*/
    min-width:120px; /*修复图片尺寸不一致导致的布局问题*/
    max-width:120px;
    border: 1px solid rgb(100%, 100%, 100%);
    border: 1px solid rgba(100%, 100%, 100%, 0.8);
}
​
.thumbnail-list {
    flex: 0 1 auto;
    order: 2; /*使用源顺序，包括附属在内的其他值则告诉浏览器将该flex项目之余其他项目之前或之后*/
    display: flex;
    justify-content: space-between; /*决定flex容器如何控制flex项目在主轴方向上的绘制方式。使用space-between值，保证每个flex项目之间的空隙是相等的。*/
    list-style: none;
    padding: 0;
​
    white-space: nowrap; /*声明禁止.thumbnail-item元素换行*/
    overflow-x: auto; /*告诉浏览器，在.thumbnail-list元素的水平方向（X轴）上添加滚动，以容纳超出的部分，若没有此声明，则需要滚动整个页面方能看到超出部分*/
}
​
.thumbnail-image {
    width: 100%;
    display: block;
}
​
.thumbnail-title {
    display: block;
    margin: 0;
    padding: 4px 10px;
​
    background: rgb(96, 125, 139);
    color: rgb(202, 238, 255);
​
    font-size: 18px;
}
​
.detail-image-container {
    flex: 1 1 auto;
    display: flex;
    justify-content: center; /*使其flex项目沿主轴方向居中（在本例中，也就是默认的水平方向）。*/
    align-items: center; /*使flex项目在侧轴方向（垂直方向)上居中*/
}
​
.detail-image-frame {
    position: relative; /*既需要将它保留在常规文档流中，又需要它作为绝对定位元素的容器，因此position属性必须显示定义*/
    text-align: center; /*无须flexbox即可实现的剧种方式，但只能是水平居中*/
}
.detail-image {
    width: 90%;
}
.detail-image-title {
    position: absolute;
    bottom: -16px;
    left: 4px;
​
    font-family: josefinsans, serif;
    color: white;
    text-shadow: rgba(0,0,0,0.9) 1px 2px 9px; /*接收一个颜色值为阴影颜色，一个偏移量（决定阴影的上下左右位置），以及一个模糊半径值（该值是可选的，值越大则阴影越大，颜色越亮）*/
    font-size: 40px;
}

第五章 使用媒体查询完成自适应布局

延展阅读：flexbox布局通用解决方案

Solved by Flexbox — Cleaner, hack-free CSS (philipwalton.github.io)：该网站提供了用flexbox实现常见布局的demo以及创建他们所需的信息。不用flexbox的话，其中某些布局真的很难实现。

GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.：提供开发者使用flexbox时遇到的常见问题的解决方案和变通方法。这些信息有社区中遇到问题的开发者提供，列表也得到了很好的维护。

代码展示

 

 ottergram.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> <!--告知浏览器布局视口的宽度与设备屏款相同。initial-scale值设为1，使页面缩放值为100%。有了meta元素后，就能够在这能收集这样的小屏幕上完整展示-->
        <title>ottergram</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
        <link rel="stylesheet" href="stylesheets/styles.css">
    </head>
    <body>
        <header class="main-header">
            <h1 class="logo-text">ottergram</h1>
        </header>
        <main class="main-content">
            <ul class="thumbnail-list">
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
                        <span class="thumbnail-title">Barry</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
                        <span class="thumbnail-title">Robin</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
                        <span class="thumbnail-title">Maurice</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
                        <span class="thumbnail-title">Lesley</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
                        <span class="thumbnail-title">Barbara</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
                        <span class="thumbnail-title">Barry</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
                        <span class="thumbnail-title">Robin</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
                        <span class="thumbnail-title">Maurice</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
                        <span class="thumbnail-title">Lesley</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="#">
                        <img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
                        <span class="thumbnail-title">Barbara</span>
                    </a>
                </li>
            </ul>
            <div class="detail-image-container">
                <div class="detail-image-frame">
                    <img class="detail-image" src="img/otter1.png" alt="">
                    <span class="detail-image-title">Stayin' Alive</span>
                </div>
            </div>
        </main>
    </body>
</html>

styles.css

@font-face {
    font-family: 'josefinsans';
    src: url("fonts/JosefinSans-Bold.ttf");
    font-weight: normal;
    font-style: normal;
}
html, body {
    height: 100%; /*高度设置为100%，允许内容填满浏览器或设备窗口*/
}
​
body {
    display: flex; /*flex声明，将body变为flex容器*/
    flex-direction: column; /*对调了flex容器的主轴和侧轴*/
​
    font-size: 10px;
    background: rgb(149, 194,215);
}
​
a {
    text-decoration: none;
}
​
.main-header {
    flex: 0 1 auto; /*无需进行拉伸，如有必要将会收缩，自动计算大小*/
}
​
.logo-text {
    background: white;
​
    text-align: center;
    text-transform: uppercase;
    font-size: 37px;
}
​
.main-content {
    flex: 1 1 auto; /*第一个值对应flex-grow属性，值为1意味着会尽可能拉伸,flex: flex-grow flex-shrink flex-basis*/
    display: flex;
    flex-direction: column;
}
​
.thumbnail-item {
    display: inline-block; /*元素盒子会如display: inline-block一般呈现，但不会产生换行*/
    /*width: 120px;!*共同的父元素设置宽度，内部元素根据容器自适应*!*/
    min-width:120px; /*修复图片尺寸不一致导致的布局问题*/
    max-width:120px;
    border: 1px solid rgb(100%, 100%, 100%);
    border: 1px solid rgba(100%, 100%, 100%, 0.8);
}
​
.thumbnail-list {
    flex: 0 1 auto;
    order: 2; /*使用源顺序，包括附属在内的其他值则告诉浏览器将该flex项目之余其他项目之前或之后*/
    display: flex;
    justify-content: space-between; /*决定flex容器如何控制flex项目在主轴方向上的绘制方式。使用space-between值，保证每个flex项目之间的空隙是相等的。*/
    list-style: none;
    padding: 0;
​
    white-space: nowrap; /*声明禁止.thumbnail-item元素换行*/
    overflow-x: auto; /*告诉浏览器，在.thumbnail-list元素的水平方向（X轴）上添加滚动，以容纳超出的部分，若没有此声明，则需要滚动整个页面方能看到超出部分*/
}
​
.thumbnail-image {
    width: 100%;
    display: block;
}
​
.thumbnail-title {
    display: block;
    margin: 0;
    padding: 4px 10px;
​
    background: rgb(96, 125, 139);
    color: rgb(202, 238, 255);
​
    font-size: 18px;
}
​
.detail-image-container {
    flex: 1 1 auto;
    display: flex;
    justify-content: center; /*使其flex项目沿主轴方向居中（在本例中，也就是默认的水平方向）。*/
    align-items: center; /*使flex项目在侧轴方向（垂直方向)上居中*/
}
​
.detail-image-frame {
    position: relative; /*既需要将它保留在常规文档流中，又需要它作为绝对定位元素的容器，因此position属性必须显示定义*/
    text-align: center; /*无须flexbox即可实现的剧种方式，但只能是水平居中*/
}
.detail-image {
    width: 90%;
}
.detail-image-title {
    position: absolute;
    bottom: -16px;
    left: 4px;
​
    font-family: josefinsans, serif;
    color: white;
    text-shadow: rgba(0,0,0,0.9) 1px 2px 9px; /*接收一个颜色值为阴影颜色，一个偏移量（决定阴影的上下左右位置），以及一个模糊半径值（该值是可选的，值越大则阴影越大，颜色越亮）*/
    font-size: 40px;
}
​
@media all and (min-width: 768px) { /*当设备宽度在768ox（通常是平板电脑的宽度）及以上是，我们新增的媒体查询样式就会生效*/
    .main-content {
        flex-direction: row;
        overflow: hidden; /*不希望缩略图列表导致浏览器滚动，而是独立于浏览器窗口滚动*/
    }
    .thumbnail-list {
        flex-direction: column;
        order: 0; /*以前我们将order设置为2，使.thumbnail-list显示在.detail-image-container下方。现在，设为0，以便它遵循源顺序。*/
        margin-left: 20px;
    }
​
    .thumbnail-item {
        max-width: 250px;
    }
​
    .thumbnail-item + .thumbnail-item {
        margin-top: 20px;
    }
​
}

第六章 Javascript事件处理

添加时间监听器

Event reference | MDN (mozilla.org)：完整的事件列表

严格模式

Strict mode - JavaScript | MDN (mozilla.org)：更多有关严格模式的内容

代码展示

 

 ottergram.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--告知浏览器布局视口的宽度与设备屏款相同。initial-scale值设为1，使页面缩放值为100%。有了meta元素后，就能够在这能收集这样的小屏幕上完整展示-->
        <title>ottergram</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
        <link rel="stylesheet" href="stylesheets/styles.css">
    </head>
    <body>
        <header class="main-header">
            <h1 class="logo-text">ottergram</h1>
        </header>
        <main class="main-content">
            <ul class="thumbnail-list">
                <li class="thumbnail-item">
                    <a href="img/otter1.png" data-image-role="trigger"
                       data-image-title="Stayin' Alive"
                       data-image-url="img/otter1.png">
                        <img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
                        <span class="thumbnail-title">Barry</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter2.png" data-image-role="trigger"
                       data-image-title="How Deep Is Your Love"
                       data-image-url="img/otter2.png">
                        <img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
                        <span class="thumbnail-title">Robin</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter3.png" data-image-role="trigger"
                       data-image-title="You Should Be Dancing"
                       data-image-url="img/otter3.png">
                        <img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
                        <span class="thumbnail-title">Maurice</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter4.png" data-image-role="trigger"
                       data-image-title="Night Fever"
                       data-image-url="img/otter4.png">
                        <img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
                        <span class="thumbnail-title">Lesley</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter5.png" data-image-role="trigger"
                       data-image-title="To Love Somebody"
                       data-image-url="img/otter5.png">
                        <img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
                        <span class="thumbnail-title">Barbara</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter1.png" data-image-role="trigger"
                       data-image-title="Stayin' Alive"
                       data-image-url="img/otter1.png">
                        <img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
                        <span class="thumbnail-title">Barry</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter2.png" data-image-role="trigger"
                       data-image-title="How Deep Is Your Love"
                       data-image-url="img/otter2.png">
                        <img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
                        <span class="thumbnail-title">Robin</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter3.png" data-image-role="trigger"
                       data-image-title="You Should Be Dancing"
                       data-image-url="img/otter3.png">
                        <img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
                        <span class="thumbnail-title">Maurice</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter4.png" data-image-role="trigger"
                       data-image-title="Night Fever"
                       data-image-url="img/otter4.png">
                        <img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
                        <span class="thumbnail-title">Lesley</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter5.png" data-image-role="trigger"
                       data-image-title="To Love Somebody"
                       data-image-url="img/otter5.png">
                        <img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
                        <span class="thumbnail-title">Barbara</span>
                    </a>
                </li>
            </ul>
            <div class="detail-image-container">
                <div class="detail-image-frame">
                    <img class="detail-image" data-image-role="target" src="img/otter1.png" alt="">
                    <span class="detail-image-title" data-image-role="title">Stayin' Alive</span>
                </div>
            </div>
        </main>
        <script src="scripts/main.js" charset="UTF-8"></script>
    </body>
</html>

main.js

var DETAIL_IMAGE_SELECTOR = '[data-image-role="target"]';
var DETAIL_TITLE_SELECTOR = '[data-image-role="title"]';
var THUMBNAIL_LINK_SELECTOR = '[data-image-role="trigger"]';
var otterOneImage = "img/otter1.png";
var otterOneTitle = "Stayin\' Alive";
​
function setDetails(imageUrl, titleText) {
    'use strict';
    var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR); //获取大图的引用
    detailImage.setAttribute('src', imageUrl); //传递两个字符串，属性名和新的值
​
    var detailTitle = document.querySelector(DETAIL_TITLE_SELECTOR);
    detailTitle.textContent = titleText; //指的是一个元素内部的文本（不包括HTML标签）
}
​
function imageFromThumb(thumbnail) {
    'use strict';
    return thumbnail.getAttribute('data-image-url');
}
​
function titleFromThumb(thumbnail) {
    'use strict';
    return thumbnail.getAttribute('data-image-title');
}
​
function setDetailsFromThumb(thumbnail) {
    'use strict';
    setDetails(imageFromThumb(thumbnail), titleFromThumb(thumbnail)); //在setDetails真正被调用前，它的参数会先还原为最简单的值。
}
​
function addThumbClickHandler(thumb) {    //回调函数的参数名不一定是event，最好使用描述性的名字
    'use strict';
    thumb.addEventListener('click', function(event) {
        event.preventDefault(); //可以阻止链接让浏览器跳到另一个页面
        setDetailsFromThumb(thumb);
    });
}
​
function getThumbnailsArray() { //检索匹配THUMBNAIL_LINK_SELECTOR元素的结果，赋值给thumbnails变量
    'use strict';
    var thumbnails = document.querySelectorAll(THUMBNAIL_LINK_SELECTOR); //返回的是一个节点列表，不是数组
    var thumbnailArray = [].slice.call(thumbnails); //将返回的节点列表转换为一个数组。将节点列表转为数组的向后兼容的方式
    return thumbnailArray;
}
​
function initializeEvents() { //该方法会把所有步骤联系起来，从而具有交互性。首先获取缩略图数组，然后遍历整个数组，给其中每个元素添加点击事件处理程序
    'use strict';
    var thumbnails = getThumbnailsArray(); //将结果（缩略图数组）赋值给一个行为thumbnails的变量
    thumbnails.forEach(addThumbClickHandler); //不是一个好办法，不过在目前这样做不会引发错误，addThumbClickHandler函数只需要在foreach函数调用它时传递他的信息（thumbnails数组中的一个元素）
}
initializeEvents();

第七章 使用CSS营造视觉效果

变形

transform - CSS | MDN (mozilla.org)：可以用到很多其它的值，包括最新的3D效果，可以找到很好的说明。

使用定时函数

transition-timing-function - CSS | MDN (mozilla.org)：定时函数除了ease-in-out，还有很多可供使用的定时函数。

自定义定时函数

cubic-bezier(.17,.67,.83,.67) ✿ cubic-bezier.com：实用工具，自定义时间函数变得轻松愉快许多

延展阅读：强制类型转化的规则

相等比較 - JavaScript | MDN (mozilla.org)

代码展示

ottergram.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--告知浏览器布局视口的宽度与设备屏款相同。initial-scale值设为1，使页面缩放值为100%。有了meta元素后，就能够在这能收集这样的小屏幕上完整展示-->
        <title>ottergram</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
        <link rel="stylesheet" href="stylesheets/styles.css">
    </head>
    <body>
        <header class="main-header">
            <h1 class="logo-text">ottergram</h1>
        </header>
        <main class="main-content">
            <ul class="thumbnail-list">
                <li class="thumbnail-item">
                    <a href="img/otter1.png" data-image-role="trigger"
                       data-image-title="Stayin' Alive"
                       data-image-url="img/otter1.png">
                        <img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
                        <span class="thumbnail-title">Barry</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter2.png" data-image-role="trigger"
                       data-image-title="How Deep Is Your Love"
                       data-image-url="img/otter2.png">
                        <img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
                        <span class="thumbnail-title">Robin</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter3.png" data-image-role="trigger"
                       data-image-title="You Should Be Dancing"
                       data-image-url="img/otter3.png">
                        <img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
                        <span class="thumbnail-title">Maurice</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter4.png" data-image-role="trigger"
                       data-image-title="Night Fever"
                       data-image-url="img/otter4.png">
                        <img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
                        <span class="thumbnail-title">Lesley</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter5.png" data-image-role="trigger"
                       data-image-title="To Love Somebody"
                       data-image-url="img/otter5.png">
                        <img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
                        <span class="thumbnail-title">Barbara</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter1.png" data-image-role="trigger"
                       data-image-title="Stayin' Alive"
                       data-image-url="img/otter1.png">
                        <img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
                        <span class="thumbnail-title">Barry</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter2.png" data-image-role="trigger"
                       data-image-title="How Deep Is Your Love"
                       data-image-url="img/otter2.png">
                        <img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
                        <span class="thumbnail-title">Robin</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter3.png" data-image-role="trigger"
                       data-image-title="You Should Be Dancing"
                       data-image-url="img/otter3.png">
                        <img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
                        <span class="thumbnail-title">Maurice</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter4.png" data-image-role="trigger"
                       data-image-title="Night Fever"
                       data-image-url="img/otter4.png">
                        <img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
                        <span class="thumbnail-title">Lesley</span>
                    </a>
                </li>
                <li class="thumbnail-item">
                    <a href="img/otter5.png" data-image-role="trigger"
                       data-image-title="To Love Somebody"
                       data-image-url="img/otter5.png">
                        <img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
                        <span class="thumbnail-title">Barbara</span>
                    </a>
                </li>
            </ul>
            <div class="detail-image-container">
                <div class="detail-image-frame" data-image-role="frame">
                    <img class="detail-image" data-image-role="target" src="img/otter1.png" alt="">
                    <span class="detail-image-title" data-image-role="title">Stayin' Alive</span>
                </div>
            </div>
        </main>
        <script src="scripts/main.js" charset="UTF-8"></script>
    </body>
</html>

styles.css

@font-face {
    font-family: 'josefinsans';
    src: url("fonts/JosefinSans-Bold.ttf");
    font-weight: normal;
    font-style: normal;
}
html, body {
    height: 100%; /*高度设置为100%，允许内容填满浏览器或设备窗口*/
}
​
body {
    display: flex; /*flex声明，将body变为flex容器*/
    flex-direction: column; /*对调了flex容器的主轴和侧轴*/
​
    font-size: 10px;
    background: rgb(149, 194,215);
}
​
a {
    text-decoration: none;
}
​
.main-header {
    flex: 0 1 auto; /*无需进行拉伸，如有必要将会收缩，自动计算大小*/
}
​
.logo-text {
    background: white;
​
    text-align: center;
    text-transform: uppercase;
    font-size: 37px;
}
​
.main-content {
    flex: 1 1 auto; /*第一个值对应flex-grow属性，值为1意味着会尽可能拉伸,flex: flex-grow flex-shrink flex-basis*/
    display: flex;
    flex-direction: column;
}
​
.thumbnail-item {
    display: inline-block; /*元素盒子会如display: inline-block一般呈现，但不会产生换行*/
    /*width: 120px;!*共同的父元素设置宽度，内部元素根据容器自适应*!*/
    min-width:120px; /*修复图片尺寸不一致导致的布局问题*/
    max-width:120px;
    border: 1px solid rgb(100%, 100%, 100%);
    border: 1px solid rgba(100%, 100%, 100%, 0.8);
    transition: transform 133ms ease-in-out; /*告诉浏览器这段样式变化要以动画形式来表现，并且动画的样式是transform。另外，代码中还指定了过度动画应该持续133毫秒。ease-in-out让过度动画的速度在开始和结束时较慢而中间较快*/
}
​
/*添加过渡效果*/
.thumbnail-item:hover { /*伪类:hover会在用户的鼠标悬停在某一元素上时与其匹配。*/
    /*变形*/
    transform: scale(1.2); /*告诉浏览器该元素需要显示为原尺寸的120%，还可以用到很多其它的值，包括最新的3D效果*/
}
​
.thumbnail-list {
    flex: 0 1 auto;
    order: 2; /*使用源顺序，包括附属在内的其他值则告诉浏览器将该flex项目之余其他项目之前或之后*/
    display: flex;
    justify-content: space-between; /*决定flex容器如何控制flex项目在主轴方向上的绘制方式。使用space-between值，保证每个flex项目之间的空隙是相等的。*/
    list-style: none;
    padding: 20px 0; /*使用了内边距的简写写法，前面的值:上内边距和下内边距的值，后面的值：左内边距和右内边距的值*/
​
    white-space: nowrap; /*声明禁止.thumbnail-item元素换行*/
    overflow-x: auto; /*告诉浏览器，在.thumbnail-list元素的水平方向（X轴）上添加滚动，以容纳超出的部分，若没有此声明，则需要滚动整个页面方能看到超出部分*/
}
​
.thumbnail-image {
    width: 100%;
    display: block;
}
​
.thumbnail-title {
    display: block;
    margin: 0;
    padding: 4px 10px;
​
    background: rgb(96, 125, 139);
    color: rgb(202, 238, 255);
​
    font-size: 18px;
}
​
.detail-image-container {
    flex: 1 1 auto;
    display: flex;
    justify-content: center; /*使其flex项目沿主轴方向居中（在本例中，也就是默认的水平方向）。*/
    align-items: center; /*使flex项目在侧轴方向（垂直方向)上居中*/
}
​
.detail-image-frame {
    position: relative; /*既需要将它保留在常规文档流中，又需要它作为绝对定位元素的容器，因此position属性必须显示定义*/
    text-align: center; /*无须flexbox即可实现的剧种方式，但只能是水平居中*/
    transition: transform 333ms cubic-bezier(.78,.1,.21,.89); /*这个值将从.is-tiny类的样式过渡到下一个样式的动画效果，即在三分之一秒内将大图放大到正常尺寸*/
}
​
.is-tiny { /*大图实际上是没有过度动画效果的，因为持续时间为0毫秒，没有表为其指定定时函数*/
    transform: scale(0.001);
    transition: transform 0ms;
}
.detail-image {
    width: 90%;
}
.detail-image-title {
    position: absolute;
    bottom: -16px;
    left: 4px;
​
    font-family: josefinsans, serif;
    color: white;
    text-shadow: rgba(0,0,0,0.9) 1px 2px 9px; /*接收一个颜色值为阴影颜色，一个偏移量（决定阴影的上下左右位置），以及一个模糊半径值（该值是可选的，值越大则阴影越大，颜色越亮）*/
    font-size: 40px;
}
​
.hidden-detail .detail-image-container { /*为了隐藏.detail-image-container，告诉浏览器该元素不应该被渲染，将被动态加入body的雷明伟hidden-detail。因此，仅当.detail-image-container为.hidden-detail.的后代时才需要应用*/
    display: none;
}
​
.hidden-detail .thumbnail-list { /*当.thumbnail-list成为.hidden-detail的后代时，这些新添加的样式将会被激活*/
    flex-direction: column;
    align-items: center;
}
​
.hidden-detail .thumbnail-item { /*当.thumbnail-item成为.hidden-detail的后代时，这些新添加的样式将会被激活*/
    max-width: 80%;
}
​
@media all and (min-width: 768px) { /*当设备宽度在768ox（通常是平板电脑的宽度）及以上是，我们新增的媒体查询样式就会生效*/
    .main-content {
        flex-direction: row;
        overflow: hidden; /*不希望缩略图列表导致浏览器滚动，而是独立于浏览器窗口滚动*/
    }
    .thumbnail-list {
        flex-direction: column;
        order: 0; /*以前我们将order设置为2，使.thumbnail-list显示在.detail-image-container下方。现在，设为0，以便它遵循源顺序。*/
        margin-left: 20px;
​
        padding: 0 35px;
    }
​
    .thumbnail-item {
        max-width: 250px;
    }
​
    .thumbnail-item + .thumbnail-item {
        margin-top: 20px;
    }
​
}

main.js

var DETAIL_IMAGE_SELECTOR = '[data-image-role="target"]';
var DETAIL_TITLE_SELECTOR = '[data-image-role="title"]';
var DETAIL_FRAME_SELECTOR = '[data-image-role="frame"]';
var THUMBNAIL_LINK_SELECTOR = '[data-image-role="trigger"]';
var HIDDEN_DETAIL_CLASS = 'hidden-detail';
var TINY_EFFECT_CLASS = 'is-tiny';
var ESC_KEY = 27;
​
function setDetails(imageUrl, titleText) {
    'use strict';
    var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR); //获取大图的引用
    detailImage.setAttribute('src', imageUrl); //传递两个字符串，属性名和新的值
​
    var detailTitle = document.querySelector(DETAIL_TITLE_SELECTOR);
    detailTitle.textContent = titleText; //指的是一个元素内部的文本（不包括HTML标签）
}
​
function imageFromThumb(thumbnail) {
    'use strict';
    return thumbnail.getAttribute('data-image-url');
}
​
function titleFromThumb(thumbnail) {
    'use strict';
    return thumbnail.getAttribute('data-image-title');
}
​
function setDetailsFromThumb(thumbnail) {
    'use strict';
    setDetails(imageFromThumb(thumbnail), titleFromThumb(thumbnail)); //在setDetails真正被调用前，它的参数会先还原为最简单的值。
}
​
function addThumbClickHandler(thumb) {    //回调函数的参数名不一定是event，最好使用描述性的名字
    'use strict';
    thumb.addEventListener('click', function(event) {
        event.preventDefault(); //可以阻止链接让浏览器跳到另一个页面
        setDetailsFromThumb(thumb);
        showDetails();  //当一张缩略图被点击时，可以使用classList.remove来删除添加进去的类名
    });
}
​
function getThumbnailsArray() { //检索匹配THUMBNAIL_LINK_SELECTOR元素的结果，赋值给thumbnails变量
    'use strict';
    var thumbnails = document.querySelectorAll(THUMBNAIL_LINK_SELECTOR); //返回的是一个节点列表，不是数组
    var thumbnailArray = [].slice.call(thumbnails); //将返回的节点列表转换为一个数组。将节点列表转为数组的向后兼容的方式
    return thumbnailArray;
}
​
function hideDetails() {
    'use strict';
    document.body.classList.add(HIDDEN_DETAIL_CLASS); //document.body属性访问body元素，这个DOM元素与body标签对应，调用add方法向body添加hidden-detail类
}
function showDetails() {
    'use strict';
    var frame = document.querySelector(DETAIL_FRAME_SELECTOR); //取得元素[data-image="frame"]的引用
    document.body.classList.remove(HIDDEN_DETAIL_CLASS);
    frame.classList.add(TINY_EFFECT_CLASS); //为了触发transition类，需要先添加TINY_EFFECT_CLASS后删除
    setTimeout(function (){ //浏览器等待50毫秒之后向自己的执行队列中加入一个匿名函数。
        frame.classList.remove(TINY_EFFECT_CLASS);
    }, 50);
​
}
​
function addKeyPressHandler() {
    'use strict';
    document.body.addEventListener('keyup', function (event) {
        event.preventDefault();
        console.log(event.keyCode);
        if(event.keyCode === ESC_KEY) { //只希望在按下ESC键，而非按下任意键时隐藏大图。
            hideDetails();
        }
    })
}
function initializeEvents() { //该方法会把所有步骤联系起来，从而具有交互性。首先获取缩略图数组，然后遍历整个数组，给其中每个元素添加点击事件处理程序
    'use strict';
    var thumbnails = getThumbnailsArray(); //将结果（缩略图数组）赋值给一个行为thumbnails的变量
    thumbnails.forEach(addThumbClickHandler); //不是一个好办法，不过在目前这样做不会引发错误，addThumbClickHandler函数只需要在foreach函数调用它时传递他的信息（thumbnails数组中的一个元素）
    addKeyPressHandler();
}
initializeEvents();

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

javascript

开发语言

Web开发权威指南笔记（一） 的相关文章

随机推荐

  • 你能写一个AIGC的python程序

    当然 我可以为您编写一个使用 Python 编写的 AIGC 程序 AIGC Artificial Intelligence Game Competition 是一种人工智能竞赛 其中参赛者需要编写人工智能程序 让其在模拟或真实游戏中进行操

  • linux服务器端启动NFS报“Job for nfs-server.service canceled.”的解决办法

    linux服务器端启动NFS报 Job for nfs server service canceled 的解决办法 网上百度了好久都没找到这个报错的原因 白嫖失败 打开linux的系统日志 tail f var log messages 再

  • CppUnit测试框架入门

    测试驱动开发 TDD 是以测试作为开发过程的中心 它坚持 在编写实际代码之前 先写好基于产品代码的测试代码 开发过程的目标就是首先使测试能够通过 然后再优化设计结构 测试驱动开发式是极限编程的重要组成部分 XUnit 一个基于测试驱动开发的

  • Spring Boot学习（一）之Controller的使用

    Controller 处理http请求 RestController RestController注解相当于 ResponseBody Controller合在一起的作用 Spring4之后新加入的注解 原来返回json需要 Respons

  • Pydantic系列之Model

    Model类 Python泛型类 TypeVar 是一个泛型类型变量 使用 bound 参数来限制所生成的类型的继承关系 from typing import Generic TypeVar from pydantic import Bas

  • Windows使用cmake编译dll

    目录 工具 注意事项 工具 CMake MinGW CMake工具负责将CMakeLists txt配置文件转换成相关的MakeFile脚本 本身并不参与编译 而是使用MinGW工具进行编译 在Linux系统使用CMake编译需要执行以下命

  • HashMap 面试题 11 问，看这篇就够了

    1 请你说说 HashMap 的数据结构有什么区别 jdk1 7 采用的是数组 链表结构 在 jdk1 8 采用数组 链表 红黑树的结构 2 上面说到 jdk1 8 之后增加了红黑树 什么 情况下转红黑树 什么情况下又转链表的 1 当链表的

  • 错误隐藏学习手记（三）

    帧内错误隐藏算法集合 1 空间加权像素平均算法 加权像素平均插值算法 P0就是丢失的宏块 灰色的是最近的像素点 2 方向插值 1 边缘检测及梯度计算 使用Sobel算子 计算的是Sx和Sy 水平边缘和垂直边缘 下图中 a b c d是缺失的

  • android:configChanges属性总结

    http blog csdn net zhaokaiqiang1992 article details 19921703 android中的组件Activity在manifest xml文件中可以指定参数android ConfigChan

  • 查看aspx文件安装什么服务器,aspx文件怎么打开?手把手教你怎么打开aspx文件

    原标题 aspx文件怎么打开 手把手教你怎么打开aspx文件 在电脑里面 有许多不同格式的文件 而不同文件的打开方法也不一样 比如最近就有位朋友看见了一个aspx文件 不知道怎么打开 其实 打开aspx文件很简单 只要右键 aspx文件 选

  • 微信小程序退出重新进入时跳转特定页面

    微信小程序退出时会记录当前页面的状态 短时间内再次进入会显示退出前的状态 解决方案 在app js文件中添加onHide方法 onHide方法监听小程序切后台 在app js文件中使用会在每次程序退出时调用 onLaunch functio

  • php 实现抽奖功能

    记录借载 核心算法

  • 华为ipd产品开发流程_IPD模式下的产品开发流程

    IPD产品开发流程体系 IPD产品开发流程体系来源于美国PRTM公司的 产品生命周期优化法 该体系集成了多个迄今为止最好的产品开发实践方法 也就是其来源于实践活动 反过来去指导实践 据PRTM公司统计 通过成功实施IPD 产品投入市场时间缩

  • Java中对象比较的三种方式

    一 针对对象值是否相等的比较 和 equals 的区别 当我们提到比较值的时候 大多数人都会想到 因为在一般情况下 人们对于比较的概念中 数字比较的应用场景出现频率是最多的 首先我们创建一个类 之后新建这个类的对象来进行比较验证 class

  • DDR中的ZQ校准

    转载自https www xuebuyuan com 3233906 html What s the ZQ Calibration command it used to calibrate DRAM Ron ODT values In no

  • Maven程序 tomcat插件安装与web工程启动

    第一步 在mvnrepository库中找到tomcat插件 1 打开mvnrepository官网 搜索 tomcat maven 向下滑动找到 org apache tomcat maven 点进去 2 在这里点第一个 Apache T

  • 基于Matlab的随机森林算法实现（附算法介绍及代码详解）

    本算例完整代码领取方式在文末展示 一 内容提要 在地学领域中 岩性的准确识别对于储层评价来说至关重要 因此 今天笔者想要分享的是随机森林算法在岩性识别中的应用与代码实现 科普中国 科学百科定义 随机森林 Random forest 指的是利

  • 一文学会目前最火热的大数据技术

    欢迎大家前往腾讯云 社区 获取更多腾讯海量技术实践干货哦 本文由michelmu发表于云 社区专栏 Elasticsearch是当前主流的分布式大数据存储和搜索引擎 可以为用户提供强大的全文本检索能力 广泛应用于日志检索 全站搜索等领域 L

  • C程序运行步骤

    1 首先输入和编辑源程序 生成 c文件 2 对源程序进行编译 编译的作用首先是对源程序进行检查 判定他有无语法方面的错误 生成 obj文件 3 然后进行连接处理 把编译后的模块连接装配起来 再与函数库 例如scanf printf 连接成一

  • Web开发权威指南笔记（一）

    书 Web开发权威指南 美 Chris Aquino Todd Gandee著 为1st实战项目Ottergram练习以及代码整理 全为个人借鉴本书产出 若需要转载请联系通知我 谢谢 最终成果展示 第一章 配置开发环境 文档与参考资料 De

热门标签