使用CSS3制作一个简单的商品列表、浮动布局
2024-07-03 22:00:48
代码如下：
<style>*{margin: 0px;padding: 0px;list-style: none;}.box{width: 1365px;height: 490px;border: 1px solid rgb(201,201,201);margin: 0px auto;margin-top: 20px;}.h2{color: red;border-left: 3px solid red;padding-left: 10px;margin-left: 25px;margin-top: 25px;}.list_1{width: 1180px;margin: auto;clear: both;}.ul_li{size: 8px;color: rgb(165,172,195);float: left;padding: 4px;}.li_1{clear: both;}.list_2{width: 1300px;height: 380px;margin: auto;clear: both;}.li_2{width: 238px;height: 370px;float: left;padding: 10px;}.pho_1{width: 240px;height: 195px;text-align: center;}.p_1{font-family: 微软雅黑;font-size: 15px;}.p_2{font-size: 10px;color: rgb(165,172,195);}.pho_2{width: 35px;height: 15px;}.p_3{color: red;font-size: 15px;display: inline-block;}.p_4{color: rgb(165,172,195);font-size: 12px;display: inline-block;text-decoration: line-through;}.p_5{color: rgb(165,172,195);font-size: 12px;display: inline-block;margin-left: 90px;}</style></head><body><div class="box"><h2 class="h2">热卖单品</h2><br><ul class="list_1"><li class="ul_li">客厅灯</li><li class="ul_li">床垫</li><li class="ul_li">电脑箱</li><li class="ul_li">窗帘</li><li class="ul_li">男内裤</li><li class="ul_li">鞋柜</li><li class="ul_li">沙发</li><li class="ul_li">收纳箱</li><li class="ul_li">茶几</li><li class="ul_li">抱枕</li><li class="ul_li">椅子</li><li class="ul_li">电脑桌</li><li class="ul_li">拉杆箱</li><li class="ul_li">浴室柜</li><li class="ul_li">运动鞋</li><li class="ul_li">电风扇</li><li class="ul_li">衣柜</li><li class="ul_li">面膜</li><li class="ul_li">风扇</li><li class="ul_li">充电宝</li><li class="ul_li">男T恤</li><li class="ul_li">耳机</li><li class="ul_li">拖鞋</li><li class="ul_li">零食</li><li class="ul_li">男鞋</li><li class="li_1"></li></ul><hr><ul class="list_2"><li class="li_2"><img class="pho_1" src="data:image/pic.1.webp" alt=""><p class="p_1"><br>泰迪熊正品 毛衣熊公仔 新品 女生生日礼物</p><br><p class="p_2">评论 255 收藏 604</p><br><p class="p_3">¥96</p><p class="p_4">¥472</p><p class="p_5">月销82笔</p></li><li class="li_2"><img class="pho_1"src="data:image/pic.2.webp" alt=""><p class="p_1"><br>幼儿园数字字帖描红本 儿童凹槽写字本练字</p><br><p class="p_2">评论 255 收藏 604</p><br><p class="p_3">¥13.8</p><p class="p_4">¥68</p><p class="p_5">月销82笔</p></li><li class="li_2"><img class="pho_1"src="data:image/pic.3.webp" alt=""><p class="p_1"><br>磁性画板灰色家用写字板黑板墙涂鸦板多功能</p><br><p class="p_2">评论 0 收藏 3320</p><br><p class="p_3">¥19.9</p><p class="p_4">¥39</p><p class="p_5">月销51笔</p></li><li class="li_2"><img class="pho_1"src="data:image/pic.4.webp" alt=""><p class="p_1"><br><img class="pho_2" src="data:image/包邮.png" alt="">逻辑思维训练机益智玩具创造力小学生早教机</p><br><p class="p_2">评论 0 收藏 80</p><br><p class="p_3">¥1499</p><p class="p_4">¥2508</p><p class="p_5">月销14笔</p></li><li class="li_2"><img class="pho_1"src="data:image/pic.5.webp" alt=""><p class="p_1"><br>儿童三拉杆轮书包小学生男孩6-12周岁女孩1-</p><br><p class="p_2">评论 2143 收藏 29856</p><br><p class="p_3">¥138</p><p class="p_4">¥629</p><p class="p_5">月销710笔</p></li></ul></div></body>使用CSS3制作一个简单的商品列表、浮动布局相关推荐
- CSS3制作一个简单的进度条
这里只是一个小demo,一个用CSS3写的进度条. 如图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&quo ...
- 微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和 准备工作 1.node.js 2.微信开发者工具 目录结构 客户端代码实现 index.wxml <view class="contain ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTY ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCT ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...
- 制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础 本文使用技术: H ...
- 用CSS3制作一个风车
开发工具与关键技术:用CSS3制作一个风车 作者:李波 首先我的风车html如下: Css部分:需要给四个叶子的设置其对应的样式:首先是第一页的叶子如下图(这里展示第一个叶子的样式),为了突出效果我将 ...
- 如何利用laragon框架制作一个简单的应用？
如何利用laragon框架制作一个简单的应用? 一.搭建环境 1. 安装Laragon 1.1 打开安装包用的语言 选择自己习惯用的语言 1.2 选择安装地址 1.3 选择Next,开始install ...
最新文章
- 读书笔记 effective c++ Item 5 了解c++默认生成并调用的函数
- SQL2005CLR函数扩展-正则表达式
- Unix/Linux下文件基本操作[zt]
- java 中格式化小数位数
- css a标签去掉下划线_CSS -- 三大特性
- 基因组中的趣事（二）- 最长的基因2.7 million，最短的基因只有8 nt却能编码
- Python中使用中文
- 修改JBoss-7.1.1 http访问端口并取消JBoss内网访问限制
- linearLayout和二级菜单联动
- zabbix监控jmx
- 【边喝caffee边Caffe 】(一)Caffe的安装
- 非合作博弈篇——非合作博弈论问题的表示(strategic form)
- AVR单片机简单介绍（基于atmega128）
- （2020全新）UGNX二次开发（零基础入门）到提高全套视频教程_NXopen-UG二次开发_新浪博客
- kk常用ramda函数总结
- C#显示和隐藏 Excel 工作表及工作表中的行与列
- 顶尖领导者的52条法则！
- 前端js拼接Json字符串
- elementui 按钮 表单_仿ElementUI实现一个Form表单的实现代码
- c语言常量2l是什么,2017年计算机二级c语言题库