2

私はこの外観を作成しようとしてきました:

ここに画像の説明を入力

私が賢い方法だと思ったのは、順序付けられていないリストを作成し、左/右のバーがロゴに使用されていない幅の 100% を使用するようにすることでした。

どうやら、私はこれで失敗しました。

問題のサイトはライブで、ここにアクセスできます (これまでに作成したコードを確認するには): http://amydemosphotography.smugmug.com/galleries

バーとロゴが同じ垂直方向のスペースを占有するようにすることはできませんでした。また、ロゴを 1) 常に中央に配置し、2) 常に左/右にパディングを配置します (そのため、線がパディングに触れたり下に移動したりしません)。

私は何を間違っていますか？

4

1 に答える 1

4

これが私がそれを行う方法です：

<h1><img src="http://cdn.smugmug.com/photos/2254208423_RS5b5Z6-O.png" alt="Logo"></h1>

--

body {
    padding-top: 3em;
}
h1 {
    color: #333;
    display: table;
}
h1:after,
h1:before {
    background-image: -webkit-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:    -moz-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:     -ms-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:      -o-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:         linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    content: '';
    display: table-cell;
    width: 50%;
/* Everything below allows us to have a little bit of space between the title and the decoration */
    -webkit-background-clip: padding;
       -moz-background-clip: padding;
            background-clip: padding;
}
h1:after {
    border-left: 1.5em solid transparent;
}
h1:before {
    border-right: 1.5em solid transparent;
}
​

そして、ここにライブの例があります: http://jsfiddle.net/joshnh/XjXYE/

于 2012-12-05T00:54:52.510 に答える