CSS列表样式（源码示例）

最新推荐文章于 2024-06-03 23:30:08 发布
最新推荐文章于 2024-06-03 23:30:08 发布
阅读量3.4k 收藏 16
点赞数 1
分类专栏： CSS 系列笔记+源码展示 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47556601/article/details/122777709
版权

大家好，今天给大家分享一下CSS列表样式

看源码：
写HTML源码;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>

</head>
<body>

    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字产品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li> <a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li> <a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a>
        <li> <a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a><a href="#">珠宝</a></li>
        <li> <a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a>
        <li>  <a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a>
        </li>
    </ul>

</body>
</html>

显示网页效果：
在这里插入图片描述

新建css文件
在这里插入图片描述

在HTML文件当中写以下代码

<link rel="stylesheet" href="style.css"/>

在css文件当中写：

.title{
    font-size: 18px;
    font-weight: bolder;
    text-indent: 1em;
    line-height: 35px;
}
/*ul li*/
ul li{
    height: 30px;
/*    行高*/
    
}

显示网页结果：

在这里插入图片描述

在css文件当中写

  list-style: none;
/*    去掉网页当中的点*/

显示网页结果

在这里插入图片描述

实例：
.title{
    font-size: 18px;
    font-weight: bolder;
    text-indent: 1em;
    line-height: 35px;
    background: greenyellow;
}

/*ul{*/
/*    color: red;*/
/*}*/

/*ul li*/
ul li {
    height: 30px;
    /*    行高*/
    /*    list-style: none;*/
    /*    去掉网页当中的点*/
    list-style: circle;
    text-indent: 1em;
    background: yellow;
}
/*    字体间距 */
/*  把它变成空心点  */
    /*none 去掉圆点*/
    /*circle   空心圆*/
    /*decimal   数字*/
    /*square    正方形*/
    /**!*/

效果：

在这里插入图片描述

看源码：

.title{
    font-size: 18px;
    font-weight: bolder;
    text-indent: 1em;
    line-height: 35px;
    background: greenyellow;
}

/*ul{*/
/*    color: red;*/
/*}*/

/*ul li*/
ul li {
    height: 30px;
    /*    行高*/
    /*    list-style: none;*/
    /*    去掉网页当中的点*/
    list-style: circle;
    text-indent: 1em;
    background: yellow;
}
/*    字体间距 */
/*  把它变成空心点  */
    /*none 去掉圆点*/
    /*circle   空心圆*/
    /*decimal   数字*/
    /*square    正方形*/
    /**!*/


a{
    text-decoration: none;
    font-size: 14px;
    color: black;

}
a:hover{
    color: blueviolet;
/*  鼠标点上去的颜色  */
    text-decoration: underline;
/*    加上下划线*/


}

效果：

在这里插入图片描述
点上去有下划线的效果

写css代码：

**#nav  {
    width: 500px;
    background:yellow ;
}**
.title{
    font-size: 18px;
    font-weight: bolder;
    text-indent: 1em;
    line-height: 35px;
    background: greenyellow;
}

/*ul{*/
/*    color: red;*/
/*}*/

/*ul li*/
ul li {
    height: 30px;
    /*    行高*/
    /*    list-style: none;*/
    /*    去掉网页当中的点*/
    list-style: circle;
    text-indent: 1em;
    background: yellow;
}
/*    字体间距 */
/*  把它变成空心点  */
    /*none 去掉圆点*/
    /*circle   空心圆*/
    /*decimal   数字*/
    /*square    正方形*/
    /**!*/


a{
    text-decoration: none;
    font-size: 14px;
    color: black;

}
a:hover{
    color: blueviolet;
/*  鼠标点上去的颜色  */
    text-decoration: underline;
/*    加上下划线*/

}

看效果：
就是将它缩小了
在这里插入图片描述

好了，关于CSS列表样式就到这里了，谢谢大家

