前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

JackyCan 2020-08-13

本教程案例在线演示

有路网PC端
有路网移动端

免费配套视频教程

免费配套视频教程

教程配套源码资源

教程配套源码资源

制作有路网水平导航菜单

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

category-nav.css

.red-nav{
  height: 38px;
  background-color: #d80000;
  width: 100%;
}
.red-nav ul{
  display: flex;
  width: 1200px;
  margin: 0 auto;
}
.red-nav li{
  flex: 0 0 auto;
  line-height: 38px;
  font-size: 16px;
  padding: 0 24px;
  font-weight: bold;
}
.red-nav li a{
  color: white;
}

.red-nav li:hover{
  background-color: #c90000;
}
.red-nav li:nth-child(1)
{
  padding-right: 100px;
  padding-left: 20px;
  background-color: #c90000;
}

youlu-category-nav.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="category-nav.css">
</head>
<body>
  <div class="red-nav">
    <ul>
      <li><a href="#">全部图书分类</a></li>
      <li><a href="#">首页</a></li>
      <li><a href="#">特卖</a></li>
      <li><a href="#">入驻商家</a></li>
      <li><a href="#">文具</a></li>
      <li><a href="#">考试</a></li>
      <li><a href="#">电子书</a></li>
    </ul>
</div>
</body>
</html>

制作有路网搜索栏

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

制作HTML骨架

<div class="search-bar">
      <div class="logo">
        <img src="img/logo.jpg" />
      </div>
      <div class="search-block">
        <div class="search">
          <form action="#">
            <input type="text" class="input" placeholder="书名" /><input
              type="submit"
              value="搜索"
              class="btn"
            />
          </form>
        </div>
        <div class="hot-search">
          <ul>
            <li>热门搜索：</li>
            <li><a href="#">公务员考试</a></li>
            <li><a href="#">四六级</a></li>
            <li><a href="#">高等数学</a></li>
            <li><a href="#">自考</a></li>
          </ul>
        </div>
      </div>
      <div class="cart">
        <div><a href="#">网站购物车<span>3</span>本</a></div>
        <div><a href="#">店铺购物车<span>0</span>本</a></div>
      </div>
    </div>

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

美化logo

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

.search-bar {
        width: 1200px;
        margin: 40px auto 0;
        display: flex;
      }

      .search-bar .logo {
        margin-right: 64px;
      }

美化搜索框

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

.search-bar .search {
        width: 509px;
        margin: 0 auto;
        height: 40px;
      }

      .search-bar .search .input {
        width: 400px;
        height: 36px;
        border: 2px solid red;
        font-size: 20px;
      }

      .search-bar .search .btn {
        vertical-align: top;
        height: 42px;
        width: 100px;
        margin-left: -3px;
        border: 0px solid black;
        background-color: red;
        color: white;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 6px;
        cursor: pointer;
      }

美化热门搜索

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

.search-bar .hot-search li {
        display: inline-block;
        font-size: 16px;
        line-height: 32px;
        font-weight: bold;
        padding: 0px 2px;
      }

      .search-bar .hot-search li a {
        color: gray;
      }
      .search-bar .hot-search li a:hover {
        text-decoration: underline;
        color: orange;
      }

美化购物车

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

.search-bar .cart {
        background-image: url("img/cart.jpg");
        background-repeat: no-repeat;
        padding-left: 44px;
        line-height: 20px;
        margin-left: auto;
      }

      .search-bar .cart a {
        color: black;
      }
      .search-bar .cart a:hover {
        text-decoration: underline;
      }

      .search-bar .cart span {
        color: red;
        font-weight: bold;
      }

完整代码

searchbar.css

