CSS

HTML 標記 li 底下 span 指定文字格式的奇怪問題

有人發現一個 CSS 排版的問題,後來我發現,只要是這樣 

<ul><li><span class="abc">一堆文字....一堆文字....<a>一堆文字</a>....</span>

在 css 中指定 li 底下 span 的文字大小, 例如

.abc {font-size: 30px; }

而那一堆文字中若有一些標記,不只是 <a>, 我試過 <b> 甚至 <c>,標起來的文字都會上移,不過要夠長,捲到第二行之後才會看到。

底下是測試截圖,我加了下底線。

image

Chrome 和 Edge 都會如此,IE 則不會。

找了一些類似的資料,還不知真正的原因,但 css 這樣設定就可以解決

li span { display:block; }

結果截圖如下:

image

不過會不會有什麼副作用就不清楚了。

重要度:
文章分類:
電腦標籤:

border-radius與圓角

圓角因使人感覺舒適的友好風格而變得無處不在。這個無處不在也讓很多前端工程師累個半死,YAHOO Performance Research Engneer Team的Nicole在講演《Designing Fast Websites》中用的副標題是don』t blame the rounded corners!,從側面也說明了圓角給實現者帶來的困擾:實現麻煩、兼容困難、性能不佳。而W3C早在2002年的CSS3草案中就加入了一個叫 border-radius 的屬性,通過它可以直接來定義HTML元素的圓角。

CSS3的border-radius規範

重要度:
閱讀權限:
文章分類:
電腦標籤:

運用 CSS3 美化你的個人網站

最近幾年國際上的網頁設計師互相大力疾呼及提倡“網頁標準化” (web standard) 的活動下,漸漸的很多設計師都朝向以
CSS+XHTML 為標準的網頁設計技巧。更進階的設計師還會以 AJAX+JQuery
等的程式技術來輔助設計出更親使用者的網頁。現在有好消息,在即將推出的 CSS3
規範中,提供了幾款全新的技術規範,能夠提供給設計者設計出更有彈性、更具爆發力的網頁。

雖然短期之內我們可能無法將這些技術運用到一些商業的、或是我們日常的公司專案當中,不過對於自行設計部落格、網站,或是經營社群服務的設計者來說,這些技巧將是不可或缺的 eye candy.

以下將針對幾個特別的技巧說明一下:

重要度:
閱讀權限:
文章分類:
電腦標籤:
訂閱 CSS