devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果_要求:模仿制作淘宝书籍商品展示 中型设备上,一行4个商品 小型屏幕上,一行2个商品

作者：Monodyee | 2024-05-18 10:05:33

赞

踩

要求:模仿制作淘宝书籍商品展示 中型设备上,一行4个商品 小型屏幕上,一行2个商品

Bootstrap 网格系统

1、Bootstrap网格系统工作原理

      Bootstrap的网格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列。

       网格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

       开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局。

       网格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器）尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。

       Bootstrap的网格系统使用一系列容器类（container），行（row）和列（column）的组合来创建页面布局。

       网格中每一行需要放在设置了 .container或 .container-fluid 类的容器中。

       使用行.row来创建水平的列组。并且行必须包含在布局容器中，以便为其赋予合适的排列和内补

       列使用样式.col-*-*，创建一组列并且只有列可以作为行的直接子元素。

例1：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="container">
  13. 			<div class="row">
  14. 				<div class="col-sm-1 border">col-sm-1</div>
  15. 				<div class="col-sm-1 border">col-sm-1</div>
  16. 				<div class="col-sm-1 border">col-sm-1</div>
  17. 				<div class="col-sm-1 border">col-sm-1</div>
  18. 				<div class="col-sm-1 border">col-sm-1</div>
  19. 				<div class="col-sm-1 border">col-sm-1</div>
  20. 				<div class="col-sm-1 border">col-sm-1</div>
  21. 				<div class="col-sm-1 border">col-sm-1</div>
  22. 				<div class="col-sm-1 border">col-sm-1</div>
  23. 				<div class="col-sm-1 border">col-sm-1</div>
  24. 				<div class="col-sm-1 border">col-sm-1</div>
  25. 				<div class="col-sm-1 border">col-sm-1</div>
  26. 			</div>
  27. 			<div class="row">
  28. 				<div class="col-sm-9 border">col-sm-9</div>
  29. 				<div class="col-sm-3 border">col-sm-3</div>
  30. 			</div>
  31. 			<div class="row">
  32. 				<div class="col-sm-6 border">col-sm-6</div>
  33. 				<div class="col-sm-6 border">col-sm-6</div>
  34. 			</div>
  35. 			<div class="row">
  36. 				<div class="col-sm-4 border">col-sm-4</div>
  37. 				<div class="col-sm-4 border">col-sm-4</div>
  38. 				<div class="col-sm-4 border">col-sm-4</div>
  39. 			</div>
  40. 		</div>
  41. 	</body>
  42. </html>

结果图：

0e5c0a93c08544b4ab0d4512efbd8719.png

2、 网格系统前缀

      栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-*、.col-sm-*、.col-md-*、.col-lg-*和.col-xl-*类名。

      当同时使用这些类的时候，它会根据当前屏幕的大小来使相应的类生效，实现在不同屏幕下展示不同的页面结构。

Bootstrap 4的网格系统在各种屏幕和设备上的约定如下表所示：

ab3bb866e6564a15a0e7d8b85d8baf80.png

 例2：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="container">
  13. 			<div class="row">
  14. 				<div class="col-sm-3 border">col-sm-3</div>
  15. 				<div class="col-sm-9 border">col-sm-9</div>
  16. 			</div>
  17. 			<div class="row">
  18. 				<div class="col-md-3 border">col-md-3</div>
  19. 				<div class="col-md-9 border">col-md-9</div>
  20. 			</div>
  21. 		</div>
  22. 	</body>
  23. </html>

结果图：

80a4f7c04ca74f06b66c8ae6d87d3ff2.png

例3：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="container">
  13. 			<div class="row">
  14. 				<div class="col-12 col-md-5 border">.col-12.col-md-8</div>
  15. 				<div class="col-6 col-md-4 border">.col-6.col-md-4</div>
  16. 			</div>
  17. 			<div class="row">
  18. 				<div class="col-6 col-md-4 border">.col-6.col-md-4</div>
  19. 				<div class="col-6 col-md-4 border">.col-6.col-md-4</div>
  20. 				<div class="col-6 col-md-4 border">.col-6.col-md-4</div>
  21. 			</div>
  22. 		</div>
  23. 	</body>
  24. </html>

 结果图：