.search-bar{
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.search-bar .logo{
  margin-right: 154px;
}

.search{
  height: 40px;
  width: 420px;
  margin: 0 auto;
  /* margin-top: 60px; */
}
.search .input{
  border: 3px solid red;
  width: 300px;
  height: 36px;
  font-size: 20px;
}
.search .btn{
  height: 44px;
  width: 100px;
  border:0;
  background-color: red;
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-left: -4px;
  vertical-align: top;
  letter-spacing: 6px;
}

.search-bar .hot-search li{
  display: inline-block;
  line-height: 32px;
  font-weight: bold;
  padding: 0px 2px;
  font-size: 14px;
}

.search-bar .cart{
  background-image: url(‘img/cart.jpg‘);
  background-repeat: no-repeat;
  padding-left: 44px;
  line-height: 20px;
  margin-left: auto;
}

.search-bar .cart span{
  color: red;
  font-weight: bold;
}

youlu-searchbar.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="searchbar.css">
</head>
<body>
  <div class="search-bar">
    <div class="logo">
      <img src="img/logo.jpg" >
    </div>
    <div class="search-block">
      <div class="search">
        <form action="#">
          <input class="input" type="text" placeholder="书名">
          <input class="btn" type="button" value="搜索">
        </form>
      </div>
      <div class="hot-search">
        <ul>
          <li>热门搜索：</li>
          <li><a href="#">公务员考试</a></li>
          <li><a href="#">四六级</a></li>
          <li><a href="#">高等数学</a></li>
          <li><a href="#">自考</a></li>
        </ul>
      </div>
    </div>
    <div class="cart">
      <div><a href="#">网站购物车<span>0</span>本</a></div>
      <div><a href="#">店铺购物车<span>0</span>本</a></div>
    </div>
  </div>
</body>
</html>

制作有路网推荐图书页面

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

HTML骨架

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

<div class="book-recommend">
      <div class="header">
        <h2>推荐图书</h2>
        <div><span>1</span>/4</div>
      </div>
      <div class="content">
        <ul>
          <li>
            <img src="img/狼图腾.jpg" />
            <div><a href="#">狼图腾（修订版）</a></div>
            <div class="author">姜戎</div>
            <div class="price">
              <span class="discount">￥15.90</span>
              <span class="origin-price">￥39.80</span>
            </div>
          </li>
          <li>
            <img src="img/文化苦旅.jpg" />
            <div><a href="#">狼图腾（修订版）</a></div>
            <div class="author">姜戎</div>
            <div class="price">
              <span class="discount">￥15.90</span>
              <span class="origin-price">￥39.80</span>
            </div>
          </li>
          <li>
            <img src="img/平凡的世界.jpg" />
            <div><a href="#">狼图腾（修订版）</a></div>
            <div class="author">姜戎</div>
            <div class="price">
              <span class="discount">￥15.90</span>
              <span class="origin-price">￥39.80</span>
            </div>
          </li>
          <li>
            <img src="img/偷影子的人.jpg" />
            <div><a href="#">狼图腾（修订版）</a></div>
            <div class="author">姜戎</div>
            <div class="price">
              <span class="discount">￥15.90</span>
              <span class="origin-price">￥39.80</span>
            </div>
          </li>
          <li>
            <img src="img/狼图腾.jpg" />
            <div><a href="#">狼图腾（修订版）5</a></div>
            <div class="author">姜戎</div>
            <div class="price">
              <span class="discount">￥15.90</span>
              <span class="origin-price">￥39.80</span>
            </div>
          </li>
          <li>
            <img src="img/狼图腾.jpg" />
            <div><a href="#">狼图腾（修订版）6</a></div>
            <div class="author">姜戎</div>
            <div class="price">
              <span class="discount">￥15.90</span>
              <span class="origin-price">￥39.80</span>
            </div>
          </li>
          <li>
            <img src="img/蔡永康.jpg" />
            <div><a href="#">狼图腾（修订版）7</a></div>
            <div class="author">姜戎</div>
            <div class="price">
              <span class="discount">￥15.90</span>
              <span class="origin-price">￥39.80</span>
            </div>
          </li>
          <li>
            <img src="img/狼图腾.jpg" />
            <div><a href="#">狼图腾（修订版）</a></div>
            <div class="author">姜戎</div>
            <div class="price">
              <span class="discount">￥15.90</span>
              <span class="origin-price">￥39.80</span>
            </div>
          </li>
        </ul>
      </div>
    </div>

美化头部

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

.book-recommend {
        width: 750px;
        margin: 100px auto 0px;
      }
      .book-recommend .header {
        border-bottom: 1px solid gray;
        background-image: url("img/laba.jpg");
        background-repeat: no-repeat;
        background-position: 0px 8px;
        display: flex;
      }
      .book-recommend .header div {
        padding-top: 6px;
        padding-right: 6px;
        font-size: 16px;
      }
      .book-recommend .header div span {
        color: red;
      }
      .book-recommend .header h2 {
        margin-right: auto;
        font-size: 22px;
        font-weight: bold;
        padding-left: 20px;
        padding-bottom: 8px;
      }

美化体部大框

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

.content {
        padding-top: 10px;
      }

      .content div {
        text-align: left;
        padding-left: 30px;
        line-height: 32px;
      }
      .content ul {
        display: flex;
        flex-wrap: wrap;
      }
      .content li {
        width: 187px;
        text-align: center;
      }

美化体部细节

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

.content .price {
        margin-top: -10px;
        margin-bottom: 20px;
        font-size: 14px;
      }

      .content .price .discount {
        color: red;
        font-weight: bold;
        margin-right: 6px;
      }

      .content .price .origin-price {
        color: gray;
        text-decoration: line-through;
      }
      .content .author {
        color: gray;
      }

      .content li a {
        color: black;
      }
      .content li a:hover {
        color: orange;
        text-decoration: underline;
      }

      .content li img {
        width: auto;
        height: 160px;
      }

完整代码

recommend-books.css

.book-recommend{
  width: 750px;
  margin: 40px auto;
}
.book-recommend .header{
  display: flex;
  border-bottom: 1px solid gray;
  background-image: url(‘img/laba.jpg‘);
  background-repeat: no-repeat;
  background-position: 0 6px;
  padding-left: 16px;
  padding-bottom: 6px;
  font-size: 16px;
}

.book-recommend .header h2{
  margin-right: auto;
  font-size: 16px;
}

.book-recommend .header span{
  color: red;
}

.book-recommend .content{
  margin-top: 10px;
}

.book-recommend .content ul{
  display: flex;
  flex-wrap: wrap;
}

.book-recommend .content li{
  width: 187px;
  text-align: center;
  line-height: 24px;
}

.book-recommend .content li .author{
  position: relative;
  left:-36px;
}

.book-recommend .content li img{
  width: auto;
  height: 160px;
}

.book-recommend .content .price{
  margin-bottom: 20px;
}

.book-recommend .content .discount{
  color:red;
  font-weight: bold;
  margin-right: 8px;
}

.book-recommend .content .origin-price{
  text-decoration: line-through;
}

youlu-recommend-books.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="recommend-books.css">
</head>
<body>
  <div class="book-recommend">
    <div class="header">
      <h2>推荐图书</h2>
      <div><span>1</span>/4</div>
    </div>
    <div class="content">
      <ul>
        <li>
          <img src="img/狼图腾.jpg" />
          <div><a href="#">狼图腾（修订版）</a></div>
          <div class="author">姜戎</div>
          <div class="price">
            <span class="discount">￥15.90</span>
            <span class="origin-price">￥39.80</span>
          </div>
        </li>
        <li>
          <img src="img/文化苦旅.jpg" />
          <div><a href="#">狼图腾（修订版）</a></div>
          <div class="author">姜戎</div>
          <div class="price">
            <span class="discount">￥15.90</span>
            <span class="origin-price">￥39.80</span>
          </div>
        </li>
        <li>
          <img src="img/平凡的世界.jpg" />
          <div><a href="#">狼图腾（修订版）</a></div>
          <div class="author">姜戎</div>
          <div class="price">
            <span class="discount">￥15.90</span>
            <span class="origin-price">￥39.80</span>
          </div>
        </li>
        <li>
          <img src="img/偷影子的人.jpg" />
          <div><a href="#">狼图腾（修订版）</a></div>
          <div class="author">姜戎</div>
          <div class="price">
            <span class="discount">￥15.90</span>
            <span class="origin-price">￥39.80</span>
          </div>
        </li>
        <li>
          <img src="img/狼图腾.jpg" />
          <div><a href="#">狼图腾（修订版）5</a></div>
          <div class="author">姜戎</div>
          <div class="price">
            <span class="discount">￥15.90</span>
            <span class="origin-price">￥39.80</span>
          </div>
        </li>
        <li>
          <img src="img/狼图腾.jpg" />
          <div><a href="#">狼图腾（修订版）6</a></div>
          <div class="author">姜戎</div>
          <div class="price">
            <span class="discount">￥15.90</span>
            <span class="origin-price">￥39.80</span>
          </div>
        </li>
        <li>
          <img src="img/蔡永康.jpg" />
          <div><a href="#">狼图腾（修订版）7</a></div>
          <div class="author">姜戎</div>
          <div class="price">
            <span class="discount">￥15.90</span>
            <span class="origin-price">￥39.80</span>
          </div>
        </li>
        <li>
          <img src="img/狼图腾.jpg" />
          <div><a href="#">狼图腾（修订版）</a></div>
          <div class="author">姜戎</div>
          <div class="price">
            <span class="discount">￥15.90</span>
            <span class="origin-price">￥39.80</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

制作有路网近期热销榜

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

HTML骨架

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

<div class="hot">
      <h2>近期热销榜</h2>
      <ul>
        <li>
          <div class="book1">
            <span class="red">1</span>如果蜗牛有爱情（上下
          </div>
          <div class="book2">
            <div><span class="red">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1">
            <span class="red">1</span>如果蜗牛有爱情（上下
          </div>
          <div class="book2">
            <div><span class="red">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1">
            <span class="red">1</span>如果蜗牛有爱情（上下
          </div>
          <div class="book2">
            <div><span class="red">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span>4</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span>1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span>1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span>1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span>1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span>1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span>1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
      </ul>
    </div>

美化列表展示

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

.hot {
        width: 220px;
      }
      .hot h2 {
        font-size: 16px;
        line-height: 40px;
        padding-left: 34px;
      }
      .hot ul {
        border: 1px solid gray;
        font-size: 14px;
      }
      .hot li .book1 {
        line-height: 44px;
        border-bottom: 1px dashed gray;
        padding-left: 14px;
      }
      .hot li span {
        margin-right: 6px;
        font-weight: bold;
      }

      .hot .red {
        color: red;
      }

      .hot .book2 {
        display: none;
      }

美化图文列表展示

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

.hot .book1 {
        display: none;
      }
      .hot .book2 {
              display: flex;
        height: 102px;
        border-bottom: 1px dashed gray;
      }
      .hot .book2 div {
        margin-top: 6px;
      }
      .hot .book2 img {
        width: 76px;
      }

      .hot .book2 span {
        margin-left: 10px;
        display: inline-block;
        margin-top: 6px;
      }

      .hot .book2 .title {
        font-size: 14px;
        margin-bottom: 22px;
      }

      .hot .book2 .discount-price {
        font-size: 16px;
        font-weight: bold;
        color: red;
      }

      .hot .book2 .old-price {
        font-size: 14px;
        color: gray;
        text-decoration: line-through;
      }

hover切换视图显示

.hot .book2 {
        display: none;
      }
      .hot li:hover .book1 {
        display: none;
      }
      .hot li:hover .book2 {
        display: flex;
      }

完整代码

hot.css

.hot{
  width: 220px;
}
.hot h2{
  font-size: 16px;
  line-height: 40px;
  padding-left: 30px;
}

.hot ul{
  border: 1px solid gray;
  font-size: 14px;
}
.hot .book2{
  display: none;
}

.hot .book1{
  line-height: 44px;
  border-bottom: 1px solid gray;
  padding-left: 14px;
}

.hot span{
  margin-right: 8px;
  font-weight: bold;
}

.hot .red{
  color:red;
}

.hot .book2{
  padding-top: 6px;
  height: 90px;
  border-bottom: 1px solid gray;
}

.hot img{
  width: 76px;
}

.hot .book2 p{
  line-height: 24px;
  font-size: 14px;
}
.hot .discount-price{
  color:red;
}

.hot .old-price{
  text-decoration: line-through;
}

.hot .book2{
  display: none;
}

.hot li:hover .book1{
  display: none;
}

.hot li:hover .book2{
  display: flex;
}

youlu-hot.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="hot.css">
</head>
<body>
  <div class="hot">
    <h2>近期热销榜</h2>
    <ul>
      <li>
        <div class="book1">
          <span class="red">1</span>如果蜗牛有爱情（上下
        </div>
        <div class="book2">
          <div><span class="red">1</span></div>
          <div><img src="img/萤火虫小巷.jpg" /></div>
          <div>
            <p class="title">萤火虫小巷</p>
            <p class="discount-price">￥14.40</p>
            <p class="old-price">￥36.00</p>
          </div>
        </div>
      </li>
      <li>
        <div class="book1">
          <span class="red">1</span>如果蜗牛有爱情（上下
        </div>
        <div class="book2">
          <div><span class="red">1</span></div>
          <div><img src="img/萤火虫小巷.jpg" /></div>
          <div>
            <p class="title">萤火虫小巷</p>
            <p class="discount-price">￥14.40</p>
            <p class="old-price">￥36.00</p>
          </div>
        </div>
      </li>
      <li>
        <div class="book1">
          <span class="red">1</span>如果蜗牛有爱情（上下
        </div>
        <div class="book2">
          <div><span class="red">1</span></div>
          <div><img src="img/萤火虫小巷.jpg" /></div>
          <div>
            <p class="title">萤火虫小巷</p>
            <p class="discount-price">￥14.40</p>
            <p class="old-price">￥36.00</p>
          </div>
        </div>
      </li>
      <li>
        <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
        <div class="book2">
          <div><span>4</span></div>
          <div><img src="img/萤火虫小巷.jpg" /></div>
          <div>
            <p class="title">萤火虫小巷</p>
            <p class="discount-price">￥14.40</p>
            <p class="old-price">￥36.00</p>
          </div>
        </div>
      </li>
      <li>
        <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
        <div class="book2">
          <div><span>1</span></div>
          <div><img src="img/萤火虫小巷.jpg" /></div>
          <div>
            <p class="title">萤火虫小巷</p>
            <p class="discount-price">￥14.40</p>
            <p class="old-price">￥36.00</p>
          </div>
        </div>
      </li>
      <li>
        <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
        <div class="book2">
          <div><span>1</span></div>
          <div><img src="img/萤火虫小巷.jpg" /></div>
          <div>
            <p class="title">萤火虫小巷</p>
            <p class="discount-price">￥14.40</p>
            <p class="old-price">￥36.00</p>
          </div>
        </div>
      </li>
      <li>
        <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
        <div class="book2">
          <div><span>1</span></div>
          <div><img src="img/萤火虫小巷.jpg" /></div>
          <div>
            <p class="title">萤火虫小巷</p>
            <p class="discount-price">￥14.40</p>
            <p class="old-price">￥36.00</p>
          </div>
        </div>
      </li>
      <li>
        <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
        <div class="book2">
          <div><span>1</span></div>
          <div><img src="img/萤火虫小巷.jpg" /></div>
          <div>
            <p class="title">萤火虫小巷</p>
            <p class="discount-price">￥14.40</p>
            <p class="old-price">￥36.00</p>
          </div>
        </div>
      </li>
      <li>
        <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
        <div class="book2">
          <div><span>1</span></div>
          <div><img src="img/萤火虫小巷.jpg" /></div>
          <div>
            <p class="title">萤火虫小巷</p>
            <p class="discount-price">￥14.40</p>
            <p class="old-price">￥36.00</p>
          </div>
        </div>
      </li>
      <li>
        <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
        <div class="book2">
          <div><span>1</span></div>
          <div><img src="img/萤火虫小巷.jpg" /></div>
          <div>
            <p class="title">萤火虫小巷</p>
            <p class="discount-price">￥14.40</p>
            <p class="old-price">￥36.00</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>
JackyCan

JackyCan

相关推荐

使用这些不太常用的 CSS 属性，让我在前端布局效率上，又提高了一个层次！

有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这可以大大节约我们编码的时间。作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么

xiaohuli / 0评论 2020-09-02

20个CSS快速提升技巧

本文涵盖了20个css技巧，可以解决许多工作中常见的问题。css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来

Ladyseven / 0评论 2020-07-25

FlexBox游乐园 flexbox.tech - 帮你熟悉FlexBox

帮你熟悉Flex布局，帮你生成样式

dongyang0 / 0评论 2020-05-29

css3 flexBox 弹性布局 记录

　　在传统的css布局，都是依赖于position，float，dosplay进行。在一些特定的布局的实现上往往很不方便，比如一个元素的垂直居中。鉴于这种关系，2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页

尚衍亮 / 0评论 2020-02-17

假设高度已知，请写出三栏布局，其中左右各为300px 中间自适用

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

GeolageWu / 0评论 2019-12-17

FCC---CSS Flexbox: Use the flex-direction Property to Make a Column

The last two challenges used theflex-directionproperty set to row.This property can also create a column by vertically stacking

dongyang0 / 0评论 2019-12-08

FCC---CSS Flexbox: Use the flex-direction Property to Make a Row

Addingdisplay: flexto an element turns it into a flex container.This makes it possible to align any children of that element int

yeluoxiaoxin / 0评论 2019-12-08

深入解析CSS FlexBox

Flexbox是一个CSS3的盒子模型，顾名思义它就是一个灵活的盒子。第一步要来看Flexbox的盒子模型，根据W3C文章所描述，flex的盒子模型如下图所呈现，与一般的盒子模型不同的地方，在于Flexbox的盒子模型具有水平的起点与终点，垂直的起点与终点

bwshqh / 0评论 2019-11-18

弹性盒模型常见例子

比如下面的图片所示：上面是一个标题、中间是左边是目录，中间是内容，右测是一些推荐，底部是一个版权声明。圣杯布局和双飞翼布局的共同特点都是利用float+margin的负值来实现并列的结构。

MaYangyang / 0评论 2019-11-17

假设高度已知，请写出三栏布局，其中左栏右栏宽度各为300px，中间自适应

float: left;width: 300px;background: red;float: right;width: 300px;background: blue;background: yellow;position: absolute;left :

dongyang0 / 0评论 2019-11-03

CSS3 Flexbox布局那些事

相信研究过CSS3的同学对Flexbox布局一定不会陌生。最近完成了两个项目：一个是移动端H5 项目，一个是嵌入HTML页面的mac客户端项目。为了庆祝这两个项目不用再兼容万恶的IE，同时要体现出现代浏览器的优势，决定在项目中尝试使用 Flexbox布局。

JackyCan / 0评论 2015-02-28

Flex学习站点汇总

只是页面有点杂乱，大家一般看右边那一栏就行了。FlexBox：一个收集了网上很多开源组件的站点，是进阶学习的好帮手。AdobeLabs：这个不用我说了吧。Flex2StyleExplorer：用来设计程序样式风格的工具，很好用，现在源代码已经可以下载。RI

clschen / 0评论 2011-08-05

Flexbox 很棒，但有些情况不适用

对大部分的人来说，Flexbox 可以说是完美，但它是否适合所有场景呢？简而言之，我会给出几种可用的场景，需要你重新思考 Flexbox 模型的使用。顺便说一句，本人是 Flexbox 的忠实粉丝，曾写过一篇 Flexbox 详解 ，可以算得上最全面的文章

MaYangyang / 0评论 2019-07-01

Flexbox入门教程

近几年，CSS领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。我们会在本文给出一个易于理解的flexbox入门介绍。随着CSS网格布局的引入，你可能会问flexbox布局是否真的还有必要。虽然它们所能做的事情

MaYangyang / 0评论 2019-07-01

FlexBox学习 弹性布局_019

FlexBox学习 弹性布局Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。一次只能处理一个维度上的元素布局，一行或者一列。主轴由 -direction 定

dongyang0 / 0评论 2019-07-01

Flexbox响应式网页布局 - W3Schools视频02

今日继续W3Schools响应式网页布局的实现，采用Flexbox方案。使用Flexbox实现响应式网页布局是目前最流行的做法。如果你对Flexbox并不熟悉，可以查看W3Schools的教学：。W3Schools Flexbox教学Flexbox实现响应

yeluoxiaoxin / 0评论 2019-07-01

JavaScript五十问——对比来说CSS的Grid与FlexBox（下篇）

前言在上篇——JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇），我介绍了Flex的属性与使用，今天我们来总结一下Grid的具体使用方法，最后会结合Flex与Grid布局讲一讲二者的联系与不同。需要注意得是，Grid布局与我们之

yongquanx / 0评论 2019-07-01

响应式网页布局 - W3Schools How-Tos 01

W3Schools教学系列W3Schools是知名的网页设计／前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详尽教学，还可以把它当作说明文件。有经验的前端或多或少已经接触过这个网站，因为它经常出现在搜索结果的前几项。其中，它的How

武林半侠 / 0评论 2019-07-01

CSS Flexbox 可视化手册

介绍Flexbox是 Flexible Box Module的缩写。是一种可以轻松控制html元素之间的空间分布和对齐的布局模型。Flexbox同一时间只能控制行或列中的一个维度。对于二维控制需要 CSS 网格布局。弹性容器display:flex 使容器

GeolageWu / 0评论 2019-06-30

聊聊Flexbox布局中的flex的演算法

到目前为止，Flexbox布局应该是目前最流行的布局方式之一了。而Flexbox布局的最大特性就是让Flex项目可伸缩，也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度。而这一切都是依赖于Fl

chinaitv / 0评论 2019-06-29

给萌新的Flexbox简易入门教程

近几年，CSS领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox，或者说是弹性盒子布局模块是这些新布局工具中的第一个，接着是CSS网格布局模块。我们会在本文给出一个易于理解的flexbox入门介绍

bwshqh / 0评论 2019-06-29

Flexbox Guide

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。行||列 对齐 ==row and columns==水平||垂直 对齐 ==Vertical and ho

bwshqh / 0评论 2019-06-28

flex

2009版本，我们称之为老版本，使用的是“display:box”或者“display:inline-box”；2011版本，我们称之为混合版本，使用的是“display:flexbox”或者“display:inline-flexbox”；2013版本，

yaodilu / 0评论 2017-10-16

5分钟吃透React Native Flexbox

今天我们来聊聊Flexbox，它是前端的一个布局方式。在React Native中是主流布局方式。如果你刚刚入门React Native，或者没有多少前端的技术经验，亦或者对其半知半解，那么这篇文章将很好的帮助你参透Flexbox的整个全貌。purpose

MaYangyang / 0评论 2019-06-28

[CSS]关于Flexbox

</ul>上述代码中，ul中三个li，可以将ul称为父元素，li称为子元素。要使用Flexbox，必须使父元素变成一个Flex容器。只需要显式地设置display:flex;或display:inline-flex；即可。此时子元素就会变成Fl

Phoebe的学习天地 / 0评论 2019-06-27

React Native基础&入门教程：初步使用Flexbox布局

在上篇中，笔者分享了部分安装并调试React Native应用过程里的一点经验，如果还没有看过的同学请点击《React Native基础&入门教程：调试React Native应用的一小步》。在本篇里，让我们一起来了解一下，什么是Flexbox布局

bwshqh / 0评论 2019-06-27

CSS3 Flexbox轻松实现元素的水平居中和垂直居中

网上有很多关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，赶上新技术，下面我就把这种布局叫Flex布局。元素居中，相信作为

MaYangyang / 0评论 2015-10-15

深入了解 Flexbox 伸缩盒模型（转）

本文将介绍 Flexbox 语法的技术细节。浏览器的支持越来越快，所以当 Flexbox 被广泛支持并应用时你将会快人一步。如果你想知道它是什么并是如何工作的，不妨仔细了解下吧！规范状态和浏览器支持情况Flexbox 规范的相关工作已经进展了3年。在201

bwshqh / 0评论 2015-10-13

CSS3 Flexbox布局那些事

相信研究过CSS3的同学对Flexbox布局一定不会陌生。最近完成了两个项目：一个是移动端H5 项目，一个是嵌入HTML页面的mac客户端项目。为了庆祝这两个项目不用再兼容万恶的IE，同时要体现出现代浏览器的优势，决定在项目中尝试使用 Flexbox布局。

xvzhengyang / 0评论 2015-02-28

深入了解 Flexbox 伸缩盒模型

介绍Flexbox 是 CSS3 中一个新的布局模式，为了现代网络中更为复杂的网页需求而设计。本文将介绍 Flexbox 语法的技术细节。浏览器的支持越来越快，所以当 Flexbox 被广泛支持并应用时你将会快人一步。如果你想知道它是什么并是如何工作的，不

clschen / 0评论 2015-02-05

拒绝烂大街——Flexbox布局演示站了解一下

前言最近学到Flexbox布局，当时就感觉真是一个布局的神器。终于摆脱了利用各种定位浮动布局的日子。想写文章总结一下吧，发现介绍Flexbox布局类的文章都被写烂了，各种大神写的也是生动形象，单单写一个布局用法感觉除了自己记录方便本地查并没有什么意义，于是

yeluoxiaoxin / 0评论 2019-06-27

认识flexbox布局

对于css原有布局很多都是基于float和display:table这样的布局，但是新一代CSS3问世后出现了现在风靡的flex布局方案，其布局理解大大的迎合了现在前端开发中的布局需求！Flex是Flexible Box Model的简称，可以直观的理解成

dongyang0 / 0评论 2019-06-26

CSS Grid 系列(上)-Grid布局完整指南

CSS 网格布局 是CSS中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。你可以通过将CSS规则应用于父元素和该元素的子元素，来使用网格布局。引言CSS网格布局是一个二维的基于网格的布局系统，其

afeichuanqi / 0评论 2019-06-26

CSS 终极之战：Grid VS Flexbox

其实并不奇怪，它能让我们更容易创建出动态布局，以及在容器中对其内容。然而城里新来了个小伙叫 CSSGrid，它有许多弹性盒的能力，有时候比弹性盒好用，有时候却不好用。作者点评了弹性盒、网格两者之间的差异，以及什么时候用哪种比较好。先来看下这节课的截屏预告：

libowen0 / 0评论 2019-06-26

最全面的水平垂直居中方案与flexbox布局

最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够

MaYangyang / 0评论 2019-06-25

使用 Flexbox 实现一个网格系统

}最重要的一点是给这一行的父元素的直接子元素设置flex: 1。这样元素才会平分整行空间，否则就只会占据元素本身的大小，挤在一起。那么我们有以下几个需求：。指定元素占据的列数当总的列数加起来超过12时，自动切换到下一行<div class="

