facebook twitter hatena line email

Html/スマホ/リストビュー

提供: 初心者エンジニアの簡易メモ
2015年5月20日 (水) 03:11時点における127.0.0.1 (トーク)による版 (ページの作成:「*css3 .listview a { margin:0; display: block; position: relative; border-bottom: 1px solid #ccc; padding: 11px 25px 11px 11px; color: #0000ee; font-weight:...」)

(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)
移動: 案内検索
  • css3
.listview a {
 margin:0;
 display: block;
 position: relative;
 border-bottom: 1px solid #ccc;
 padding: 11px 25px 11px 11px;
 color: #0000ee;
 font-weight: bold;
 text-decoration: none;
 font-size:20px;
}
.listview a:after {
 display: block;
 position: absolute;
 top: 50%;
 right: 10px;
 width: 7px;
 height: 7px;
 margin-top: -4px;
 border-top: solid 2px #7f7f7f;
 border-right: solid 2px #7f7f7f;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 content: "";
}
.listview a.first {
   border-top: 1px solid #ccc;
}
.listview a .exp {
   color:#000;
   font-size:14px;
}
/* visited */
.listview a:visited {
   color:#551A8B;
}
  • html
<div class="listview">
    <a href="/">たいとる<span class="exp">コンテンツサマリー</span></a>
    <a href="/">たいとる<span class="exp">コンテンツサマリー</span></a>
    <a href="/">たいとる<span class="exp">コンテンツサマリー</span></a>
</div>