xx闪购——商品信息

最新推荐文章于 2022-08-31 11:59:04 发布
最新推荐文章于 2022-08-31 11:59:04 发布
阅读量178 收藏
点赞数
分类专栏： html 文章标签： 调整文字样式 超出的部分隐藏 价格字体的样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iheyu/article/details/103909679
版权

1.把图片放在 cc/img 的文件夹里：D:\cc\img

2.把图片显示出来：

 

<ul class="clearfix">
                    <li>
                        <div class="bg"><img src="img/1.png" alt=""></div>
                        <div class="info"></div>
                    </li>
                    
                </ul>
/*.clearfix{
        overflow:auto;
        _height:1%
    }*/

 

.clearfix{
        overflow:auto;
        _height:1%
    }

2.1.

.seckill-goods .bg img{
    height: 190px;
}
.seckill-goods .info {
    margin-left: 210px;
    width: 190px;
    height: 190px;
    border: 1px solid black;
}
.seckill-notice {
    font-size: 12px;
    color: #999;
    margin-top: 100px;
    /*距底边的距离*/
    padding-bottom: 35px;
}
   .clearfix{
        overflow:auto;
        _height:1%
    }

2.2.

<ul class="clearfix">
                    <li>
                        <div class="bg"><img src="img/1.png" alt=""></div>
                        <div class="info">
                        <a href="">Redmi充电宝 白色10000mAh大电量 </a>
                        <p>29.5元 59元</p>
                        <a href="">登录后抢购</a>
                        <p>已有10229人设置提醒</p>
                    </div>
                    </li>
                </ul>

 

2.3.调整文字的样式：

 

.seckill-goods .info .name {
    font-size: 16px;
    color: #333;
    height: 16px;
    line-height: 16px;
    /*不换行,显示在一行*/
    display: block;
    /*去掉换行*/
    white-space: nowrap;
}

.seckill-notice {
    font-size: 12px;
    color: #999;
    margin-top: 100px;
    /*距底边的距离*/
    padding-bottom: 35px;
}
   .clearfix{
        overflow:auto;
        _height:1%
    }

2.4.超出的部分隐藏，变点点：

.seckill-goods .info .name {
    font-size: 16px;
    color: #333;
    height: 16px;
    line-height: 16px;
    /*不换行,显示在一行*/
    display: block;
    /*去掉换行*/
    white-space: nowrap;
    /*超出的隐藏*/
    overflow: hidden;
    /*变成点点,加文字基本属性*/
    text-overflow: ellipsis;
}

.seckill-notice {
    font-size: 12px;
    color: #999;
    margin-top: 100px;
    /*距底边的距离*/
    padding-bottom: 35px;
}
.clearfix{
    overflow:auto;
    _height:1%
}

 

2.5.大电量字体的样式：

<ul class="clearfix">
                    <li>
                        <div class="bg"><img src="img/1.png" alt=""></div>
                        <div class="info">
                        <a href="" class="name">Redmi充电宝 白色 10000mAh </a>
                        <p class="tips">10000mAh 大电量<p>
                        <p>29.5元 59元</p>
                        <a href="">登录后抢购</a>
                        <p>已有10229人设置提醒</p>
                    </div>
                    </li>
                </ul>
.seckill-goods .info .tips {
    font-size: 12px;
    line-height: 12px;
    color: #b0b0b0;
}

.seckill-notice {
    font-size: 12px;
    color: #999;
    margin-top: 100px;
    /*距底边的距离*/
    padding-bottom: 35px;
}
.clearfix{
    overflow:auto;
    _height:1%
}

 

2.7.价格字体的样式：

<ul class="clearfix">
                    <li>
                        <div class="bg"><img src="img/1.png" alt=""></div>
                        <div class="info">
                        <a href="" class="name">Redmi充电宝 白色 10000mAh </a>
                        <p class="tips">10000mAh 大电量<p>
                        <p class="price"> 29.5元 <del>59元</del></p>
                        <a href="">登录后抢购</a>
                        <p>已有10229人设置提醒</p>
                    </div>
                    </li>
                </ul>
