为了账号安全,请及时绑定邮箱和手机立即绑定

这样可以吧?

<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 回答

我这玩意儿行吗??

<!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 -->


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
企业网站综合布局实战
  • 参与学习       157043    人
  • 解答问题       1984    个

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

进入课程

这样可以吧?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信