我试图在每个实例下面自动放置一条100%水平线(规则)
<h1>
使用CSS的标头标签.
我希望看到的例子:
---剪断8 <---
介绍
---剪断8 <---
我在CSS中有这个:
.mypage .headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
}
我在我的主HTML页面中有这个:
<body class="mypage">
<h1><span class="headline">Introduction</span></h1>
我无法弄清楚如何在每次使用标题类之后出现水平线.
PSL*_*PSL 35
您也可以尝试使用Pseudoclass :after..我在我的一个应用程序中使用了这种样式.
h1:after
{
content:' ';
display:block;
border:2px solid black;
}
你可以整理一下这样的风格: - http://jsfiddle.net/5HQ7p/
h1:after {
content:' ';
display:block;
border:2px solid #d0d0d0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
Mar*_*ell 15
h1 { border-bottom: 1px solid black }
根据喜好调整大小和颜色.
小智 7
您应该使用border-bottomCSS属性.
对于HTML,请使用以下代码:
<h1>Introduction</h1>
对于CSS,请使用以下代码:
h1
{
border-bottom:1px solid #CCC;
padding-bottom:3px;
}
如果您想使用这些float:left, float:right属性,那么您还必须使用width:100%属性.padding-bottom是可选地在文本和水平线之间留出一些空格.
h1
{
border-bottom:1px solid #CCC;
float:left;
width:100%;
padding-bottom:3px;
}
代码演示:http://jsfiddle.net/aASQe/
| 归档时间： |
|
| 查看次数： |
77197 次 |
| 最近记录： |