分享一下成功案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.1頁面頭部制作練習題</title>
<style type="text/css">
/*在此定義相關樣式，控制列表的顯示形式*/
.box{
? ??
}
.box li{
? ? float:left;
? ? width:50px;
? ? height:30px;
? ? list-style-type:none;
}
.box a{
? ? display:block;
? ? text-align:center;
? ? line-height:30px;
? ? text-decoration:none;
}
.box a:hover{
? ? background-color:#BE3948;
? ? color:white;
}
</style>
</head>
<body>
<h3>課程難度</h3>
<!--在此制作一個無序列表-->
<ul class="box">
? ? <li><a href="">全部</a></li>
? ? <li><a href="">初級</a></li>
? ? <li><a href="">中級</a></li>
? ? <li><a href="">高級</a></li>
</ul>
</body>
</html>
2018-11-19
你這個是不對的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.1頁面頭部制作練習題</title>
<style type="text/css">
/*在此定義相關樣式，控制列表的顯示形式*/
.box li{
? ? list-style-type:none;
? ? float:left;
? ? line-height:30px;
? ? text-align:center;
}
.box a{
? ? text-decoration:none;
? ? display:block;
? ? width:50px;
? ? height:30px;
}
.box a:link,.box a:visted{
? ? text-decoration:none;
? ? color:black;
}
.box a:hover,.box a:active{
? ? color:white;
? ? background-color:red;
? ??
}
</style>
</head>
<body>
<h3>課程難度</h3>
<!--在此制作一個無序列表-->
<div class="box">
<ul>
? ? <li><a href="#">全部</a></li>
? ? <li><a href="#">初級</a></li>
? ? <li><a href="#">中級</a></li>
? ? <li><a href="#">高級</a></li>
</ul>
</div>
</body>
</html>
2018-09-18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.1頁面頭部制作練習題</title>
<style type="text/css">
/*在此定義相關樣式，控制列表的顯示形式*/
li{
? ? width:50px;
? ? height:30px;
? ?
? ?
? ? text-decoration:none;
? ??
? ? ?text-align:center;
? ? ?float:left;
? ? ?list-style-type:none;
}
a{
? ? display:block;
}
a:link,a:visited{
? color:black;
? text-decoration:none;
? ? ?
}
?a:hover,a:active{
? ?
? ? ?background-color:#BE3948;
? ??
? ? color:white;
? ?
??
}
</style>
</head>
<body>
<h3>課程難度</h3>
<!--在此制作一個無序列表-->
<ul>
? ? <li><a href="#" >全部</a></li>
? ? <li><a href="#" >初級</a></li>
? ? <li><a href="#" >中級</a></li>
? ? <li><a href="#" >高級</a></li>
</ul>? ??
? ??
? ??
</body>
</html>