当前位置：网站首页>小米电视的网页和珠宝的网页
小米电视的网页和珠宝的网页
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;
}
效果图
边栏推荐
- How to delete gridlines in ggplot2 (with examples)
- Mysql常用sql语句之修改表名、删除表、获取表信息、删除指定日期的表记录
- QT compilation error: unknown module (s) in qt: script
- 360 秒了解 SmartX 超融合基础设施
- 我在中山，到哪里开户比较好？网上开户是否安全么？
- 路由跳转之点击列表的操作按钮，跳转至另一个菜单页面并激活相应的菜单
- [QT] custom control - air quality dashboard
- Stm32cubemx: watchdog ------ independent watchdog and window watchdog
- [system architecture] - how to evaluate software architecture
- 【解决】CMake was unable to find a build program corresponding to “Unix Makefiles“.
猜你喜欢
经典模型——NiN＆GoogLeNet
工作室第3次HarmonyOS培训笔记
培育项目式Steam教育理念下的儿童创造力
Arthas（阿尔萨斯） 能为你做什么？
Une citation classique de la nature humaine que vous ne pouvez pas ignorer
计组笔记——CPU的指令流水
工业机器人之“慧眼”——机器视觉
![[flask introduction series] flask processing request and response](/img/4b/bb5d915e83341183270d492b98f7d3.png)
[flask introduction series] flask processing request and response
少儿编程对国内传统学科的推进作用
Stm32cubemx: watchdog ------ independent watchdog and window watchdog
随机推荐
Use annotationdbi to convert gene names in R
附加：HikariCP连接池简述；（并没有深究，只是对HikariCP连接池有个基本认识）
计组笔记——CPU的指令流水
Qt编译出错ERROR: Unknown module(s) in QT: script
Analysis of the multiple evaluation system of children's programming
虫子 拷贝构造 运算符重载
UE5全局光照系统Lumen解析与优化
Clion项目中运行多个main函数
The "eye" of industrial robot -- machine vision
MySQL updates records based on the queried data
Business process diagram design
给网站添加“开放搜索描述“以适配浏览器的“站点搜索“
分布式电商项目 谷粒商城 学习笔记＜3＞
Dreamcamera2 video recording, playing without sound, recording function is normal, using a third-party application for video recording, playing with sound
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
Camtasia 2022 new ultra clear recording computer video
【哈希表】改进，拉链法哈希结构——直接用两个索引查找，不用每次都hash和%一遍
Vulhub replicate an ActiveMQ
Review of the paper: unmixing based soft color segmentation for image manipulation
显卡、GPU、CPU、CUDA、显存、RTX/GTX及查看方式