思诚代码块
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS列表样式
m0_57774967的博客
04-28 2580
css列表属性作用： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 在html中，有两种类型的html列表： 无序列表：列表项的标记使用特殊图形（如小黑点、小方框等） 有序列表：列表项的标记使用数字或字母 使用css，可以列出进一步的样式，并可用图像作列表项标记 不同的列表项标记 list-style-type 属性指定列表项标记的类型 下面是对list-style-type属性的常见属性值的描述： none：不使用项...
CSS 样式 模板
02-20
CSS 样式 模板 ，将一些公用的样式抽出来使用。
超详细的学习笔记：CSS基础（附代码示例）
lbcbjtlhmjq的博客
06-30 2711
CSS入门容易，精通难。因为CSS的属性很多，一个一个去学去记根本不可能，我们要善于借助网络工具。关于HTML和CSS的学习资源，网上的在线教程、速查宝典就有一大推。所以只要了解HTML和CSS标签及属性的基本用法，再借助于在线文档，基本上HTML和CSS的学习就不会有太大问题。但是要提醒大家的是，不要完全依赖于在线文档。最基本的一些属性（比如字体样式、文本样式等）还是需要掌握并且熟练使用，我写这篇博客就是为了让大家更好地熟悉并运用CSS的常见属性。
常用CSS样式及属性代码
最新发布
weixin_38980630的博客
06-03 1234
常用css样式及属性代码
常用CSS样式大全
m0_73442777的博客
04-09 467
CSS3 是一种用于定义网页样式的语言，它包含了许多新的样式属性和功能，让开发人员可以更加灵活地控制网页的外观和行为。
【译】60个有用CSS代码片段
weixin_34217773的博客
05-18 721
1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%);...
DIV+CSS图标文字列表布局样式代码
06-11
总的来说，这个资源提供了一个基础的`DIV+CSS`图文列表布局示例，适合初学者学习和开发者快速构建页面结构。通过理解HTML的`div`元素和CSS的布局及样式规则，我们可以自定义这种布局，以适应不同的网站需求和设计...
博主推荐html好看的列表滚动效果（源码）
05-20
学习和理解这个源码示例，开发者不仅可以掌握如何创建一个美观的列表滚动效果，还能进一步提升对HTML、CSS和JavaScript交互的理解。这对于前端开发者来说是一项宝贵的技能，能够帮助他们在实际项目中创造出更加动态...
css样式代码
06-13
在示例代码中，我们看到了`.cell`和`.cell-item`类，它们常用于创建列表或网格布局。`.cell`设置了字体大小，而`.cell-item`为每一项添加了底部边框，并设置了内边距，以提供良好的视觉效果。`<navigator>`标签通常...
CSS3瀑布流样式布局特效
04-25
在"CSS3瀑布流样式布局特效"中，我们使用了Bootstrap样式库来构建响应式的图片列表。Bootstrap是一个流行的前端开发框架，它提供了预定义的CSS样式、JavaScript组件和HTML模板，可以帮助开发者快速创建美观且响应式...
140国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip
08-03
文件名称列表中的"140"可能代表包含了140个不同的网站模板、源码、CSS样式或JavaScript效果。这意味着你将获得大量的实例学习材料，覆盖了多种设计风格和功能需求。 综合以上，这个压缩包是一个丰富的Web开发资源库...
css-examples：MDN CSS文档随附的代码示例
02-04
CSS示例 该存储库包含CSS用法的示例。 “ animation-frames-timing-function”目录包含一个简单的示例，演示了CSS动画和过渡可用的steps（）计时功能与新的frame（）计时功能之间的区别。 。 您还可以找到显示和相同的计时功能的版本。 “ counter-style-demo”目录包含的演示。 在观看现场演示。 “ moz-context-properties”目录包含的演示。 在观看现场演示。 “ editable-examples”目录包含CSS示例，这些CSS示例旨在作为实时可编辑样本嵌入到MDN页面中。 “ object-fit-bas
CSS菜单样式模板完整代码
05-12
css菜单源代码，里有图片素材，包括源代码。一个多个文件，解压即可使用。
5套漂亮后台模板css+html+jquery 精简
08-06
五套不同风格的后台模板，现成demo，代码简洁易懂，易于套用
js样式，很好的样式列表
04-24
这是一个很好的jquery样式，我弄了好久才弄好的，效果很好
CSS样式源码
09-18
HTML5学习的小伙伴走过路过千万不要错过，这个源码是CSS样式，用LINK标签加载之后就可以用了，由于大多数小伙伴在使用时并不需要看样式。所以我上传的是企业开发版（后缀是.min）,如果有需要开发者模式的小伙伴可以联系我，我把开发者模式传给你们！
html5 简单实例源代码
热门推荐
wyx100的专栏
04-26 4万+
html5 简单实例源代码
常用的CSS样式示例代码
weixin_30296405的博客
11-23 336
<!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> <...
利用css来改变列表的样式
渔闻520的博客
07-21 773
之前在HTML中，改变列表前面的样式可以在&lt;ul&gt;或者&lt;ol&gt;中用type属性来， 在&lt;ul&gt;中可以让其为空心圆点，正方形，在&lt;ol&gt;中可以为字母顺序，古罗马等， 而用css可以更好的改变列表项的标志。 改变列表项的类型： list-style-type ex: ul{list-style-type:circle;} 列表项的图像： ...
html 视频播放列表源码
07-07
### 回答1： HTML视频播放列表源码主要包括视频播放器的HTML结构和相应的JavaScript代码。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <title>播放列表</title> </head> <body> <div id="video-player"> <video id="video" controls> <source src="video1.mp4" type="video/mp4"> </video> </div> <ul id="playlist"> <li><a href="#" onclick="changeVideo('video1.mp4')">视频1</a></li> <li><a href="#" onclick="changeVideo('video2.mp4')">视频2</a></li> <li><a href="#" onclick="changeVideo('video3.mp4')">视频3</a></li> </ul> <script> function changeVideo(source) { var video = document.getElementById("video"); video.src = source; video.load(); } </script> </body> </html> ``` 在上述示例中，首先是一个id为"video-player"的div容器，其中包含一个id为"video"的video标签用于播放视频，并设置了controls属性以显示播放器控件。 接下来是一个id为"playlist"的ul标签，用于显示视频播放列表。每个列表项是一个a标签，并通过onclick事件绑定了changeVideo()函数，该函数会在点击列表项时切换视频的来源。 在JavaScript代码部分，通过changeVideo函数获取video元素的引用，然后将传入的视频源地址赋值给video的src属性，并调用load()方法重新加载视频，以切换视频的播放。 这个简单的播放列表源码允许用户点击不同的列表项来切换视频，并在播放器上显示相应的视频内容。 ### 回答2： 下面是一个简单的HTML视频播放列表源码： ```html <!DOCTYPE html> <html> <head> <title>视频播放列表</title> </head> <body> <h1>视频播放列表</h1> <ul> <li><a href="video1.mp4">视频1</a></li> <li><a href="video2.mp4">视频2</a></li> <li><a href="video3.mp4">视频3</a></li> </ul> <video width="800" controls> <source src="video1.mp4" type="video/mp4"> </video> </body> </html> ``` 这个源码包含一个简单的标题，并使用`ul`和`li`元素创建一个列表，每个列表项都是一个视频链接。当用户点击一个视频链接时，会在页面上的`video`元素中播放相应的视频。`video`元素的`src`属性指定了默认要播放的视频。 你可以根据需要添加更多的列表项和视频链接，只需要在`ul`元素中添加更多的`li`元素，并为每个`li`元素的`a`标签设置适当的视频链接。 注意，视频文件应该与HTML文件位于同一文件夹中，或者你可以使用相对路径来指定视频文件的位置。 希望这个简单的HTML源码可以满足你的需求，你可以根据自己的实际情况进行进一步的修改和定制。 ### 回答3： HTML 视频播放列表源码通常由 HTML、CSS 和 JavaScript 组成。下面是一个简单的示例： HTML 部分： ```html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>视频播放列表</title> <style> /* 样式 */ </style> </head> <body> <h1>视频播放列表</h1> <div id="videoPlayer"></div> <ul id="playlist"> <li><a href="video1.mp4">视频1</a></li> <li><a href="video2.mp4">视频2</a></li> <li><a href="video3.mp4">视频3</a></li> </ul> <script src="video-player.js"></script> <script> // 初始化播放列表 const playlist = document.getElementById('playlist'); const videoPlayer = document.getElementById('videoPlayer'); playlist.addEventListener('click', function(event) { event.preventDefault(); const videoURL = event.target.getAttribute('href'); videoPlayer.innerHTML = "<video controls><source src='" + videoURL + "' type='video/mp4'></video>"; }); </script> </body> </html> ``` CSS 部分可以根据需要进行自定义样式设计。 JavaScript 部分的代码用于初始化播放列表。当用户点击播放列表中的链接时，会在 `videoPlayer` 中显示一个包含对应视频的 HTML5 视频播放器。通过监听 `click` 事件，我们可以获取到用户点击的视频链接，并将其作为视频播放器的源。 请注意，这只是一个简单的示例，实际应用中可以根据需求进行更复杂的功能扩展，如添加播放进度、自动播放等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

思诚代码块

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值