静态淘宝热卖界面（纯CSS）

整理笔记，淘出来了以前刚学HTML时的简单网页，贴出来留个纪念吧….

预览：

代码：

HTML部分：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>淘宝特卖</title><link rel="stylesheet" type="text/css" href="css/淘宝.css"/></head><body><div id="main" align="center"><hr /><div class="top_0"><div class="top_0_0"><a href="#" class="a1">亲，请登录</a> <a href="#"class="a2">免费注册</a> <a href="#" class="a2">手机逛淘宝</a></div><div class="top_0_1"><a href="#" class="a1">淘宝网首页<a href="#" class="a1">  <a href="#"class="a2">我的淘宝 </a><a href="#"class="a2">购物车  </a><a href="#"class="a2">收藏夹  </a><a href="#"class="a2">商品分类  </a><a href="#"class="a2">卖家中心  </a><a href="#"class="a2">联系客服  </a><a href="#"class="a2">网站导航 </a></div></div><div id="top_1"><div style="float: left; width: 260px;" ><img style="margin-top:25px;" src="img/0001.png"/></div><div style="float: left; height: 100%; width: 800px;"><input id="selBox" type="text" name="selectBox"/><input id="submit" type="submit" value="搜索" /><p style="margin-left: -350px; margin-top: 0px; font-size: 14px;">客厅灯 冲锋衣 床底 沙发垫 电脑桌 鞋柜</p></div></div><div style="text-align: left; padding-top: 10px;" class="top_0"><p style="margin: 0px 20px; font-size: 12px ;">您是不是想找：客厅灯 | 冲锋衣 | 床底 | 沙发垫 | 电脑桌 | 鞋柜</p></div><div id="middle_0"><div style="float: left; margin: 2px 20px;">价格：<input type="text" name="min" />---<input type="text" name="max"/></div><div style="float: right; margin: 5px 20px;"><input type="checkbox" name="baoyou" value="包邮"/>包邮<input type="checkbox" name="baoyou" value="包邮"/>包邮<input type="checkbox" name="baoyou" value="包邮"/>包邮</div></div><div id="allCommodity"><div class="commodity"><img src="img/002.png"/><span class="s1">￥40.0 包邮</span><br /><span class="s2">世界上最好的商品</span><br /><span class="s3">浪色服饰专营店</span><br /><p class="s4">如实描述4.8</p></div><div class="commodity"><img src="img/003.png"/><span class="s1">￥40.0 包邮</span><br /><span class="s2">世界上最好的商品</span><br /><span class="s3">浪色服饰专营店</span><br /><p class="s4">如实描述4.8</p></div><div class="commodity"><img src="img/004.png"/><span class="s1">￥40.0 包邮</span><br /><span class="s2">世界上最好的商品</span><br /><span class="s3">浪色服饰专营店</span><br /><p class="s4">如实描述4.8</p></div><div class="commodity"><img src="img/005.png"/><span class="s1">￥40.0 包邮</span><br /><span class="s2">世界上最好的商品</span><br /><span class="s3">浪色服饰专营店</span><br /><p class="s4">如实描述4.8</p></div><div class="commodity"><img src="img/006.png"/><span class="s1">￥40.0 包邮</span><br /><span class="s2">世界上最好的商品</span><br /><span class="s3">浪色服饰专营店</span><br /><p class="s4">如实描述4.8</p></div><div class="commodity"><img src="img/007.png"/><span class="s1">￥40.0 包邮</span><br /><span class="s2">世界上最好的商品</span><br /><span class="s3">浪色服饰专营店</span><br /><p class="s4">如实描述4.8</p></div><div class="commodity"><img src="img/008.png"/><span class="s1">￥40.0 包邮</span><br /><span class="s2">世界上最好的商品</span><br /><span class="s3">浪色服饰专营店</span><br /><p class="s4">如实描述4.8</p></div><div class="commodity"><img src="img/009.png"/><span class="s1">￥40.0 包邮</span><br /><span class="s2">世界上最好的商品</span><br /><span class="s3">浪色服饰专营店</span><br /><p class="s4">如实描述4.8</p></div><div class="commodity"><img src="img/010.png"/><span class="s1">￥40.0 包邮</span><br /><span class="s2">世界上最好的商品</span><br /><span class="s3">浪色服饰专营店</span><br /><p class="s4">如实描述4.8</p></div><div class="commodity"><img src="img/011.png"/><span class="s1">￥40.0 包邮</span><br /><span class="s2">世界上最好的商品</span><br /><span class="s3">浪色服饰专营店</span><br /><p class="s4">如实描述4.8</p></div></div></div></body>
</html>

