做一个导航网站 Note-FrontEnd-27做一个导航网站的相关内容，内容包括 HTML 复习、CSS 复习、明确目

做一个导航网站的相关内容，内容包括 HTML 复习、CSS 复习、明确目标、UI 设计、写 HTML、CSS 和 JS、遇到的问题和解决思路、一些技巧和方法。

一、HTML 复习

1. HTML 起手式

<!DOCTYPE html>  // 声明网页类型
<html lang="zh-CN">  // 声明当前页面的语言类型为“中文（简体，中国大陆）”
<head>
    <meta charset="UTF-8">  // 声明当前文档所使用的字符编码
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">  // 禁止页面在移动设备上缩放
    <title>Document</title> // 表达文档标题 -- 最好写网页描述
    <link rel="stylesheet" href="style.css">  // 引用 CSS
    // Rel是relationship的英文缩写，它描述了当前页面与href所指定文档的关系
    // stylesheet就是样式表的意思，CSS是 Cascading Style Sheet（层叠样式表）的缩写
</head>
<body>
    <script src="main.js"></script>  // 引用 JS
</body>
</html>

2. HTML 常用标签

// 起手式标签
<html>  <head>  <body>
——————————————————————
// 文档元数据
*<meta>  <title>  <link>  <style>  <base>
—————————————————————————————————————————
// 内容分区（章节）
*<section>  *<nav>  *<article>  *<aside>  *<header>  *<footer>  *<main>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>  <address>  
———————————————————————————————————————————————————————————————————————
// 文本内容（内容层次）
*<ol>+*<li>  *<ul>+*<li>  *<dl>+*<dd>+*<dt>  <div>  <p>  <pre>
<hr>  <blockquote>  <figure>+<figcaption>
————————————————————————————————————————————————————————————
// 内联文本语义（文字）
*<a>  <span>  <code>  <em>  <strong>  <q>  <time>  <kdb>  <mark>
<sub>  <sup>  <br>  <wbr>  <ins>  <del>
———————————————————————————————————————————————————————————————
// 多媒体资源
*<img>  *<svg>  *<video>  <audio>
—————————————————————————————————
// 脚本
*<canvas>  <script>  <noscript>
———————————————————————————————
// 表格内容
*<table>  *<tbody>  *<thead>  *<tfoot>  *<tr>  *<td>  *<th>
———————————————————————————————————————————————————————————
// 表单内容
*<form>  *<label>  *<input>  *<button>  *<select>  *<option>  *<textarea>  <progress>
—————————————————————————————————————————————————————————————————————————————————————
// 可交互元素
<summary> + <details>
<menu> + <menuitem>

参考资料：

1. HTML模板和CSS基准样式（一）- 阮一峰 - 2009年2月7日

2. HTML模板和CSS基准样式（二）- 阮一峰 - 2009年2月8日

3. HTML模板和CSS基准样式（三）- 阮一峰 - 2009年2月10日

4. HTML语言编写指南 - 阮一峰 - 2009年5月17日

5. HTML 元素参考 - MDN

二、CSS 复习

1. Float 布局

子元素加 foat: left 和 width
父元素加 .clearfix

2. Flex 布局

flex container 样式