a5625851fe5246f7a248dc21b9815a85.png

3、利用网格系统实现导航栏效果

例4：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <meta name="viewport"
  8.         content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  9.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  10.     <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  11.     <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  12.     <style>
  13.         * {
  14.             margin: 0;
  15.             padding: 0;
  16.         }
  17.  
  18.         li {
  19.             list-style: none;
  20.         }
  21.  
  22.         .row {
  23.             margin-bottom: 0;
  24.         }
  25.  
  26.         .container {
  27.             background-color: #eee;
  28.         }
  29.  
  30.         .col-sm-12 {
  31.             text-align: center;
  32.             padding: 10px;
  33.             font-size: 30px;
  34.         }
  35.  
  36.         li:hover {
  37.             background-color: #fff;
  38.         }
  39.     </style>
  40. </head>
  41.  
  42. <body>
  43.     <div class="container">
  44.         <ul class="row">
  45.             <li class="col-md-3 col-sm-12">首页</li>
  46.             <li class="col-md-3 col-sm-12">新闻资讯</li>
  47.             <li class="col-md-3 col-sm-12">关于我们</li>
  48.             <li class="col-md-3 col-sm-12">客户服务</li>
  49.         </ul>
  50.     </div>
  51. </body>
  52.  
  53. </html>

 结果图：

平板设备下页面效果：

97f3cfaf94f445f5b0d69cc524c9deba.png

 切换到手机模式（在这里选择使用iPhone X），页面效果：

a3794b643897471783ae5eae16fb2a9c.png

 4、栅格系统中的列嵌套

栅格系统中内置的栅格系统可以将内容再次嵌套。 实现的主要思路： 我们在现有的div.col-md-*元素的内部，再去添加一个新的div.row元素和一系列的div.col-md-*元素。

例5：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <meta name="viewport"
  8.         content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  9.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  10.     <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  11.     <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  12.     <style>
  13.         .row>div {
  14.             height: 50px;
  15.             background-color: #eee;
  16.         }
  17.  
  18.         .col-md-4 {
  19.             border: 1px solid #fff;
  20.             text-align: center;
  21.             line-height: 50px;
  22.             font-size: 30px;
  23.         }
  24.  
  25.         .col-md-6 {
  26.             border: 1px solid #fff;
  27.         }
  28.     </style>
  29. </head>
  30.  
  31. <body>
  32.     <div class="container">
  33.         <div class="row">
  34.             <div class="col-md-4">
  35.                 <div class="row">
  36.                     <div class="col-md-6">第一列</div>
  37.                     <div class="col-md-6">第二列</div>
  38.                 </div>
  39.             </div>
  40.             <div class="col-md-4">第三列</div>
  41.             <div class="col-md-4">第三列</div>
  42.         </div>
  43.     </div>
  44. </body>
  45.  
  46. </html>

结果图：

17b2e08141a5419e96869c7cc1c5bf94.png

 例6：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="container">
  13. 			<div class="row">
  14. 				<div class="col-md-3 border">左排列</div>
  15. 				<div class="col-md-9 border">
  16. 					右边列嵌套了一个row
  17. 					<div class="row">
  18. 					<div class="col-md-6 border">
  19. 						第一行第一列
  20. 					</div>
  21. 					<div class="col-md-6 border">
  22. 						第一行第二列
  23. 					</div>
  24. 				</div>
  25. 				<div class="row">
  26. 					<div class="col-md-6 border">
  27. 						第二行第一列
  28. 					</div>
  29. 					<div class="col-md-6 border">
  30. 						第二行第二列
  31. 					</div>
  32. 				</div>
  33. 			</div>
  34. 		</div>
  35. 	</body>
  36. </html>

结果图：

30cc92b17fa646d69a768e729f543972.png

 5、栅格系统中的列偏移

