ホームページ > 記事 > ウェブフロントエンド > 背景画像を使用せずに CSS コードのみを使用してパンくずリスト スタイルを実装するとどうなるでしょうか?
背景画像は使用せず、cssコードのみでパンくずリストを実装していますので、参考値はありますが、困っている友達は参考にしていただければと思います。 ! !
css boder 属性を使用して矢印を巧みに実装します。html コードは次のとおりです:
<ul class="breadcrumb"> <li><a href="">首页<span class="arrow"></span></a></li> <li><a href="" class="old">关于我们<span class="arrow"></span></a></li> <li><a href="">联系我们<span class="arrow"></span></a></li> <li><a href="" class="old">在线留言<span class="arrow"></span></a></li> <li><a href="">首页</a></li> </ul>
css コードは次のとおりです。
<style type="text/css"> * { margin:0; padding:0; } .breadCrumb { width:600px; height:30px; background:#cccccc; list-style:none; line-height:30px; } .breadCrumb li { float:left; } .breadCrumb a { text-decoration:none; padding:0 20px 0 10px; position:relative; float:left; } .breadCrumb a span { position: absolute; display: block; line-height: 0px; height: 0px; width: 0px; right: 0px; top: 0px; border-left: 10px solid #CCCCCC; border-top: 15px solid #e9e9e9; border-bottom: 15px solid #e9e9e9; } .breadCrumb a.old { background:#e9e9e9; } .breadCrumb a.old span { border-left: 10px solid #e9e9e9; border-right: none; border-top: 15px solid #cccccc; border-bottom: 15px solid #cccccc; }
推奨学習: "php ビデオ チュートリアル》