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

html+css简单仿制淘宝商品界面_用html制作淘宝网页

作者：你好赵伟 | 2024-08-18 07:57:26

赞

踩

用html制作淘宝网页

目录

一.主要思路

二.完整代码 

三.最终效果

一.主要思路

1.写一个大盒子，将内部分为如图几个部分，分别写对应的内容

2.首先给整个盒子宽高，传进图片后调整图片宽高

3.重点在于“找同款”和“买家秀”的隐藏效果写法

4.需要考虑到图片与“找同款”“买家秀”的相对绝对位置关系，图片作为父级元素，“找同款”“买家秀”作为子元素

5.还需要注意的是底部活动图标的位置大小调整，需要先给小盒子合适的宽高，再根据盒子的宽高调整图片的大小，最后调整左右间距，达到理想效果即可

二.完整代码 

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>仿制淘宝商品界面</title>
  6. 		<style type="text/css">
  7. 			.all{
  8. 				width: 250px;
  9. 				height: 380px;
  10. 				float: left;
  11. 				margin: 50px;
  12. 				border: 1px solid rosybrown;
  13. 			}
  14. 			.imagehover,img{
  15. 				width: 250px;
  16. 				height: 250px;
  17. 			}
  18. 			.imagehover{
  19. 				position: relative;
  20. 			}
  21. 			.imagehoverchild{
  22. 				position: absolute;
  23. 				bottom: 0px;
  24. 				display: none;          
  25. 			}
  26. 			.imagehoverchild>div{
  27. 				width: 125px;
  28. 				float: left;
  29. 				background-color: orangered;
  30. 				text-align: center;
  31. 				color: white;
  32. 			}
  33. 			.imagehoverchild>div:first-child{
  34. 				width: 124px;
  35. 				border-right: 1px solid white;
  36. 				border-top-left-radius: 25%;
  37. 			}
  38. 			.imagehoverchild>div:last-child{
  39. 				border-top-right-radius: 25%;
  40. 			}
  41. 			.imagehover:hover>.imagehoverchild{
  42. 				display: block;                  
  43. 			}
  44. 			.message{
  45. 				height: 0px;
  46. 			}
  47. 			.message>span:first-child{
  48. 				font-size: 20px;
  49. 				font-weight: 200px;
  50. 				color: orange;
  51. 			}
  52. 			.message>span:nth-child(2){
  53. 				font-size: 14px;
  54. 				background-color: red;
  55. 				color: white;
  56. 				padding-left: 2px;
  57. 				padding-right: 2px;
  58. 			}
  59. 			.message>span:nth-child(3){
  60. 				font-size: 14px;
  61. 				float: right;
  62. 				color: #999;
  63. 				padding-right: 5px;
  64. 				padding-top: 4px;
  65. 			}
  66. 			.message>span:nth-child(4){
  67. 				font-size: 15px;
  68. 				color: black;
  69. 			}
  70. 			.store>a{
  71. 				font-size: 15px;
  72. 				padding-left: 3px;
  73. 			}
  74. 			.store>span{
  75. 				font-size: 14px;
  76. 				vertical-align: middle;
  77. 				float: right;
  78. 				color: #999;
  79. 			}
  80. 			.store{
  81. 				margin-right: 2px;
  82. 			}
  83. 			.activitiesimg>a:first-child{
  84. 				display: inline-block;
  85. 				width: 60px;
  86. 				height: 30px;
  87. 				background-size: 60px 30px;
  88. 				background-image: url("双十一1.png");
  89. 			}
  90. 			.activitiesimg>a:nth-child(2){
  91. 				display: inline-block;
  92. 				width: 30px;
  93. 				height: 30px;
  94. 				background-size: 30px 30px;
  95. 				background-image: url("天猫.png");
  96. 			}
  97. 			.activitiesimg>a:last-child{
  98. 				display: inline-block;
  99. 				width: 30px;
  100. 				height: 30px;
  101. 				background-size: 30px 30px;
  102. 				background-image: url("小精灵.png");
  103. 				float: right;
  104. 			}
  105. 			.activitiesimg{
  106. 				padding-top: 5px;
  107. 			}
  108. 		</style>
  109. 	</head>
  110. 	<body>
  111. 		<div class="all">
  112. 			<div class="imagehover">
  113. 				<img src="狼.png" alt="">
  114. 				<div class="imagehoverchild">
  115. 					<div>找同款</div>
  116. 					<div>买家秀</div>
  117. 				</div>
  118. 				<div class="message">
  119. 					<span>￥666.00&nbsp;&nbsp;</span>   
  120. 					<span>包邮&nbsp;</span>         
  121. 					<span>6万+人付款</span>         
  122. 					<span>xxxxxx加绒卫衣男冬款<span style="color: red;">衣服</span>情侣xx秋装上衣xx印花外套</span>
  123. 					<div class="store">
  124. 						<a href="#">xxxxxxxx旗舰店</a>
  125. 						<span>四川-成都</span>
  126. 					</div>
  127. 					<div class="activitiesimg">
  128. 						<a href="#"></a>
  129. 						<a href="#"></a>
  130. 						<a href="#"></a>
  131. 					</div>
  132. 				</div>
  133. 			</div>
  134. 		</div>	
  135. 	</body>
  136. </html>
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>仿制淘宝商品界面</title>
        <style type="text/css">
            .all{
                width: 250px;
                height: 380px;
                float: left;
                margin: 50px;
                border: 1px solid rosybrown;
            }
            /*整体给个宽、高、边框*/
            .imagehover,img{
                width: 250px;
                height: 250px;
            }
            .imagehover{
                position: relative;
            }
            /*大图片部分*/
            .imagehoverchild{
                position: absolute;
                bottom: 0px;
                display: none;          
            }
            .imagehoverchild>div{
                width: 125px;
                float: left;
                background-color: orangered;
                text-align: center;
                color: white;
            }
            .imagehoverchild>div:first-child{
                width: 124px;
                border-right: 1px solid white;
                border-top-left-radius: 25%;
            }
            .imagehoverchild>div:last-child{
                border-top-right-radius: 25%;
            }
            .imagehover:hover>.imagehoverchild{
                display: block;                  
            }
            /*找同款和买家秀部分*/
            .message{
                height: 0px;
            }
            .message>span:first-child{
                font-size: 20px;
                font-weight: 200px;
                color: orange;
            }
            .message>span:nth-child(2){
                font-size: 14px;
                background-color: red;
                color: white;
                padding-left: 2px;
                padding-right: 2px;
            }
            .message>span:nth-child(3){
                font-size: 14px;
                float: right;
                color: #999;
                padding-right: 5px;
                padding-top: 4px;
            }
            .message>span:nth-child(4){
                font-size: 15px;
                color: black;
            }
            /*价格、包邮、购买人数、商品信息部分*/
            .store>a{
                font-size: 15px;
                padding-left: 3px;
            }
            .store>span{
                font-size: 14px;
                vertical-align: middle;
                float: right;
                color: #999;
            }
            .store{
                margin-right: 2px;
            }
            /*店铺、地区部分*/
            .activitiesimg>a:first-child{
                display: inline-block;
                width: 60px;
                height: 30px;
                background-size: 60px 30px;
                background-image: url("双十一1.png");
            }
            .activitiesimg>a:nth-child(2){
                display: inline-block;
                width: 30px;
                height: 30px;
                background-size: 30px 30px;
                background-image: url("天猫.png");
            }
            .activitiesimg>a:last-child{
                display: inline-block;
                width: 30px;
                height: 30px;
                background-size: 30px 30px;
                background-image: url("小精灵.png");
                float: right;
            }
            .activitiesimg{
                padding-top: 5px;
            }
            /*底部三个活动图部分*/
        </style>
    </head>
    <body>
        <div class="all">
            <div class="imagehover">
                <img src="狼.png" alt="">
                <div class="imagehoverchild">
                    <div>找同款</div>
                    <div>买家秀</div>
                </div>
                <div class="message">
                    <span>￥666.00&nbsp;&nbsp;</span>   
                    <span>包邮&nbsp;</span>         
                    <span>6万+人付款</span>         
                    <span>xxxxxx加绒卫衣男冬款<span style="color: red;">衣服</span>情侣xx秋装上衣xx印花外套</span>
                    <div class="store">
                        <a href="#">xxxxxxxx旗舰店</a>
                        <span>四川-成都</span>
                    </div>
                    <div class="activitiesimg">
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                </div>
            </div>
        </div>    
    </body>
</html>

三.最终效果

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

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

  

闽ICP备14008679号