.seckill-goods .info .tips {
    font-size: 12px;
    line-height: 12px;
    color: #b0b0b0;
    margin-top: 10px;
}
.seckill-goods .info .price {
    font-size: 16px;
    line-height: 16px;
    color: #f1393a;
    margin-top: 14px;
}
.seckill-goods .info .price del {
    color: #999;
    font-size: 12px;
    line-height: 12px;
    margin-left: 10px;
}
.seckill-notice {
    font-size: 12px;
    color: #999;
    margin-top: 100px;
    /*距底边的距离*/
    padding-bottom: 35px;
}
.clearfix{
    overflow:auto;
    _height:1%
}

2.9.

<ul class="clearfix">
                    <li>
                        <div class="bg"><img src="img/1.png" alt=""></div>
                        <div class="info">
                        <a href="" class="name">Redmi充电宝 白色 10000mAh </a>
                        <p class="tips">10000mAh 大电量<p>
                        <p class="price"> 29.5元 <del>59元</del></p>
                        <a href="" class="btn">登录后抢购</a>
                        <p>已有10229人设置提醒</p>
                    </div>
                    </li>

                </ul>
.seckill-goods .info {
    margin-left: 210px;
    width: 190px;
    height: 190px;
    /*border: 1px solid black;*/
    /*通过调整内边距的大小*/
    padding-top: 30px;
}
.seckill-goods .info .name {
    font-size: 16px;
    color: #333;
    height: 16px;
    line-height: 16px;
    /*不换行,显示在一行*/
    display: block;
    /*去掉换行*/
    white-space: nowrap;
    /*超出的隐藏*/
    overflow: hidden;
    /*变成点点,加文字基本属性*/
    text-overflow: ellipsis;
}
.seckill-goods .info .tips {
    font-size: 12px;
    line-height: 12px;
    color: #b0b0b0;
    margin-top: 10px;
}
.seckill-goods .info .price {
    font-size: 16px;
    line-height: 16px;
    color: #f1393a;
    margin-top: 14px;
}
.seckill-goods .info .price del {
    color: #999;
    font-size: 12px;
    line-height: 12px;
    margin-left: 10px;
}
.seckill-goods .info .btn {
    display: inline-block;
    width: 118px;
    height: 28px;
    font-size: 14px;
    color: #fff;
    line-height: 28px;
    text-align: center;
    background-color: #f1393a;
}
.seckill-notice {
    font-size: 12px;
    color: #999;
    margin-top: 100px;
    /*距底边的距离*/
    padding-bottom: 35px;
}
.clearfix{
    overflow:auto;
    _height:1%
}

 

2.1.0.最终样式

 

<ul class="clearfix">
                    <li>
                        <div class="bg"><img src="img/1.png" alt=""></div>
                        <div class="info">
                        <a href="" class="name">Redmi充电宝 白色 10000mAh </a>
                        <p class="tips">10000mAh 大电量<p>
                        <p class="price"> 29.5元 <del>59元</del></p>
                        <a href="" class="btn">登录后抢购</a>
                        <p class="person" >已有10229人设置提醒</p>
                    </div>
                    </li>
                </ul>
