当前位置：网站首页>小米电视的网页和珠宝的网页
小米电视的网页和珠宝的网页
2022-06-26 02:50:00 【小菜鸟码住】
小米电视
<!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;/*相对的*/
}
.d img{
padding-top: 70px;
}
.d p{
width: 228px;
height: 50px;
bottom: -50px;
position: 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元<s>1199元</s></p>
<img src="img/m1.png" >
<div class="e"><li>小米电视3</li></div>
</div>
<div class="d">
<p>1099元<s>1399元</s></p>
<img src="img/m2.png">
<div class="e"><li>小米电视5</li></div>
</div>
<div class="d">
<p>4999元<s>5199元</s></p>
<img src="img/m3.png">
<div class="e"><li>小米电脑</li></div>
</div>
<div class="d">
<p>5999元<s>6199元</s></p>
<img src="img/mi4.png">
<div class="e"><li>小米电脑</li></div>
</div>
<div class="d">
<p>999元<s>1199元</s></p>
<img src="img/m1.png">
<div class="e"><li>小米电视3</li></div>
</div>
<div class="d">
<p>1099元<s>1399元</s></p>
<img src="img/m2.png">
<div class="e"><li>小米电视5</li></div>
</div>
<div class="d">
<p>4999元<s>5199元</s></p>
<img src="img/m3.png">
<div class="e"><li>小米电脑</li></div>
</div>
<div class="d">
<p>5999元<s>6199元</s></p>
<img src="img/mi4.png">
<div class="e"><li>小米电脑</li></div>
</div>
</div>
</div>
</body>
</html>
珠宝
<!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>嘿，欢迎来买卖商城！</p>
<li>
<a href="">请登录</a>
<a href="">免费注册</a>
<a href="">我的订单<img src="img/nav1.png"></a>
<a href="">我的买猜<img src="img/nav1.png"></a>
<a href="">帮助中心</a>
</li>
<ul>
<a href=""><img src="img/微博.png"></a>
<a href=""><img src="img/微信.png"></a>
</ul>
</div>
<div class="aa">
<img src="img/未标题-10.png">
<div style="border: 1px solid black;width: 550px;height: 30px;margin-left:80px;margin-top: 30px;float: left;">
<input type="text" placeholder="请输入搜索内容" style="width:525px;height: 30px;text-align: center;border: none;float: left" />
<a href=""><img src="img/搜索_搜索 拷贝.png" style="width:25px;height: 25;float:right;margin-top: 3px;"></a>
</div>
<a href=""><img src="img/购物车.png" style="float: right;margin-right: 40px;margin-top: 35px;"></a>
</div>
<div class="nav">
<p>全部商品分类</p><img src="img/3-16.png">
<ul>
<li>
<a href="">首页</a>
<a href="">名酒</a>
<a href="">名茶</a>
<a href="">玉石</a>
<a href="">休闲食品</a>
<a href="">洗护用品</a>
<a href="">土特产</a>
<a href="">积分商城</a>
<a href="">抽奖游戏</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>首页>玉石</li><span>共两百件相关商品</span></div>
<div class="three">
<div class="bb">
<ul>
<li>
<span>玉石</span>
<a href="">白玉</a>
<a href="">碧玉</a>
<a href="">黄玉</a>
<a href="">和田玉</a>
<a href="">翡翠</a>
<a href="">绿松玉</a>
<a href="">墨玉</a>
</li>
</ul>
</div>
<div class="cc">
<ul>
<li>
<span>其他</span>
<a href="">吊坠</a>
<a href="">扳指</a>
<a href="">手镯</a>
</li>
</ul>
</div>
<div class="dd">
<ul>
<li>
<span>地区</span>
<a href="">北京</a>
<a href="">安徽</a>
<a href="">福建</a>
<a href="">内蒙古</a>
<a href="">宁夏</a>
<a href="">黑龙江</a>
<a href="">河北</a>
</li>
</ul>
<p>更多<img src="img/3-16.png"></p>
</div>
</div>
<!--<div class="four">-->
<ul class="box">
<li><img src="img/未标题-1.png"width="188px"height="200"><p><span>竞猜价：￥1980</span><span>翡翠千手观音吊坠</span></p></li>
<li><img src="img/未标题-2.png"width="186px"height="200"><p><span>竞猜价：￥199</span><span>翡翠花蕊吊坠</span></p></li>
<li><img src="img/未标题-3.png"width="186px"height="200"><p><span>竞猜价：￥199</span><span>翡翠如意吊坠</span></p></li>
<li><img src="img/未标题-4.png"width="186px"height="200"><p><span>竞猜价：￥199</span><span>翡翠龙凤吊坠</span></p></li>
<li><img src="img/未标题-5.png"width="186px"height="200"><p><span>竞猜价：￥199</span><span>翡翠禅吊坠</span></p></li>
<li><img src="img/未标题-6.png"width="186px"height="200"><p><span>竞猜价：￥99</span><span>翡翠观音吊坠</span></p></li>
<li><img src="img/未标题-7.png"width="186px"height="200"><p><span>竞猜价：￥99</span><span>翡翠平安扣吊坠</span></p></li>
<li><img src="img/未标题-8.png"width="186px"height="200"><p><span>竞猜价：￥99</span><span>翡翠如意吊坠</span></p></li>
</ul>
<!--</div>-->
<div class="five">
<ul>
<li><img src="img/资质认证.png"><p>资质认证</p><span>服务商100%实名认证</span></li>
<li><img src="img/支付安全.png"><p>支付安全</p><span>明码标价支付及信息安全</span></li>
<li><img src="img/保险.png"><p>保险赔付</p><span>为您提供担保赔付</span></li>
<li><img src="img/售后无忧.png"><p>售后无忧</p><span>服务出问题经理全程跟进</span></li>
</ul>
</div>
<div class="six">
<div class="shang">
<div class="list">
<div class="su">
<p>买猜商城</p>
<span>加入我们</span><span>联系我们</span><span>最新动态</span>
</div>
<div class="su">
<p>订单服务</p>
<span>支付方式</span><span>退款说明</span><span>购买流程</span>
</div>
<div class="su">
<p>售后服务</p>
<span>在线问答</span><span>服务中心</span><span>售后政策</span>
</div>
<div class="su">
<p>常见问题</p>
<span>新手帮助</span><span>支付帮助</span><span>开具发票</span>
</div>
<div class="zuo">
<img src="img/二维码.png" width="110px"height="110px">
<p style="writing-mode : tb-rl ;">微信扫一扫</p>
</div>
<div class="bian">
<p>咨询热线：400-000-0000</p>
<p class="qq"><img src="img/彩色qq.png"/>[email protected]</p>
<p><img src="img/微信.png"/>某某企业网站官方微信</p>
</div>
</div>
</div>
<div class="footer">
<ul class="hou">
<li><p>首页</p></li>
<li><p>工商代理</p></li>
<li><p>财务代记账</p></li>
<li><p>版权交易与变更</p></li>
<li><p>企业贷款</p></li>
<li><p>办公室租贷</p></li>
<li><p>社保公积金代理</p></li>
<li><p>法律服务</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/未标题-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/未标题-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;
}
效果图
边栏推荐
- ORB-SLAM3论文概述
- 解析少儿编程的多元评价体系
- Types and application methods of screen printing
- 《你不可不知的人性》经典语录
- 【论文笔记】Manufacturing Control in Job Shop Environments with Reinforcement Learning
- UE5全局光照系統Lumen解析與優化
- Redis configuration and optimization of NoSQL
- Fresh graduates talk about their graduation stories
- Learn Tai Chi Maker - mqtt (IV) server connection operation
- Camtasia 2022全新版超清錄制電腦視頻
猜你喜欢
学习太极创客 — MQTT（四）服务端连接操作
![[reading papers] fbnetv3: joint architecture recipe search using predictor training network structure and super parameters are all trained by training parameters](/img/84/2b66b513a0a36464233708fbb4b57d.png)
[reading papers] fbnetv3: joint architecture recipe search using predictor training network structure and super parameters are all trained by training parameters
【论文笔记】Learning to Grasp with Primitive Shaped Object Policies
Cultivate children's creativity under the concept of project steam Education
【论文笔记】Supersizing Self-supervision: Learning to Grasp from 50K Tries and 700 Robot Hours
数字孪生智慧水务，突破海绵城市发展困境
ORB-SLAM3论文概述
经典模型——ResNet
学习太极创客 — MQTT（五）发布、订阅和取消订阅
The role of children's programming in promoting traditional disciplines in China
随机推荐
[hash table] improved, zipper hash structure - directly use two indexes to search, instead of hashing and% every time
【读点论文】FBNetV3: Joint Architecture-Recipe Search using Predictor Pretraining 网络结构和超参数全当训练参数给训练了
Gd32 ADC acquisition voltage
虫子 拷贝构造 运算符重载
[QT] custom control - air quality dashboard
MySQL updates records based on the queried data
计组笔记 数据表示与运算 校验码部分
Learn from Taiji makers - mqtt (V) publish, subscribe and unsubscribe
【哈希表】改进，拉链法哈希结构——直接用两个索引查找，不用每次都hash和%一遍
Review of the paper: unmixing based soft color segmentation for image manipulation
Preparation for wechat applet development
Create a nonlinear least squares test in R
Distributed e-commerce project grain mall learning notes ＜ 3 ＞
arduino字符串转16进制数 大彩串口屏用。
【解决】CMake was unable to find a build program corresponding to “Unix Makefiles“.
Network PXE starts winpe and supports UEFI and legacy boot
Camtasia 2022 new ultra clear recording computer video
scrapy返回400
kotlin快速上手
Stm32cubemx: watchdog ------ independent watchdog and window watchdog