這樣可以吧？
<style type="text/css">
ul li{
? ? margin:0;
? ? padding:0;
? ? }
? ??
? ? ul{
? ? ? ? width:300px;
? ? ? ? height:200px;
? ? ? ? margin:0 auto;
? ? ? ? margin-top:100px;
? ? ? ? background:#f1f2f8;
? ? ? ? border-radius:10px;
? ? }
? ??
? ? .rw li{
? ? ? ? ? ? width:50px;
? ? ? ? ? ? height:30px;
? ? ? ? ? ? float:left;
? ? ? ? ? ? list-style-type:none;
? ? ? ? ? ? line-height:30px;
? ? ? ? ? ? text-align:center;
? ? ? ? ? ? margin-right:20px;
? ? }
? ??
? ? .rw a{
? ? ? ? display:block;
? ? ? ? text-decoration:none;
? ? ? ? font-family:"微軟雅黑";
? ? ? ? font-size:14px;
? ? }
? ??
? ? .rw a:link,a:visited{
? ? ? ? ? ? color:#000;
? ? }
? ??
? ? .rw a:hover,a:active{
? ? ? ? background:#316bff;
? ? ? ? color:#fff;
? ? ? ? border-radius:30px;
? ? }
? ??
? ? .rw h3{
? ? ? ? padding-left:92px;
? ? ? ? padding-top:60px;
? ? ? ? font-weight:800;
? ? ? ? color:red;
? ? ? ? font-family:"微軟雅黑";
? ? }
? ??
/*在此定義相關(guān)樣式，控制列表的顯示形式*/
</style>
</head>
<body>
<div class="rw">
<ul><h3>課程難度</h3>
<li><a href="#">全部</a></li>
<li><a href="#">初級(jí)</a></li>
<li><a href="#">中級(jí)</a></li>
<li><a href="#">高級(jí)</a></li>
</ul>
</div>
<!--在此制作一個(gè)無序列表-->
</body>
2021-04-01
我這玩意兒行嗎？?
<!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頁面頭部制作練習(xí)題</title>
<style type="text/css">
/*在此定義相關(guān)樣式，控制列表的顯示形式*/
li {
width: 50px;
height: 30px;
list-style-type: none;
float: left;
}
a:link,
a:visited {
color: #000000;
}
a:hover,
a:active {
color: #ffffff;
background-color: #BE3948;
}
a:link,
a:visited,
a:hover,
a:active {
display: block;
line-height: 30px;
text-align: center;
text-decoration-line: none;
}
</style>
</head>
<body>
<h3>課程難度</h3>
<!--在此制作一個(gè)無序列表-->
<ul>
<li><a href="">全部</a></li>
<li><a href="">初級(jí)</a></li>
<li><a href="">中級(jí)</a></li>
<li><a href="">高級(jí)</a></li>
</ul>
</body>
</html>
<!-- 任務(wù)
一、在右側(cè)代碼的body標(biāo)簽中添加一個(gè)無序列表。
二、為每一個(gè)列表項(xiàng)設(shè)置超鏈接，可以設(shè)置空鏈接（#）。
三、在右側(cè)代碼的</head>之前，分別定義標(biāo)簽選擇器li和a，并按照題目要求定義其CSS樣式 。
注意：
① 超鏈接四種狀態(tài)的設(shè)置順序；
② 要想讓列表在水平方向上排列，需要設(shè)置列表項(xiàng)浮動(dòng)
③ 由于a標(biāo)簽屬于內(nèi)聯(lián)元素，無高度和寬度屬性，因此控制鼠標(biāo)經(jīng)過狀態(tài)改變背景顏色時(shí)，
僅在有文字的地方顯示背景顏色。解決的辦法是把a(bǔ)標(biāo)簽變?yōu)閴K級(jí)元素，display:block -->