这样可以吧？
qq_慕田峪4054596
2019-12-05 16:09
<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:"微软雅黑";
}
/*在此定义相关样式，控制列表的显示形式*/
</style>
</head>
<body>
<div class="rw">
<ul><h3>课程难度</h3>
<li><a href="#">全部</a></li>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>
</div>
<!--在此制作一个无序列表-->
</body>
1回答
-
- qq_慕工程3480391
- 2021-04-01 03:06:31
我这玩意儿行吗？?
<!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;
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>
<!--在此制作一个无序列表-->
<ul>
<li><a href="">全部</a></li>
<li><a href="">初级</a></li>
<li><a href="">中级</a></li>
<li><a href="">高级</a></li>
</ul>
</body>
</html>
<!-- 任务
一、在右侧代码的body标签中添加一个无序列表。
二、为每一个列表项设置超链接，可以设置空链接（#）。
三、在右侧代码的</head>之前，分别定义标签选择器li和a，并按照题目要求定义其CSS样式 。
注意：
① 超链接四种状态的设置顺序；
② 要想让列表在水平方向上排列，需要设置列表项浮动
③ 由于a标签属于内联元素，无高度和宽度属性，因此控制鼠标经过状态改变背景颜色时，
仅在有文字的地方显示背景颜色。解决的办法是把a标签变为块级元素，display:block -->
企业网站综合布局实战
157042 学习 · 1984 问题
相似问题