1. css的transform提供了rotate函数。rotate对inline元素直接旋转不起作用。比如下面的例子 Yes or No 希望将or旋转。 HTML代码: Yes <span class="rotateme"> or </span> No CSS代码: .rotateme{ transform: rotate(270deg); display: inline-block; backgrou ...

    阅读全文
  2. 957 0

    这是学习css3动画效果的示例,动态不停旋转文字。 可以参考网址:https://tympanus.net/Tutorials/CSS3RotatingWords/index4.html 这是简单效果图截屏。 首先HTML代码如下: <section class="rw-wrapper"> <h2 class="rw-sentence"> < ...

    阅读全文
  3. 学习css3的作业之一,制作一个简单的图表。 这里是源码和效果图。 参考文档:https://tympanus.net/Tutorials/Animated3DBarChart/ CSS源码: @media screen and (max-width: 450px) { .sm-graph-container { font-size: 0.22em; } ...

    阅读全文
  4. 设计responsive页面时的注意点: 使用media query增加breakpoint来实现responsive. 永远以mobile设计优先。 设计组件时经常长宽使用百分比。 如果需要设置一些长宽固定数值时,使用em作为单位是个不错的选择。然后针对字体大小设置对应的em大小。以字体作为参照物。 参考文档: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries ...

    阅读全文
  5. 学习media query可以参考官方网址: https://www.w3.org/TR/css3-mediaqueries/ 今天运到一个问题,在使用chrome调试media query效果时,使用调试窗口来调整页面大小,效果如期望的展现。但是如果直接调整浏览器大小,部分大小时候做到了自适应,但是当窗口resize到一定大小后,并没有发生变化。不知道是不是浏览器的bug. 代码如下: @media screen and (max-width: 450px) ...

    阅读全文
  6. Inline-block是否可以代替float? inline-block是display的属性值,float是属性表示浮动。所以本身是有区别的,但是在某些场景下inline-block来编排layout有更好的编写效率。而不需要如float一样去clear浮动。 在排列一系列相同功能块展示(display)布局时以前常用float这些功能块来实现自动排列展示,最后在clear浮动来确保父块的高度。使用float一般都能工作,不过不得不承认,它们用起来有时候没那么简单。不过现在用in ...

    阅读全文
  7. CSS3 filter滤镜效果太强大了,不用不知道。有了它ps可以少做做了。 Filters主要是运用在图片上,以实现一些特效。(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用。 语法 elm { filter: none | <filter-function > [ <filter-function> ]* } 其默认值是none,他不具备继承性,其中fil ...

    阅读全文
  8. 839 0

    dd --help 常用dd来创建大文件,如dd if=/dev/zero of=/mybigfile bs=128M count=0 seek=24 参数: 1. if=文件名:输入文件名,缺省为标准输入。即指定源文件。< if=input file > 2. of=文件名:输出文件名,缺省为标准输出。即指定目的文件。< of=output file > 3. ibs=bytes:一次读入bytes个字节,即指定一个块大小为by ...

    阅读全文
  9. localization的一些示例以供参考。 本文示例均来源于Oracle官网Working with Localization Formatting章节,详细资料可以参考 http://docs.oracle.com/cd/E36909_01/fusionapps.1111/e15524/ui_localize.htm 货币的格式化 Example 20-1 Syntax of fnd:currencyPatternWithPrecisionAndSymbol fn ...

    阅读全文
  10. <af:convertNumber> 2017-09-05

    有这样的一段代码来显示一个数字。 <af:inputText value="mybean.studentId" > <af:convertNumber type="number"> </af:inputText> <af:outputText value="mybean.studentId"> <af:convertNumber pattern=&quo ...

    阅读全文
  11. 850 0

    css3引入的”vw”和”vh”基于宽度/高度相对于窗口大小,”vw”=”view width”, “vh”=”view height”; 以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。 参照demo案例对照下面四个容器的css样式。 以前通过百分比来做相应式开发,但对于高度100%的设置总有一些限制。有了vh是否就消除了这些限制变的更简 ...

    阅读全文
  12. 实现滚动窗口触发动画需要js的帮助。有jquery的一个全屏滚动插件fullpage.js fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 ...

    阅读全文
  13. 我们常常看到有些网站提供这样的功能,用户可以申请一个自己的名称作为二级域名来做自己的用户主页。格式大体如下: 网站本身域名 website.com 用户user申请自己的space并命名为myspace. 用户希望访问主页地址为 myspace.website.com。这样不同用户就可以申请自己的space名称做为二级域名来。 同样这样二级域名需求,企业也有可能用到。比如www二级域名,forum二级域名,support二级域名, example二级域名。 www.webs ...

    阅读全文
  14. 这是https://coverr.co提供的视频背景的实现方法。 1. Download your favorite video. 下载喜欢的视频 2. Upload the video to your website. 上传到你的网站 3. Add the following snippets to your site,加入代码   HTML代码: <div class="homepage-hero ...

    阅读全文
  15. object-fit的解释 2017-08-22

    http://www.zhangxinxu.com/study/201503/css3-object-fit.html 这篇博客很好的演示了object-fit的各种设置。博主有很不错的前端笔记。 The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and ot ...

    阅读全文
  16. 现需要设计这样一个component组件,要求该组件有4部分组成: 1. 背景视频 2.一层蒙板 3.顶层文字描述 html结构如下 <div class="container"> <video class="backgroundVideo" muted autoplay loop> <source src="/imgs/BeachRockVideo.mp4" ...

    阅读全文
  17. 一个warning message导致navigation失败。网上搜的一些资料先记录在这. https://stackoverflow.com/questions/30128395/identifying-and-solving-javax-el-propertynotfoundexception-target-unreachable https://stackoverflow.com/questions/7031885/how-to-choose-the-right-bean ...

    阅读全文
  18. 1331 0

    异常:javax.el.PropertyNotFoundException: Target Unreachable, 'ManageItemBackingBean' returned null 在引用EL#{bean.entity.property}中的managed bean时,有时会出现javax.el.PropertyNotFoundException:Target Unreachable exception。通常是在设置一个property或者触发一个bean ac ...

    阅读全文
  19. 短信验证服务 2017-08-08
    745 0

    现在大部分应用和网站都提高短信验证服务。短信验证服务过程大体如下: 1.短信验证服务页面。(手机号码信息,发送短信按钮,短信验证码输入框,发送短信后计时) 2.用户点击发送验证码后,用户收到短信服务商发来的包含验证码的短信。 3.用户在有效时间内输入验证码并确认。      3.1 用户短信验证成功后,进入下一页面。      3.2 用户输入错误或者没有在有效时间内进行验证,报错并停留在当前页面。 ...

    阅读全文
  20. 929 0

    网站提供注册功能的同时都会提高找回密码功能? 如何找回密码?一般都需要发送一个临时秘密到用户邮箱来重新设置密码。大体可以分为下面几个过程: 1. 找回密码页面。用户输入邮箱地址,验证码,以及安全密码保护问题等,确认按钮发送邮件到用户邮箱。 2.用户点击确认找回按钮后,返回页面。     2.1 后台使用管理员邮箱账户发送邮件。如果没有企业邮箱,除了自己搭建企业邮箱外,可以申请使用腾讯,阿里,263等邮件服务商提供的企业邮箱功能。 3.用户登录邮箱 ...

    阅读全文