构建静态页面之 [ 列表 ]

jkyin 发布于2019-08-02 11:21 / 3322人阅读

摘要：列表描述列表可以分为有序列表无序列表有序列表元素表示定义有序列表属性有属性表示设置有序列表项目符号的样类型属性值数学大写字母小写字母大写罗马数学小写罗马数字属性表示有序列表的项目符号从什么位置开始属性值必须为数字值元素表示列表中的列

列表描述

列表可以分为：有序列表、无序列表

有序列表

属性有

type属性 - 表示设置有序列表项目符号的样类型

属性值：1（数学） A（大写字母） a（小写字母） I（大写罗马数学） i（小写罗马数字）

start属性 - 表示有序列表的项目符号从什么位置开始

属性值必须为数字值

元素 - 表示列表中的列表项

属性有

type属性 - 表示设置当前列表项的项目符号类型

属性值：1（数学） A（大写字母） a（小写字母） I（大写罗马数学） i（小写罗马数字）

value属性 - 表示当前列表项的项目符号从什么位置开始

属性值必须为数字值




    手机
    电脑
    平板

无序列表

type属性 - 表示设置无序列表项目符号的样类型

属性值

disc - 表示实心圆 “默认值”

circle - 表示空心圆

square - 表示实心方形

元素 - 表示列表中的列表项

type属性 - 表示设置当前列表项的项目符号类型

属性值

disc - 表示实心圆 “默认值”

circle - 表示空心圆

square - 表示实心方形




    手机
    电脑
    平板

列表样式 list-style-type属性

表示设置列表项目符号的类型

注意：有序的可以设置无序的类型，无序的也可以设置有序的类型

建议：有序设置有序的，无序设置无序的，保证元素语义化


    
    项目符号的样式
    



    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto distinctio dolores earum eos eveniet expedita fugit, nemo nihil perferendis quam quasi rerum sunt tempore vel? Ducimus eum nobis non.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eum facilis ipsam quae ratione temporibus ut, vel. Assumenda atque blanditiis enim, ipsa nesciunt numquam obcaecati rerum, sed tenetur ut voluptates.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A blanditiis consequatur cupiditate debitis dignissimos doloremque, et exercitationem fuga illo non nulla odit officia optio perferendis perspiciatis placeat ratione veritatis! Facere?

list-style-image属性

表示引入外部项目符号样式（图片）

注意：设置list-style-image属性后，list-style-type属性会无效


    
    项目符号的样式
    



    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto distinctio dolores earum eos eveniet expedita fugit, nemo nihil perferendis quam quasi rerum sunt tempore vel? Ducimus eum nobis non.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eum facilis ipsam quae ratione temporibus ut, vel. Assumenda atque blanditiis enim, ipsa nesciunt numquam obcaecati rerum, sed tenetur ut voluptates.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A blanditiis consequatur cupiditate debitis dignissimos doloremque, et exercitationem fuga illo non nulla odit officia optio perferendis perspiciatis placeat ratione veritatis! Facere?

list-style-position属性

表示设置项目符号的位置


    
    项目符号的样式
    



    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto distinctio dolores earum eos eveniet expedita fugit, nemo nihil perferendis quam quasi rerum sunt tempore vel? Ducimus eum nobis non.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eum facilis ipsam quae ratione temporibus ut, vel. Assumenda atque blanditiis enim, ipsa nesciunt numquam obcaecati rerum, sed tenetur ut voluptates.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A blanditiis consequatur cupiditate debitis dignissimos doloremque, et exercitationem fuga illo non nulla odit officia optio perferendis perspiciatis placeat ratione veritatis! Facere?

云服务器 GPU云服务器 jsp 设置页面之静态页面动静态页面 html静态页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52929.html

构建静态页面之 [ 表单 ]

摘要：表单表单元素元素表示设置表单属性设置接收表单的指定服务器端的地址路径属性表示发送给服务器端的方式属性值默认值将提交的数据添加到地址栏中进行提交有限制，不安全属性值将提交的数据绑定在表单中进行提交没有限制，相对安全属性提交表单时要设表单表单元素元素表示设置表单 action属性 - 设置接收表单的指定服务器端的地址路径 method属性 - 表示发送给服务器端的方式 ge...

zhangwang 2019-08-29 16:31 评论0 收藏0
构建静态页面之 [ 表单 ]

摘要：表单表单元素元素表示设置表单属性设置接收表单的指定服务器端的地址路径属性表示发送给服务器端的方式属性值默认值将提交的数据添加到地址栏中进行提交有限制，不安全属性值将提交的数据绑定在表单中进行提交没有限制，相对安全属性提交表单时要设表单表单元素元素表示设置表单 action属性 - 设置接收表单的指定服务器端的地址路径 method属性 - 表示发送给服务器端的方式 ge...

snifes 2019-08-02 16:31 评论0 收藏0
构建静态页面之 [ 列表 ]

摘要：列表描述列表可以分为有序列表无序列表有序列表元素表示定义有序列表属性有属性表示设置有序列表项目符号的样类型属性值数学大写字母小写字母大写罗马数学小写罗马数字属性表示有序列表的项目符号从什么位置开始属性值必须为数字值元素表示列表中的列列表描述列表可以分为：有序列表、无序列表有序列表元素 - 表示定义有序列表属性有 type属性 - 表示设置有序列表项目符号的样类型 ...

魏明 2019-08-29 16:32 评论0 收藏0
徒手撸UI之Paginator

摘要：是一个组件库目前拥有的组件语法编写，无依赖原生模块化，以上支持，请开启静态服务器预览效果，静态服务器传送门采用变量配置样式辛苦造轮子，欢迎来仓库四月份找工作，求内推，坐标深圳写在前面去年年底项目中尝试着写过一个分页的组件，然后就有了写的想法 QingUI是一个UI组件库目前拥有的组件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

liuhh 2019-08-22 15:43 评论0 收藏0
[手把手系列之]Docker 部署 vue 项目

摘要：部署项目写在前面作为轻量级虚拟化技术，拥有持续集成版本控制可移植性隔离性和安全性等优势。容器可以被创建启动停止删除暂停等。重新运行应用容器直接基于镜像来启动容器，运行命令将宿主机的挂载到容器的目录上。Docker 部署 vue 项目 1.写在前面： Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽...

VPointer 2019-05-22 16:41 评论0 收藏0