您当前位置: 首页 >  WEB技术 >  CSS边框实例:设置下边框的样式
2013/11/29 15:21:50 分类:WEB技术

CSS边框实例:设置下边框的样式

 CSS 代码均位于 HTML 的 head 部分,这样做的目的是为了利于演示例子本身。在实际的开发中,使用 CSS 最好的方式是引用外部样式表。

这里介绍CSS边框实例:设置下边框的样式
 
工具/原料
  • 这里需要用到工具,代码编辑器,我用的是editplus;当然还有浏览器。
  • 步骤/方法
  1. <html>
    <head>
    <style type="text/css">
    p {border-style:solid}
    p.none {border-bottom-style:none}
    p.dotted {border-bottom-style:dotted}
    p.dashed {border-bottom-style:dashed}
    p.solid {border-bottom-style:solid}
    p.double {border-bottom-style:double}
    p.groove {border-bottom-style:groove}
    p.ridge {border-bottom-style:ridge}
    p.inset {border-bottom-style:inset}
    p.outset {border-bottom-style:outset}
    </style>
    </head>
    <body>
    <p class="none">No bottom border.</p>
    <p class="dotted">A dotted bottom border.</p>
    <p class="dashed">A dashed bottom border.</p>
    <p class="solid">A solid bottom border.</p>
    <p class="double">A double bottom border.</p>
    <p class="groove">A groove bottom border.</p>
    <p class="ridge">A ridge bottom border.</p>
    <p class="inset">An inset bottom border.</p>
    <p class="outset">An outset bottom border.</p>
    </body>
    </html>
  2. 2
    运行结果为:
    fc1f4134970a304efc4c489cd1c8a786c9175c6e.jpg

本文由胡金金个人网站整理发布,转载请注明地址:http://www.hujinjin.com/info/384.html

凡标明来源于胡金金个人网站的文章,皆为本站整理发布,若转载此文必须附原文链接,对部分平台更改其文内容当自己原创者,胡金金个人网站将保留其追究权利!
个人资讯推荐
友情链接