`

Price组件

 
阅读更多
<span class="price">
        	<span class="value">US $12.63 - 13.89</span>
        	<span class="separator">/</span> 
        	<span class="unit">piece</span>
</span>

 

.price .value{color:#BD1A1D;font-weight:bold;}
.price .separator,.price .unit{color:#666;font-weight:normal;}

 

<span class="price price-m">
        	<span class="value">US $12.63 - 13.89</span>
        	<span class="separator">/</span> 
        	<span class="unit">piece</span>
</span>


<span class="price price-l">
        	<span class="value">US $12.63 - 13.89</span>
        	<span class="separator">/</span> 
        	<span class="unit">piece</span>
</span>


<span class="price price-del">
        	<span class="value">US $12.63 - 13.89</span>
        	<span class="separator">/</span> 
        	<span class="unit">piece</span>
</span>

 

.price-s, .price-s .value, .price-s .separator, .price-s .unit{font-size:12px;}
.price-m, .price-m .value, .price-m .separator, .price-m .unit{font-size:14px;}
.price-l, .price-l .value, .price-l .separator, .price-l .unit{font-size:16px;}
.price-xl, .price-xl .value, .price-xl .separator, .price-xl .unit{font-size:18px;}
.price-thin, .price-thin .value, .price-thin .separator, .price-thin .unit{font-weight:normal;color:#000;}
.price-del, .price-del .value{font-weight:normal;color:#666; text-decoration:line-through;}
分享到:
评论

相关推荐

    Single-price-grid-component:单价FRID组件设计

    在“Single-price-grid-component-main”这个压缩包中,应包含这些文件的源代码,便于开发者查看和学习整个组件的实现细节。 总的来说,这个“单价网格组件”设计涵盖了HTML5的结构化元素、CSS的Grid和Flexbox布局...

    前端项目-jquery-price-format.zip

    "前端项目-jquery-price-format"是一个专为处理此类问题而设计的jQuery插件。该插件的目标是帮助开发者将用户在文本字段中输入的价格数据或者HTML元素中的价格数据,格式化成易于阅读且符合货币标准的样式。 jQuery...

    Informatica+PowerCenter常用转换组件使用说明

    - **示例**: 如果需要计算两个字段 `Price` 和 `Quantity` 的乘积,可以在 Expression 组件中创建一个新的输出端口,命名为 `OUT_TotalPrice`,并设置表达式为 `Price * Quantity`。 - **注意事项**: 一个 ...

    magento Price Countdown

    2. **前端渲染**:倒计时组件采用JavaScript实现动态更新时间,确保用户在浏览网页时能够实时看到剩余时间的变化。同时,前端样式可通过CSS自定义,以便更好地融入网站设计。 3. **后端逻辑**:后端负责处理促销...

    react-pricing

    3. **Price组件**:显示具体的费用信息,可能包括每月或每年的价格,以及任何折扣或试用期信息。 4. **FeatureList组件**:用于展示每个价格计划包含的特性,可能以有序或无序列表的形式呈现。 5. **Button组件**...

    酒店日历价格预订插件price

    综上所述,"酒店日历价格预订插件price"是一个综合了前端开发技术与用户体验设计的组件,它在酒店预订系统中起到关键作用,帮助用户轻松查看和预订房间,同时也为网站提供了一种高效、直观的预订方式。

    微信小程序使用计算属性computed封装购物车组件

    在微信小程序开发中,为了提高代码的可复用性和可维护性,我们常常需要将复杂的逻辑封装到组件中。购物车组件就是一个典型的例子,它涉及到商品的增删、数量的修改以及总价的计算等操作。在这个场景下,我们可以利用...

    price-grid:单一价格网格组件

    在本案例中,我们讨论的是一个名为"price-grid"的单一价格网格组件。 首先,让我们从HTML的角度来理解价格网格。HTML(超文本标记语言)是构建网页内容的基础,它通过一系列标签定义了页面的结构和内容。创建价格...

    Calendar-price-jquery日历价格插件

    1. **日历展示**:此插件的核心是提供一个美观且易于使用的日历组件。用户可以通过点击或滑动来选择日期,符合现代用户的操作习惯。 2. **价格与库存管理**:结合了价格和库存信息,使得用户在选择日期的同时,可以...

    CAVE_price.zip_cave_price

    6. **系统测试与优化**:在所有硬件和软件安装完成后,进行详尽的测试以确保所有组件协同工作,调整参数以达到最佳用户体验。 7. **内容创建**:最后,根据应用场景创建或导入相应的3D内容,这可能需要专门的3D建模...

    使用form-create动态生成vue自定义组件和嵌套表单组件

    formCreate.maker.number('商品价格', 'goods_price', 8688) ] }, { type: 'i-col', props: { span: 12 }, children: [ formCreate.maker.dateTime('创建时间', 'create_at'), formCreate.maker.radio('...

    TOGAF案例学习资料-price.zip

    通过“price”案例,我们可以看到这些架构组件如何相互作用,以实现价格管理的优化目标。 三、架构内容框架与元模型 TOGAF的架构内容框架定义了描述企业架构的不同视图和视图点,而元模型则为这些视图提供了结构。...

    价格游标Slider demo - Price Range适合购物网站等

    &lt;div id="price-range"&gt; &lt;div class="slider"&gt;&lt;/div&gt; &lt;span class="value-start"&gt;0&lt;/span&gt; - &lt;span class="value-end"&gt;1000 ``` 2. **CSS样式**:通过CSS对Slider的外观进行设计,包括滑块的形状、颜色、背景等...

    NRTR_ZigZag_Price_HTF - MetaTrader 5脚本.zip

    本文将详细解析标题为“NRTR_ZigZag_Price_HTF”的MetaTrader 5脚本,以及其核心组件“NRTR_ZigZag_Price.mq5”和“NRTR_ZigZag_Price_HTF.mq5”。 NRTR_ZigZag_Price_HTF 是一个基于MetaTrader 5平台的自定义指标...

    single-price-grid-component:前端导师挑战-单一价格网格组件

    前端导师-单一价格网格组件解决方案这是的解决方案。 前端导师挑战可帮助您构建现实的项目,从而提高您的编码技能。目录概述挑战用户应该能够: 根据组件的设备屏幕尺寸查看组件的最佳布局查看桌面上的悬停状态以...

    store-components:默认的VTEX存储组件

    " dependencies " : { " vtex.store-components " : " 3.x " } 然后,您可以像在使用product-price在您的应用程序主题中添加一个组件块。 例如,现在您可以更改产品详细信息中的product-price块的行为。 查看有关...

    前端大厂最新面试题-communication.docx

    本资源主要讲解了 React 中组件之间的通信方式,包括父组件向子组件传递、子组件向父组件传递、兄弟组件之间的通信、父组件向后代组件传递、非关系组件传递等多种方式。 一、什么是组件之间的通信? 组件之间的...

    price-grid-component:单一价格网格组件

    本项目名为"price-grid-component",主要关注的是一个单一的价格网格组件实现。 该组件的源代码存储在GitHub上,虽然具体链接未提供,但通常这样的项目会包含HTML、CSS和可能的JavaScript文件,用于创建交互式的...

    支持Lazarus2.10的JSON解析组件superobject

    此版本的superobject组件,修正了无法在Lazarus下编译的问题. 使用示例: var aa:Isuperobject; begin aa:=SO(); aa.S['aa']:=Utf8toAnsi( '语文'); aa.I['age']:=29; aa.D['price']:=89.80; Memo1.Text:=aa.As...

Global site tag (gtag.js) - Google Analytics