zoukankan      html  css  js  c++  java
  • CSS实现文字压在边线上的效果,fieldset与legend



    要达到以上的效果,我们可以在一个区域里用背景图片去做,其实在xhtml里有这样的标签可以去用。
    插入代码:
    <fieldset> 域(Defines a fieldset)
    <legend> 域标题(Defines a title in a fieldset)
    但是为了保证兼容性,实际操作起来并不是那么简单。页面代码:
    插入代码:
    <fieldset>
      <legend>dUcky的私生活</legend>
       <ul>
         <li>dUcky的私生活!新年快乐!</li>
         <li>dUcky的私生活!新年快乐!</li>
         <li>dUcky的私生活!新年快乐!</li>
         <li>dUcky的私生活!新年快乐!</li>
       </ul>
    </fieldset>
    通过样式定义
    插入代码:
    *{font-size:12px;margin:0;padding:0; font-family:Arial, Helvetica, sans-serif;}
    fieldset{padding:10px;margin:10px;160px;color:#453739; border:#453739 solid 1px;}
    legend{color:#933A34;font-weight:bold; background:#FFFFFF;}
    ul{list-style-type: none;}
    li{margin-top:4px;}
    通过CSS,我们可以达到自己想要的效果。但是这里面有些问题:
    1. 关于兼容性。我首先是把所有的padding和margin都设成0,因为IE和FF默认的都不一样。
    2. 在IE6里,控制fieldset与上面容器的边距是用padding-top,而margin-top没有反应...在FF里是用margin-top。
    3. 如果定义fieldset的边框的样式border,那么在IE6里边框会与legend里的文字重合叠加,而默认的样式不会。所以需要给legend一个背景挡住边框,这里是background:#FFFFFF。

    总的来说,在FF中更好控制一点,虽然这样的标签用的不多,但是能比较快速的达到一些效果。但是看见有人说如果用fieldset来布局就不符合语义了,fieldset必须用在form标签里面。
  • 相关阅读:
    UVa 1151 Buy or Build【最小生成树】
    UVa 216 Getting in Line【枚举排列】
    UVa 729 The Hamming Distance Problem【枚举排列】
    HDU 5214 Movie【贪心】
    HDU 5223 GCD
    POJ 1144 Network【割顶】
    UVa 11025 The broken pedometer【枚举子集】
    HDU 2515 Yanghee 的算术【找规律】
    Java基本语法
    Java环境变量,jdk和jre的区别,面向对象语言编程
  • 原文地址:https://www.cnblogs.com/lovablebox/p/1077605.html
Copyright © 2011-2022 走看看