[HTML5教學]選單按鈕的製作(第四堂課)

成品
蓋棉被 talk543.tw HTML範例.png

 
HTML的部分
<ul class="ul01">
<li class="color01"><a href="#">選單一</a></li>
<li class="color01"><a href="#">選單二</a></li>
<li>選單三</li>
<li>選單四</li>
</ul>
CCS的部分
@charset "utf-8";

.ul01 li {
list-style-type:none;
font-size:19px;
font-family:"微軟正黑體", "新細明體", "標楷體";
font-weight:600;
float:left;
width:150px;
text-align:center;
line-height:40px;
}

.ul01 li.color01 a:hover {
background-color:#FF898B;
display:block;
border-radius:4px;
color:#FFFFFF;
}

.ul01 li.color01 a {
text-decoration:none;
font-size:19px;
color:#261414;
background-color:#FFD1D1;
display:block;
margin-right:3px;
border-radius:4px;
}

 課程範例下載

0 個評論

要回覆文章請先登入註冊