ul列表自动定位当选中_10.CSS列表属性

最新推荐文章于 2022-09-20 17:54:41 发布

weixin_39595302

最新推荐文章于 2022-09-20 17:54:41 发布

阅读量127

点赞数

文章标签： ul列表自动定位当选中

本文链接：https://blog.csdn.net/weixin_39595302/article/details/111342390

版权

本文介绍了CSS中如何设置列表的自动定位和标记样式，包括list-style-type属性选择列表项标记类型，list-style-position属性设定标记位置，以及用list-style-image属性和list-style简写方式来定制列表的图像标记和整体样式。

摘要由CSDN通过智能技术生成

1.标记的类型(list-style-type)

list-style-type 属性设置列表项标记的类型。可选的值如下：

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style>        ul {            list-style-type: circle;        }        ol {            list-style-type: square;        }style>head><body>    <ul>        <li>码海无际li>        <li>码海无际li>        <li>码海无际li>    ul>    <ol>        <li>码海无际li>        <li>码海无际li>        <li>码海无际li>    ol>body>html>

2.标记的位置(list-style-position)

list-style-position 属性设置在何处放置列表项标记。可选的值如下：

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit：规定应该从父元素继承 list-style-position 属性的值。

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style>        .u1 {            list-style-position: inside;        }        .u2 {            list-style-position: outside;        }style>head><body>    <ul>        <li>码海无际li>        <li>码海无际li>        <li>码海无际li>    ul>    <ul class="u1">        <li>码海无际li>        <li>码海无际li>        <li>码海无际li>    ul>    <ul class="u2">        <li>码海无际li>        <li>码海无际li>        <li>码海无际li>    ul>body>html>

3.设置图像列表标记(list-style-image)

list-style-image 属性使用图像来替换列表项的标记。

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style>        ul {            list-style-image: url("img/li.png");        }style>head><body>    <ul>        <li>码海无际li>        <li>码海无际li>        <li>码海无际li>    ul>body>html>

4.简写方式(list-style)

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style>        ul {            list-style: square inside url("img/li.png");        }style>head><body>    <ul>        <li>码海无际li>        <li>码海无际li>        <li>码海无际li>    ul>body>html>