无序列表效果

最新推荐文章于 2023-02-10 15:05:15 发布
最新推荐文章于 2023-02-10 15:05:15 发布
阅读量833 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m838115837/article/details/49330885
版权


无序列表效果

<!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">
/*在此定义相关样式，控制列表的显示形式*/


.body1 li{
    float:left;
    width:50px;
    height:30px;
    list-style-type:none;
    text-align: center;
    line-height:30px;
    
}


.body1 a:link,.body1 a:visited{
    display:block;
    color: #000;
    text-decoration: none;
}


.body1 a:hover,.body1 a:active{
    display:block;
    color: #FFF;
    text-decoration: none;
    background:#BE3948;
}




</style>
</head>


<body>
<h3>课程难度</h3>
<!--在此制作一个无序列表-->
<div class="body1">
    <ul>
        <li><a href="#">全部</a></li>
        <li><a href="#">全部</a></li>
        <li><a href="#">全部</a></li>
        <li><a href="#">全部</a></li>
    </ul>
</div>
</body>

</html>







TOP排行新闻列表


<!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.10新闻中心制作评测题</title>
<style type="text/css">


/*在此定义相关CSS样式*/




*{padding:0;margin:0;font-size:12px;}
a{text-decoration:none;color:#000;}


.topList{
    width:300px;
    height:180px;
    border:1px solid #E8E8E8;
    margin-top:10px;}
.topList ul{
    padding:5px;


}
.topList li{
    list-style-type:none;
    padding:5px;
    font-family: cursive;
    
}


.top em{
    background:url('http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg') 16px 0px;
    background-position:16px 0;
    color:#FFF;
}


em{
    width:20px;
    height:16px;
    text-align: center;
    font-style:normal;
    color:#333;
    background:url('http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg')0px  16px;
    background-position:0px 16px;
    float:left;
}




</style>
</head>


<body>
<div class="topList">
<ul>
<li class="top"><em>01</em>
<p><a href="http://www.imooc.com/" >【慕客访谈用户篇】“有为屌丝”在路上</a></p>
</li>
<li class="top"><em>02</em>
<p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>
</li>
<li class="top"><em>03</em>
<p><a href="http://www.imooc.com/">《程序猿，请晒出你的童年》活动获奖公告</a></p>
</li>
<li><em>04</em>
<p><a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></p>
</li>
<li><em>05</em>
<p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰，争当“预言帝”</a></p>
</li>
<li><em>06</em>
<p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>
</li>
</ul>
</div>
</body>







橙丶C
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery定义的漂亮有序和无序列表效果(看够了html自带的列表).zip
11-17
这个压缩包“jQuery定义的漂亮有序和无序列表效果(看够了html自带的列表).zip”提供了使用jQuery增强列表样式的实例。 jQuery是一个轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理和动画创建。通过...
element table 表格排序（无限级）
qq_37768929的博客
02-02 230
element无限级列表排序
13-无序列表
majiamin123的博客
09-13 389
<h2>中国的城市有哪些</h2> <ul> <li>北京</li> <li>上海</li> <li>广州</li> <li>武汉</li> </ul> 1、什么是列表标签？ 列表标签的作用：给一堆数据添加列表语义，也就是...
无序列表
程序员龙一
02-07 8794
无序列表的作用： 给一堆数据添加列表语义，没有顺序之分 格式： <ul> <li>需要显示的条目内容</li> </ul> li是list item的缩写 list：列表 item：条目 结合起来就是列表条目的意思。 ul和li标签是一个整体，组合，一起出现。ul标签中只会看到li标签。 应用场景 新闻列表 商品列表 导航条 练习 <!DOCTYPE html> <html lang="en"> <head>
HTML5中无序列表,HTML5中的无序列表带有列表/组名(Unordered list in HTML5 with a list/group name)...
weixin_35056594的博客
06-04 202
HTML5中的无序列表带有列表/组名(Unordered list in HTML5 with a list/group name)你将如何在HTML5中创建一个无序的项目列表，其顶部的组名是？ 项目应该看起来缩进。例如：GroupName1Item1Item2Item3GroupName2Item4Item5How would you create an unordered list of it...
无序和有序列表的list-style-type 属性值
热门推荐
tuke_tuke的博客
09-29 1万+
属性                                                          描述                                                 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 list-style-image 将图象设置为列表项标志。
CSS无序列表创建的标准菜单效果代码
12-08
本文将深入探讨如何使用CSS（层叠样式表）来利用无序列表（`<ul>` 和 `<li>` 标签）创建一款标准的菜单效果。此方法适用于多种浏览器，包括IE6/IE7/IE8以及Firefox，具有良好的兼容性。 首先，我们需要一个HTML结构...
jQuery无序列表的下拉菜单
04-07
jQuery无序列表的下拉菜单就是一种实现这一功能的高效解决方案，它使用了jQuery库和mnmenu插件来创建多级导航系统，尤其适用于响应式设计。本文将深入探讨如何使用jQuery和mnmenu插件构建这样的下拉菜单。 首先，...
HTML无序列表、有序列表、定义列表
09-20 368
一、无序列表（ordered list）：各个列表项目之间没有顺序，是并列的 type属性用于设置列表样式，默认是小圆点（disc），circle空心圆圈square小方块 通过list-style：none可以取消 二、有序列表（ordered list） type：默认是1，表示项目列...
列表及表格的使用
zjt200013的博客
07-17 528
通常dl定义自定义列表，默认样式上下有16px外边距，值会根据内容文本大小改变；dt定义列表的项，dd是对于列表项的描述。
css基础知识汇总3
AnalogElectronic的博客
09-11 191
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>CSS</title> <style type="text/css"> /* CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中 CSS的语法： 选择器 声明块 选择
[js/jq] 点击切换无序列表li标签,改变选中的颜色
qq_40610760的博客
10-12 887
效果； 代码： html------------ jq---------------
Vue+element 商品列表、新增、编辑、删除业务实现
benlalagang的博客
08-29 2539
商品管理-商品列表的渲染-点击添加商品、编辑商品、删除商品、编辑商品-路由传参发送请求渲染数据、使用到了 el-steps 步骤条组件和 el-tabs标签页联动、Cascader 级联选择器组件vue-quill-editor富文本编辑器等知识点.........
element面包屑实现路由跳转
qq_319666160的博客
02-10 1019
element面包屑实现路由跳转
无序列表举例html,HTML中的无序列表讲解（菜鸟）
weixin_35012177的博客
06-03 619
什么是列表标签？1.列表标签的作用：给一堆数据添加列表语义，也就是告诉搜素引擎告诉浏览器这一堆数据是一个整体。2.HTML中列表标签的分类2.1无序列表(最多人用)(unordered list)2.2有序列表(最少人用)(ordered list)2.3定义列表(其次)(definition list)3无序列表作用：给一堆数据添加列表语义，并且这一堆数据所有的数据都没有先后之分什么叫先后之分？...
（浮动+盒模型+无序列表）实现切换图片效果
海涛高软
10-04 3436
下面做个毒霸首页中图片切换的效果，如下： 实现代码如下：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .zong { width: 600px; height: 70px;
列表上下滚动效果JS示例
weixin_34088838的博客
04-19 295
&lt;html&gt; &lt;head&gt; &lt;title&gt;可控制文字列表上下滚动效果&lt;/title&gt; &lt;meta http-equiv="content-type" content="text/html; charset=gbk" /&gt; &lt;style&gt; body, div, dl, dt, dd,
无序列表的介绍
xiao_suan_cai的博客
06-12 8174
  列表分为两种类型：一种是有序列表；另一种是无序列表。前者使用编号来记录项目的顺序，而后者使用项目符号来标记无序的项目。   所谓有序列表，是指按照数字或字母顺序排列列表项目，如图1.1所示：   所谓无序列表，是指以全●、○、▽、▲等开头的，没有顺序的列表项目   ...
html无序列表水平排列
最新发布
05-23
要实现HTML无序列表水平排列，可以使用CSS的display属性和list-style-type属性进行设置。具体步骤如下： 1. 在HTML中创建无序列表ul标签，并添加列表项li标签。 2. 使用CSS的display属性将无序列表设置为行内元素，这样每个列表项就会排列在同一行内。 3. 使用CSS的list-style-type属性将无序列表的符号样式设置为none，这样列表项前面的符号就会消失。 4. 可以使用CSS的margin属性设置列表项之间的间距，也可以使用padding属性设置列表项内部的间距。 示例代码如下： ``` <style> ul { list-style-type: none; display: inline; margin: 0; padding: 0; } li { display: inline-block; margin-right: 10px; } </style> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> ``` 在浏览器中查看效果，就会发现无序列表的每个列表项都水平排列在同一行内。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值