各种样式的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. Map的遍历方法(java)

    方法一.Set<Object>  keySet();返回集合中所有的key组成的集合. 代码:Map<String , String > map=new HashMap();f ...

  2. C#中窗体的close,dispose,以及application.exit()的区别

    close关闭窗体,对象仍然存在,调用Close函数释放资源后可能还需要再次使用. dispose,销毁对象,窗体对象被回收了,也就是不存在了,Dispose函数释放的资源不再使用. applicat ...

  3. .net core 开发短网址平台的思路

    最近有个客户要求开发一套短网址网站,小编现在都使用.net core进行网站开发了,以是厘厘思路,想想使用.net core 的中间件应该很容易实现. 1. 构建一个中间件,监测网站的响应状态,代码如 ...

  4. From missionary to firebrand--Eisle Tu [20160102]

    From missionary to firebrand   杜叶锡恩(1913年(癸丑年)-2015年(乙未年),英文名字Elsie Hume Elliot Tu,丈夫是教育家杜学魁.她是香港著名的 ...

  5. Python之getopt模块

    1.getopt——C风格命令行解析 http://docs.python.org/2.7/library/getopt.html#module-getopt getopt.getopt(args, ...

  6. 如何用Python写一个计算器软件 附带效果图

    该计算器使用Python  tkinter模块开发 效果如下图 import tkinter #导入tkinter模块 root = tkinter.Tk() root.minsize(280,500 ...

  7. POJ2251-Dungeon Master

    题意:给出一三维空间的地牢,要求求出由字符'S'到字符'E'的最短路径移动方向可以是上,下,左,右,前,后,六个方向,每移动一次就耗费一分钟,要求输出最快的走出时间.不同L层的地图,相同RC坐标处是连 ...

  8. 一个三维点类Gpoint3的实现

    1 类设计 基本功能 (1)默认构造时,自动初始化为(0,0,0): (2)支持点之间的加.减运算: (3)支持点与常量数据的加.减.乘除运算: (4)支持点之间的相等或不能判断 (5)如果把点类看作 ...

  9. linux上安装php7 memcache扩展 和 安装服务端memcached

    linux上安装memcached不算太困难.唯一让本人感到困难的是 php7的memcache扩展安装.真的蛋疼! 先说安装服务端 memcached 1. 首先安装Libevent事件触发管理器. ...

  10. linux使用mysql给一个用户赋予一个权限

    GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123456' WITH GRANT OPTION;