• CSS移动端的Responsive Web Design @media

    随着移动端的出现,Responsive Web Design(响应式网页设计/自适应网页设计)早在前几年就已开始逐渐步入主流,但那会的移动端并不很多,使用桌面浏览器居多,大部分站点没必要考虑响应式支持,只有少部分尝鲜的站点使用。

    近两年,随着大屏手机,平板电脑的大量普及,人手一部,网页设计开始脱离固定的液晶显示屏,开始转移到移动端。最早的做法,差不多是为不同的主流设备下分别开发相应的CSS主题,然后使用js判断设备并引入相应的CSS使得网页在各个设备之间能够得体的显示。这种工作量是相当大的,特别是手机、平板电脑各种尺寸都有,这需要花大量的功夫与精心设计。

    ...

    READ ALL

  • Python批量把SVG转png、pdf脚本

    需要提前安装cairosvg模块,下载地址http://cairosvg.org/download/

    代码

    #! encoding:UTF-8
    import cairosvg
    import os
     
    loop = True
    while loop:
      svgDir = raw_input("请输入SVG文件目录")
      if os.path.exists(svgDir) and os.path.isdir(svgDir):
        loop = False
      else:
        print "错误:您输入的SVG文件目录不存在或者不是一个有效的目录,请重新输入"
     
    loop = True
    while loop:
      exportDir = raw_input("请输入导出目录")
      if os.path.exists(exportDir):
        loop = False
      else:
        print "错误:您输入的导出目录[" , exportDir  , "] 不存在,是否要创建这个目录?"
        loops = True     
        while loops:
          msg = ""
          cmd = raw_input("创建 (Y) 重新 (R)")
          if cmd.upper() == "R":
            loops = False
          elif cmd.upper() == "Y":
            os.makedirs(exportDir, True)
            if os.path.exists(exportDir):
              loop = False
              loops = False
            else:
              print "创建目录失败[",exportDir,"], 请重新输入"
          else:
            print "找不到您输入的命令,请重新输入"
                 
     
    cate = ("png", "pdf")
    print "导出类型:"
    for i in cate:
      print i
         
    loop = True
    while loop:
      exportFormat = raw_input("请输入导出类型")
      if exportFormat.lower() in cate:
        loop = False
      else:
        print "您输入的类型不存在,请重新输入"
     
    def export(fromDir, targetDir, exportType):
      print "开始执行转换命令..."
      files = os.listdir(fromDir)
      num = 0
      for fileName in files:
        path = os.path.join(fromDir,fileName)
        if os.path.isfile(path) and fileName[-3:] == "svg":
          num += 1
          fileHandle = open(path)
          svg = fileHandle.read()
          fileHandle.close()
          exportPath = os.path.join(targetDir, fileName[:-3] + exportType)
          exportFileHandle = open(exportPath,'w')
            
          if exportType == "png":
            cairosvg.svg2png(bytestring=svg, write_to=exportPath)
          elif exportType == "pdf":
            cairosvg.svg2pdf(bytestring=svg, write_to=exportPath)
                
          exportFileHandle.close()
          print "Success Export ", exportType, " -> " , exportPath
        
      print "已导出 ", num, "个文件"
    export(svgDir, exportDir, exportFormat)
    

    ...

    READ ALL

  • Java svg转png、pdf关于image路径问题

    最近在使用Java利用batic包把svg转换到png/pdf时总是无法解析XML文件里的image标签,在测试时突然发现只要把image的xlink:href URL写成http从网络上寻找的就可以,如

    <image xlink:href="https://www.qttc.net/image.svg"></image>
    

    但是写成相对于Java项目路径,如

    <image xlink:href="image.svg"></image>
    

    以上路径就不能正常转换,最后我索性写成绝对路径还是不行

    <image xlink:href="C:/image.svg"></image>
    

    ...

    READ ALL

  • CSS3下雨场景

    full

    点这里看效果

    简单说下制作思维

    雨滴

    雨滴其实就是一个宽150px高1px的div,然后使用css3的rotate让它倾斜一下就好,然后使用css3的线性渐变,就成雨滴了。由上往下掉使用animation控制它的left与top即可。为了让它有远近的效果可以随机给一部分半透明,top参差不平。

    雨水

    首先是画椭圆,很简单只要给一个长方形然后border-radius: 50%就好,然后animation控制它的width与height就好,最后消失的时候给下opacity由1到0就有效果了,同样为了有层次感,可以随机给一部分半透明。

    ...

    READ ALL

  • CSS3 animation效果不错

    在这之前要在网页中实现动画,基本都是Flash,这Flash老大的位置一直到CSS3出现以后开始发生变化了,主流浏览器支持CSS3特性。

    它的属性特别多,具体的可以看看教程,下面给出一些简单例子

    例子1

    html

    <div class="box">
      <span class="a1">从左边渐渐飘入</span>
      <span class="a2">从中间淡入闪动两下,然后淡出</span>
      <span class="a3">从右边渐渐飘入</span>
      <hr  />
      <span class="a4">这个一直永久重复飘动</span>
      <hr />
      <span class="a5">从小变大, 颜色从红变到绿</span>
    </div>
    

    ...

    READ ALL

  • MyEclipse2013中断开服务器下SVN提交卡死

    MyEclipse2013中断开服务器下SVN提交卡死

    full

    点击Cancel取消就永远都在关闭中

    full

    这确实很蛋疼,即使关闭MyEclipse这窗口还是顽固的运行,只能通过kill掉进程后才能把它Cancel掉。

    后来在MyEclipse->Preferences->Team->SVN->SVN接口->Client下拉选择框中 把JavaHL**改选为SVNKit**

    ...

    READ ALL

  • 这两年

    两年前的今天我在用WordPress系统写了第一篇文章,随后经历了PHP版,最后到今天的Python版本。

    这期间:换了一份工作,博文更新也缓慢到基本每周一篇,技术逐渐从PHP转向Python、JavaScript。

    这期间:搬了一次家,从上地搬到双井,每天在富力广场都能看见肥头肥脑矮的看上去一堆肉的中老年男人领着漂亮的女包挽着比他高出一截又瘦又高的小三。

    这期间:博客也先后搬迁了几个服务器,最后一直放在阿里云至今,貌似还不错。

    这期间:因为度娘的广告很烂,匹配有问题,时不时的来个什么丰胸、早泄、保险等与站点内容不相关的广告,所以基本撤掉广告,基本就只有右侧的Linode。

    ...

    READ ALL

  • 垃圾邮件满天飞

    以前,我的邮箱偶尔也收过垃圾邮件,通常我都不怎么理会,但最近这两天,这垃圾邮件已经让我忍无可忍了:

    full

    百分之九十都是垃圾邮件,垃圾短信也发个不停。有点像北京公交车站那贴满了向牛皮藓版的小广告般涌向你的邮箱与手机短信,却又阻挡不了,邮箱系统自带的垃圾邮件过滤功能不太智能,每个垃圾邮件的特征都不一样。

    如果有一种机器学习的垃圾邮件特征的程序,一定会很大程度可以拦截垃圾邮件,毕竟大厂的垃圾邮件过滤规则早都被发垃圾邮件的技术组研究的透烂。

    ...

    READ ALL

  • IE下checkbox黑框样式问题及解决方法

    比如有一列checkbox,你在checkbox里勾选取消都很正常,如

    <div><span>第一个</span><input type="checkbox" /></div>
    <div><span>第二个</span><input type="checkbox" /></div>
    <div><span>第三个</span><input type="checkbox" /></div>
    <div><span>第四个</span><input type="checkbox" /></div>
    <div><span>第五个</span><input type="checkbox" /></div>
    <div><span>第六个</span><input type="checkbox" /></div>
    <div><span>第七个</span><input type="checkbox" /></div>
    

    ...

    READ ALL

  • IE在input内回车关闭自动触发button

    在IE中有一个现象,当你在input内敲回车时,IE会自动寻找第一个button标签并且触发它。

    index.html:

    <p><button onclick="console.log('from button click');">button</button></p>
    <p><input type="text" value="在这里回车就触发提交按钮" style="width:300px;" /></p>
    

    使用IE打开,并且在input内回车,就会执行button的onclick事件,如果你有两个button,只会触发第一个,如

    ...

    READ ALL