非底圖【漸層】雙背景 - jannWu

網路城邦	城市	部落格
登入	最新文章	最新文章
線上求助	最新推薦	最新推薦
我的最愛	建立城市	發表文章
我的訪客簿	我的城市	我的部落格
會員中心		管理中心
書籤	哇新聞	相簿
最新書籤	最新討論	最新相片
熱門書籤	熱門討論	最新推薦
新增書籤	新聞臉譜	上傳相片
我的書籤		我的相簿

字體：小中大

非底圖【漸層】雙背景

2006/09/02 23:54:44　瀏覽5714｜回應14｜推薦22

非底圖式

<TABLE style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#557BCA', endColorStr='#FFE9D2', gradientType='1')"><TR><TD width="535" height="535" style="padding: 1em"><font color"#800000" style="font-size: 40px; color: #ffffff">非底圖式</font>

<div style="float: right; width: 444px; height: 222px; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFE9D2', endColorStr='#557BCA', gradientType='0')">this space</div>

漸層背景

<HR>
<font color"#800000" style="writing-mode: tb-rl; height: 200px; font-size: 40px; color: #ffffff">漸層背景</font>

<table width="444" align="right" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#557BCA', endColorStr='#FFE9D2', gradientType='0')"><tr><td width="100%" height="222">space here</td></tr></table>

</TD></TR></TABLE>

要寫這效果，藉助 css embed 設定，寫標籤會比較簡單些：

