迷你导航笔记--1

思路

创建文件

  mkdir src/index.html 

  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> //设置viewport禁止用户缩放

  <link rel="stylesheet" href="style.css">   //引入css

  <script src="main.js"></script>   //引入js

HTML页面布局

  <header class="globalHeader">
    <label><input></label>
    <button>搜索</button>
  </header>

  <main class="globalMain">
    <ul class="siteList">
      <li>
        <div class="site">
          <div class="logo"></div>
          <div class="link"></div>
        </div>
      </li>
      <li>
        <div class="site">
          <div class="logo"></div>
          <div class="link"></div>
        </div>
      </li>
      <li class="last">
        <div class="addButton">
          <div class="text">新增网站</div>
        </div>
      </li>
    </ul>
  </main>

使用HTML标签语义化

css选择器

css reset

*{ box-sizing: border-box; }
*::before, *::after{ box-sizing: border-box; }
*{ margin:0;padding:0; }
ul,ol{ list-style: none;}

style样式

.globalHeader{}
.globalHeader > input{}
.globalHeader > button{}
.globalMain{}
.siteList{}
.siteList > li{}
.siteList .site{}
.siteList .site > .logo{}
.siteList .site > .link{}
.siteList .addButton{}

Q&A

body背景颜色与border：虽然body区域为 border范围内，在给body设置背景色之后浏览器会将其扩展到整个网页 http://js.jirengu.com/feqojikuvo/1/

实现 globalHeader

http://js.jirengu.com/kuzopikofu/1/ 对.globalHeader设置flex布局

.globalHeader{
  margin:20px;
  display: flex;
  justify-content: space-between;
}
.globalHeader > input{
  width: 100%;
  margin-right:10px;
  height:40px;
  padding: 0 10px;
  border:1px solid #ddd;
  border-radius: 4px;
}
.globalHeader > button{
  white-space: nowrap;
  padding: 0 28px;
  border: none;
  border-radius:4px;
  background: #028289;
  color: white;
  font-size: 16px;
}

Q&A

在给input、button设置border-radius:

先设置border:1px solid #ddd; 或 border:none；

input宽度100%，会造成button字体上下排列，需对button设置white-space: nowrap;

实现siteList

.siteList、.site 、.logo采用 flex 布局 http://js.jirengu.com/kuzopikofu/2/

.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 > .link{
  font-size: 14px;
  margin-top: 4px;
}

实现addButton

.addButton .icon-wrapper采用 flex 布局

.siteList .addButton{
  border: 1px solid #DDD;
  background: white;
  width:160px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px 0;
}
.siteList .addButton .icon-wrapper{
  width:64px;
  height:64px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.siteList .addButton .icon{
  width: 56px;
  height:56px;
}