栅格系统：使用.offset-md-*类将列向右侧偏移， 主要是通过使用.offset-md-*获取到当前元素并且增加了当前元素左侧的边距（margin）来实现的。 md可以使用sm、xl和lg等替代，分别表示在不同屏幕下设置列的偏移。

例7：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <meta name="viewport"
  8.         content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  9.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  10.     <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  11.     <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  12.     <style>
  13.         .row div {
  14.             height: 50px;
  15.             background-color: #eee;
  16.             font-size: 30px;
  17.         }
  18.     </style>
  19.  
  20. </head>
  21.  
  22. <body>
  23.     <div class="container">
  24.         <div class="row">
  25.             <div class="col-md-3">左侧</div>
  26.             <div class="col-md-3 offset-md-6">右侧</div>
  27.         </div>
  28.     </div>
  29. </body>
  30.  
  31. </html>

结果图：

dc32d9c652634e919b69724c15862448.png

 例8：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="container">
  13. 			<div class="row">
  14. 				<div class="col-md-3 border">.col-md-3</div>
  15. 				<div class="col-md-6 offset-md-2 border">.col-md-6 .offset-md-2</div>
  16. 			</div>
  17. 			<div class="row">
  18. 				<div class="col-md-3 offset-md-3 border">.col-md-3 .offset-md-3</div>
  19. 				<div class="col-md-3 offset-md-3 border">.col-md-3 .offset-md-3</div>
  20. 			</div>
  21. 			<div class="row">
  22. 				<div class="col-md-6 offset-md-3 border">.col-md-6 .offset-md-3</div>
  23. 				<div class="col-md-6 offset-md-3 border">.col-md-2 .offset-md-3</div>
  24. 			</div>
  25. 		</div>
  26. 	</body>
  27. </html>

结果图：

0af92b00e4c4406e98ccafea3dd51588.png

6、栅格系统中的自动布局列

             利用特定于断点的列类来轻松调整列大小，而无需使用显式编号的类。

例9：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="container">
  13. 			<div class="row">
  14. 				<div class="col border">1/2</div>
  15. 				<div class="col border">1/2</div>
  16. 			</div>
  17. 			<div class="row">
  18. 				<div class="col border">1/3</div>
  19. 				<div class="col border">1/3</div>
  20. 				<div class="col border">1/3</div>
  21. 			</div>
  22. 			<div class="row">
  23. 				<div class="col border">1/4</div>
  24. 				<div class="col border">1/4</div>
  25. 				<div class="col border">1/4</div>
  26. 				<div class="col border">1/4</div>
  27. 			</div>
  28. 		</div>
  29. 	</body>
  30. </html>

 结果图：

391ecff67ee541d48811e841dbf31caa.png

            创建跨多个行的等宽列，方法的插入w-100通用样式类，将列拆分为新行 

例9：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="container">
  13. 			<div class="row">
  14. 				<div class="col border">col</div>
  15. 				<div class="col border">col</div>
  16. 				<div class="w-100"></div>
  17. 				<div class="col border">col</div>
  18. 				<div class="col border">col</div>
  19. 			</div>
  20. 		</div>
  21. 	</body>
  22. </html>

结果图：

bd0c5bddb22749858f6afe094c40203e.png

            可以在一行多列的情况下，设置一列的宽度，其它列则会自动调整大小

例10：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="container">
  13. 			<div class="row">
  14. 				<div class="col border">
  15. 					col
  16. 				</div>
  17. 				<div class="col-8 border">
  18. 					col-8
  19. 				</div>
  20. 				<div class="col border">
  21. 					col
  22. 				</div>
  23. 			</div>
  24. 			<div class="row">
  25. 				<div class="col-5 border">
  26. 					col-5
  27. 				</div>
  28. 				<div class="col border">
  29. 					col
  30. 				</div>
  31. 				<div class="col border">
  32. 					col
  33. 				</div>
  34. 			</div>
  35. 		</div>
  36. 	</body>
  37. </html>

结果图：

