简单无序列表

- 日理万妓 2023-06-12 04:13 12阅读 0赞

<!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{ list-style:none; float:left; width:50px; height:30px; line-height:30px; text-align:center; color:black;
    } li:hover{ color:white; background:#be3948; cursor:pointer;
    }
    
    
    </style>
    </head>
    
    <body>
    <h3>课程难度</h3>
    
    
    <ul>
        <li href="#">全部</li>
        <li href="#">初级</li>
        <li href="#">中级</li>
        <li href="#">高级</li>
    </ul>
    
    
    
    </body>
    </html>

实现如下图所示的简单无序列表，并为每个列表项添加超链接。每个列表项的宽度为50px，高度为30px，列表中的文字在水平和垂直方向上均居中显示，超链接初始状态和访问后的状态均为黑色无下划线，鼠标经过和点击时文字均为白色，无下划线，背景颜色为\#BE3948。

现在写个这种水平的样式，简直水水的，so easy.

li也可以直接加超链接，不用再加a标签了。鼠标滑过，我觉得完全可以先写li样式，再直接加li:hover的样式就好了，一样的效果。没必要项下面这样麻烦都要写。

li:link,li:visited\{color:black;\}  
li:hover,li:active\{color:\#fff;background-color:\#be3948;display:block;\}

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关无序列表＜ul＞和有序列表＜ol＞

（1）创建无序列表 `<ul>` 标签定义无序列表。将 `<ul>` 标签与 `<li>` 标签一起使用，创建无序列表。 ![在这里插入图片描述][b758531

今天药忘吃喽~/ 2024年03月29日 15:46/ 0 赞/ 109 阅读

相关如何创建无序列表和有序列表？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 无序列表 ⭐ 无序列表 ⭐ 注意事项 ⭐ 写在最后 --------------------

小灰灰/ 2023年10月14日 14:01/ 0 赞/ 73 阅读

相关有序列表、无序列表、嵌套列表

<!DOCTYPE HTML PUBLIC "-//DTD//W3C HTML 4.01 Transitional//EN" "http://www.w3.org/TR

た入场券/ 2023年06月30日 02:57/ 0 赞/ 22 阅读

相关简单无序列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

- 日理万妓/ 2023年06月12日 04:13/ 0 赞/ 13 阅读

相关 html之无序列表和有序列表

无序列表 html代码： <ul type=""> <li>苹果</li> <li>梨</li> <li>香

以你之姓@/ 2022年12月19日 13:13/ 0 赞/ 203 阅读

相关 ionic之无序列表

1、实例背景 ionic无序列表利用的是ul-li实现，无序列表内容用的是AngularJS赋值，样式用class="list"和class="item"

迷南。/ 2022年07月16日 12:39/ 0 赞/ 238 阅读

相关 React生成无序列表

1、问题背景利用React生成无序列表，列表展示的是一年四季 2、实现源码 <!DOCTYPE html> <html>

柔光的暖阳◎/ 2022年07月15日 06:47/ 0 赞/ 181 阅读

相关去除无序列表默认样式

开发工具与关键技术：DW与css 作者：戴怡斌撰写时间：2019年2月20日在我们制作无序列表的时候都会有一个点，下面我们就

Myth丶恋晨/ 2022年03月17日 05:30/ 0 赞/ 433 阅读

相关有序列表:ol ，无序列表:ul

qq：581478349 ![20190325172437532.png][] <!DOCTYPE html> <html> <hea

素颜马尾好姑娘i/ 2021年09月18日 14:44/ 0 赞/ 471 阅读

相关 HTML
无序列表

ul的英文全称是unordered list，翻译成汉语就是无序列表的意思。顾名思义，通过`< ul>`元素可以创建无法标记顺序的列表（也就是无序列表）。所谓无序...

小灰灰/ 2020年05月16日 17:26/ 0 赞/ 977 阅读