各种样式的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. 在ASP.NET开发中一些单词的标准缩写

    有些词可能共用一些缩写.带星号的缩写或词来源于PeopleSoft标准. The following standard word abbreviations should be used in nam ...

  2. C#的XML文件的读取与写入

    在设计程序的时候,对于一些变化性较强的数据,可以保存在XML文件中,以方便用户修改.尤其是对于一些软硬件的配置文件,很多都选择了用XML文件来存取.XML文件简单易用,而且可以在任何应用程序中读写数据 ...

  3. VPN连接机器不再输入密码以及Pin码方法

    连接机器不输入密码 #!/usr/bin/env expect   spawn ssh guosong@xx_ip; expect "*password*"; send  &quo ...

  4. Python字符编码详解(转)

    http://www.cnblogs.com/huxi/archive/2010/12/05/1897271.html 在没有reload(sys)之前调用sys.setdefaultencoding ...

  5. Entity Framework Core 使用HiLo生成主键

    #cnblogs_post_body.cnblogs-markdown p img { max-width: 95%; } HiLo是在NHiernate中生成主键的一种方式,不过现在我们可以在Ent ...

  6. 支持多用户web终端实现及安全保障（nodejs）

    背景 笔者近期从事在线IDE工作的开发,作为本地IDE普遍拥有的功能,terminal(命令行)对项目的git操作以及文件操作有着非常强大的支持.而之前没有web伪终端的情况下,仅仅提供已封装好的gi ...

  7. JavaEE中的MVC（五）定制Struts——Action跳转JSP

    在JavaEE中的MVC(三)中,我在Servlet中引入了命令模式的使用,采用Xml配置的方式,实现了一个Servlet调用多个不同的Action类,但是还不能实现页面地跳转,这一篇博客从之前的代码 ...

  8. 微软云计算 Massive Data 处理语言Scope 1

    Massive Data处理一直是云计算中很重要的一个环节.目前像Google,Yahoo在相关方面都有自己专有的技术.例如Google的基于MapReduce的Sawzall语言.和Yahoo基于H ...

  9. Windows下载安装Numpy、Scipy、py-matplotlib

    一.安装环境 Windows10 64.python2.7 二.Numpy下载 1.下载Numpy: 下载地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/# ...

  10. ##1.Centos7环境准备-- openstack pike

    ##1.Centos7环境准备 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##.Centos7环境准备 #Ce ...