用 css embedding 和 div class 簡化標籤寫法：
<style>
.grdLr {filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#557799', endColorStr='#4180c0', gradientType='1')}
.grdBt {filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#557799', endColorStr='#FFEEDD', gradientType='0')}
.grdTb {filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFEEDD', endColorStr='#557799', gradientType='0')}
</style>

非底圖式漸層背景

<DIV style="width: 535px; height:535px; padding: 1em;" class="grdLr">
<font color"#800000" style="font-size: 40px; color: #ffffff">非底圖式</font> 漸層背景
<span style="width: 36px; writing-mode: tb-rl; float: left; font-size: 36px; color: #CCFFCC">三向漸層雙重背景色</span>

三向漸層雙重背景色

this space

<div style="float: right; width: 444px; height: 222px; padding: 1em;" class="grdBt">
this space
</div>

space here

<div style="float: right; width: 444px; height: 222px; padding: 1em;" class="grdTb">
space here
</div>

</DIV>

每篇文章都可以有很多種背景

( 網路資訊｜網頁設計 )

引用網址：http://blog.udn.com/article/trackback.jsp?uid=jannwu&aid=276188


	回應文章	第頁╱共 2 頁


	流蘇等級：8 留言｜加入好友

呵....
	2006/09/18 09:09
流蘇發現流蘇自己常常說一些渾話。。。謝謝jann的說明！流蘇最近都沒有什麼可以玩...又把jann的這個變色鍵拿出來玩玩.... 謝謝ㄛ！


	jannwu 等級：7 留言｜加入好友

回覆幾個回應
	2006/09/17 16:34
2006/09/06 09:44 流蘇：橫軸擺右邊站好！１）我看，你是指「直捲軸」吧！我想，你是說「直排橫軸擺右邊」嗎？如果文字直排，就不要有「直捲軸」比較好。何苦每行拉捲軸讀文字呢？直排，右側直捲軸，本來就共存不悖；作「直排」文字，須算好「高度」避免出現直捲軸，只用橫捲軸就好。２）直排，左側直捲軸，是兩種不同的屬性：　　直排　<div style="writing-mode: tb-rl">文字</div> 　　左側直捲軸　<body dir="rtl">放在 div 也行</body> 2006/09/04 08:51 秋日小語：真好玩… １）我也覺得好玩。而且，看多了橫排文字，也需要看看直排的 ── 搖頭變點頭 ── 才行。網頁還有提供阿拉伯用的「自右向左橫排」屬性。電腦世界，不但硬體跨國運作，軟體早已跨語言（除了轉碼還有自動翻譯），也是需有更多跨文化多文化的各方努力，這種高度文明發展的玩意兒才有夠看的…… ２）文章直排 CSS 簡單搞定 ── 直排，網誌幾篇試試看的文章，有鏈結可點閱。 2006/09/03 11:20 流蘇：直的寫法字好像不能超過十個字！而且方向怪怪的！１）可以超過10字 ── 區塊高度、文字大小，有關係。２）直排文字，轉行、換段 ── 自右向左。 @( ^ j ^ )@


	流蘇等級：8 留言｜加入好友

.......三向漸層ㄛ。。。
	2006/09/08 16:54
.......流蘇再試試ㄛ~ .......這顏色要是沒選好....肯定糊城一團...= =''


	流蘇等級：8 留言｜加入好友

橫軸擺右邊站好！
	2006/09/06 09:44
為了感謝jann！流蘇貼上美美的秋意圖孝敬一下！！不錯ㄛ！


	jannwu 等級：7 留言｜加入好友

I FuLo You ...

2006/09/04 16:52

section - Ａ

好玩哪，大師，你真是太棒啦…又有這個新花樣可讓我們留言，這方式一改，吼…連留言都看起來不一樣了呢！呵呵…多謝大師唷…好玩好玩…

秋日小語~飛揚的心情

再請教ㄛ

這個這個的字體明明有變大ㄚ！！！
為什麼流蘇在城市裡是可以變大、在網誌的回應或是留言簿裡卻沒辦法把字體變大？

流蘇也有試著把高寬變大些，可是還是怪怪的！在城市設定都行！
在網誌裡的回應或是留言簿裡都不行！

jann，這是怎麼一回事？不好意思ㄛ~流蘇的廢話好多！
因為如果不多說一些，會像樓下的小語娘親那個捲軸跑不出來。。。
流蘇在嘗試的時候，就發現這個問題了！

哈哈哈哈！小語娘親貼的少了一個配件！
看起來真怪ㄟ！

哈哈ㄏ哈哈！廢話完畢。

厚～～直排這麼玩，你倆都這麼快就成功勒！我試了很久才知道吶……
上列重新試貼的和新加的紅字問題和答案，看來都已解決了嘛！
<DIV style="width: 242px; height: 242px;"><div style="width: 242px; height: 242px; writing-mode: tb-rl; overflow: auto; font-size: 15px;padding: 1em;">
城市文章和網誌文章編輯器的「程式和設定」可能不大一樣，用戶端（client）想自行設定就會不大一樣，須逐一發現才會控制得宜，細節我還沒弄清楚哩……
</div></DIV>

@( ^ j ^ )@


	流蘇等級：8 留言｜加入好友

再加上美美的底色
	2006/09/04 12:01

寂風詞盼月道是閑情相棄遠。獨上西樓，惆悵月來晚。日日花前空對壺，鏡中朱顏瘦纏袞。堤上青蕪千頃畹。莫問新愁，世事常乖蹇。獨立危樓足漸踠，橫山新月猶繾綣。


	流蘇等級：8 留言｜加入好友

哈ㄚ哈哈哈！jann
	2006/09/04 10:00

哈哈哈哈哈！流蘇把字體和大框框同時變大了啦~呵呵呵呵！好開心ㄛ！jann！這樣對不對ㄚ？？？好好玩ㄛ！可是，剛剛流蘇又想嘗試把那個漸層的底色加進來這捲軸裡....好像不行ㄟ！這還需要研究一下！真的事態感謝jann的分享了！流蘇玩的好開心！真的真的！這麼多新鮮的語法、好像在變造型！超棒的！謝謝謝謝！


	流蘇等級：8 留言｜加入好友

jann....
	2006/09/04 09:15

再請教ㄛ這個這個的字體明明有變大ㄚ！！！為什麼流蘇在城市裡是可以變大、在網誌的回應或是留言簿裡卻沒辦法把字體變大？流蘇也有試著把高寬變大些，可是還是怪怪的！在城市設定都行！在網誌裡的回應或是留言簿裡都不行！jann，這是怎麼一回事？不好意思ㄛ~流蘇的廢話好多！因為如果不多說一些，會像樓下的小語娘親那個捲軸跑不出來。。。流蘇在嘗試的時候，就發現這個問題了！哈哈哈哈！小語娘親貼的少了一個配件！看起來真怪ㄟ！哈哈ㄏ哈哈！廢話完畢。


	cease 等級：7 留言｜加入好友

真好玩…
	2006/09/04 08:51
section - Ａ好玩哪，大師，你真是太棒啦…又有這個新花樣可讓我們留言，這方式一改，吼…連留言都看起來不一樣了呢！呵呵…多謝大師唷…好玩好玩…


	流蘇等級：8 留言｜加入好友

.....jann
	2006/09/04 07:33
section A和section C ...............這兩個看起來都一樣ㄚ！！！除了字的大小之外！ section A和section C 的方向很像小說書本的感覺！！！^^~.......你確定下面不刪掉ㄛ？？？？歪七扭八的......有礙觀瞻.....= =""""


		第頁╱共 2 頁