9af5f40d6d8a40bf97105f66d22f14e6.png

可变宽度内容示例。使用.col-{breakpoint}-auto类，可根据其内容的自然宽度来调整列的大小。

例11：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="container">
  13. 			<div class="row justify-content-md-center">
  14. 				<div class="col col-lg-2 border">
  15. 					左
  16. 				</div>
  17. 				<div class="col col-md-auto border">
  18. 					中(当屏幕尺寸大于等于768px时,可根据内容调整列宽度)
  19. 				</div>
  20. 				<div class="col col-lg-2 border">
  21. 					右
  22. 				</div>
  23. 			</div>
  24. 			<div class="row">
  25. 				<div class="col border">
  26. 					左
  27. 				</div>
  28. 				<div class="col col-md-auto border">
  29. 					中(当屏幕尺寸大于等于768px时,可根据内容调整列宽度)
  30. 				</div>
  31. 				<div class="col col-lg-2 border">
  32. 					右
  33. 				</div>
  34. 			</div>
  35. 		</div>
  36. 	</body>
  37. </html>

 结果图：

4e2b2e685cee46e783ae6640cae8035e.png

7、栅格系统中的重排序

Bootstrap4提供了.order-*类控制网页元素的排列顺序。 .order-*类从.order-1（排在最前）到.order-12（排在最后）一共12个级别。这些类是响应式的，可以按断点设置顺序（例如.order-1.order-md-2）。如果元素没有定义.order-*类，则默认排在前面。

排列顺序示例：例12：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="container">
  13. 			<div class="row">
  14. 				<div class="col border">
  15. 					col
  16. 				</div>
  17. 				<div class="col order-12 border">
  18. 					col-12
  19. 				</div>
  20. 				<div class="col order-1 border">
  21. 					col-1
  22. 				</div>
  23. 				<div class="col order-5 border">
  24. 					col-5
  25. 				</div>
  26. 			</div>
  27. 		</div>
  28. 	</body>
  29. </html>

 结果图：

0ef8219ce57a4cab87ee24b0acb310cf.png

 .order-first和.order-last类示例：例13：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  8. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="container">
  13. 			<div class="row">
  14. 				<div class="col order-last border">
  15. 					First in DOM,  ordered last
  16. 				</div>
  17. 				<div class="col border">
  18. 					Second in DOM, unordered
  19. 				</div>
  20. 				<div class="col order-first border">
  21. 					Third in DOM, ordered first
  22. 				</div>
  23. 			</div>
  24. 		</div>
  25. 	</body>
  26. </html>

