各种样式的css实现

1、优惠券样式的实现；

2、热区的实现；

 

　　在电商平台上总会发出各种券，需要对应到不同的产品，对应到不同的服务。而使用券可以使用UED的设计稿里的照片，但是本来一次性的加载过多的照片，浏览器的负载很大，容易出现一个问题：浏览器内存泄露。最初在谷歌浏览器同时加载1000以上的照片会导致浏览器自动强制关闭网页。所以在开发的时候对于庞大的系统是需要考虑浏览器内存的泄露问题。

券的思路：先做一个div盒子，盒子里放一个数字，一个垂直的线；再做一个圆，覆盖前面一个div右边的框；后边再加一个领券的文字。

热区的思路：先做有一个div盒子，盒子里放一个文字，然后使用一个三角形覆盖前面div盒子的底部。

一、券的实现

1、先来画一个圆

<div style="width: 26px;height: 26px;border-radius: 50%;background:#999999;display: inline-block;"></div>

2、券基本样式

<div style="width: 42px;height: 26px;background:#999999;padding-left: 4px;line-height:26px;color: #fff;display: inline-block;">

            <span>100</span>

            <span style="border-right:1px dashed #fff"></span>

</div>

3、券和圆的合并

        <div style="width: 50px;height: 26px;background:rgb(246, 90, 16);line-height:26px;color: #fff;display: inline-block;text-align: center;">

            <span style="margin-left: -6px">100</span>

        </div>

        <span style="border-right:1px dashed #fff;position: relative;left: -14px;"></span>

        <div style="width: 10px;height: 10px;border-radius: 50%;background: #fff;display: inline-block;margin-left: -10px;position: relative;">

        </div>

        <span>领券</span>

二、热区的实现

这个类似于三角形实现，可以参考这个：http://www.cnblogs.com/chengxs/p/7242647.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            .triangle-border {

                width: 0;

                height: 0;

                border-width: 15px;

                border-style: solid;

                position: relative;

                overflow: hidden;

            }

            .background {

                bottom: 30px;

                margin-left: -1px;

                border-color: transparent transparent rgb(255, 255, 255) transparent;

            }

        </style>

    </head>

    <body>

        <div style="width: 30px;height: 38px;background:rgb(246, 90, 16);color: #fff;display: inline-block;text-align: center;">

            <span>热</span>

        </div>

        <div class="triangle-border background"></div>

    </body>

</html>

前端（各种demo）三：优惠券，热区，等模块的实现（css方式）的更多相关文章

  1. Vue + Element UI 实现权限管理系统 前端篇（三）：工具模块封装

    封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护.所以我们在这里先对 axi ...

  2. STC8H开发(六): SPI驱动ADXL345三轴加速度检测模块

    目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) ST ...

  3. STC8H开发(七): I2C驱动MPU6050三轴加速度+三轴角速度检测模块

    目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) ST ...

  4. 前端学习 第三弹： JavaScript语言的特性与发展

    前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...

  5. 前端工程化（三）---Vue的开发模式

    从0开始,构建前后端分离应用 导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord ...

  6. 六个前端开发工程师必备的Web设计模式/模块资源

    Yahoo的设计模式库 Yahoo的设计模式库包含了很多可以帮助开发设计人员解决遇到的问题的资源,包括开发中常常需要处理的导航,互动效果及其布局网格等大家常用的组件和模块 响应式设计模式库 这个响应式 ...

  7. SpringBoot接收前端参数的三种方法

    都是以前的笔记了,有时间就整理出来了,SpringBoot接收前端参数的三种方法,首先第一种代码: @RestController public class ControllerTest { //访问 ...

  8. 利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收

    利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收 Webuploader简介   WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  9. Python3导入自定义模块的3种方式

    前话 最近跟着廖雪峰的教程学到 模块 这一节.关于如何自定义一个模块,如果大家不懂的话还请先看下面这篇博文 ↓ http://www.liaoxuefeng.com/wiki/001431608955 ...

  10. 在.NET Core中三种实现“可插拔”AOP编程方式（附源码）

    一看标题肯定会联想到使用动态编织的方式实现AOP编程,不过这不是作者本文讨论的重点. 本文讨论另外三种在netcore中可实现的方式,Filter(过滤器,严格意义上它算是AOP方式),Dynamic ...

随机推荐

  1. Vue.js优雅的实现列表清单的操作

        一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当Vie ...

  2. SharpGL(46)用Billboard绘制头顶文字

    CSharpGL(46)用Billboard绘制头顶文字 本文介绍CSharpGL用Billboard绘制头顶文字的方法.效果如下图所示. 下载 CSharpGL已在GitHub开源,欢迎对OpenG ...

  3. C# 中操作API

    作为初学者来说,在C#中使用API确是一件令人头疼的问题.在使用API之间你必须知道如何在C#中使用结构.类型转换.安全/不安全代码,可控/不可控代码等许多知识. 一切从简单开始,复杂的大家一时不能接 ...

  4. 六：Ioc和AOP使用拓展

    Ioc和AOP使用拓展 一:1.构造注入 一个<constructor-arg>元素表示构造方法的一个参数,且使用时不区分顺序,index指定元素,位置从0开始,Type用来指定参数,避免 ...

  5. 创建mysql快捷登录方式

    1.先找到mysql的bin目录,将Mysql.exe发送快捷方式到桌面,到这里还没有完成. 2.然后右键选择属性,将目标后面添加上 -uroot -p 我的完整目标如下: D:\install\my ...

  6. 其他信息: ORA-01400: 无法将 NULL 插入

    这个错误其实就是oracle数据库的某列约束为 not null,但在插入值的时候插入了控制,无论是null和"",它都识别为空 有两种方法: 1.修改数据库字段约束为允许为空 2 ...

  7. swizzle method 和消息转发机制的实际使用

    我的工程结构,如图 1-0 图  1-0 在看具体实现以前,先捋以下 实现思路. ViewController 中有一个-(void)Amethod;A方法. -(void)Amethod{ NSLo ...

  8. 深入学习JS执行--创建执行上下文（变量对象，作用域链，this）

    一.介绍 本篇继上一篇深入理解js执行--单线程的JS,这次我们来深入了解js执行过程中的执行上下文. 本篇涉及到的名词:预执行,执行上下文,变量对象,活动对象,作用域链,this等 二.预执行 在上 ...

  9. MyBatis《2》

    MyBatis入参考文档:http://mybatis.org/mybatis-3/zh/   1.properties 属性 1.在MyBatis配置文件中引用属性文件     MyBatis允许在 ...

  10. [最短路]信使(msner)

    [题目描述] 战争时期,前线有n个哨所,每个哨所可能会与其他若干个哨所之间有通信联系.信使负责在哨所之间传递信息,当然,这是要花费一定时间的(以天为单位).指挥部设在第一个哨所.当指挥部下达一个命令后 ...