GeolageWu / 0评论 2019-06-25

如何使用Flexbox和CSS Grid，实现高效布局

CSS 浮动属性一直是网站上排列元素的主要方法之一，但是当实现复杂布局时，这种方法不总是那么理想。幸运的是，在现代网页设计时代，使用 Flexbox 和 CSS Grid 来对齐元素，变得相对容易起来。同时，CSS Grid 布局也为网页设计行业带来了很大

gigipop / 0评论 2019-06-25

响应式网页设计

因为现在主流的智能终端都是基于iOS和Android的，而它们自带的浏览器都是基于webkit内核，所以我们可以完全使用viewport属性和mediaquery技术实现网站的响应性：。后面的initial-scale表示初始缩放，maximum-scal

JackyCan / 0评论 2013-05-23

2013年四月GBin1月刊

Markup是一套布局，小组件，UI组件和字体排版样式的框架，可以帮助你快速的执行web相关的设计和开发，相信没有人愿意自己花时间从最基础的层次开发web应用或者是网站，而Markup恰好很方便的帮助你解决了所有的dirtywork。阅读更多Flexbox

MaYangyang / 0评论 2013-05-07

CSS的未来：游戏的变革Flexbox

HTML5和CSS3给网络开发者提供了新的语法标签，本地动画工具，服务器端字体等等新增功能，这些并不是结束。开发者正苦于为网页设计挖出一条战壕 - 真正的页面排版工具，事实上，即便是最有前途的CSS3现在也仍旧是在地平线上。很快的，你就可以嵌入抛出你的悬浮