模仿淘宝网站商品展示的页面效果，使用Bootstrap的网格系统进行布局

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<title></title>
  7. 	<meta name="viewport"
  8. 		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  9. 	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  10. 	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  11. 	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  12. 	<style type="text/css">
  13. 		.product {
  14. 			border: 1px solid #ddd;
  15. 		}
  16.  
  17. 		.product:hover {
  18. 			border: 1px solid #f00;
  19. 		}
  20.  
  21. 		.product-image {
  22. 			position: relative;
  23. 			overflow: hidden;
  24. 		}
  25.  
  26. 		.product-image img {
  27. 			width: 100%;
  28. 		}
  29.  
  30. 		.product-image.find {
  31. 			position: absolute;
  32. 			left: 0px;
  33. 			bottom: -35px;
  34. 			display: block;
  35. 			width: 100%;
  36. 			line-height: 35px;
  37. 			background-color: rgba(255, 0, 0, 0.85);
  38. 			transition: 0.5s;
  39. 		}
  40.  
  41. 		.product-image.find a {
  42. 			display: inline-block;
  43. 			width: 50%;
  44. 			font-size: 16px;
  45. 			color: #fff;
  46. 			text-align: center;
  47. 			text-decoration: none;
  48. 		}
  49.  
  50. 		.product-image.find a.same {
  51. 			float: left;
  52. 		}
  53.  
  54. 		.product-image.find a.simlar {
  55. 			float: right;
  56. 		}
  57.  
  58. 		.product-image:hover.find {
  59. 			bottom: 0px;
  60. 		}
  61.  
  62. 		.product-image:hover.find a {
  63. 			border-right: 1px solid #fff;
  64. 		}
  65.  
  66. 		.product-content {
  67. 			padding: 5px 10px;
  68. 		}
  69.  
  70. 		.product-content.price {
  71. 			font-size: 18px;
  72. 			color: #f00;
  73. 		}
  74.  
  75. 		.product-content a {
  76. 			font-size: 14px;
  77. 			color: #000;
  78. 			text-decoration: none;
  79. 		}
  80.  
  81. 		.product-content a:hover {
  82. 			color: #f00;
  83. 			text-decoration: underline;
  84. 		}
  85. 	</style>
  86. </head>
  87.  
  88. <body>
  89. 	<div class="container">
  90. 		<div class="row">
  91. 			<div class="col-sm-6 col-md-3">
  92. 				<div class="product">
  93. 					<div class="product-image">
  94. 						<a href="#"><img src="img/pic1.jpg" class="img-fluid" /></a>
  95. 						<span class="find">
  96. 							<a href="#" class="same">找同款</a>
  97. 							<a href="#" class="simlar">找相似</a>
  98. 						</span>
  99. 					</div>
  100. 					<div class="product-content">
  101. 						<div class="price">&yen;66</div>
  102. 						<span class="title">
  103. 							<a href="#">第一辑全套10册启蒙早教动画小猪佩奇书英文版绘本</a>
  104. 						</span>
  105. 					</div>
  106. 				</div>
  107. 			</div>
  108. 			<div class="col-sm-06 col-md-3">
  109. 				<div class="product">
  110. 					<div class="product-image">
  111. 						<a href="#"><img src="img/pic2.webp" class="img-fluid" /></a>
  112. 						<span class="find">
  113. 							<a href="#" class="same">找同款</a>
  114. 							<a href="#" class="simlar">找相似</a>
  115. 						</span>
  116. 					</div>
  117. 					<div class="product-content">
  118. 						<div class="price">&yen;83</div>
  119. 						<span class="title">
  120. 							<a href="#">全套10册汪汪队故事书绘本汪汪队立大功儿童安全救援</a>
  121. 						</span>
  122. 					</div>
  123. 				</div>
  124. 			</div>
  125. 			<div class="col-sm-6 col-md-3">
  126. 				<div class="product">
  127. 					<div class="product-image">
  128. 						<a href="#"><img src="img/pic3.webp" class="img-fluid" /></a>
  129. 						<span class="find">
  130. 							<a href="#" class="same">找同款</a>
  131. 							<a href="#" class="simlar">找相似</a>
  132. 						</span>
  133. 					</div>
  134. 					<div class="product-content">
  135. 						<div class="price">&yen;220</div>
  136. 						<span class="title">
  137. 							<a href="#">丁丁历险记全套22册儿童漫画故事书丁丁在刚果</a>
  138. 						</span>
  139. 					</div>
  140. 				</div>
  141. 			</div>
  142. 			<div class="col-sm-6 col-md-3">
  143. 				<div class="product">
  144. 					<div class="product-image">
  145. 						<a href="#"><img src="img/pic4.jpg" class="img-fluid" /></a>
  146. 						<span class="find">
  147. 							<a href="#" class="same">找同款</a>
  148. 							<a href="#" class="simlar">找相似</a>
  149. 						</span>
  150. 					</div>
  151. 					<div class="product-content">
  152. 						<div class="price">&yen;62</div>
  153. 						<span class="title">
  154. 							<a href="#">睡衣小英雄故事书系列全套8册书彩图注音版</a>
  155. 						</span>
  156. 					</div>
  157. 				</div>
  158. 			</div>
  159. 		</div>
  160. 	</div>
  161.  
  162.  
  163.  
  164.  
  165. </body>
  166.  
  167. </html>

结果图：

e083897b4368458daa50a57d6aa01145.png

 

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号