2011年10月21日

iphone 用リスト css

お願いします♪いいねとかつぶやいたりして下さい
 
jquery mobile を使って ajaxするとうまくCSS使えないときがある。
そんなときはお手製でどうぞ。

/app/webroot/img/default/iphone-arrow.gif の画像は小さいアイコンを適当に用意してくんろ。
<style type="text/css">

	.iphone-list li {
	
		padding:20px;
		border-top: solid 1px #ccc;
		border-left: solid 1px #ccc;
		border-right: solid 1px #ccc;
		background:url(/app/webroot/img/default/iphone-arrow.gif) #FFF no-repeat 98% center;
		color:#666;
	}
	
	.iphone-list li:last-child {
	  border-bottom: solid 1px #ccc;
	}
	
	.iphone-list li:hover {
		background-color:#CCC;	
	}
	
	.iphone-list li a{
		color:#666;
		text-decoration:none;	
	}
	
	.iphone-list .imgbox {
		float:left;
		margin-right:20px;
	}
	
	.iphone-list .clear {
		clear:both;
	}
	
	.iphone-list .date {
		font-size:12px;	
	}
</style>
<ul class="iphone-list">

	<li>
    	<div class="date">
        	10月25日
        </div>
    	<a href="/">URL付きリンク付きリスト。これが本文になるので、どれだけ長くまで耐えられるか勝負。</a>
    </li>
    <li>
    	<div class="imgbox">
        	<img src="/app/webroot/icons/123126817.jpg">
        </div>
        <div>
			<a href="/">心にダムはあんのかい?<br>
一つ屋根の下は面白いよ。とくにのりぴー。</a>
        </div>
        <div class="clear"></div>
    </li>
    <li>
    	テストデザイン
    </li>
</ul>
関連するタグ: cakephp iphone
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