CSS3笔记 3.用DIV画简单的图-完

接上面,再补充一些简单图形,利用css3的before和after伪类可以,其实最重要的是思想,不要为实现方式纠结,本人的实现方式肯定是很差的。

DEMO只支持IE10+

上网搜了下别人的实现,发现刚刚弄的几个DEMO完全是弱爆了,先抛开效果不说,就说那个爱心,别人只用一个DIV就搞定了,根本不需要什么拼装。这也是得益于CSS的伪类 :before,:after.

这两个伪类以前也用过,经常是需要在前面或后面插入一段文字的时候用到,如果用来绘图就再牛B不过了,一个DIV可以有三个绘制的区域,每个绘制的区域又可以绘制出任意角度的三角,梯形,及其它圆圈等形状,理论上上次说的除了那个匕首图形外,其它的都可以用一个DIV搞定了。这里先看一段再简单不过的代码

阅读更多

HTML5 - WebSql 网页数据库简单使用

记得就在前几年,Google 的 Google Gears 还存在,HTML5 的规范还没完成,使用 Gears 做过几个项目,发现真是个神奇的东西。

现在,不少浏览器已经支持 WebSql,挺简单使用HTML5的数据库API完成一个表进行增删改查,完成原先了在 Google Gears 里才能完成的功能。

代码

html 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<meta charset="utf-8"/>
<title>HTML本地数据库基本使用方法</title>
<script src="script.js"></script>
</head>
<body>
<div id="datas">

</div>
<input type="text" id="name" /><input type="button" value="增加" onclick="page.addData();">
</body>
<script>
var page=new Page();
page.qryData();
</script>
</html>
阅读更多

CSS3自学笔记2.用DIV画简单的图-续

接上面,基本圆和三角可以后,可以画通过拼接的方式画更多。比如圆环,漏斗,心,饼图等!

DEMO只支持IE10+

CSS3自学笔记2.用DIV画简单的图-续

组合形状

然后,画一个梯形,怎么画,想说两个三角形+一个矩形就OK了,其实刚开始我也是这么想的,于是用三个DIV套,也很容易就套出来了,回头一想,靠,太复杂了,还是三角形的实现原理没学好。

比如,这样一段代码

1
2
3
4
5
6
7
8
{
width:0;
height:0;
border-top:10px solid yellow;
border-right:10px solid green;
border-bottom:10px solid red;
border-left:10px solid blue;
}

结果如下:
CSS绘制梯形

阅读更多

log4j的日志找不到?

很多项目都用 Log4j 工具包记录日志,启动的时候也许你不会注意你的日志记哪了。

重装了下机器,把 Eclipse 升了一下,重新打项目,启动,发现很多 log4j 的错,报 file not found.
比较老的版本里面基本都是 {tocmat目录}/logs/mylog下,在 tocmat 的安装目录下建一个 logs/mylog 就能搞定,现在建了发现还是报。

然后发现 eclipse 把 tomcat 自动搭到 workbase 里面去了,在相应目录建了一个,还是报,郁闷!

先看一下:我的 log4j.properties 配置如下

1
log4j.appender.mylog.File=../logs/mylog/mylog.log
阅读更多

CSS3自学笔记1.用DIV画简单的图

CSS3听说已久,其实不知不觉也接触了很多,看过很多DEMO,也大大小小用过一些特性,如圆角等。嗯,都相当简单,就那么几个属性,但看了人家的DEMO纯CSS3实现的效果还是心中一颤,太牛B了,于是乎决定有空自己研究一下CSS3及相关内容,明白原理,不想停留在只懂些简单的概念而没有实践的阶段,本系列不会更新很快的说。。。。

提供个DEMO链接,懒得写-moz-,-webkit-,所以只支持IE10,其实想支持firefox,chorme也是完全没问题的

DEMO只支持IE10+

CSS3自学笔记1.用DIV画简单的图

今天先来看看CSS3如何画简单的图,经常看到别人用CSS3的各种圆角,渐变,旋转,等等特性画复杂度很高的图,实际看源码,发现都是一个一个DIV拼出来的,就先看一个DIV能画什么吧。另外,测试一般都在IE10下进行,写的代码不考虑Chrome,Firefox等浏览器效果,不是因为这些浏览器不好,而是IE10更符合标准,不用加 -webkit-,-moz-之类的前缀,如果想兼容的话,自己把相关的CSS3代码复制一份,然后加前缀吧,就应该可以兼容了。

1.圆形、椭圆形

这个用圆角就能实现,平时用圆角做按钮什么的都比较熟悉了,画一个圆或椭圆自然不在话下,首页给个

1
<div class="tuoyuan"></div>

比如我想画个橄榄球的形状,则应该是个扁扁的长方形,然后把边设置幅度就可以了,先设为宽度100,高度60,再看看CSS3的四个属性
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius分别可以给上左上右下左下右设置弯曲度,第一个参数为水平弯曲度,第二个为垂直弯曲度,保持顺滑的椭圆形,就是水平就是宽度/2于是

1
2
3
4
5
6
7
8
9
.tuoyuan{
width: 100px;
height: 60px;
background-color: #B10326;
border-top-left-radius: 50px 30px;
border-top-right-radius: 50px 30px;
border-bottom-left-radius: 50px 30px;
border-bottom-right-radius: 50px 30px;
}

如果是圆形的话,也相当简单,就把width=height就行了。其实后面4句可以用“border-radius:50% 50%;”一句代替。

阅读更多