有才华的人,别忘记给滋润你的那块土壤施肥
BlogJava
::
首页
::
新随笔
::
联系
::
聚合
::
管理
::
28 随笔 :: 5 文章 :: 147 评论 :: 0 Trackbacks
<
2008年12月
>
日
一
二
三
四
五
六
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
常用链接
我的随笔
我的文章
我的评论
我的参与
最新评论
留言簿
(15)
给我留言
查看公开留言
查看私人留言
我参与的团队
深圳Java俱乐部(0/0)
随笔分类
Flex(7)
(rss)
It's not about me
(rss)
java基础(2)
(rss)
js&css(3)
(rss)
swing(13)
(rss)
数据库(2)
(rss)
转贴(3)
(rss)
随笔档案
2011年3月 (1)
2011年1月 (1)
2010年1月 (1)
2009年11月 (2)
2009年8月 (5)
2009年7月 (1)
2009年6月 (1)
2009年4月 (1)
2009年3月 (1)
2009年2月 (1)
2008年12月 (2)
2008年11月 (1)
2008年9月 (1)
2008年8月 (1)
2008年7月 (2)
2008年5月 (1)
2008年4月 (5)
2008年3月 (5)
文章分类
Swing
(rss)
web
(rss)
记得常去逛逛
desktop form
developerWorks 中国
infoq
javadesktop
javalobby
javase
sun中国
搜索
最新评论
1. re: 固定JTable中的前几列
评论内容较长,点击标题查看
--founder
2. re: 固定JTable中的前几列
行数很多时(如2W行,30列),paintComponent会导致内存溢出
--founder
3. re: mysql存储过程学习及java调用存储过程[未登录]
不错,学习了
--linkin
4. re: 【三八节】 女程序员的求友说明书 [未登录]
haha
--zxx
5. re: mysql存储过程学习及java调用存储过程[未登录]
是个入门的好例子,我顺利的跑通了,只有菜鸟才会骂
--小鱼
阅读排行榜
1. mysql存储过程学习及java调用存储过程(32231)
2. 用Flex调用SWF查看PDF(12519)
3. Flex事件讲解【转】(12407)
4. java实现系统托盘(5631)
5. DataGrid透明显示背景图片,及表头透明(4534)
评论排行榜
1. 用Flex调用SWF查看PDF(50)
2. mysql存储过程学习及java调用存储过程(30)
3. java实现系统托盘(15)
4. 【三八节】 女程序员的求友说明书 (7)
5. Flex Hack 02:DataGrid列尾,用于数据汇总(6)
一些常用的css技巧
1、不用图片实现 Rounded corners
CSS代码如下:
.rtop, .rbottom
{
}
{
display
:
block
;
background
:
#fff
;
}
.rtop *, .rbottom *
{
}
{
display
:
block
;
height
:
1px
;
overflow
:
hidden
;
background
:
#ccc
;
}
.r1
{
}
{
margin
:
0 5px
;
}
.r2
{
}
{
margin
:
0 3px
;
}
.r3
{
}
{
margin
:
0 2px
;
}
.r4
{
}
{
margin
:
0 1px
;
height
:
2px
;
}
#withoutPic
{
}
{
width
:
500px
;
background
:
#ccc
;
color
:
#fff
;
margin
:
0 15px
;
}
在BODY中加入:
<
div
id
=withoutPic
>
<
b
class
="rtop"
>
<
b
class
="r1"
></
b
>
<
b
class
="r2"
></
b
>
<
b
class
="r3"
></
b
>
<
b
class
="r4"
></
b
>
</
b
>
<
p
>
This is a example of "不用图片实现 Rounded corners " by kissjava !!!
</
p
>
<
b
class
="rbottom"
>
<
b
class
="r4"
></
b
>
<
b
class
="r3"
></
b
>
<
b
class
="r2"
></
b
><
b
class
="r1"
></
b
>
</
b
>
</
div
>
效果为:
2、用图片实现 Rounded corners
CSS代码如下:
.withPic
{
}
{
width
:
300px
;
background
:
#fbeac3
;
border
:
1px solid #534515
;
position
:
relative
;
margin
:
10px 0
;
}
.withPic .tl
{
}
{
position
:
absolute
;
width
:
14px
;
height
:
14px
;
background
:
url(images/box-two-tl.png)
;
top
:
-1px
;
left
:
-1px
;
}
.withPic .tr
{
}
{
width
:
14px
;
height
:
14px
;
background
:
url(images/box-two-tr.png)
;
position
:
absolute
;
top
:
-1px
;
right
:
-1px
;
}
.withPic .bl
{
}
{
width
:
14px
;
height
:
14px
;
background
:
url(images/box-two-bl.png)
;
position
:
absolute
;
bottom
:
-1px
;
left
:
-1px
;
}
.withPic .br
{
}
{
width
:
14px
;
height
:
14px
;
background
:
url(images/box-two-br.png)
;
position
:
absolute
;
bottom
:
-1px
;
right
:
-1px
;
}
.withPic .inside
{
}
{
padding
:
10px
;
}
在BODY中加入:
<
div
class
="withPic"
>
<
div
class
="inside"
>
<
p
>
This is a example of "用图片实现 Rounded corners " by kissjava!!!
</
p
>
</
div
>
<
div
class
="tr"
></
div
>
<
div
class
="tl"
></
div
>
<
div
class
="br"
></
div
>
<
div
class
="bl"
></
div
>
</
div
>
效果为:
3、Blockquote标签使用
CSS代码如下:
blockquote.style3
{
}
{
font
:
18px/30px normal Tahoma, sans-serif
;
padding-top
:
22px
;
margin
:
5px
;
background-image
:
url(images/openquote3.gif)
;
background-position
:
top left
;
background-repeat
:
no-repeat
;
text-indent
:
65px
;
}
blockquote.style3 span
{
}
{
display
:
block
;
background-image
:
url(images/closequote3.gif)
;
background-repeat
:
no-repeat
;
background-position
:
bottom right
;
}
在BODY中加入:
<
div
id
=page-wrap
>
<
blockquote
class
="style3"
>
<
span
>
This is a example of Blockquote by kissjava!!!
<
br
/><
br
/>
</
span
>
</
blockquote
>
</
div
>
效果为:
4、From 表单
CSS代码如下:
label,input
{
}
{
display
:
block
;
width
:
150px
;
float
:
left
;
margin-bottom
:
10px
;
}
label
{
}
{
text-align
:
right
;
width
:
75px
;
padding-right
:
20px
;
}
br
{
}
{
clear
:
left
;
}
在BODY中加入:
<
form
>
<
label
for
="name"
>
Name
</
label
>
<
input
id
="name"
name
="name"
><
br
>
<
label
for
="address"
>
Address
</
label
>
<
input
id
="address"
name
="address"
><
br
>
<
label
for
="city"
>
City
</
label
>
<
input
id
="city"
name
="city"
><
br
>
</
form
>
效果为:
5、段落的第一个字占多行
CSS代码如下:
p.introduction:first-letter
{
}
{
font-size
:
300%
;
font-weight
:
bold
;
float
:
left
;
width
:
1em
;
}
在BODY中加入:
<
div
id
=page1
>
<
p
class
="introduction"
>
这个例子是第一个字站住多行,至于占几行那得看你设置的值,多加几行。。。。。
</
p
>
</
div
>
效果为:
这里是完整的代码以及图片,
下载
posted on 2008-12-20 13:42
kissjava
阅读(2008)
评论(3)
编辑
收藏
所属分类:
js&css
评论
#
re: 一些常用的css技巧
2008-12-20 14:16
HiMagic!
整理的不错
回复
更多评论
#
re: 一些常用的css技巧
2008-12-21 07:32
heyang
不错,给个记号。
好像还有一个Js版的圆角Div,指定div类名即可。
回复
更多评论
#
re: 一些常用的css技巧
2008-12-21 14:13
何永进
不错 学习了
回复
更多评论
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
知识库
C++博客
博问
管理
相关文章:
精通 JS正则表达式(转帖)
精通JavaScript DOM事件(转帖)
一些常用的css技巧
Powered by:
BlogJava
Copyright © kissjava