// 让元素变成 flex 容器
.container{
    display: flex;
}
// 改变 itemes 流动方向（主轴）
.container{
    flex-direction: row | row-reverse | column | column-reverse;
}
// 改变折行
.container{
    flex-wrap: nowrap | wrap | wrap-reverse;
}
// 主轴对齐方式
.container{
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
// 次轴对齐
.container{
    align-items: flex-start | flex-end | cennter | strech | baseline;

flex item 样式

order: x;
flex-grow: x;
flex-shrink: x;

参考资料：

1. CSS选择器笔记 - 阮一峰 - 2009年3月12日

2. CSS使用技巧 - 阮一峰 - 2010年3月31日

3. CSS动画简介 - 阮一峰 - 2014年2月14日

4. Flex 布局教程：语法篇 - 阮一峰 - 2015年7月10日

6. Flex 布局教程：实例篇 - 阮一峰 - 2015年7月14日

7. CSS Modules 用法教程 - 阮一峰 - 2016年6月10日

8. CSS in JS 简介 - 阮一峰 - 2017年4月5日

9. CSS 变量教程 - 阮一峰 - 2017年5月9日

10. CSS 框架 Bulma 教程 - 阮一峰 - 2017年10月24日

11. CSS 的空格处理 - 阮一峰 - 2018年7月30日

12. CSS Grid 网格布局教程 - 阮一峰 - 2019年3月25日

13. CSS 定位详解 - 阮一峰 - 2019年11月19日

三、明确目标

做一个导航网站，要求如下：

界面漂亮
有搜索功能
能够点击网站跳转功能
能够自己个性化添加网站

四、UI 设计

用作图工具设计自己满意的界面，我的设计如下：

这个设计是初稿，搜索栏不太满意，又找了几个好看的搜索栏，和它比起来，我的丑爆了啊，要换。

五、写 HTML、CSS 和 JS

1. 半成品出来啦

搜索栏参考了 iciba.com 和 taobao.com，感觉好好看。

半成品代码舍不得删，在此保存一下，具备百度搜索功能、点击网站可跳转、可以个性化添加网站。接下来还需要做的是：

能够新添加的网站保存下来，不会消失。目前很鸡肋，点击新增网站跳转页面，当再次回来时新添加的网站会消失。
把 Google 搜索功能添加上。
增加删除功能。
适配电脑。
美化界面。

// index.html 和 style.css 又臭又长，就不贴在这里了

// main.js
$(".addButton").on("click", () => {
  let url = window.prompt("请输入你想要添加的网址");
  if (url.indexOf("http") !== 0) url = "https://" + url;
  const $lastSite = $(".addButton");
  const $site = $(`<a href="${url}">
  <li class="site">
      <div class="logo">${url[0]}</div>
      <div class="link">${url}</div>
  </li>
</a>`).insertBefore($lastSite);
});

2. 成品出来啦

网站导航的基本功能都有了，外观风格挺喜欢的，交互也尽可能用所学做了，打分的话给自己打 80 分。

预览效果：→ 点击这里
GitHub 源代码链接：→ 点击这里

六、遇到的问题和解决思路

1. 添加背景图片不知道怎么做

背景图片的添加，我在网络上查了很多，发现了一个不错的方式。

// 手机端页面是长的，所以使用一张长图，视口撑满上下，左右居中。
background-image: url(images/squre.jpg);
background-size: auto 100vh;

// 电脑端页面是宽的，所以使用一张宽图，视口撑满左右，上下居中。
background-image: url(images/squre2.jpg);
background-size: 100vw auto;

背景图片千万千万不要用太大的图，我第一次用了 1.4M 的图，打开页面的时候背景是空的，背景图片加载 3~4 秒钟，交互体验很不好。

建议使用 300K 以下的图。这次导航网站手机端图片压缩到了 266K，电脑端图片压缩到了 182K。

这个网站不错，可以根据图片质量选择性压缩，→ 在线图片压缩

2. parcel build 打包总是失败

parcel build scr/index.html --no-minify --public-url ./

上面这条语句我删了写、写了删，重复了几十遍，愣是没发现问题。后来复制粘贴代码，仔细对比才发现问题所在，正确写法如下：

parcel build src/index.html --no-minify --public-url ./

果然，编程者视力一定要过关啊

position: fixed;left: 10px;bottom: 10px;

4. 网页在 Safari 浏览器上的 bug

Safari 会自动给 input 标签加上 border-radius，需要添加这一句

input{
    border-radius:0 0 0 0;
}

5. 网页在我的荣耀手机自带浏览器上的 bug

下面这样样式在该手机自带浏览器上会失败，说明 space-evenly 这条它读不出来呀。在小米手机自带浏览器打开、在微信里打开都 ok。

justify-content:space-evenly;

所以重新设计样式，布局改成:

justify-content:space-between;

6. 使用“负 margin 居中”失败，找原因找半天

margin-right:-20px

上面这条语句一直没生效而我一直以为是生效的，一直查什么原因导致的。直到我在浏览器里查看的时候才发现它没生效，原来被 auto 代替了，真正找到原因。

7. 手机端用负 margin 有 bug

手机端页面用负 margin 会变得左右可滑动，所以不要在手机端使用负 margin，换掉它。

可滑动的范围感觉就是负 margin 的值。

七、一些技巧和方法

手机一般都是做成响应式的，不直接固定宽度，使用 marin 来调试。如果要用固定宽度，一定不要用负 margin，那会让手机页面左右可滑动，使用 justify-content 和 align-items 来调节。

电脑不必做成响应式的，用固定宽度方式，因为页面操作方式和手机端不同，所以负 margin 影响不大，反而能让布局显得简单一点。

// 手机端：响应式搜索框：margin 20px，固定式网站宽度：156px*2+20px=332px，margin auto

// 电脑端：都是固定宽度，搜索框：553px，margin auto 网站宽度：156px*4+20px*3=684, margin auto

淘宝搜索栏宽高：553*50
淘宝色可以使用：#FF6600
white-space: nowrap 文字内容不准换行
opacity: 0.5 改透明度
rgba(255,255,255,0.5) 最后一个参数可以修改颜色透明图

选择器技巧 .a .b .c 比 .a .c 优先级高
// 要写就写一块，想看 “是否生效” 就在浏览器里调试查看

// 鼠标点在标签上变成小手
.site {
  cursor: pointer;
}
// 鼠标浮动移动到标签时，隐藏与显示
.site:hover .iconClose {
  display: block;
}

// flex 布局：居中一键三连
display:flex
justify-content:center;
align-tiems:center;

// hasMap 表和 localStorage 配和使用
// JS 查找元素、选择元素、添加元素等等
// JS中 许多想法和理念通过用代码实现

「@浪里淘沙的小法师」

做一个导航网站 Note-FrontEnd-27