美化菜单
- 1. 无序列表
- 2. 有序列表
1. 无序列表 【web|CSS 3之美化菜单】
使用
list-style 属性来定义无序列表的项目符号；无序列表的
list-style 语法格式如下所示：list-style-type:disc | circle | square | none
文章图片
例子 1：
美化无序列表 - 锐客网
type="text/css">
*{
margin: 0px;
padding: 0px;
font-size: 15px;
}
p{
margin: 6px 0 0 6px;
color: #00B7EE;
font-size: 16PX;
font-family: 宋体;
}
div{
width: 340px;
margin: 10px 0 0 10px;
border: 1px #CCCC77 dashed;
}
div ul{
margin-left: 45px;
list-style-type: square;
}
div li{
margin: 6px 0 6px;
color: blue;
text-decoration: underline;
}
团购
- 文影城：单人影票
- 游乐场：现金抵用一次，节假日通用
- 烤吧：烤肉双人自助午餐，不限量，全天候
- 渔港：6-8人餐，餐具免费
文章图片
2. 有序列表
使用
list-style 属性，能改变有序列表前面的符号；有序列表的
list-style 语法格式如下所示：list-style-type:decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
文章图片
例子 2：
有序列表 - 锐客网
type="text/css">
*{
margin: 0px;
padding: 0px;
font-size: 14px;
}
p{
margin: 5px 0 0 5px;
color: green;
font-size: 16px;
font-family: 宋体;
border-bottom-width: 2px;
border-bottom-style: solid;
}
div{
width: 300px;
margin: 10px 0 0 10px;
border: 1px #B94A48 solid;
}
div ol{
margin-left: 45px;
list-style-type: upper-alpha;
}
div li{
margin: 6px 0 6px 0;
color: blue;
}
图书类型
- 人文类
- 艺术类
- 工程类
- 化学类
文章图片
推荐阅读
- 前端|Mendix入门教程第一篇-demo实例
- #|【JAVA后端开发】Part1--瑞吉外卖项目
- 前端|axios发送post请求时将请求参数放在params和data配置项的区别，java后端如何获取（）
- 关于网页中的文本选择以及统计选中文本长度
- 前端|开发者的4个层级，你在哪一层（）
- #|jpa、hibernate、spring-data-jpa关系
- #|深度学习笔记 —— 权重衰退 + 丢弃法
- scratch 工作区间变量意思
- #|【系统分析师之路】2008年上系统分析师上午综合知识真题