bwshqh / 0评论 2013-05-02

【只差一个CSS】布局：简介

我们为页面写css，就是想美化这个页面，让它变得好看，而变得好看其实可以分两步来完成，第一步是整理，第二步是修饰。我们要先把它们摆放到位，然后在这个基础上，对不同的东西进行美化，这样才能有效的美化房间。同样美化页面，我们需要先对页面元素进行整理，这种整理就

nicepainkiller / 0评论 2019-06-21

使用Flexbox布局方式的简单演示

众所周知，CSS有多重布局模型的操作，可以使页面按照不同的布局进行展现。Flexble box是另一种布局模型，简称为Flexbox。它如今经过重写，使得在编码和使用上得到非常有效的简化。关于Flexbox的介绍请关于文章: CSS的未来 - 游戏的改革者

MaYangyang / 0评论 2013-04-18

使用Flexbox布局方式的简单演示

众所周知，CSS有多重布局模型的操作，可以使页面按照不同的布局进行展现。Flexble box是另一种布局模型，简称为Flexbox。它如今经过重写，使得在编码和使用上得到非常有效的简化。关于Flexbox的介绍请关于文章: CSS的未来 - 游戏的改革者

QiuHuanmin / 0评论 2013-04-18

使用 Flexbox 使浮动元素垂直居中