.seckill-goods .bg {
    float: left;
    width: 190px;
    height: 190px;
    /*border: 1px solid red;*/
}
.seckill-goods .bg img{
    height: 190px;
}
.seckill-goods .info {
    margin-left: 210px;
    width: 190px;
    height: 190px;
    /*border: 1px solid black;*/
    /*通过调整内边距的大小*/
    padding-top: 30px;
}
.seckill-goods .info .name {
    font-size: 16px;
    color: #333;
    height: 16px;
    line-height: 16px;
    /*不换行,显示在一行*/
    display: block;
    /*去掉换行*/
    white-space: nowrap;
    /*超出的隐藏*/
    overflow: hidden;
    /*变成点点,加文字基本属性*/
    text-overflow: ellipsis;
}
.seckill-goods .info .tips {
    font-size: 12px;
    line-height: 12px;
    color: #b0b0b0;
    margin-top: 10px;
}
.seckill-goods .info .price {
    font-size: 16px;
    line-height: 16px;
    color: #f1393a;
    margin-top: 14px;
    margin-bottom: 0;
}
.seckill-goods .info .price del {
    color: #999;
    font-size: 12px;
    line-height: 12px;
    margin-left: 10px;
}
.seckill-goods .info .btn {
    display: inline-block;
    width: 118px;
    height: 28px;
    font-size: 14px;
    color: #fff;
    line-height: 28px;
    text-align: center;
    background-color: #f1393a;
    border: 1px solid #f1393a;
    margin-top: 19px;
}
.seckill-goods .info .person {
    font-size: 12px;
    line-height: 12px;
    color: #999;
    margin-top: 10px;
}
.seckill-notice {
    font-size: 12px;
    color: #999;
    margin-top: 100px;
    /*距底边的距离*/
    padding-bottom: 35px;
}
.clearfix{
    overflow:auto;
    _height:1%
}

