缺點:
1. 無法調整每行的左右內距
2. 太難用
3. 太難看
4. Opera 上不正常
不知道有沒有人有興趣一起來討論如何製作這種筆記格線的 CSS 的呢？
| 附加檔案: |
檔案註釋: 利用純 CSS 製作出筆記本格線的範例。
last-line-bottom.zip [1.04 KiB]
被下載 531 次 |
| MozTW 討論區 https://forum.moztw.org/ |
|
| [網頁]實做了筆記格線但不甚滿意 https://forum.moztw.org/viewtopic.php?f=8&t=15552 |
第 1 頁 (共 1 頁) |
| 發表人: | wini [ 2006-09-11, 23:35 ] | ||
| 文章主題 : | [網頁]實做了筆記格線但不甚滿意 | ||
缺點: 1. 無法調整每行的左右內距 2. 太難用 3. 太難看 4. Opera 上不正常 不知道有沒有人有興趣一起來討論如何製作這種筆記格線的 CSS 的呢？
|
|||
| 發表人: | Linuxice [ 2006-09-12, 07:16 ] |
| 文章主題 : | |
看起來滿不錯的呀，使用圖形當底線不知道會不會比較好?圖形也可以自動大小設定的，也比較好看，當然啦，只用css比較簡潔。 |
|
| 發表人: | wini [ 2006-09-12, 14:09 ] | ||
| 文章主題 : | |||
Linuxice 寫: 看起來滿不錯的呀，使用圖形當底線不知道會不會比較好?圖形也可以自動大小設定的，也比較好看，當然啦，只用css比較簡潔。
用 hr 式的格線的缺點，就是字數跟大小沒算好的話，就會變成多行配一條格線，所以我才在想用行內元素(inline element)的話，就不怕這情形了。 但是問題就是出在對齊跟最後一行吧…… 對齊不用左右對齊不行，各行的左右內距也無法調整。 最後一行因為是行內元素，所以沒辦法讓格線對齊至行末。這點我是在想可以用區塊元素包起來，設個底線跟它對齊應該也可以解決。（應該啦） 總之不太清楚最新的 CSS 技術是怎麼克服這問題的就是了。 當然最簡單的作法就是整個做成一張圖最安定了，連格線的樣式都可以直接處理好。
|
|||
| 發表人: | Linuxice [ 2006-09-12, 17:21 ] |
| 文章主題 : | |
wini 寫: Linuxice 寫: 看起來滿不錯的呀，使用圖形當底線不知道會不會比較好?圖形也可以自動大小設定的，也比較好看，當然啦，只用css比較簡潔。 用 hr 式的格線的缺點，就是字數跟大小沒算好的話，就會變成多行配一條格線，所以我才在想用行內元素(inline element)的話，就不怕這情形了。 但是問題就是出在對齊跟最後一行吧…… 對齊不用左右對齊不行，各行的左右內距也無法調整。 最後一行因為是行內元素，所以沒辦法讓格線對齊至行末。這點我是在想可以用區塊元素包起來，設個底線跟它對齊應該也可以解決。（應該啦） 總之不太清楚最新的 CSS 技術是怎麼克服這問題的就是了。 當然最簡單的作法就是整個做成一張圖最安定了，連格線的樣式都可以直接處理好。 可是做成圖的話，文字就不能變更大小了，會對不齊。 不知道文字直接加上底線會不會比較好，有點像超連結一樣，線也不會一段一段的。 |
|
| 發表人: | wini [ 2006-09-12, 19:01 ] |
| 文章主題 : | |
Linuxice 寫: 可是做成圖的話，文字就不能變更大小了，會對不齊。
不知道文字直接加上底線會不會比較好，有點像超連結一樣，線也不會一段一段的。 不，連同文字一起做成圖片那樣子。比較新的瀏覽器都有縮放圖片的功能，所以不必太擔心倒是。 至於底線，我用起來是失敗的，你可以自行試試。 一段一段的那個叫做 border 的 dashed 效果，絕不是你的瀏覽器有問題。其實改 solid 效果比較看不出來問題在哪就是了……總之用 dashed 會有不一致的問題，我還想不出解決方法。 |
|
| 發表人: | 齊藤汪汪 [ 2006-09-17, 15:14 ] |
| 文章主題 : | |
要的結果是像這樣嗎?? http://thw1101.googlepages.com/lispan.html 因為我不太會CSS，請勿見怪，重點在清單(ul、li) (我用IE開，最後一行的虛線不見了...|||) 我是參考這邊變化的： http://seed100.com/e-learning/w3cn.htm |
|
| 發表人: | wini [ 2006-09-17, 21:27 ] |
| 文章主題 : | |
齊藤汪汪 寫: 要的結果是像這樣嗎??
http://thw1101.googlepages.com/lispan.html 因為我不太會CSS，請勿見怪，重點在清單(ul、li) (我用IE開，最後一行的虛線不見了...|||) 我是參考這邊變化的： http://seed100.com/e-learning/w3cn.htm 不，我要的就是我做出來的那種效果，可惜有難用又難看的 bug 存在就是了。 總之感謝你的回應。 :) |
|
| 第 1 頁 (共 1 頁) | 所有顯示的時間為 UTC + 8 小時 |
| Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |
|