京东商城实例

京东商城实例

代码如下：

header {
  height: 5em;
  background-color: lightcoral;
  color: white;
  display: flex;
  padding: 1em;
}
/* 菜单按钮 */
header .menu {
  flex: 1;
  text-align: center;
  font-size: 2.5em;
  height: inherit;
}
/* 搜索框 */
header .search {
  flex: 8;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 2em;
}
header .search .logo {
  font-size: 2em;
  color: lightcoral;
  margin-left: 0.5em;
}
header .search .zoom {
  font-size: 1.5em;
  color: #cccccc;
  margin-left: 0.2em;
  border-left: solid 1px #ccc;
  padding: 0.2em;
}
header .search .words {
  border: none;
  outline: none;
  color: #ccc;
  background-color: white;
}
/* 登录按钮 */
header .login {
  flex: 1;
  background-color: lightcoral;
  border: none;
  outline: none;
  color: white;
  font-size: 2em;
  margin-left: 1em;
}
.container .banner a img {
  /* 如果想要图自动缩放效果，宽要占100% */
  width: 100%;
}
main .nav {
  display: flex;
  flex-flow: row wrap;
}
main .nav li {
  flex: 1 1 20%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

  <!-- 头部 -->
    <header>
      <div class="menu iconfont icon-menu"></div>
      <div class="search">
        <div class="logo">JD</div>
        <div class="zoom iconfont icon-search"></div>
        <input
          type="text"
          name="search"
          id="search"
          value="蓝牙鼠标"
          class="words"
        />
      </div>
      <button class="login">登录</button>
    </header>
    <div class="container">
      <div class="banner">
        <a href="#"><img src="static/images/bg/banner.jpg" alt="" /></a>
      </div>
      <main>
        <ul class="nav">
          <li>
            <a href="#"><img src="static/images/dh/nav-1.png" alt="" /></a>
            <a href="#">京东超市</a>
          </li>
          <li>
            <a href="#"><img src="static/images/dh/nav-2.png" alt="" /></a>
            <a href="#">数码电器</a>
          </li>
          <li>
            <a href="#"><img src="static/images/dh/nav-3.png" alt="" /></a>
            <a href="#">京东服饰</a>
          </li>
          <li>
            <a href="#"><img src="static/images/dh/nav-4.png" alt="" /></a>
            <a href="#">京东生鲜</a>
          </li>
          <li>
            <a href="#"><img src="static/images/dh/nav-5.png" alt="" /></a>
            <a href="#">京东到家</a>
          </li>
          <li>
            <a href="#"><img src="static/images/dh/nav-6.png" alt="" /></a>
            <a href="#">充值领劵</a>
          </li>
          <li>
            <a href="#"><img src="static/images/dh/nav-7.png" alt="" /></a>
            <a href="#">9.9元拼</a>
          </li>
          <li>
            <a href="#"><img src="static/images/dh/nav-8.png" alt="" /></a>
            <a href="#">领劵</a>
          </li>
          <li>
            <a href="#"><img src="static/images/dh/nav-9.png" alt="" /></a>
            <a href="#">借钱</a>
          </li>
          <li>
            <a href="#"><img src="static/images/dh/nav-10.png" alt="" /></a>
            <a href="#">PLUS会员</a>
          </li>
        <ul>
      </main>
    </div>

执行结果：