CSS ul li 背景画像とテキストの配置_html/css_WEB-ITnose

電子商取引

• 便利な注文管理 1


• 便利な注文管理 2< ;


• 便利な注文管理 3


• 便利注文管理 4


• 便利な注文管理 5



 1   2  3 .four { 4 width: 336px; 5 height: 200px; 6 background: #eee; 7 float: left; 8 margin: 5px; 9 }10 11 .four img {12 height:120px;13 float: left;14 margin-left:10px;15 padding:6px;16 background:darkgray;17 }18 19 .four ul { 20 float: left;21 }22 23 .four li {24 background:url(./images/black.png) center left no-repeat ;25 height:15px;26 margin:10px;27 background-size:3px;28 padding-left:10px;29 font:12px/15px "黑体";30 31 }32 33 .four a {34 }35 36 .four a:visited {37 color:gray;38 }39 40 .four h2 {41 margin:6px 0 6px 10px;42 font-size:16px;43 }44 45  





• 第 1 条
  
• 第 1 条


• 第 1 条< ;/li>
  
• 第 1 条


• 第 1 条 ;


• 第 1 条


• 第 1 条< /a>





 1 #art { 2 background:#EEE; 3 margin-top:3px; 4 padding-top:10px; 5 } 6  7 #art li { 8 height:30px; 9 /*border:1px green solid;*/10 }11 12 #art a {13 margin-left:5px;14 display:block;15 background:url(./images/Art_li.png) no-repeat left;16 background-size:5px;17 height:30px;18 padding-left:20px;19 font:16px/30px "simsum";20 21 }22 23 #art a:hover {24 background:url(./images/7.jpg);25 /*background:url(./images/33.png) no-repeat left ;*/26 text-decoration:none;27 }

Firefox は li の高さを使用し、IE は a タグの高さ

< を直接設定できます。 div id="header">




ナビゲーション 1

• ナビゲーション 2

< liナビゲーション 3

• ナビゲーション 4

ナビゲーション 5

• ナビゲーション 6 ナビゲーション 7