效果
CSS 數字外框效果
代碼
CSS 代碼:
- li
- {
- float:left;
- overflow:hidden;
- margin-left:3px;
- padding:3px 5px 3px 5px;
- border:1px solid #FF0000;
- background-color:#000000;
- color:#FFFFFF;
- text-align:center;
- line-height:100%;
- font-size:12px;
- font-weight:normal;
- cursor:pointer;
- }
- .active
- {
- background-color:#CC0000;
- color:#FFFFFF;
- font-weight:bold;
- }
Html 代碼:
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li class="active">4</li>
- <li>5</li>
- </ul>