各种样式的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. WebService--axis

    axis WebService虽然现在已经很少使用,但是还是把它的配置过程写出来,开发环境jdk 1.6 服务端: 1,导入需要jar包,自行下载 2,创建WebService接口 public in ...

  2. C#操纵Excel，此工作薄包含嵌入对象，Office 2007的设定方法

    C#操纵Excel,插入OLE对象时报“此工作薄包含嵌入对象,EXCEL可能无法从这些对象中删除个人信息.”, 如网上所述,Office 2003可以通过“菜单>>工具>>选项 ...

  3. Knowledge_SPA——精研查找算法

    首先保证这一篇分析查找算法的文章,气质与大部分搜索引擎搜索到的文章不同,主要体现在代码上面,会更加高级,会结合到很多之前研究过的内容,例如设计模式,泛型等.这也与我的上一篇面向程序员编程--精研排序算 ...

  4. MacOS 下安装mysqlclient 的问题及解决办法

    [操作环境] 操作系统:MacOS X 10.13.1 mysql运行环境:Docker Docker版本:17.09-ce 在开发Django时,刚开始使用的sqlite进行开发,想部署到生产环境需 ...

  5. Visual Studio 2017 单独启动MSDN帮助（Microsoft Help Viewer）的方法

    找到Help Viewer程序的位置(可以使用Everything工具搜索microsoft help找到),发送到桌面快捷方式,打开此快捷方式的属性,在目标的最后添加下面那行字,然后即可通过快捷方式 ...

  6. P2704 炮兵阵地

    题目描述 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用“H” 表示),也可能是平原(用“P”表示),如下图.在每一格平原地形上最 ...

  7. 常用接口简析3---IList和List的解析

    常用接口的解析(链接) 1.IEnumerable深入解析 2.IEnumerable.IEnumerator接口解析 3.IComparable.IComparable接口解析 学习第一步,先上菜: ...

  8. Linux下安装Redis php-redis扩展 redis重启shell脚本 超详细！

    前言 前面刚写过nosql其中三款热门产品的对比,这次主要写关于Redis的一些事情,Redis的介绍.安装以及扩展(php-redis,因为我是phper)安装等等.同时是写给我的朋友(cccjjj ...

  9. c# winform treelistview的使用(treegridview)

    TreeView控件显示的内容比较单一,如果需要呈现更详细信息TreeListView是一个不错的选择. 先看效果: 首先需要引用文件System.Windows.Forms.TreeListView ...

  10. 深度解析continue,break和return

    continue,break和return是Java中的关键字,在方法体内的流程控制中使用频率较高. 在现实中,经常会有同学在使用中产生混淆,从而使得流程控制语句发生混乱.在这里,我结合个人的使用经历 ...