垂直居中一直是一个很麻烦的问题，但基于 FlexBox 的垂直居中就非常简单了。你正在使用网格布局的框架，比如 Bootstrap、Foundation、 Skeleton、Susy 等。我们希望得到的布局就像下面这样：。是否可以使用 vertical-a

MaYangyang / 0评论 2019-06-21

CSS Grid 初识

CSS Grid 是继 Flexbox之后又一非常重要的布局方法。目前，Chrome Firefox Safari 浏览器的最新版本已经开始支持它了。本篇文章，我们通过实现如下布局的照片墙的例子来学习CSS Grid。你想想，使用Flexbox的时候你需

nicepainkiller / 0评论 2019-06-21

css3 flexbox 示例

flex-direction: row; /* row, row-reverse, column, column-reverse */

JackyCan / 0评论 2012-12-24

通过动图形象地为你介绍 flexbox 是如何工作的（一）

flexbox 承诺将我们从万恶的纯 CSS 中拯救出来。flexbox 也正在实现它的这一目标，但是用户掌握这一新的模型也将会是个挑战。因此在这里，我们将会用动图介绍 flexbox 是如何工作的，使得我们可以用它来做更好的布局。flexbox 的潜在原

bwshqh / 0评论 2019-06-21

2017年值得学习的3个CSS特性

随着新的一年到来，我们有一整套新的东西要开始学习。虽然今年的新特性有很多，但有3个新的特性是最令我激动不已的。好了，现在它已经出现在这里了。它支持除了IE浏览器之外的所有主流浏览器。Feature Queries，使用这个 @supports 规则，允许我

yezi / 0评论 2019-06-21

(译)原生CSS网格布局学习笔记

适合有一定CSS原生网格布局使用经验的开发者，原生CSS网格布局截止目前还没有被任何正式版本的浏览器实现。原文地址，译者Blog. _以下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格，可以说是在CSS网格方

gigipop / 0评论 2019-06-21