当前位置:网站首页>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>
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
边栏推荐
- Leetcode 176 The second highest salary (June 25, 2022)
- 用元分析法驱动教育机器人的发展
- Group counting notes - instruction pipeline of CPU
- gstreamer分配器与pool的那些事
- On virtual memory and oom in project development
- The golang regular regexp package uses -06- other usages (special character conversion, finding the regular common prefix, switching greedy mode, querying the number of regular groups, querying the na
- HL7Exception: Can‘t XML-encode a GenericMessage. Message must have a recognized struct
- 小米电视的网页和珠宝的网页
- 路由跳轉之點擊列錶的操作按鈕,跳轉至另一個菜單頁面並激活相應的菜單
- 云计算基础-0
猜你喜欢
HL7Exception: Can‘t XML-encode a GenericMessage. Message must have a recognized struct
浅谈虚拟内存与项目开发中的OOM问题
Overview of orb-slam3 paper
Wealth freedom skills: commercialize yourself
Google recommends using kotlin flow in MVVM architecture
Problems encountered in project deployment - production environment
Analysis and optimization of ue5 global illumination system lumen
[reading papers] fbnetv3: joint architecture recipe search using predictor training network structure and super parameters are all trained by training parameters
Authorization of database
[hash table] improved, zipper hash structure - directly use two indexes to search, instead of hashing and% every time
随机推荐
Authorization of database
解析创客空间机制建设的多样化
[QT] custom control - air quality dashboard
分布式电商项目 谷粒商城 学习笔记<3>
Interpreting Oracle
HL7Exception: Can‘t XML-encode a GenericMessage. Message must have a recognized struct
力扣(LeetCode)175. 组合两个表(2022.06.24)
学习太极创客 — MQTT(四)服务端连接操作
文献阅读---优化RNA-seq研究以研究除草剂耐药性(综述)
计组笔记——CPU的指令流水
经典模型——NiN&GoogLeNet
解析社交机器人中的技术变革
Oracle exercise
经典模型——ResNet
Analysis of the multiple evaluation system of children's programming
Qt编译出错ERROR: Unknown module(s) in QT: script
【论文笔记】Manufacturing Control in Job Shop Environments with Reinforcement Learning
Using meta analysis to drive the development of educational robot
培育项目式Steam教育理念下的儿童创造力
虫子 构造与析构