CSS樣式問題集錦

來源:互聯網
上載者:User

這裡記錄一些我在網頁製作過程中曾經遇到的問題,把它帳在這裡,希望對大家有所協助。

  1. iframe不同時出現捲軸
    在iframe引用的頁面中加上:
    <body   style="overflow:hidden;overflow-x:auto;overfow-y:auto"> 
  2. 捲軸樣式
    SCROLLBAR-FACE-COLOR: #2A024D;
     SCROLLBAR-HIGHLIGHT-COLOR: #0042FF;
     SCROLLBAR-SHADOW-COLOR: #000000;
     SCROLLBAR-3DLIGHT-COLOR:#FDFDFD;
     SCROLLBAR-TRACK-COLOR: #000000;
     SCROLLBAR-ARROW-COLOR: #0042FF;
     SCROLLBAR-DARKSHADOW-COLOR: #000000;(顏色當然還是換自己喜歡的了...^^) 

    一、捲軸的軌跡,記作:scrollbar-track。所謂“軌跡”,指捲軸的滑動塊運行時所必經的路線。
    二、捲軸的滑動塊,即在它上面按下滑鼠左鍵不放可上下或左右移動的滑動塊以及捲軸兩頭的小方塊,記作:scrollbar-face。face即捲軸的“臉”,注意它有三張“臉”:滑動條和兩頭的小方塊。
    三、捲軸亮邊框部分,記作:scrollbar-highlight。這個亮邊框,和表格的亮邊框概念是一樣的,即左邊和上邊部分,捲軸的亮邊框部分是指捲軸的“臉”(即滑動塊和兩頭小方塊)的亮邊框。
    四、捲軸亮邊框部分的外圍還有一個立體修飾部分,記作scrollbar-3dlight。3d即立體的意思,它將包圍在捲軸亮邊框部分的外邊。
    五、捲軸陰影部分,指主滑塊和兩頭方塊的陰影,位於左邊和左下,記作:scrollbar-shadow。
    六、捲軸陰影部分還有一個強陰影部分,記作scrollbar-darkshadow,它包圍在陰影部分的外邊。
    七、捲軸兩頭方誌標誌箭頭,記作:scrollbar-arrow,箭頭方向為向下、向上、向左、向右。

  3. 在xhtml中,使用body無法控制捲軸樣式問題
    使用body,html{}

  4. input元素與文字的垂直置中問題
    <p>
    <input type="text" name="author" id="author" style="vertical-align:middle" />
    <label for="author"><small>呢稱</small></label>
    </p>

    就是給Input加上vertical-align:middle屬性。
    將支援valign 特性的對象的內容與對象中部對齊

  5. img元素與文字的垂直置中問題
    img元素有個屬性valign是控制其後面的元素與之的對齊,使用middle即可

  6.  div內部文字垂直置中
    <div style="height:22px; line-height:22px;">大家好。</div>
    也就是說設定height與line-height一致即可。這種方法對單行文字有效。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.