亚洲AV无码国产精品麻豆天美,午夜亚洲AV日韩AV无码大全,亚洲爆乳AAA无码专区

一些常用的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中加入：

</b>

<p>This is a example of "不用圖片實現 Rounded corners " by kissjava !!!</p>

</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中加入:

<p>This is a example of "用圖片實現 Rounded corners " by kissjava!!!</p>

</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中加入:

<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="address">Address</label>

</form>

效果為：

5、段落的第一個字占多行
CSS代碼如下：

p.introduction:first-letter {

font-size : 300%;

font-weight : bold;

float : left;

width : 1em;

}

在BODY中加入:

這個例子是第一個字站住多行，至于占幾行那得看你設置的值，多加幾行。。。。。

</p>

</div>

效果為：

這里是完整的代碼以及圖片，下載

posted on 2008-12-20 13:42 kissjava 閱讀(2021) 評論(3) 編輯收藏所屬分類: js&css

有才華的人，別忘記給滋潤你的那塊土壤施肥

常用鏈接

留言簿(15)

我參與的團隊

隨筆分類

隨筆檔案

文章分類

記得常去逛逛

搜索

最新評論

閱讀排行榜

評論排行榜

評論


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 精通 JS正則表達式(轉帖) 精通JavaScript DOM事件（轉帖）一些常用的css技巧