css样式：

body{margin-top: 0;text-align: center;
}
#main{width: 1350px;text-align: center;margin: 0 auto;
}
.top_0{background-color: #DDD;height: 30px;width: 98%;border-radius: 5px;margin: 0 auto;
}
.top_0_0{margin: 2px 30px;float: left;
}
.top_0_1{margin-top: 2px;margin-right: 30px;float: right;
}
.a1{text-decoration: none;font-size: 12px;color: darkorange;
}
.a2{text-decoration: none;font-size: 12px;color: black;
}
#top_1{height: 115px;width: 98%;margin: 0 auto;
}
#selBox{margin-top: 30px;width: 500px;height: 25px;border-radius: 10px;
}
#submit{font-size: 18px;height: 30px;width: 60px;border-radius: 10px;margin-left: 30px;
}
#middle_0{border: 1px solid #DDD;height: 30px;width: 98%;border-radius: 5px;margin: 0 auto;margin-top: 10px;
}
#allCommodity{margin-left:10px;
}
#allCommodity div{float: left;margin-left: 10px;margin-top: 15px;
}
.commodity{height: 370px;width:250px ;border: 1px solid #AAA;
}
.commodity img{width: 220px;height: 280px;
}
.commodity span{font-weight: 700;font-family: '宋体';
}
.s1{color: darkorange;
}.s3{color: #AAA;
}
.commodity p{font-weight: 700;font-family: '宋体';color: #AAA;margin-top: 0;margin-right: -140px;
}

静态淘宝热卖界面（纯CSS）相关推荐

html+css简单仿制淘宝商品界面
一.主要思路二.完整代码三.最终效果一.主要思路 1.写一个大盒子,将内部分为如图几个部分,分别写对应的内容 2.首先给整个盒子宽高,传进图片后调整图片宽高 3.重点在于"找同款&qu ...
一个静态淘宝购物车网页练习
一个静态淘宝购物车网页练习话不多说,直接上代码! <!DOCTYPE html> <html><head><meta charset="utf-8 ...
【学习笔记】HTML+CSS模仿静态淘宝首页
一.先上一张成果图二.已上传Github https://github.com/ImDaret/Front-end-learning 三.直接上代码(头大预警) HTML: <!DOCTYPE ...
仿淘宝商品界面（html div+css)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
2022仿淘宝网首页html+css
效果图如下: 所有文件已经打包好了,上链接: 蓝奏云: 仿淘宝网站首页.zip - 蓝奏云百度网盘: https://pan.baidu.com/s/1DsloErpJFQ_stwLQYb8dYw? ...
centerJavaScript淘宝登录界面/center
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-e ...
前端js实现淘宝部分界面
网页小测试代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
微信小程序左侧竖形滑动菜单（仿淘宝分类界面）
界面如下: 1.category.js中data初始化的数据(模拟),如果是跟后台数据库挂钩,可以用wx.request请求返回相似的对象数组再绑定到cartItems中. data: {cateIt ...
分享未注册淘宝热卖域名
maileisi.com买蕾丝 maichangqun.com买长裙 maiduanqun.com买短裙 maiduanku.com买短裤 bianfuxiu.com蝙蝠袖 nvpidai.com女皮 ...
安卓开发淘宝抢购界面！史上最全的Android面试题集锦，附带学习经验
前言这是"拔剑金九银十"的第二篇文章,本文主要针对3年以上的Android开发者进阶面试中高级开发工程师而整理. 希望可以对你们有所帮助.不多废话,进入正题. 目录: Java中 ...

静态淘宝热卖界面（纯CSS）

静态淘宝热卖界面（纯CSS）相关推荐

最新文章

热门文章