当前位置：网站首页>小米电视的网页和珠宝的网页
小米电视的网页和珠宝的网页
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;
}
效果图
边栏推荐
- golang正則regexp包使用-06-其他用法（特殊字符轉換、查找正則共同前綴、切換貪婪模式、查詢正則分組個數、查詢正則分組名稱、用正則切割、查詢正則字串）
- 关于＃sql＃的问题：SQL问题--账号多地登录的SQL代码
- Authorization of database
- HL7Exception: Can‘t XML-encode a GenericMessage. Message must have a recognized struct
- 附加：HikariCP连接池简述；（并没有深究，只是对HikariCP连接池有个基本认识）
- [QT] custom control - switch
- Analysis of the multiple evaluation system of children's programming
- The role of children's programming in promoting traditional disciplines in China
- Dreamcamera2 record key prompt sound into video during video recording
- jupyter notebook的插件安装以及快捷键
猜你喜欢
kotlin快速上手
丝网印刷的种类及其应用方法
Hardware creation principle of campus maker space
网络PXE启动WinPE，支持UEFI和LEGACY引导
UE5全局光照系統Lumen解析與優化
【哈希表】改进，拉链法哈希结构——直接用两个索引查找，不用每次都hash和%一遍
Problems encountered in project deployment - production environment
Arthas（阿尔萨斯） 能为你做什么？
Redis configuration and optimization of NoSQL
Utonmos: digital collections help the inheritance of Chinese culture and the development of digital technology
随机推荐
Modifying table names, deleting tables, obtaining table information, and deleting table records on specified dates for common MySQL statements
浅谈虚拟内存与项目开发中的OOM问题
虫子 拷贝构造 运算符重载
Dreamcamera2 record key prompt sound into video during video recording
The difference between like,%, - in database query SQL
Additional: brief description of hikaricp connection pool; (I didn't go deep into it, but I had a basic understanding of hikaricp connection pool)
2021-08-04
Drawing structure diagram with idea
工业机器人之“慧眼”——机器视觉
Inkscape如何将png图片转换为svg图片并且不失真
图扑软件数字孪生海上风电 | 向海图强，奋楫争先
Camtasia 2022全新版超清录制电脑视频
附加：HikariCP连接池简述；（并没有深究，只是对HikariCP连接池有个基本认识）
Camtasia 2022全新版超清錄制電腦視頻
Problems encountered in project deployment - production environment
虫子 构造与析构
【哈希表】改进，拉链法哈希结构——直接用两个索引查找，不用每次都hash和%一遍
Leetcode 175 Combine two tables (2022.06.24)
Limit the input character length to 1 character in English and 2 characters in Chinese
培育项目式Steam教育理念下的儿童创造力