您现在的位置是:首页 > Javascript
当前栏目
css列表属性和样式控制
2023-03-20 14:52:24 时间
如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它。
列表属性
html有三种类型的列表:无序列表,有序列表和自定义列表。设置列表标记有序号,圆点,圆圈,图片等多种形式。
list-style:简写属性,用于把下边三个属性声明到一起。
- list-style-type : 属性指定列表项标记的类型(实心圆、空心圆、方框等)。
- list-style-position : 设置列表中标记项的相对位置。
- list-style-image : 将图像设置为列表项标志。
list-style-type的属性值:
- none:无标记。
- disc:标记实心圆。不设置的时候默认disc。
- circle:空心圆。
- square:实心方块。
- decimal:标记是数字。
- lower-roman:小写罗马数字(i,ii,iii,iv……)
- lower-latin:小写拉丁字母(a,b,c,d……)……
- 还有一些比较见得少的,此处不添加,需要了可自行到w3c中查看。
list-style-position的属性值
- inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。
- outside:默认值,保持标记位于文本的左侧。
- inherit:从父级继承list-style-position属性值。
代码示例:
/* list-style简写设置它的三个属性值 */
list-style: square inside url("bg.jpg") ;
/* 等同于下边的样式 */
list-style-type:square;
list-style-position:inside;
list-style-image:url("bg.jpg");
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件