iheyu
关注
专栏目录
【京东网站主界面仿写——使用Html5+CSS3+JavaScript等实现(附源代码和效果)，挺炫的喔~~~】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
11-15 3108
目录代码*index.html**index.js*主界面演示说明 代码 index.html *{margin:0;padding:0;list-style:none;text-decoration:none;} #header{clear:both;width:100%;height:30px;line-height:30px;background:#F1F1F1;} a{color:#666;} a:hover{color:red;} body{font: 12px/150% Arial,Verdan
电商峰值系统架构设计
RockeyHoo的专栏
11-12 7898
电商架构         目录   一、          电商峰值系统架构设计....................................................................................................................................................
uni-app类似淘宝选择商品多规格(库存判断)
七十多岁的人了、
10-24 3228
uniapp商品规格选择
uniapp 学习笔记二十一 路由跳转及产品详情数据渲染
Ggome的博客
08-31 714
uniapp 学习笔记二十一 路由跳转及产品详情数据渲染。
小米抢购源代码
04-07
小米抢购源代码， using System; using System.Threading.Tasks; using System.Windows.Forms; using System.Timers; using Newtonsoft.Json; using System.Text.RegularExpressions; using System.Configuration; using System.Linq; using HtmlAgilityPack; using System.Collections.Generic; using System.Web; namespace xiaomi
仿照小米闪购.rar
02-29
刚学完css与js，使用html、css、完成网页的框架，使用js完成网页的动态交互，仿照小米闪购首页，适合刚学完html,css与js的学习者，文件包含详细源代码
小米闪购网站项目（详细源代码）
01-30
前端开发小米闪购网站，运用html和css，没有js，适合刚学完html,css的学习者，文件包含详细源代码
xx闪购——顶部的菜单栏
iheyu(一个新手小白女PHP初学者)
01-08 354
一.做小米商城的菜单栏： 1.页面结构： 1.1.在html的body里面有一个 div 包裹着所有 内容 与 控制背景和高度； 1.2.在用1个 div 标签 限制宽度和整体居中； 1.3.在用1个 div 标签 让文字靠最左侧 ——>用另1个 div 标签 让文字靠最右侧； <!DOCTYPE html> <html lang="zh"> <he...
xx闪购—logo和分类导航
iheyu(一个新手小白女PHP初学者)
01-09 348
头部导航栏包含三部分： 1.logo 2.中间商品的类别 3.搜索框 一.页面的结构： 1.最外面div包裹着所有内容 高度 和 背景 ——>里面的div 是控制 宽度 和在 页面上居中 ——>三个紧挨的三个div 分别包括：logo、中间商品的、搜索框； <div> <div> <!--div*...
做xx闪购网站准备工作
iheyu(一个新手小白女PHP初学者)
01-08 255
1. 创建文件夹cc ——>cc中 创建 css,img,js 文件夹 与 index.html文件； 2.在 css 文件夹——>创建 文本文档——> s重命名 为 style.css 文件; 3.打开 vscode ——>找到 cc 文件夹中的 index.html 文件; D:\cc\index.html <!DOCTYPE html> &l...
测试报告
ziri_hjx的博客
05-04 5076
测试计划 产品名称： 京东闪购 项目承担部门 研发部 撰写人（签名） 侯俊新 完成日期          2016.04.18 本文档使用部门 测试部 评审负责人（签名）           郭梁 评审日期
小米闪购首页实战（HTML+CSS+JS）
dweblover的博客
02-14 6979
1.效果图如下 2.CSS代码如下（style.css） body,ul,li { margin:0; padding:0; } body { height:2500px; } ul { list-style:none; } /*解决高度塌陷*/ .container::before,.container::after,.clearfix::before,.clearfix::aft...
闪购活动js 【一个倒计时接一个倒计时活动】
weixin_34129145的博客
04-17 456
封装倒计时js -闪购活动（一个倒计时接一个倒计时活动）闪购活动 上个活动结束 下个活动接着开始 以此类推【技术要点：时间的连续】的js代码应用场景：手机端商城，几分钟活动，手指左右滑动界面到另一个倒计时活动（要求：第一个倒计时活动后，第二个倒计时活动才开始，以此类推）代码：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Tra...
（html+css）静态小米闪购主页仿制
rmxob的博客
06-15 1851
效果图 初学html+css，跟着视频教学仿制了小米闪购的主页，在打的过程中发现一些知识点还不太熟练，建议一边听课一遍看书学知识点。 HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /&...
商品列表筛选功能(完整功能)
Twinkle的博客
06-08 6327
html:&lt;div class="product-list-main"&gt; &lt;ul class="product-list-wrap" id="ul_select"&gt; &lt;li class="select-result"&gt; &lt;dl id="dl_result" class="clearfix"&a
vscode——HTML基本标签图片
热门推荐
iheyu(一个新手小白女PHP初学者)
08-16 1万+
1.在html中显示图片用——><img>——>显示图片就用到<img src=">属性； ****切记要把图片“重命名——>放到对的路径里面才可以哟!" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m...
vscode——HTML基本标签A标签超级链接
iheyu(一个新手小白女PHP初学者)
08-19 1万+
什么是超级链接： 1通过超级连接建立链接的关系——>从一个页面跳转另一个页面——>a标签是成对出现的——<a></a>有开始有结束——>a标签不加属性： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me...
vscode——HTML网页的内容添加和部分标签的使用
iheyu(一个新手小白女PHP初学者)
08-14 3902
网页的内容：一般都包含"文字,视频,内容"； 1.打印出来网页的基本结构——>html5+tab——>vscode的功能——>用户自定义代码片段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor...
HTML——表格的基本样式
iheyu(一个新手小白女PHP初学者)
08-20 1931
表格在以前用的比较多，之前的表格主要是作面布局！表格的代码不好维护不推荐使用！ div+css布局就代替表格！ 1.在页面里面做表格用——> <table></table>——>在页面的表格是怎么定义的——>表格组成元素是行——> <tr></tr> ——>把一行分成了若干单元格——>标题标签——> &l...
聚美优品混合云驱动闪购模式高效运营
5. **高效存储与CDN**：CDN加速了内容分发，确保用户无论在何处都能快速访问商品信息和图片，降低延迟，提升转化率。 6. **一站式服务**：聚美优品能够在一个平台上获取全面的云服务，简化管理流程，节省时间和成本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值