2. 程式人生 > 實用技巧 >HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第9章FlexBox實戰有路網

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第9章FlexBox實戰有路網

阿新 • • 發佈：2020-08-13

本教程案例線上演示

有路網PC端
有路網移動端

免費配套視訊教程

免費配套視訊教程

教程配套原始碼資源

教程配套原始碼資源

製作有路網水平導航選單

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>

製作有路網搜尋欄

製作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>

 

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

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

美化搜尋框

  .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;
      }

美化熱門搜尋

  .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;
      }

美化購物車

 .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" alt="">
    </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>

製作有路網推薦圖書頁面

HTML骨架

   <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>

美化頭部

    .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;
      }

美化體部大框

      .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;
      }

美化體部細節

    .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>

製作有路網近期熱銷榜

HTML骨架

     <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>

美化列表展示

  .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;
      }

美化圖文列表展示

		 .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>

相關推薦

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第2章HTML基礎知識

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第3章初識CSS

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第4章CSS文字樣式

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第5章CSS盒子模型

本教程案例線上演示 有路網PC端 有路網移動端 教程配套原始碼資源 教程配套原始碼資源

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第6章表格與表單

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第7章定位

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第8章FlexBox佈局

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第9章FlexBox實戰有路網

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第11章有路網移動端主頁實戰

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第10章有路網PC端主頁實戰整合

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

phaser3入門教程-從零開始開發一個打磚塊遊戲

專案程式碼 專案程式碼 體驗一下 空格開始，左右箭頭控制移動 體驗一下 Phaser簡介

從0開始搭建一個較健壯SpringBoot專案

經驗筆記 1.建立Maven專案匯入依賴 專案模組劃分： application 啟動層Application springboot啟動類 application.xml(專案名稱，服務埠，)等配置檔案 ApplicationConfig(用來載入其他各模組包掃描) 跳板機AutoProx

自己動手從0開始實現一個分散式RPC框架

簡介：如果一個程式設計師能清楚的瞭解RPC框架所具備的要素，掌握RPC框架中涉及的服務註冊發現、負載均衡、序列化協議、RPC通訊協議、Socket通訊、非同步呼叫、熔斷降級等技術，可以全方位的提升基本素質。雖然也有

pycharts-從0開始美化一個圖表

目標效果這個是Echarts官方的視覺化作品， 點我跳轉，今天我們就嘗試下通過pyecharts能否實現一樣的效果～

實戰經驗：“拼多多無貨源店群”新手0基礎創業，老司機手把手教你開店，月入過萬！

微信公眾號：可可無貨源電商 最近有好多朋友問我，現在開網店的那麼多，前景怎麼樣，還能賺到錢嗎？ 想必這個問題是每一個想做電商的朋友心中都會有的疑問。 確實，開網店的是多，掙錢的有，不掙錢的也有，

vue-cli3.0 + element-ui框架搭建，手把手教你搭框架

vue-cli3.0 + element-ui框架搭建，手把手教你搭框架 vue-cli3.0 + element-ui 框架搭建 從源頭開始

從 0 開始入門 Chrome Ext 安全（二） -- 安全的 Chrome Ext

作者：LoRexxar\'@知道創宇404實驗室時間：2019年12月5日 原文連結：paper.seebug.org/1092/

從0開始學習大資料之java spark程式設計入門與專案實踐

本文例項講述了大資料java spark程式設計。分享給大家供大家參考，具體如下：

黑馬程式設計師匠心之作|C++教程從0到1入門程式設計--練習-結構體陣列

作用：將自定義的結構體放入到陣列中方便維護 語法：struct 結構體名 陣列名[元素個數] = { {} , {} , … {} } #include #include using namespace std; struct Student { string name; int age; int score

黑馬程式設計師匠心之作|C++教程從0到1入門程式設計--練習-結構體中const的使用

#include #include using namespace std; struct Student { string name; int age; int score; }; //將函式中的形參改為指標，可以減少記憶體空間，而且不會複製新的副本出來 void prinarr(const Student *