精华内容
下载资源
问答
  • 小图标,加入外部演示表css HTML是纯文本,任何的文本编辑器都可以实现, 专业工具: hbuilderx/vs-code Hbuilder浏览器html页面有两种方式 1)创建html,浏览器浏览—绝对路径访问,磁盘路径 2)独有,启动一个web...

    1.HTML相关

    1.1 html是什么:

    超文本标记语言,超文本,图片,声音
    标记:

    目录

    header 标题,预定义修饰
    利用html就可以实现原始的页面
    标签:闭合内容

    头信息,title,编码utf-8,安全信息token 小图标,加入外部演示表css

    HTML是纯文本,任何的文本编辑器都可以实现,
    专业工具:
    hbuilderx/vs-code

    Hbuilder浏览器html页面有两种方式

    1)创建html,浏览器浏览—绝对路径访问,磁盘路径
    2)独有,启动一个web服务(自己运行),在启动nodejs服务(启动服务器,自动打开网页)
    虚拟路径访问,以协议头的方式访问–打开不能访问的路径

    如果html文件乱码

    1)设置展现字符集:<meta charset
    2)文件本身编码,默认asci,改成utf-8

    css是什么

    Cascading Style Sheets是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    页面布局方式

    1. 早起习惯用table表格布局
    表格 表格内容的行
    表格头的行
    单元格 特点:不需要写排班,会自适应 缺点:门户网站 2. List item

    早期的都是table布局,当所有标签,必须解析完,才在页面展现,会闪现一下

    1. 现如今习惯用div块布局
      把大页面拆成小块,每个小块独立出来,加载方便
      div+css可以实现没有页面闪现的快速展现

    二维码

    里面有很多信息,把文字隐藏在这些小块中,通过它可以定位到图片的正确比例,把这些块组成形成文字。
    https://blog.csdn.net/m0_55284524/article/details/115415627,收集扫描二维码,获取到上面的文字,手机浏览会自动打开这个网页,谷歌API拒实现二维码图片生成,根据开发者给的文字(链接)生成它的图片
    谷歌API非常繁琐,封装它的方法和参数,封装后,4个参数:宽、高、链接、图片位置

    开发步骤:

    1. 创建普通java工程
    2. 创建一个lib目录
    3. 导入jar
    4. 创建类,main,creatQR.make()4个参数
    5. 把这个qr.png拷贝到order.heml目录中,就可以访问了
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>肯德基小票</title>
    		<!--css全局的样式配置,习惯的位置
    		-body代表整个页面的字体统一缩小--->
    		<style>
    			body{
    				font-size: 8px; 
    				border: 0px solid red;
    				width: 290px;
    			}
    			
    			.method{/*class属性共用*/
    				padding-left: 90px;
    			}
    			.method2{
    				font-size: 22px;
    				font-weight: bold;
    			}
    		</style>
    	</head>
    	<body>
    		<div>顾客联</div>
    		<div class="method2">请您留意取餐账号单</div>
    		<div class="method">自取顾客联</div>
    		
    
    		<div>肯德基凤城五路店</div>
    		<div>021-2222222</div>
    		
    		<div class="method">---结账单---</div>
    		<div class="method2">账单号:23456789</div>
    		<div>账单类型:堂食</div>
    		<div>人数:1人</div>
    		<div>收银员:张无忌</div>
    		<div>开单时间:2022-2-22 09:09:09</div>
    		<div>结账时间:2022-2-22 09:09:10</div>
    		
    		
    		<hr style="border: 1px dashed;"/>
    		<table border="1">
    			<tr>
    				<th width="30" align="center">数量</td>
    				<th width="150" align="center">品类</td>
    				<th width="50" align="center">金额</td>
    			</tr>
    			<tr>
    				<td valign="top" align="center">1</td>
    				<td align="center">墨西哥卷饼套餐 <br />
    				1X  ----墨西哥卷饼<br />
    				1X  ----现磨咖啡(半糖、热)
    				</td>	
    				<td valign="top" align="center">18.00</td>	
    			</tr>
    		</table>
    		
    		<table border="1">
    			<tr>
    			<td width="30">合计</td>	
    			<td width="200" align="center">总金额:18.00</td>
    			</tr>
    			<tr>
    				<td>微支付</td>
    				<td align="center">18.00</td>
    			</tr>
    		</table>
    		
    		<hr style="border: 1px dashed;" />
    		打印时间:2022-2-22  09:09:19
    		<hr style="border: 1px dashed;" />
    		<div style="padding-top: 15px;">
    			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			根据相关税法规定,电子发票的开票日期同网上申请电子发票的日期,如您需要当日的电子发票请务必在消费当日通过扫描下方二维码,根据指引步骤开具您的增值税电子普通发票。此二维码30天有效,扫描时请保持小票平整。</div>
    		<img src ="img/qr.png" style="padding-left: 100px;"/>
    		<div>
    			www.kendeji.com
    		</div>
    		<div>
    			加盟电话:012-12345678
    		</div>
    		<br />
    		<br />
    	</body>
    </html>
    

    展示效果如下图:
    在这里插入图片描述

    图片插入路径的两种方式

    1. 绝对路径(直接访问网上图片)
    2. 相对路径

    小结

    做网站必备两项技能

    1. HTML:超文本标记语言,利用规定标签,浏览器会解析这些标签,最终展现在页面
    2. CSS:样式表,美化页面
    展开全文
  • 微信小程序绘制二维码

    千次阅读 2021-09-23 21:39:48
    在日常的小程序项目中,会经常遇到需要动态绘制二维码的需求。使用场景很多,例如绘制在海报上,例如制作票务码、核销码等等。 这篇文章是应一位好友的需求而写的,也希望能够给有需要的同学一些帮助。 二、实现原理...

    一、前言

    在日常的小程序项目中,会经常遇到需要动态绘制二维码的需求。使用场景很多,例如绘制在海报上,例如制作票务码、核销码等等。
    这篇文章是应一位好友的需求而写的,也希望能够给有需要的同学一些帮助。

    二、实现原理

    使用微信小程序的canvas组件进行绘制,但是在该组件用起来并不是很顺手,所以使用了第三方的框架:
    Painter
    Painter的Github地址

    用你的方法,把这个框架下载下来,里面会有示范代码,我们只需要把其中的核心代码拿出来就行。
    对于框架的使用介绍,大家可以前往github浏览,我这就直接上手了。

    painter能做的不仅仅只是绘制一个二维码。戳下面链接查看带参海报绘制。
    实战篇-制作微信小程序码宣传海报

    三、实现代码

    前期准备

    1、新建components文件夹,放置painter核心代码
    在这里插入图片描述
    2、新建palette文件夹,放置绘制实现代码
    在这里插入图片描述
    painter.js代码

    export default class LastMayday {
      palette(viewList) {
        return (
          viewList
        );
      }
    }
    

    3、新建绘制的具体属性信息文件夹posterViewjs,放置例如绘制的大小、位置等信息js。
    在这里插入图片描述

    二维码绘制属性信息js代码

    const getPosterView01 = (qrcodeText) => {
      const poster01 = {
        "width": "256px",
        "height": "256px",
        "background": "#f8f8f8",
        "views": [{
          "type": "qrcode",
          "content": qrcodeText,
          "css": {
            "color": "#000000",
            "background": "#ffffff",
            "width": "256px",
            "height": "256px",
            "top": "0px",
            "left": "0px",
            "rotate": "0",
            "borderRadius": "0px"
          }
        }]
      }
      return poster01
    }
    
    module.exports = {
      getPosterView01: getPosterView01
    }
    

    实现

    实现页面目录结构

    在这里插入图片描述

    wxml代码

    <view class="flex-jc-ac-col" style="margin-top: 200rpx;">
      <image class="qrcode-img" src="{{imgUrl?imgUrl:''}}" mode="widthFix"></image>
      <button type="primary" style="margin-top: 105rpx;" bindtap="makeQRCodeTap">生成二维码</button>
    </view>
    
    <!-- canvas隐藏 -->
    <painter customStyle='position: absolute; left: -9999rpx;' customActionStyle="{{customActionStyle}}"
      dancePalette="{{template}}" palette="{{paintPallette}}" bind:imgOK="onImgOK" bind:touchEnd="touchEnd"
      action="{{action}}" use2D="{{true}}" widthPixels="720" />
    <!-- canvas隐藏 -->
    

    wxss代码

    .qrcode-img{
      background-color: #999999;
      height: 300rpx;
      width: 300rpx;
    }
    

    json代码

    注意记得在使用的页面引用painter组件

    {
      "usingComponents": {
        "painter":"/components/painter/painter"
      },
      "navigationBarTitleText": "绘制二维码"
    }
    

    JS代码

    // pages/makeQRCode/makeQRCode.js
    import poster from '../../palette/painter'
    const posterView = require("../../posterViewjs/posterView")
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        imgUrl: null,
        QRCodeText: "2d44d6c26134f8a109df65897107089a2d44d6c26134f8a109df65897107089a",
        paintPallette: '',
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad() {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow () {
    
      },
    
      /** 生成海报点击监听 */
      makeQRCodeTap() {
        wx.showLoading({
          title: '获取海报中',
          mask: true
        })
        // 绘制海报
        this.makePoster(this.data.QRCodeText)
      },
    
      /** 绘制完成后的回调函数*/
      onImgOK(res) {
        wx.hideLoading()
        // 这个路径就可以作为保存图片时的资源路径
        // console.log("海报临时路径", res.detail.path)
        this.setData({
          imgUrl: res.detail.path
        })
      },
    
      /** 生成海报 */
      makePoster(qrcodeText) {
        wx.showLoading({
          title: '生成海报中',
        })
        // 这是绘制海报所用到JSON数据
        const viewList = posterView.getPosterView01(qrcodeText)
        this.setData({
          paintPallette: new poster().palette(viewList)
        })
      },
    
    
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage() {}
    })
    

    实现效果

    在这里插入图片描述

    四、结语

    实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。

    有任何疑问可以在评论区留下。我每天都会进行回复,私聊不回。(为了刷积分)

    以上均是本人开发过程中的一些经验总结与领悟,如果有什么不正确的地方,希望大佬们评论区斧正。

    💥最后!!!不管这篇文章对你有没有用,既然都看到最后了。
    👍赞一个!!!
    🤩当然,顺带收藏就最好了。
    😎欢迎转载,原创不易,转载请注明出处✍。

    😊如果你对小程序开发有兴趣或者正在学习小程序开发,可以关注我。每一篇都是原创,每一篇都是干货噢~。

    展开全文
  • Python|自制二维码生成器

    千次阅读 2020-08-11 00:00:00
    那么如何可以制作一个二维码呢?小编将在本文中给大家分享一个自制的二维码生成器。 2准备 这个二维码生成器是由qrcode(生成二维码)库与tkinter(图形ui界面)组成的。首先先在命令行安装以下三个模块,分别是...

    欢迎点击「算法与编程之美」↑关注我们!

    本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

    欢迎加入团队圈子!与作者面对面!直接点击!

    1 前言

    在如今信息发达的时代,二维码已经是人们生活中不可或缺的东西。比如几乎每天都要用的微信或支付宝支付。那么如何可以制作一个二维码呢?小编将在本文中给大家分享一个自制的二维码生成器。

    2准备

    这个二维码生成器是由qrcode(生成二维码)库与tkinter(图形ui界面)组成的。首先先在命令行安装以下三个模块,分别是qrcode、image、pillow(PIL)。安装方式很简单。

    pip install qrcode

    pip install image

    pip install pillow

    安装完整过后直接在py文件中导入以下模块和方法:

    from tkinter import *

    from tkinter.filedialog import *

    from PIL import Image,ImageTk

    import qrcode

    3具体步骤

    3.1编写ui界面

    导入模块后直接用tkinter模块编写ui界面。小编这里的ui界面为:

    图3.1ui界面

    具体代码如下:

    root = Tk()

    root.title("二维码生成器")

    root.geometry('600x400+400+100')

    button1 = Button(root,text = '选择图标',font = ('宋体',20),fg = 'green',bg = 'white',command = openfile)#设置按钮

    button2 = Button(root,text = '保存二维码',font = ('宋体',20),fg = 'green',bg = 'white',command = savefile)#设置按钮

    button1.place(x = 90,y = 330,width = 120,height = 50)#显示按钮

    button2.place(x = 385,y = 330,width = 150,height = 50)#显示按钮

    label1 = Label(root,text = '输入链接',font = ('宋体',20),fg = 'black',bg = 'white')#设置组件

    label1.place(x = 235,y = 5,width = 130,height = 50)

    entry1 = Entry(root,font = ('宋体',20))#设置输入框

    entry1.place(x = 50,y = 60,width = 510,height = 30)#显示组件

    canvas1 = Canvas(root,width = 300,height = 300,bg = "white")#创建画布

    canvas2 = Canvas(root,width = 300,height = 300,bg = "white")#创建画布

    canvas1.place(x = 50,y = 100,width = 200,height = 200)

    canvas2.place(x = 360,y = 100,width = 200,height = 200)

    button = Button(root,text = '生成',font = ('宋体',15),fg = 'black',bg = 'pink',command = creat)#设置按钮

    button.place(x = 280,y = 200,width = 50,height = 40)#显示按钮

    root.mainloop()

    Tkinter的基础用法此公众号内有相关用法,可以搜索关键词tkinter阅读。

    这里只简单说一下部分方法及参数的含义。

    Button()方法为创建一个按钮组件,其中command为点击按钮绑定的事件(函数方法)。

    place()为一种布局方式,参数x,y为相对ui界面的坐标,width和height为显示宽高。

    Label()为显示文字组件,例如图3.1中的“输入链接”。

    Entry()为输入框组件,这里用于接收链接。使用entry.get()获取其中的内容。

    Canvas()为画布组件,这里用于展示图标和二维码。

    font参数为字体。其中可以设置字体样式和大小。

    3.2生成二维码

    程序的ui界面就已经写好了,最后只需要完成按钮中的comman参数就好了。分别有三个方法。先来看选择图标。

    def openfile():

        global filename,image_name

        filename = askopenfilename()

        image_name = Image.open(filename)

        image_name = image_name.resize((200, 200), Image.ANTIALIAS)#缩放图片

        im_root = ImageTk.PhotoImage(image_name)  # 预设打开的图片

        canvas1.create_image(100,100,image=im_root)  # 嵌入预设的图片

        canvas1.place(x = 50,y = 100,width = 200,height = 200)

        root.mainloop()

    这里面只说一下askopenfilename(),这是tikinter模块中filedialog类的一个方法,返回的是你当前选择文件的路径。然后利用image模块将此图片打开并按照要求缩放,最终展示在画布上。

    图3.2选取图片

    图3.3展示图片

    然后是生成函数:

    def creat():

        global img

        qr = qrcode.QRCode(

            version=2,

            error_correction=qrcode.constants.ERROR_CORRECT_Q,

            box_size=10,

            border=1)

        url = entry1.get()

        qr.add_data(url)

        qr.make(fit=True)

        img = qr.make_image()

        img = img.convert("RGBA")

        icon = image_name

        icon = icon.convert("RGBA")

        imgWight, imgHeight = img.size

        iconWight = int(imgWight / 3)

        iconHeight = int(imgHeight / 3)

        icon = icon.resize((iconWight, iconHeight), Image.ANTIALIAS)

        posW = int((imgWight - iconWight) / 2)

        posH = int((imgHeight - iconHeight) / 2)

        img.paste(icon, (posW, posH), icon)

        img1 = img.resize((200, 200), Image.ANTIALIAS)

        im_root = ImageTk.PhotoImage(img1)  # 预设打开的图片

        canvas2.create_image(100,100,image=im_root)  # 嵌入预设的图片

        canvas2.place(x = 360,y = 100,width = 200,height = 200)

        root.mainloop()

    其中qr部分为二维码的配置。

    version参数是从1到40,其控制QR码的大小的整数(最小的,版本1,是一个21×21矩阵)。设置为None并在使代码自动确定时使用fit参数。

    error_correction参数控制用于QR码的误差校正。在qrcode 软件包中提供了以下四个常量:

     

    ERROR_CORRECT_L

    可以纠正大约7%或更少的错误。

    ERROR_CORRECT_M(默认)

    可以纠正大约15%或更少的错误。

    ERROR_CORRECT_Q

    可以纠正大约25%或更少的错误。

    ERROR_CORRECT_H。

    可以纠正大约30%或更少的错误。

    box_size参数控制每个二维码格子中有多少个像素。

    border参数控制边界应多少盒厚是(默认为4,这是最低根据规范)。

    add_data()为二维码的链接,这里直接获取输入框中的内容。

    然后后面的内容都为控制图标与二维码的相对大小和位置。以上这部分的参数均来自qrcode的官方文档。详情请到官网查看:https://pypi.org/project/qrcode/5.1/

    该方法写好后输入链接,点击生成,就可以生成一个带图标的二维码了。

    图3.4生成二维码

    最后是保存二维码:

    def savefile():

        pathname = asksaveasfilename(defaultextension = '.png',initialfile = '新的二维码.png')

        img.save(pathname)

    其中的asksavesfilename同样是返回文件保存的路径,后面两个参数依次是默认图片格式、默认文件名。最后点击保存二维码即可大功告成。

    图3.5保存二维码

    最后打开保存的文件夹,检查一下,发现成功生成了二维码。

    3.6查看二维码

    4完整代码

    from tkinter import *

    from tkinter.filedialog import *

    from PIL import Image,ImageTk

    import qrcode

    def openfile():

        global filename,image_name

        filename = askopenfilename()

        image_name = Image.open(filename)

        image_name = image_name.resize((200, 200), Image.ANTIALIAS)#缩放图片

        im_root = ImageTk.PhotoImage(image_name)  # 预设打开的图片

        canvas1.create_image(100,100,image=im_root)  # 嵌入预设的图片

        canvas1.place(x = 50,y = 100,width = 200,height = 200)

        root.mainloop()

    def creat():

        global img

        qr = qrcode.QRCode(

            version=2,

            error_correction=qrcode.constants.ERROR_CORRECT_Q,

            box_size=10,

            border=1)

        url = entry1.get()

        qr.add_data(url)

        qr.make(fit=True)

        img = qr.make_image()

        img = img.convert("RGBA")

        icon = image_name

        icon = icon.convert("RGBA")

        imgWight, imgHeight = img.size

        iconWight = int(imgWight / 3)

        iconHeight = int(imgHeight / 3)

        icon = icon.resize((iconWight, iconHeight), Image.ANTIALIAS)

        posW = int((imgWight - iconWight) / 2)

        posH = int((imgHeight - iconHeight) / 2)

        img.paste(icon, (posW, posH), icon)

        img1 = img.resize((200, 200), Image.ANTIALIAS)

        im_root = ImageTk.PhotoImage(img1)  # 预设打开的图片

        canvas2.create_image(100,100,image=im_root)  # 嵌入预设的图片

        canvas2.place(x = 360,y = 100,width = 200,height = 200)

        root.mainloop()

    def savefile():

        pathname = asksaveasfilename(defaultextension = '.png',initialfile = '新的二维码.png')

        img.save(pathname)

    root = Tk()

    root.title("二维码生成器")

    root.geometry('600x400+400+100')

    button1 = Button(root,text = '选择图标',font = ('宋体',20),fg = 'green',bg = 'white',command = openfile)#设置按钮

    button2 = Button(root,text = '保存二维码',font = ('宋体',20),fg = 'green',bg = 'white',command = savefile)#设置按钮

    button1.place(x = 90,y = 330,width = 120,height = 50)#显示按钮

    button2.place(x = 385,y = 330,width = 150,height = 50)#显示按钮

    label1 = Label(root,text = '输入链接',font = ('宋体',20),fg = 'black',bg = 'white')#设置组件

    label1.place(x = 235,y = 5,width = 130,height = 50)

    entry1 = Entry(root,font = ('宋体',20))#设置输入框

    entry1.place(x = 50,y = 60,width = 510,height = 30)#显示组件

    canvas1 = Canvas(root,width = 300,height = 300,bg = "white")#创建画布

    canvas2 = Canvas(root,width = 300,height = 300,bg = "white")#创建画布

    canvas1.place(x = 50,y = 100,width = 200,height = 200)

    canvas2.place(x = 360,y = 100,width = 200,height = 200)

    button = Button(root,text = '生成',font = ('宋体',15),fg = 'black',bg = 'pink',command = creat)#设置按钮

    button.place(x = 280,y = 200,width = 50,height = 40)#显示按钮

    root.mainloop()

    最后你还可用小编之前分享过的关于Python文件打包的方法,将该程序打包成exe文件,方便自己和他人使用。

     

    END

    实习编辑   |   王文星

       责       编   |   八里公路

     where2go 团队


       

    微信号:算法与编程之美          

    长按识别二维码关注我们!

    温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

    展开全文
  • 使用html+css+js制作小米首页

    千次阅读 多人点赞 2020-12-29 19:10:22
    文章目录使用html+css+js制作小米首页1.html制作小米官网页面结构(`index.html`)2.使用css设置公共样式(`base.css`)3.使用css设置页面元素样式(`index.css`)4.使用js实现切换轮播图效果(`pic_switch.js`) ...

    使用html+css+js制作小米首页

    在这里插入图片描述

    其中

    index.html是小米官网页面的基本结构

    font-awesome是图标样式

    base.css是公共样式

    index.css是页面中元素的样式

    pic_switch.js是实现切换轮播图的功能

    文件夹路径结构
    在这里插入图片描述

    1.html制作小米官网页面结构(index.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>小米,redmi,小米10,Redmi 10X,小米MIX Alpha,小米商城</title>
        <link rel="stylesheet" href="./css/css_reset.css">
        <link rel="stylesheet" href="./fa/css/font-awesome.css">
        <link rel="stylesheet" href="./css/base.css">
        <link rel="stylesheet" href="./css/index.css">
        <!-- 网站收藏图标(在标题栏和收藏栏)
                网站图片一般都存储在网站的根目录下,名字一般都叫做favicon.ico
                制作也很方便,直接搜索
        -->
        <link rel="icon" href="./favicon.ico">
        <script type="text/javascript" src="./js/pic_switch.js"></script>
    </head>
    
    <body style='height:1100px ;'>
        <!-- top-nav -->
        <div class="topbar-wrapper">
            <!-- container -->
            <div class="topbar w clearfix">
                <div class='topbar'>
                    <ul class='topbar-left'>
                        <li><a href="javascript:;">小米商城</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">MIUI</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">LoT</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">云服务</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">金融</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">商品</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">小爱开放平台</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">企业团购</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">资质证明</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">协议规则</a></li>
                        <li class="line">|</li>
                        <li><a class='app' href="javascript:;">下载app
                                <!-- 添加弹出层 -->
                                <div class="qrcode">
                                    <img src="./img/小米.png" alt="小米二维码">
                                    <span>小米商城app</span>
                                </div>
                            </a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">智能生活</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">select location</a></li>
                        <li class="line">|</li>
                    </ul>
                    <div class='shopping-cart'>
                        <a href="javascript:;"><i class='fa fa-cart-arrow-down'></i> 购物车(100)</a>
                    </div>
                    <ul class='user-info'>
                        <li><a href="javascript:;">登陆</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">注册</a></li>
                        <li class="line">|</li>
                        <li><a href="javascript:;">消息通知</a></li>
                        <li class="line">|</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 头部的外部容器 -->
        <div class="header-wrapper clearfix">
            <div class="header w">
                <!-- create logo -->
                <h1 class='logo' title='xiaomi'>
                    小米官网
                    <a class='home' href="/">
                    </a>
                    <a class='mi' href="/">
                    </a>
                </h1>
                <!-- 创建中间导航条的容器 -->
                <div class="nav-wrapper">
                    <!-- 创建导航条 -->
                    <ul class="nav clearfix">
                        <li class='all-goods-wrapper'>
                            <a class='all-goods' href="javascript:;">全部商品分类</a>
                            <!-- 创建一个左侧导航栏菜单 -->
                            <ul class='left-menu'>
                                <li>
                                    <a class='a-left-menu' href="#">手机 电话卡
                                        <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                </li>
                                <li>
                                    <a class='a-left-menu' href="#">电视 盒子
                                        <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                </li>
                                <li>
                                    <a class='a-left-menu' href="#">笔记本 平板
                                        <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                </li>
                                <li>
                                    <a class='a-left-menu' href="#">家电 插线板
                                        <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                </li>
                                <li>
                                    <a class='a-left-menu' href="#">出行 穿戴
                                        <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                </li>
                                <li>
                                    <a class='a-left-menu' href="#">智能 路由器
                                        <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                </li>
                                <li>
                                    <a class='a-left-menu' href="#">电源 配件
                                        <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                </li>
                                <li>
                                    <a class='a-left-menu' href="#">健康 儿童
                                        <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                </li>
                                <li>
                                    <a class='a-left-menu' href="#">耳机 音箱
                                        <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                </li>
                                <li>
                                    <a class='a-left-menu' href="#">生活 箱包<i class="fa fa-angle-right"
                                            aria-hidden="true"></i></a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="javascript:;">小米手机</a></li>
                        <li><a href="javascript:;">Redmi红米</a></li>
                        <li><a href="javascript:;">电视</a></li>
                        <li><a href="javascript:;">笔记本</a></li>
                        <li><a href="javascript:;">家电</a></li>
                        <li><a href="javascript:;">路由器</a></li>
                        <li><a href="javascript:;">智能硬件</a></li>
                        <li><a href="javascript:;">服务</a></li>
                        <li><a href="javascript:;">社区</a></li>
                        <!-- 创建弹出层 -->
                        <div class="good-info">
    
                        </div>
                    </ul>
                </div>
                <!-- 创建 搜索框的容器 -->
                <div class='search-wrapper'>
                    <form class="search" action="#">
                        <input class="search-inp" type="text">
    
                        <button class="search-btn">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </form>
                </div>
            </div>
    
        </div>
        <!-- 中间显示部分 -->
        <div class="banne-wrapper w">
            <div class="banner">
                <ul class='img-list' id='img-list'>
                    <li>
                        <a href="#">
                            <img id='img1' src="./img/banner1.jpg" alt="banner1" style='display: block;'>
                        </a>
                    </li>
    
                    <li>
                        <a href="#">
                            <img id='img1' src="./img/banner2.jpg" alt="banner2" style='display: none;'>
                        </a>
                    </li>
    
                    <li>
                        <a href="#">
                            <img id='img1' src="./img/banner3.jpg" alt="banner3" style='display: none;'>
                        </a>
                    </li>
    
    
                    <li>
                        <a href="#">
                            <img id='img1' src="./img/banner4.jpg" alt="banner4" style='display: none;'>
                        </a>
                    </li>
    
    
                    <li>
                        <a href="#">
                            <img id='img1' src="./img/banner5.jpg" alt="banner5" style='display: none;'>
                        </a>
                    </li>
                </ul>
                <!-- 小点点 -->
                <div class="point" >
                    <a id='pointc' class='hover' href="javscript:;"></a>
                    <a id='pointc' href="javscript:;"></a>
                    <a id='pointc' href="javscript:;"></a>
                    <a id='pointc' href="javscript:;"></a>
                    <a id='pointc'  href="javscript:;"></a>
                </div>
                <!-- 小箭头 -->
                <div class="arrow">
                    <a class='pre-arrow' id='pre-arrow' href="javscript:;"></a>
                    <a class='next-arrow' id='next-arrow' href="javscript:;"></a>
                </div>
            </div>
        </div>
        <!-- 固定定位的工具条 回到顶部的元素 -->
        <div class="to-top">
            <a href="javascript:;"><i class="fa fa-phone"></i></a>
            <a href="javascript:;"><i class="fa fa-user-o" ></i></a>
            <a href="javascript:;"><i class="fa fa-wrench" ></i></a>
            <a href="javascript:;"><i class="fa fa-headphones" ></i></a>
        </div>
        <!-- ad广告容器 -->
        <div class="ad w">
            <ul class='shortcut'>
                <li><a href="#">
                    <i  class="fa fa-clock-o"></i>
                    小米秒杀
                </a></li>
                <li><a href="#">
                    <i class="fa fa-building"></i>
                    企业团购
                </a></li>
                <li><a href="#">
                    <i class="fa fa-fonticons"></i>
                    F码通道
                </a></li>
                <li><a href="#">
                    <i class="fa fa-id-card-o"></i>
                    米粉卡
                </a></li>
                <li><a href="#">
                    <i class="fa fa-money"></i>
                    以旧换新
                </a></li>
                <li><a href="#">
                    <i class="fa fa-share-square"></i> 
                    话费充值
                </a></li>
            </ul>
            <ul class="ad-img " >
                <li>
                    <a href="#"><img src="./img/1.jpg" alt="show1"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/2.jpg" alt="show2"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/3.jpg" alt="show3"></a>
                </li>
                
            </ul>
        </div>
    </body>
    
    </html>
    

    2.使用css设置公共样式(base.css

    /* 公共样式 */
    .clearfix::before,
    .clearfix::after{
        content: '';
        display: table;
        clear:both;
    }
    /* 去除下划线 */
    a{
        text-decoration:none;
    }
    
    body {
        font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
        color:#333;
        /* 这个一定要加上,防止页面在放大时出现的奇怪现象 */
        min-width: 1226px ;
    }
    /* 设置一个类,控制网页的宽度 */
    .w{
        width:1226px;
        /* 设置居中的效果 */
        margin:0 auto;
    }
    

    3.使用css设置页面元素样式(index.css

    /* 主页index的样式 */
    
    /* 顶部导航条的容器 */
    .topbar-wrapper{
        width:100%;
        background-color: #333;
        height:40px;
        line-height:40px;
    }
    /* 设置超链接颜色 */
    .topbar a{
        font-size: 12px;
        color:#b0b0b0;
        /* 变成block,a标签会被里面的文字撑开高度,所以可以不用指定高度了 */
        display: block;
    }
    .topbar a:hover{
        color:#fff;
    }
    /* 竖线的设置 */
    .line{
        font-size: 12px;
        color:#424242;
        margin: 0 8px;   
    }
    
    /* 设置左侧导航栏 */
    .topbar-left,.topbar-left>li{
        float:left;
    }
    .shopping-cart,.user-info,.user-info>li{
        float:right;
    }
    /* 设置下载app的下拉二维码 */
    .app .qrcode{
        /* display:none; */
        position: absolute;
        left: -40px;
        width: 124px;
        /* height: 148px; */
        height:0;
        overflow:hidden;
        background-color: #fff;
        /* 后代元素继承行高 */
        line-height: 1;
        text-align: center;
        box-shadow: 0 0 10px rgba(100, 6, 61, 0.9);
        /* 给显示的东西添加动画效果 */
        transition: height 3s;
        z-index: 50;
    }
    /* hover app */
    .app:hover .qrcode,
    .app:hover::after{
        display:block;
        height:148px;
    }
    
    .app .qrcode img{
        width:90px;
        height:90px;
        margin:10px  17px ;
    }
    
    .app .qrcode span{
        color:#000;
        font-size: 1px;
    }
    .app{
        position: relative;
        text-align: center;
    }
    
    .app::after{
        display:none;
        content:"";
        width:0;
        height:0;
        /* 设置app下的小三角 */
        /* 设置绝对定位 */
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin:auto;
        border:5px solid transparent;
        border-top:none;
        border-bottom-color: rgb(241, 235, 235);
        
    }
    /* 设置购物车的样式  */
    .shopping-cart a{
        width: 120px;
        background-color:#424242;
        text-align:center;
    }
    
    .shopping-cart i{
        margin-right: 8px;
    }
    .shopping-cart{
        margin-left:26px;
    }
    
    /* 购物车hover样式 */
    .shopping-cart:hover a{
        background-color:#fff ;
        color:#ff6700;
    }
    
    
    /* —————————————————— */
    .header-wrapper{
        
        position:relative;
    }
    
    /* 设置中间的header */
    .header{
        height:100px;
        background-color:rgb(255, 255, 255);
        padding:22px auto;
    }
    
    .header .logo{
        float :left;
        margin-top:22px;
        width: 55px;
        height: 55px;
        position: relative;
        overflow: hidden;
        /* 隐藏logo中的文字 */
        text-indent: -99999px;
    }
    
    .header .logo a{
        position: absolute;
        width: 55px;
        height: 55px;
        background-color:#ff6700;
        background-image:url('../img/mi-logo.png'); 
        background-position: center;
        transition:left  .5s;
        left: 0;
    }
    .header>.logo>.home{
        left:-55px;
        background-image:url('../img/mi-home.png'); 
    
    }
    .header .logo:hover .mi{
        left: 55px;
    }
    .header .logo:hover .home{
        left: 0;
    } 
    /* ------------------------------------------- */
    /* 设置中间的导航条 */
    .header .nav-wrapper{
        float:left;
        /* width:850px; */
        margin-left:7px;
        
    }
    /* 设置li的布局 */
    .nav> li{
        float:left;
        
        
    }
    .nav> .all-goods-wrapper{
        float:left;
        
    }
    /* 全部商品的下面导航栏 */
    .all-goods-wrapper{
        position: relative;
        
    }
    .left-menu{
        width: 234px;
        /* height: 460px; */
        background-color:rgba(0,0,0,.3);
        position : absolute;
        left:-120px;
        z-index:20 ;
        line-height:1;
        padding:20px 0;  
    }
    /* 选择器的优先级 */
    .nav li .a-left-menu{
        display: block;
        height: 42px;
        line-height: 42px;
        color:white;
        padding:0 30px;
        /* 选择器的优先级,
            .nav li a已经设置了margin-right:20px;
            所以我在样式设置中就要重新设置margin-right:0;
        */
        margin-right: 0;
        font-size: 14px ;
           
    }
    .nav li .a-left-menu:hover{
        color:white;
        background-color:#ff6700;
    }
    
    .left-menu a i{
        float: right;
        color: white;
        height: 42px;
        line-height: 42px;
    }
    /* 设置导航条 */
    .nav-wrapper .nav{
        
        background-color: rgb(255, 254, 254);
        height: 100px;
        line-height:100px;
        padding-left: 58px;
        
    }
    .nav li a{
        display: block;
        font-size:16px bold;
        margin-right: 20px;
        color:#000;  
    }
    .nav li a:hover{
        color: #ff6700;
    }
    .nav>.all-goods-wrapper>.all-goods:first-child{
        /* display:none; */
        visibility: hidden;
    }
    .nav .good-info{
        /* height:228px;  */
        height: 0px;
        overflow: hidden;
        width: 100%; 
        background-color:rgb(252, 252, 252);
        /* border-top: 1px solid #000;
        box-shadow: 0 6px 5px rgba(0,0,0,.5); */
        position: absolute;
        top:100px;
        left:0;
        transition: height .5s;
        z-index: 99;  
    }
    .nav li:not(:nth-child(1)):not(:nth-child(9)):not(:nth-child(10)):hover ~ .good-info,
    .good-info:hover{
        height:228px; 
        border-top: 1px solid #000;
        box-shadow: 0 6px 5px rgba(0,0,0,.5);
    }
    
    /* ---------------------------------- */
    /* 右侧搜索框 */
    .search-wrapper{
        float: right;
        width: 296px;
        height: 50px;    
        margin-top: 25px;
    }
    .search-wrapper .search-inp{
        border: none;
        width: 244px;
        float: left;
        height: 50px;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid rgb(224,224,224);
        font-size: 16px;
        outline: none;
        }
    .search-wrapper .search-inp:focus,
    .search-wrapper .search-inp:focus +.search-btn{
        border-color: #ff6700;
    }
    .search-wrapper .search-btn{
        float: left;
        height:50px;
        width: 52px;
        padding: 0px;
        border:none;
        /* background-color:rgb(221, 21, 21); */
        color:#616161; 
        font-size:16px;
        border:1px solid rgb(224,224,224);
        border-left:none;
        outline: none;
    }
    
    .search-wrapper .search-btn:hover{
        background-color:#ff6700;
        color:#fff;
        border:none;
    }
    /* ———————————————————————————————————————————— */
    /* 中间部分(内容区)的样式 */
    /* banner中的图片区域 */
    
    .banner{
        position:relative;
        /* 指定高度避免高度塌陷 */
        height: 460px;
    }
    .banner .img-list li{
        position:absolute;
    }
    .banner img{
        width:100%;
        /* vertical-align:top; */ 
    }
    .point{
        position: absolute;
        bottom:22px;
        right:35px;
    }
    .point a{
        float: left; 
        width: 6px;
        height: 6px;
        background-color:rgba(0,0,0,.4);
        border:2px rgba(255,255,255,.4) solid;
        border-radius: 50%;
        margin-left:6px;
    }
    .point a:hover,
    .point a:active{
        background-color:#fff;
        border:2px rgba(0,0,0,.4) solid;
    }
    .point a.hover,
    .point a.active{
        background-color:#fff;
        border:2px rgba(0,0,0,.4) solid;
    }
    
    .arrow a{
        width:41px;
        height: 69px;
        /* 看不见就是因为没有开启定位 */
        background-color: rgb(213, 218, 218);
        position: absolute;
        top: 0;
        bottom:0;
        margin:auto 0;
        background-image: url(../img/icon-slides.png);
    }
    
    .arrow  .pre-arrow{
        left:234px;
        background-position:-84px 0;
    }
    
    .arrow  .pre-arrow:hover{
        background-position:0;
    }
    
    .arrow .next-arrow{
        right: 0;
        background-position:-125px 0;
    
    }
    .arrow  .next-arrow:hover{
        background-position:-42px;
    }
    
    /* ______________________________________ */
    /* 设置回到顶部的元素 */
    .to-top{
        width: 26px;
        height: 206px;
        position : fixed;
        bottom:60px;
        /* 布局的等式
             left + margin-left + width + margin-right + right = 视口大小
        */
        right: 50%;
        /* 1224/2+26 */
        margin-right:-638px;
    }
    .to-top a{
        display:block;
        text-align: center;
        font-size :40px;
        color: rgb(211, 211, 216);
    }
    
    
    
    /* ________________________ */
    /* 下步广告样式的设置  */
    .ad{
        margin-top:14px;
        height: 170px;
    }
    .ad .shortcut,
    .ad .ad-img,
    .ad li{
        float:left;
    }
    /* 设置左侧快捷方式的宽度 */
    .ad .shortcut{
        width: 228px ;
        height: 168px;
        padding-top:2px;
        padding-left: 6px;
        background-color: #5f5750;
        margin-right:14px;
    }
    .ad .shortcut li{
        position: relative;
    }
    /*设置上边框*/
    .ad .shortcut li::before{
        content: '';
        position: absolute;
        width:64px; 
        height: 1px;
        background-color:#665e57 ;
        /* left: 0;
        top: 0;
        right: 0;
        margin:0 auto; */
        top:-1px;
        left:6px;
    }
    .ad .shortcut li a::after{
        content: '';
        position: absolute;
        width:1px; 
        height: 70px;
        /* background-color: red; */
        /* top:0;
        left: 0;
        bottom: 0;
        margin:auto 0;   */
        top: 6px;
        left: 1px;
        background-color:#665e57;
    }
    
    
    .ad .shortcut a{
        display:block; 
        height: 84px;
        width: 76px;
        color:#cfccca;
        text-align: center; 
        font-size: 12px; 
        /* 外边距重叠(子元素把父元素的宽高撑开了) */
        overflow:hidden; 
    }
    
    .ad .shortcut i{
        display: block;
        margin-top:20px;
        font-size: 20px;
        margin-bottom: 6px;
    }
    
    .ad .shortcut a:hover{
        color:white;
    }
    
    
    /* 设置图片的样式 */
    .ad .ad-img li{
        width: 316px;
        margin-right: 15px;
    }
    /*  解决图片显示的问题 */
    .ad .ad-img li:last-child{
        margin:0;
    }
    
    .ad .ad-img img{
        width: 100%;
        vertical-align:top;   
    } 
    
    

    4.使用js实现切换轮播图效果(pic_switch.js

    window.onload=function() {
        //需求:自动切换图片
        //3s间隔自动
        //按钮点击切换
        //左右箭头自动切换
        //附加题:滑轮自动切换
    
        //task1:点击按钮切换图片
        var imgUl=document.getElementById('img-list');
        var img1=imgUl.querySelectorAll('img#img1');
        var pointc=document.querySelectorAll('#pointc');
        console.log(pointc);
        var index=0;
        for(var i=0;i<img1.length;i++){
            pointc[i].num=i;
            pointc[i].onclick= function (){ 
                index=this.num;                   
                for(var i=0;i<img1.length;i++){             
                    if (i === index) {
                        img1[i].style.display = "block";
                        setZero();
                    } 
                    else {
                        img1[i].style.display = "none";
                        setZero();
                    }
                }
                };
            };
    
    
        //task2:左右箭头切换图片
        var leftArrow=document.getElementById('pre-arrow');
        var rightArrow=document.getElementById('next-arrow');
        leftArrow.onclick=function(){
            //获取当前的index
            img1[index].style.display = "none";
            index--;
            if (index < 0) {
                index = 4;
            }
            img1[index].style.display = "block";
            setZero();//设置小圆点
    
        }
    
    
        rightArrow.onclick=function(){
            //获取当前的index
            img1[index].style.display = "none";
            index ++;
            if (index > 4) {
                index = 0;
            }
            img1[index].style.display = "block";
            setZero();//设置小圆点
        }
    
    
        //task3:3s间隔自动切换图片
        setInterval( function() {
            img1[index].style.display = "none";
            index++;
            if (index > 4) {
                index = 0;
            }
            img1[index].style.display = "block";
            setZero();
        }, 3000);
    
        
        //小圆点跟随图片变化
        function setZero() {
            for (let [n, a] of pointc.entries()) {
                if (n === index) {//如果是第index个小圆点,则修改这个小圆点的背景颜色为白色
                    a.className = "hover";
                } else {//其他小圆点恢复默认样式
                    a.className = a.className.replace("hover", "");
                }
            }
        }
    
        
    }
    
    展开全文
  • java-简单二维码制作

    千次阅读 2020-12-06 10:38:53
    } 实际案例 方法二 所需jar包maven地址 <dependency> <groupId>net.glxn.qrgengroupId>  <artifactId>javaseartifactId> <version>2.0version> dependency> //二维码制作方法 @Security(name = "二维码制作", ...
  • 使用Flask-QRcode生成动态二维码

    千次阅读 2019-12-17 00:06:47
    如果需要指定二维码整体大小的话,还是用css控制就行. ("I'm bigger than you!", box_size=20) }}"> 当然还有其他诸如修改颜色\中间添加图标等反正是我估计用不到的样式,有需要的可以去官网看说明啦.
  • 一、遇到的问题: 正常浏览网页,二维码正常显示,但是随着浏览器的扩大与缩小,二维码尺寸不会随着屏幕自适应 正常浏览(截取部分): 缩小浏览器(截取部分): ...
  • * @Description: 二维码操作类 * @Date Created in 2021-03-29 11:35 * @Modified By: */ public class QRCodeUtils { /** * CODE_WIDTH:二维码宽度,单位像素 * CODE_HEIGHT:二维码高度,单位像素 ..
  • 点击选择WiFi生成二维码,使用手机相机扫描二维码,连接WiFi,(当然事先是把密码写进了代码里,只是这样更方便的可以使用WiFi连接,不需要输入密码,避免老被人问WiFi密码,哈哈哈) 二、 安装依赖 2.1 需要引入...
  • 本人在做一个通过APP扫二维码对硬件进行操作的东西,现在通过扫描二维码已经可以完全实现操作了。现在想把这个二维码做出可以换的,也就是说扫一次,二维码自动换掉了,之前的二维码就失效了。就类似于现在的六位...
  • 微信扫描二维码登录网站---href设置二维码大小

    万次阅读 热门讨论 2016-02-29 10:50:54
    结果微信这个二维码死活没有效果。百度出来的解决方案少之又少;终于有人写了一行小字。herf要在公网上。 就是说本地测试的时候。这个herf不能填本地的路径。人家是一个公网的路径。 自定义微信css代码: @CHARSET
  • 微信iOS长按无法识别二维码

    千次阅读 2019-04-13 11:56:08
    分享一下ios微信长按无法识别二维码的问题 在网上找了一大堆的处理方式说增加img 的padding、设置缩放的、还有说图片大小的问题 、我扫码图片就是从服务号弄下来的。最后还是没用。 然后我就研究了一下到底为啥 ...
  • 前沿技术早知道,弯道超车有希望积累超车资本,从关注DD开始有时候要为某个网页生成二维码,我经常是去百度搜索:二维码生成器。然后下面选择一个看得上眼的去使用,比如我比较常用的是:草料二维码生...
  • 生成带有logo的二维码

    2021-03-18 17:34:21
    /** * MultiFormatWriter:多格式写入,这是一个工厂类,里面重载了两个 encode 方法,用于写入条形码或二维码 * encode(String contents,BarcodeFormat format,int width, int height,Map hints) * contents:条形码...
  • 本篇文章是介绍利用Zxing来生成二维码图片在web网页上展示,同时解析二维码图片。 Zxing概述 ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口。 Zxing库的主要...
  • 很多企业都会把自己内部的一些文档资料,培训视频,操作流程等内容放到一个二维码里,员工只需要扫码后就能查看,非常方便。 但是随着科学技术的日益先进和经济的高速发展,我们已经步入了网络信息时代和经济全球...
  • web前端二维码打印模板编辑

    千次阅读 2019-09-07 15:56:01
    工作需要,为了实现类似二维码打印软件的功能,尽力了。 基于hiprint开源插件修改而来,实现了二维码模板在线编辑、保存、预览、打印,批量打印、自动分页 官网地址:http://www.hinnn.com/ 话不多说 直接从官网...
  • 1.需求 我们有一个项目是给某大会签到入场的项目,整体的需求是嘉宾媒体之类的用户线上注册然后生成线下证照,这里就讲一下碰到的...3.生成二维码的页面 <div id="qrCode" ref="qrCodeDiv"></div> 4.js里
  • 下面这个图片就是通过图片和文字等内容合成的一张带有微信小程序二维码的图片,在小程序内部长按可以识别出来: 基本思路是先将内容用canvas排好版,然后把该canvas转化成图片;图片利用wx.previewImage进行展示...
  • qrcodejs2生成的二维码没有自适应(不会根据屏幕改变大小),因为里面使用的是行内样式 自己改了插件代码,上传到npm 只需要在元素#qrcode样式中设置高宽即可 #qrcode{ width:200px; height:200px; } 二维码会...
  • Python二维码生成库qrcode安装和使用示例:http://www.jb51.net/article/58579.htm vCard格式参数详细说明:http://www.phpin.net/thread-280-1-1.html 二维码生成工具:...
  • /* * MultiFormatWriter:多格式写入,这是一个工厂类,里面重载了两个 encode 方法,用于写入条形码或二维码 * encode(String contents,BarcodeFormat format,int width, int height,Map hints) * contents:条形...
  • img{ padding:200px 0 0 200px !important;margin:-200px 0 0 -200px !important;position: relative;z-index: 100;-webkit-user-select: none; } 转载于:https://www.cnblogs.com/cench/p/5776698.html
  • 最近在做项目,有一个需要长按二维码,直接识别二维码来关注公众号,写好以后,安卓手机可以使用,但是苹果手机长按没有一点反应,就去查找解决方法,找了很多,有说 ...我的项目是,父组件里面调用了子组件,
  • // 当页面滚动一些距离后,生成的图片不完整,在生成方法里面加下面this.scrollVal 折行代码 this.scrollVal = document.documentElement.scrollTop || document.body.scrollTop; document.body.scrollTop = 0; ...
  • 使用jquery生成随机二维码的方法

    千次阅读 2016-04-21 20:15:38
    在移动互联网的时代,做项目经常需要生成二维码,下面分享一些项目中使用到的生成随机二维码的方式。 1,使用到的js文件 qrcode.js --生成二维码引用的js jquery.qrcode.js --生成二维码引用的js jquery.1.8.3....
  • 修改微信扫码登录,二维码样式

    千次阅读 2018-03-17 20:47:43
    开工后的第一篇博客,记得在去年给自己定的计划是每月一篇博客,看来有点没有持之以恒,抱歉…,进入正题...二维码太大,跟项目中密码登录模块不协调,产品跟业务不太满意,自己也看得不舒服,下面是改小过的 2.2...
  • 最近公司项目有个需求,微博客户端中, h5 的页面上的某个按钮能够与native 交互呼起摄像头,扫描二维码并且解析。在非微博客户端中(微信或者是原生浏览器,如:safari)呼起系统的拍照或者上传图片按钮,通过拍照...
  • 微信pc内嵌二维码的自定义样式更改使用场景如何实现href自定义样式链接 使用场景 按照微信开发文档(https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html) 官方示例,将...
  • 使用公众号发布一篇带有二维码的文章,然后通过web-view内嵌在小程序中,就可以实现长按识别二维码了 2. 微信网页 原文:https://blog.csdn.net/weixin_42865522/article/details/86530461 (1) 设置meta <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,085
精华内容 2,434
关键字:

css里面如何制作二维码