前言

这篇文章实现适配 Mobile 端的页面,搜索功能以及添加网站快捷方式.(效果如下图)

预览：效果图

我们分成 3 个部分讲

  1. HTML 视图
  2. CSS 样式
  3. JavaScript 行为

1. HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,
      user-scalable=no,viewport-fit=cover"
    />
    <!--不用背,宽度=设备的宽度，最初的比例和最大和最小比例=1.防止用户双指扩大以及缩小填充设备显示可以
    借鉴淘宝-->
    <title>前端导航网站</title>
    <!-- 加入通用css代码iconfont.cn用 -->
    <style type="text/css">
      .icon {
        width: 1em; height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    </style>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="globalHeader">
      <form method="get" action="https://www.baidu.com/s" class="searchForm">
        <input name="wd" type="test">
        <button>搜索</button>
      </form>
    </header>

    <main class="globalMain">
      <ul class="siteList">
        <!-- 下面两个li是测试css用的写完之后删掉 -->
        <li>
          <a href="https://bilibili.com/">
            <div class="site">
              <div class="logo">
                <img src="https://bilibili.com/favicon.ico" alt="" />
              </div>
              <div class="link">bilibili.com</div>
            </div>
          </a>
        </li>

        <li>
          <a href="https://baidu.com">
            <div class="site">
              <div class="logo">
                <img src="https://baidu.com/favicon.ico" alt="" />
              </div>
              <div class="link">baidu.com</div>
            </div>
          </a>
        </li>

        <!-- 添加快捷方式按钮 -->
        <li class="last">
          <div class="addButton">
            <div class="iconWrapper">
              <!-- 下面svg标签是引用iconfont.cn图标用的 -->
              <svg class="icon" aria-hidden="true"><use xlink:href="#icon-add"></use></svg>
            </div>
            <div class="test">新增网站</div>
          </div>
        </li>

      </ul>
    </main>
    <!-- 下面这个不能跟我一样,等下去看下面的教程去iconfont.cn引用自己的 -->
    <script src="//at.alicdn.com/t/font_1560724_sqlp3wop15.js"></script>
    <!-- 下面是jQuery引用 -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- 下面是你自己写的JS -->
    <script src="main.js"></script>
  </body>
</html>

打开iconfont,搜索 add 选择一个图标,点击第一个图标添加入库,点击右上角的购物车图标,添加至项目,新建一个项目.选中点击确定.选择 Symbol 点击最上方的帮助-代码应用找到 symbol 应用把上述 HTML 代码中 49 行代码换成你的

写完如下图(搜索功能是可以用的)源代码 接下来我们来排版

2. CSS

/* css reset */
*{padding:0;margin:0;box-sizing:border-box;}
*:before,*:after{box-sizing:border-box;}
ol,ul{list-style:none;}/* 去掉列表的样式 */
a{color:inherit;text-decoration:none;}/* 去掉链接的的样式 */

/* style */
body{background:#eee;}
.globalHeader{margin:20px;}
.searchForm{display:flex;justify-content:space-between;}
.searchForm > input {
  width: 100%;
  margin-right: 10px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.searchForm > button {
  white-space: nowrap;   /* 文字不竖排   */
  padding: 0 28px;
  border: none;
  border-radius: 4px;
  background: #0282b9;
  color: white;
  font-size: 16px;
}
/* 在pc里用 */
.globalMain {
}
.siteList {
  margin: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.siteList > li {
  margin-bottom: 10px;
}
.siteList .site {
  width: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px 0;
}
.siteList .site > .logo {
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 64px;
}
.siteList .site > .logo > img {
  width: 32px;
  height: 32px;
}
.siteList .site > .link {
  font-size: 14px;
  margin-top: 4px;
}
.siteList .addButton {
  width: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px 0;
  border: 1px solid #ddd;
  background: white;
}
.siteList .addButton .iconWrapper {
  margin: 16px;
  width: 32px;
  height: 32px;
}
.siteList .addButton .icon {
  width: 32px;
  height: 32px;
}
.siteList .addButton .text {
  margin-top: 4px;
  font-size: 14px;
}

写完如下效果图源代码

3. JavaScript 行为

我们已经写完 HTML 和 CSS.现在我们说一下 JavaScript 的思路. 当我添加按钮时,弹出一个弹窗输入网址.然后添加一个快捷方式的按钮

我们知道每个快捷方式是 li 标签.也是说,每次点击输入网址往 li.last 前添加一个 li 标签即可 我们来写写代码逻辑

const $siteList = $(".siteList")    //找到ul
const $lastLi = $siteList.find("li.last")   //找到li.last
const x =localStorage.getItem("x")  //得到缓存的数据(字符串)
const xObject = JSON.parse(x);       //将字符串转换成JSON格式
const hashMap = xObject||[{ url: "https://www.bilibili.com" },
  { url: "https://www.acfun.cn" }]  //保存添加的快捷方式的网址

const render =()=>{   //创建li并且渲染到页面里
  $siteList.find("li:not(.last)").remove()  //除.last全部删除
  hashMap.foreach(node=>{
    $(`<li>
    <a href="${node.url}">
      <div class="site">
        <div class="logo">
          <img src="${node.url}/favicon.ico" alt="" />
        </div>
        <div class="link">${
          node.url.slice(0, 12) === "https://www."
            ? node.url.slice(12)
            : node.url.slice(8)
        }</div>
      </div>
    </a>
    </li>`).insertBefore($lastLi);//创建并且放在.last之前
  })
}
render();   //第一次进网页时,渲染缓存用的

$(".addButton").on("click",()=>{
  let url=window.prompt("输入xx.com or www.xx.com 网址")//弹窗窗口返回一个文本
  if(url!==""){
    if(url.indexOf("https://")!==0){
      url = "https://"+url;
    }
    hashMap.push({url:url})
    render(); //渲染
  }
})

window.onbeforeunload=()=>{   //窗口背关闭时触发该事件
  const string = JSON.stringify(hashMap)    //变成字符串
  localStorage.setItem("x",string)      //设置缓存
}

Mobile 移动端写到这里,如果你点击源码时跟这里是不一样的,因为同时兼容了 PC 和 mobile 还有其他功能