web前端淘宝购物界面

DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>title>
  <style>
       .goods{
		   width: 220px;
		   height: 360px;
           border: 1px solid  #f40;
	   }
	   img{
		   width: 220px; 
	   }
	   .menu>li:hover{
		   background-color: #f40;
		   color: white;
	   }
	    
	   .menu{
		   width: 220px;
		   height: 20px;
		   background-color: black;
		   list-style: none;
		   text-align: center;
		   padding: 0%;
		   margin-top: -3.55px;
		   
		   
	   }
	   .menu > li{
		   width: 110px;
		   border: none;
		   float: left;
	   }


	   
	   .price{
		   margin-left: 5px;
		   margin-right: 5px;
	   }
	   .price > span{
		   line-height: 20px;
		   vertical-align: middle;
	   }
	   
	   .price > span:first-child{
		   color: #f40;
		   font-size: 20px;
		   font-weight: bold;
	   }
	   .price > span:nth-child(2){
		   font-size: 12px;
		   background-color: #f40;
		   color: white;
		   padding-left: 1px ;
		   padding-right: 1px;
	   }
	   .price > span:last-child{
		   float: right;
		   font-size: 12px;
		   color: #888;
	   }
	   #des{
		   margin-left: 5px;
		   margin-right: 5px;
	   }
	  
	   #des>a{
		   color: #444;
		   font-size: 9px;
		   text-decoration: none;
	   }
	   #des>a:hover{
		   text-decoration: underline;
		   color: #999;
	   }
	   #des>a:nth-child(2){
		   color: #f40;
	   }
	   #des1{
		   margin-left: 5px;
		   margin-right: 5px;
	   }
	   #des1 > a{
		   line-height: 50px;
		   vertical-align: center;
	   }
	   #des1>a{
		   color: #888;
		   font-size: 8px;
	   }
	   #des1>a:last-child{
		   float: right;
		   font-size: 8px;
		   text-decoration: none;
	   }
	   #pho > img{
		   width: 20px;
		   height: 20px;
		   margin-left: 5px;
		   margin-right: 5px;
	   }
	   #pho > :nth-child(2){
		   margin-left: -5px;
	   }
	   #pho > img:last-child{
		   width: 25px;
		   height: 25px;
		   float: right;
	   }
  style>
 head>
 <body>
   <div class="container">
	   <div class="goods">
		   <img src="./2.png" alt="loading...">
		   <ul class="menu">
			   <li>找同款li>
			   <li>找相似li>
		   ul>
		   <div class="price">
		   <span>¥520.13span>
		   <span>包邮span>
		   <span>2000+人付款span>
	   div>
	   <div id="des">
		   <a href="#">欧兰薇雅a>
		   <a href="#">欧洲进口水晶珍珠水晶珍珠a>
		   <a href="#">戒指a>
		   <a href="#">女食指指环心形 礼物a>
	   div>
	   <div id="des1">
		   <a href="#">欧兰薇男士舰店a>
		   <a href="#">广东广州a>
	   div>
	   <div id="pho"> 
		   <img src="1.png" alt="loading...">
		   <img src="2.png" alt="loading...">
		   <img src="3.png" alt="loading...">
	   div>
	   div>
   div>
 body>
html>

web前端淘宝购物界面_第1张图片
web前端淘宝购物界面_第2张图片
web前端淘宝购物界面_第3张图片

你可能感兴趣的:(前端,html)