AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

2023-05-17 251
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

本教程案例在线演示


有路网PC端

有路网移动端


免费配套视频教程


免费配套视频教程


教程配套源码资源


教程配套源码资源


制作有路网水平导航菜单


image.png

image

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>


制作有路网搜索栏

image.png

image

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


image.png

image

美化logo

image.png

image

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


美化搜索框

image.png

image

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


美化热门搜索


image.png

image

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


美化购物车

image.png

image

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


制作有路网推荐图书页面


image.png

image

HTML骨架


imageimage.png

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

美化头部

image.png

image

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

美化体部大框

image.png

image

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

美化体部细节

image.png

image

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

制作有路网近期热销榜

image.png

image

HTML骨架

image.png

image

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

美化列表展示


image.png

image

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

美化图文列表展示

image.png

image

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


文章标签：
前端开发
关键词：
前端开发
前端教程
HTML CSS
HTML教程
前端学习
豆约翰
目录
相关文章
卓伊凡
|
4月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
卓伊凡
112 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
土木林森
|
7月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
122 6
html的七十二变
|
7月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局（Flexbox）：构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局（Flexbox）是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例，帮助读者快速掌握这一强大布局方法。
html的七十二变
737 5
游客44yag4ft7nckq
|
8月前
|
XML 数据格式
HTML 实例解析
本文介绍了HTML中常见元素的使用方法，包括`&lt;p&gt;`、`&lt;body&gt;`和`&lt;html&gt;`等。详细解析了这些元素的结构和作用，并强调了正确使用结束标签的重要性。此外，还提到了空元素的使用及大小写标签的规范。
游客44yag4ft7nckq
53 1
小徐在进步
|
9月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性，包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签，用于创建超链接，并展示了如何设置目标页面打开方式。最后，文档还涵盖了如何在网页中嵌入音频和视频文件，包括简化写法及常用属性。
小徐在进步
170 13
六卿
|
9月前
|
前端开发
前端基础(二)_HTML常用标签（块级标签、行级标签、行块级标签）
本文详细介绍了HTML中的常用标签，包括块级标签（如`h1`至`h6`、`p`、`div`等）、行级标签（如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等），以及行块级标签（如`img`）。文章解释了这些标签的用途、特点和基本用法，并通过示例代码展示了如何在HTML文档中使用它们。
六卿
628 1
土木林森
|
10月前
|
存储 移动开发 前端开发
HTML5时代来临，这些新特性你掌握了吗？一篇文章带你玩转Web前端技术潮流！
【8月更文挑战第26天】HTML5（简称H5）作为新一代Web标准，相比HTML4带来了诸多增强功能。
土木林森
161 2
土木林森
|
10月前
|
前端开发 容器
【CSS Flexbox 探秘】弹性盒模型：揭秘网页布局的终极神器！
【8月更文挑战第25天】Flexbox 是 CSS3 中的关键特性，为网页设计提供了强大的布局能力。本文通过问答形式全面解析 Flexbox 的核心概念与属性，包括容器与项目属性，并通过示例演示如何使用 Flexbox 实现水平与垂直居中、等间距布局及响应式设计。相较于传统布局方法，Flexbox 更加灵活且简化了样式设置，同时在现代浏览器中拥有良好的支持度。掌握 Flexbox 对于提升网页布局效率至关重要。
土木林森
168 1
六卿
|
9月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas，结合jspdf实现下载pdf（下载截图下载前端dom元素）
本文介绍了在前端项目中，当使用`html2canvas`遇到问题时，如何使用`html-to-image`库作为替代方案，结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题，并提供了该库的使用示例代码。随后，详细介绍了`html-to-image`库的安装和使用方法，展示了如何将DOM元素转换为Canvas，再利用`jspdf`生成PDF文件。最后，文章通过示例代码说明了整个转换和下载的过程，并展示了效果截图。
六卿
664 0
土木林森
|
10月前
|
容器 C# 开发者
XAML语言大揭秘：WPF标记的魅力所在，让你轻松实现界面与逻辑分离，告别复杂代码！
【8月更文挑战第31天】XAML提供了一种直观且易于维护的界面设计方式，使得开发者可以专注于逻辑和业务代码的编写，而无需关心界面细节。通过数据绑定、布局管理和动画效果等特性，XAML可以实现丰富的界面交互和视觉效果。在实际开发过程中，开发者应根据具体需求选择合适的技术方案，以确保应用程序能够满足用户的需求。希望本文的内容能够帮助您在WPF应用程序开发中更好地利用XAML语言。
土木林森
109 0

热门文章

最新文章

  • 1
    Vue与TypeScript：如何实现更强大的前端开发
  • 2
    PHP后端与uni-app前端协同的校园圈子系统：校园社交场景的跨端开发实践
  • 3
    用通义灵码IDE做产品高保真原型和前端页面
  • 4
    【微前端】singleSpa&importHTMLEntry（流程图）源码解析
  • 5
    前端使用正则表达式检查是否为十六进制字符串
  • 6
    前端使用正则表达式提取经纬度 度分秒值
  • 7
    前端工具方法整理
  • 1
    PHP将HTML标签转化为图片
    379
  • 2
    基于 HTML5 和 Canvas 开发的在线图片编辑器
    214
  • 3
    阿里云云效产品使用合集之代码域如何管理上传的PHP和HTML代码
    261
  • 4
    使用 XPath 定位 HTML 中的 img 标签
    137
  • 5
    2024较火的软件宣传单页HTML源码
    261
  • 6
    Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强。
    426
  • 7
    Sphinx是一个Python文档生成工具，它可以解析reStructuredText或Markdown格式的源代码注释，并生成多种输出格式，如HTML、LaTeX、PDF、ePub等。
    349
  • 8
    【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
    892
  • 9
    提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
    379
  • 10
    动态粒子发射404网站HTML源码
    126

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS