当前位置:网站首页>Xiaomi TV's web page and jewelry's web page

Xiaomi TV's web page and jewelry's web page

2022-06-26 03:22:00 Small vegetable bird yard live

Millet TV

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{ padding: 0;
				margin: 0;
			}
			.a{ 
				width: 1150px;
				height: 620px;
				padding: 2px;
				margin: 2px auto;
				border: 4px solid gainsboro;
			}
			.b{
				width: 234px;
				height:614px;
				float: left;
			
				
			}
			.c{
				width: 914px;
				height: 614px;
				float: left;
				margin-top: 0px;
			
			}
			.d{width: 220px;
			   height: 300px;
				float: left;
				border: 2px solid black;
				margin: 2px;
				text-align: center;
				overflow: hidden;
				position: relative;/* Relative */
			}
			.d img{
				padding-top: 70px;
			
			}
			.d p{
				
				width: 228px;
				height: 50px;
				bottom: -50px;
				position: absolute;/* complete , Absolute */
				transition: 1s;
				/*opacity: 0.5;*/
				background-color:rgba(0,0,255,0.5);
			}
			.d:hover p{
				bottom:0;
			}
			.e li{
				list-style: none;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="a">
			<div class="b">
				<img src="img/mi.png">
			</div>
			<div class="c">
				<div class="d">
				<p>999 element <s>1199 element </s></p>
					<img src="img/m1.png" >
					<div class="e"><li> Millet TV 3</li></div>
				</div>
				<div class="d">
				<p>1099 element <s>1399 element </s></p>
					<img src="img/m2.png">
					<div class="e"><li> Millet TV 5</li></div>
				</div>
				<div class="d">
					<p>4999 element <s>5199 element </s></p>
					<img src="img/m3.png">
					<div class="e"><li> Xiaomi computer </li></div>
				</div>
				<div class="d">
					<p>5999 element <s>6199 element </s></p>
					<img src="img/mi4.png">
					<div class="e"><li> Xiaomi computer </li></div>
				</div>
				<div class="d">
					<p>999 element <s>1199 element </s></p>
					<img src="img/m1.png">
					<div class="e"><li> Millet TV 3</li></div>
				</div>
				<div class="d">
					<p>1099 element <s>1399 element </s></p>
					<img src="img/m2.png">
					<div class="e"><li> Millet TV 5</li></div>
				</div>
				<div class="d">
					<p>4999 element <s>5199 element </s></p>
					<img src="img/m3.png">
					<div class="e"><li> Xiaomi computer </li></div>
				</div>
				<div class="d">
				<p>5999 element <s>6199 element </s></p>
					<img src="img/mi4.png">
					<div class="e"><li> Xiaomi computer </li></div>
				</div>
			</div>
		</div>
		
	</body>
</html>

 Insert picture description here
jewelry

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
         <link rel="stylesheet" type="text/css" href="guoqing.css"/>
	</head>

	<body>
		<div class="big">
			<div class="one">
				<div class="header">
					<p> well , Welcome to the shopping mall !</p>
					<li>
						<a href=""> Please log in </a>
						<a href=""> Free registration </a>
						<a href=""> My order <img src="img/nav1.png"></a>
						<a href=""> My guess <img src="img/nav1.png"></a>
						<a href=""> Help center </a>
					</li>
					<ul>
						<a href=""><img src="img/ Microblogging .png"></a>
						<a href=""><img src="img/ WeChat .png"></a>
					</ul>
				</div>
				<div class="aa">
					<img src="img/ untitled -10.png">
					<div style="border: 1px solid black;width: 550px;height: 30px;margin-left:80px;margin-top: 30px;float: left;">
						<input type="text" placeholder=" Please enter the search content " style="width:525px;height: 30px;text-align: center;border: none;float: left" />
					<a href=""><img src="img/ Search for _ Search for   Copy .png" style="width:25px;height: 25;float:right;margin-top: 3px;"></a>
					</div>
					<a href=""><img src="img/ The shopping cart .png" style="float: right;margin-right: 40px;margin-top: 35px;"></a>
					
				</div>
				<div class="nav">
					<p> All product categories </p><img src="img/3-16.png">
					<ul>	
						<li>	
							<a href=""> home page </a>
							<a href=""> Well-known wine </a>
							<a href=""> well-known tea </a>
							<a href=""> Jade </a>
							<a href=""> Snacks </a>
							<a href=""> products </a>
							<a href=""> Local specialty </a>
							<a href=""> Points Mall </a>
							<a href=""> Lottery game </a>
						</li>
					</ul>
					</div>
			</div>
			<div class="two"> 
				<ul class="slide">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			 <div class="shou"><li> home page > Jade </li><span> A total of 200 related items </span></div>
			<div class="three">
			  <div class="bb">
					  	<ul>
					  		<li>
							  <span> Jade </span>
							  	<a href=""> White jade </a>
							  	<a href=""> Jasper </a>
							  	<a href=""> Topaz </a>
							  	<a href=""> Nephrite </a>
							  	<a href=""> jade </a>
							  	<a href=""> Turquoise jade </a>
							  	<a href=""> Dark Jade </a>	
					  		</li>
					  	</ul>
			  	</div>
			  	<div class="cc">
					  	<ul>
					  		<li>
							    <span> other </span>
							  	<a href=""> Pendants </a>
							  	<a href=""> Fingerstall </a>
							  	<a href=""> bracelet </a>
					  		</li>
					  	</ul>
			  	</div>
			  	<div class="dd">
					  	<ul>
					  		<li>
							  <span> region </span>	
							  	<a href=""> Beijing </a>
							  	<a href=""> anhui </a>
							  	<a href=""> fujian </a>
							  	<a href=""> Inner Mongolia </a>
							  	<a href=""> ningxia </a>
							  	<a href=""> heilongjiang </a>
							  	<a href=""> hebei </a>
							  	
							 
					  		</li>
					  	</ul>
					  	<p> more <img src="img/3-16.png"></p>
			  </div> 
			</div>
			<!--<div class="four">-->
             <ul class="box">
             	<li><img src="img/ untitled -1.png"width="188px"height="200"><p><span> Bidding price :¥1980</span><span> Jade thousand hand Avalokitesvara pendant </span></p></li>
             	<li><img src="img/ untitled -2.png"width="186px"height="200"><p><span> Bidding price :¥199</span><span> Jade stamen pendant </span></p></li>
             	<li><img src="img/ untitled -3.png"width="186px"height="200"><p><span> Bidding price :¥199</span><span> Jade Ruyi pendant </span></p></li>
             	<li><img src="img/ untitled -4.png"width="186px"height="200"><p><span> Bidding price :¥199</span><span> Jade Dragon and Phoenix Pendant </span></p></li>
             	<li><img src="img/ untitled -5.png"width="186px"height="200"><p><span> Bidding price :¥199</span><span> Jade Zen pendant </span></p></li>
             	<li><img src="img/ untitled -6.png"width="186px"height="200"><p><span> Bidding price :¥99</span><span> Jade Avalokitesvara pendant </span></p></li>
             	<li><img src="img/ untitled -7.png"width="186px"height="200"><p><span> Bidding price :¥99</span><span> Emerald safety buckle pendant </span></p></li>
             	<li><img src="img/ untitled -8.png"width="186px"height="200"><p><span> Bidding price :¥99</span><span> Jade Ruyi pendant </span></p></li>
             	
             </ul>
			<!--</div>-->
			<div class="five">
				<ul>
				<li><img src="img/ Qualification .png"><p> Qualification </p><span> Service provider 100% Real name authentication </span></li>
				<li><img src="img/ Payment security .png"><p> Payment security </p><span> Clearly marked price payment and information security </span></li>
		        <li><img src="img/ insurance .png"><p> Insurance payments </p><span> Provide you with a guarantee to pay </span></li>
		        <li><img src="img/ No worries after sales .png"><p> No worries after sales </p><span> The service manager followed up the whole process when there was a problem </span></li>
		       </ul>
			</div>
			<div class="six">
             <div class="shang">
            
     			<div class="list">		
             			<div class="su">
             				<p> Shopping mall </p>
             				<span> Join us </span><span> Contact us </span><span> What's new </span>
             			</div>
             			<div class="su">
             				<p> Order service </p>
             				<span> Method of payment </span><span> Refund instructions </span><span> Purchase process </span>
             			</div>
             			<div class="su">
             				<p> After-sales service </p>
             				<span> Online Q & A </span><span> Service center </span><span> After sales policy </span>
             			</div>
             			<div class="su">
             				<p> common problem </p>
             				<span> Novice help </span><span> Pay for help </span><span> Invoicing </span>
             			</div>
             			  <div class="zuo">
             			<img src="img/ QR code .png" width="110px"height="110px">
             			<p style="writing-mode : tb-rl ;"> Wechat scan </p>
             			</div>
             			 <div class="bian">
             	         	<p> Consultation hotline :400-000-0000</p>
             	         	<p class="qq"><img src="img/ colour qq.png"/>[email protected]</p>
             	         	<p><img src="img/ WeChat .png"/> Official wechat of XX enterprise website </p>
             	         </div>
 		          </div>	
        </div>
              <div class="footer">
              	<ul class="hou">
              		<li><p> home page </p></li>
              		<li><p> Industrial and commercial agent </p></li>
              		<li><p> Financial agent bookkeeping </p></li>
              		<li><p> Copyright transactions and changes </p></li>
              		<li><p> Corporate loans </p></li>
              		<li><p> Office rent </p></li>
              		<li><p> Social insurance and provident fund agency </p></li>
              		<li><p> Legal services </p></li>
              	</ul>
              </div>
			</div>
		</div>
	</body>

</html>

CSS

* {
				margin: 0;
				padding: 0;
			}
			ul,ol,li {
				list-style-type: none;
			}
			.big {
			     width: 100%;
			     height: 1800px;
			     border: 1px solid red;
			     margin: 0 auto;
			}
			.one {
				width: 1000px;
				height: 250px;
				/*border: 1px solid black;*/
				margin: 0 auto;
			}
			.header {
				width: 640px;
				height: 30px;
				float: right;
				margin-right:80px ;
			}
			.header p {
				float: left;
				font-size: 14px;
				line-height: 27px;
			}
			.header a {
				float: left;
				margin-left: 20px;
				text-decoration: none;
				font-size: 14px;
				color: #000000;
				line-height: 25px;
				
			}
			.header a:hover{
				color:red ;
			}
			.header img {
				margin-left: 5px;
			}
			.header ul a {
				float: left;
				margin-left: 5px;
			}
			.aa {
				float: left;
				width: 1000px;
				height: 142px;
				/*border: 1px solid red;*/
				margin-top: 40px;
				line-height: 80px;
			}
			.aa img {
				position: relative;
				float: left;
				margin-top: 10px;
			}
			.aa input {
				float: left;
				margin-bottom: 100px;
			}
			.nav{
				width: 1000px;
				height: 35px;
				/*border: 1px solid blue;*/
				float: left;
			}
			.nav li{
				float: right;
		       margin-top: 5px;
			}
			.nav a{
				float:left;
				text-decoration: none;
				color: #000000;
				margin-right: 41px;
				padding: 2px;
			}
			.nav a:hover{
				border-bottom: 4px solid green;
			}
			.nav p{
				float: left;
			    margin-top: 5px;
			}
			.nav img{
				float: left;
				margin-top: 15px;
				margin-left: 10px;
			}
			.two{
			    width: 100%;
	            height: 400px;
	            overflow: hidden;
	            position: relative;
			}
			.slide{
				width: 400%;
				height: 400px;
				position: absolute;
				animation: move 8s 2s infinite;
			}
			.slide li{
				float: left;
				width: 25%;
				height: 400px;
			}
			.two li:nth-child(1){
				background: url(img/ untitled -9.png) no-repeat center;
			}
			.two li:nth-child(2){
				background: url(img/img2.jpg) no-repeat center;
			}
			.two li:nth-child(3){
				background: url(img/ untitled -9.png) no-repeat center;
			}
			.two li:nth-child(4){
				background: url(img/img4.jpg) no-repeat center;
			}
			 @keyframes move{
            0%{
                left: 0;
            }
            15%{
                left: 0;
            }
            33%{
                left: -100%;
            }
            48%{
                left: -100%;
            }
            66%{
                left: -200%;
            }
            81%{
                left: -200%;
            }
            99%{
                left: -300%;
            }
            100%{
            	left:-300% ;
            }
        }
        .three{
        	width: 800px;
        	/*height:200px;*/
        	border: 1px solid black;
        	margin: 0 auto;
        	margin-bottom: 20px;
        }
        .shou{
        	margin:  0 auto;
        	
        	width: 800px;
        	height: 40px;
        	border-bottom: 1px solid #A9A9A9;
        }
        .shou li{
        	float: left;
        }
        .shou span{
        	float: right;
        	font-size: 10px;
        	color: #A9A9A9;
        	margin-top: 20px;
        	
        }
        .bb{
        	border-bottom: 1px solid #A9A9A9;
        	width: 800px;
        	height: 50px;
        	/*margin-top: 40px;*/
        }
        .bb span{
        	display: block;
        	float: left;
        	width: 100px;
        	height: 50px;
        	text-align: center;
        	margin-right: 30px;
        	color: #000000;
        	background-color:#CCCCCC;
        }
        .bb li{
               float: left;
               line-height: 50px;
               /*margin-top: 10px;*/
        }
      .bb a{
      	margin-right: 30px;
      	text-decoration: none;
      	color:#666666;
      }
      .bb a:hover{color: #3aa747;}
      .cc{
      	border-bottom: 1px solid #A9A9A9;
      	width: 800px;
        height: 50px;
     
      }
      .cc li{
               float: left;
               line-height: 50px;
               /*margin-top: 15px;*/
        }
         .cc span{
         	float: left;
         	display: block;
         	width: 100px;
        	height: 50px;
        	text-align: center;
        	margin-right: 30px;
        	color: #000000;
        	background-color:#CCCCCC;
        }
        .cc a:hover{color:#3aa747;}
      .cc a{
      	margin-right: 30px;
      	text-decoration: none;
      	color:#666666;
      	 
      }
      .dd{
      	border-bottom: 1px solid #A9A9A9;
      	width: 800px;
        height: 50px;
        /*margin-top: 7px;*/
      }
      .dd li{
               float: left;
               line-height: 50px;
               /*margin-top: 15px;*/
        }
         .dd span{
         	margin-right: 30px;
         	text-align: center;
         	float: left;
         	display: block;
         	width: 100px;
        	height: 50px;
        	color: #000000;
        	background-color:#CCCCCC;
        }
      .dd a{
      	margin-right: 30px;
      	text-decoration: none;
      	color:#666666;
      	 
      }
      .dd a:hover{color: #3aa747;}
      .dd p{
      	float: right;
      	margin-top: 30px;
      	font-size: 13px;
      	color: #A9A9A9;
      
      }
      .dd img{
      	margin-left: 5px;
      }
      .box{
      
      	height:500px ;
      	width: 800px;
      	margin: 0 auto;
      	border: 1px solid green ;
      	column-count:4;
      	column-gap: 15px;
      	
      	
      }
      .box li{
      	margin-bottom: 15px;
      	height: 200px;
      	border: 1px solid black;
      	position: relative;
      	overflow: hidden;
      }
      .box p{
      	float: left;
      	width: 188px;
      	height: 200px;
      	bottom: -150px;
      	position: absolute;
      	text-align: center;
      	color: #fff;
      	transition: 1s;
      	background-color:rgba(71,71,68,50%);
      }
      .box p span{
      	display: block;
      }
       .box li:hover p{
				bottom:0;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				flex-direction: column;
			}
     .five{
     	
     	width: 800px;
     	height: 80px;
     	border: 1px solid red;
     	margin: 0 auto;
     }
     .five>ul{
     	width: 800px;
     	column-count: 4;
     	margin: 0 auto;
     }
     .five li{
     	width: 200px;
     	float: left;
     	margin-top:25px ;
     	
     }
     .five img{
     	float: left;
     	/*margin-right: 130px;*/
     }
     .five p{
     	float: left;
     	margin-left: 10px;
     }
     .five span{
     	font-size: 10px;
     	display: block;
     	float: left;
     	margin-left: 10px;
     }
     .six{
     	width: 100%;
     	height: 400px;
     	border: 1px solid red;
     	margin:  0 auto;
     	background-color: #000000;
     }
     .shang{
     	height: 250px;
     	width: 1220px;
     	
     	margin: 0 auto;
     }
 
     .list{
     	/*margin-left: 180px;*/
     	  width: 830px;
     	  height: 250px;
     	  margin: 0 auto;
     	  /*border: 1px solid yellow;*/
     }
     .su{
     
     	float: left;
     	/*margin-left: 20px;*/
     	width:100px ;
     	height: 250px;
     	/*border: 1px solid white;*/
     
     }
     .su p{
     	
     	margin-left: 45px;
     	font-size: 13px;
     	float: left;
     	color: white;
     	text-align: center;
     	margin-top: 70px;
     	margin-bottom: 10px;
     }
  
      .su span{
      	
      	margin-left: 50px;
      	float: left;
        margin-top: 20px;
      	line-height: 10px;
      	font-size: 10px;
      	color: white;
      }
     .zuo{
     	
     	margin-left: 50px;
     	float: left;
     	width: 160px;
     	height: 250px;
     	/*border: 1px solid white;*/
     }
    
     .zuo p{
     	
     	font-size: 15px;
     	color: white;
     	float: right;
     	margin-top:85px ;
        letter-spacing: 5px;
     }
     .zuo img{
   
     	float: left;
     	margin-top: 75px;
     }
     .footer{
     	width: 100%;
     	height: 100px;
     	/*border: 1px solid yellow;*/
     	margin:  0  auto;
     	border-top: 1px solid white;
     }
     .hou{
        width: 790px;
		margin: 0 auto;
		column-count: 8;
		margin-top: 40px;
		/*border: 2px solid blue;*/
		column-rule: 1px solid white;
	
     }
     .hou li{
     	
     	height: 20px;
     	border: 1 solid red;
     	
     }
     .hou p{
     	
     	font-size: 8px;
     	color: white;
     	text-align: center;
     }
     
.bian{
	/*background-color: #FF0000;*/
	/*width: 120px;*/.
	height: 120px;
	float: right;
	margin-top:70px ;
	color: #fff;
}
.bian p{
	margin-top:20px;
	font-size: 12px;
	}
.bian img{
	width: 18px;
}

design sketch
 Insert picture description here
 Insert picture description here
 Insert picture description here

原网站

版权声明
本文为[Small vegetable bird yard live]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/177/202206260249289524.html