`

css中控制ul,li的缩进距离

css 
阅读更多
    <li>中,经常要做两件事,一个是去掉列表项的点;
    一个是控制缩进的内容,两者都可以用CSS去做,下面小结下:
      1)去掉列表项的点
         <style type="text/css">
    li{list-style-type:none;}
    </style>
    <ul>
       
  • 百度

  •    
  • 雅虎

  •    
  • 新浪

  •    
  • 谷歌



2) 控制缩进距离
  在CSS样式文件中:
    <style type="text/css">
ul{margin-left:60px;}
</style>
1
1
分享到:
评论

相关推荐

    css控制UL LI 的样式详解(推荐)

    本文将深入讲解如何使用CSS来控制`&lt;ul&gt;`和`&lt;li&gt;`的样式。 首先,`&lt;ul&gt;`标签用于创建一个无序列表,每个列表项由`&lt;li&gt;`标签包裹。在默认情况下,浏览器会为`&lt;ul&gt;`添加圆形的项目符号,而`&lt;li&gt;`则会有一定的内缩进。...

    用ul、li标签创建css横向导航菜单示例

    接着,我们使用CSS来控制这个导航菜单的样式。通过设置`&lt;ul&gt;`和`&lt;li&gt;`的样式,我们可以改变列表的默认行为,使其在水平方向上排列。这里,我们将`&lt;ul&gt;`的`margin`和`padding`设置为零,并使用`white-space: nowrap;`...

    CSS中常用的 reset.css文件

    3. `h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,pre,form,fieldset,legend,textarea,input,button,select{margin:0;padding:0;}`:针对标题、段落、列表等常用元素进行重置。 4. `table{border-collapse:...

    CSS列表样式设计

    在网页设计中,CSS(Cascading Style Sheets)起着至关重要的作用,它允许我们对网页元素进行细致的样式控制,使页面布局更加美观、易读。本篇将重点讲解如何利用CSS进行列表样式的定制,让您的网页列表更具吸引力。...

    通过css和html构建能耗数据分析树状图

    在构建能耗数据分析树状图的过程中,CSS(层叠样式表)和HTML(超文本标记语言)是前端开发的基础工具,它们共同作用于网页的结构和样式。本篇将深入探讨如何利用这两者来创建一个直观、易理解的树状图,以展示能耗...

    新手学习DIV+CSS难点之经验总结.pdf

    在学习DIV+CSS时,许多新手都会遇到一些常见的问题,本文总结了八个常见的问题和解决方案,涵盖了网页居中显示、文字垂直居中显示、图片垂直居中显示、清除浮动、多列结构的DIV写法、Textarea在FireFox中不能自动...

    css-dictionary(CSS常用英语词汇详解)

    HTML中的列表元素,如`&lt;ul&gt;`、`&lt;ol&gt;`和`&lt;li&gt;`。 - **Length**: 长度。描述尺寸或距离的属性,如`width`、`height`等。 - **Lowercase**: 小写字母。CSS中用于设置文本大小写的方式之一,如`text-transform:lowercase...

    HTML5&CSS3网页制作:列表元素.pptx

    无序列表使用`&lt;ul&gt;`标签来定义,其中包含多个`&lt;li&gt;`标签,每个`&lt;li&gt;`标签代表一个列表项。无序列表的特点是各列表项之间没有顺序级别,通常使用圆点、空心圆或减号等符号作为区分标志。例如: ```html &lt;ul&gt; &lt;li&gt;...

    JS+CSS实现Li列表隔行换色效果的方法

    在这个例子中,我们需要遍历 `ul` 元素中的所有 `li` 子元素,并根据它们的位置(奇偶性)添加相应的类。首先获取 `id` 为 `tab` 的 `div` 元素,然后获取其子元素 `ul`。接下来,遍历 `ul` 中的所有 `li` 元素,并...

    normalize-zh, Normalize.css 中文文档与源码解读.zip

    在源码解读部分,你可以看到Normalize.css如何处理常见的HTML元素,如`&lt;head&gt;`、`&lt;body&gt;`、`&lt;h1&gt;`到`&lt;h6&gt;`、`&lt;p&gt;`、`&lt;hr&gt;`、`&lt;blockquote&gt;`、`&lt;ol&gt;`、`&lt;ul&gt;`、`&lt;li&gt;`等。例如,它会确保段落有合适的行高和内边距,...

    CSS打造五级滑动门

    滑动门原理是通过CSS控制元素的可见部分,通常是通过改变其边框宽度、内边距或者背景位置来实现。五级滑动门意味着我们有五个层次的内容可以依次展示,这在构建多级导航菜单时特别有用。 1. 结构布局: 创建五级...

    css教程(附案例)免费下载

    ul和li标签中,定义了列表项的样式,包括背景图片、链接颜色和鼠标悬停效果等。 CSS选择器的运用是本页面设计的核心,包括了标记选择器(如h2、p等),类别选择器(如.box、.more等),和ID选择器。这些选择器共同...

    div+css实现treeview功能

    在网页设计中,"div+css"是一种常见的布局方式,用于构建复杂的网页结构。而"treeview"功能,即树形视图,是网页界面中常用的一种数据展示形式,尤其适用于组织层次结构清晰的信息,如目录结构、菜单系统或数据库...

    css开发字典

    - 可以使用CSS的`ul`和`li`元素来构建。 **Line(线)** - 直线或线条。 - 在CSS中,`border`属性可以创建直线边框。 **Middle(中间)** - 指元素在水平或垂直方向上的中心位置。 - 可以通过`margin: auto`或`...

    reset.css文件.zip

    dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav,...

    CSS默写标准文档

    - `&lt;div&gt;`、`&lt;ul&gt;`、`&lt;li&gt;`、`&lt;hr&gt;`和`&lt;dl&gt;`等标签的使用,以及`&lt;ul&gt;`的`list-style`、`&lt;li&gt;`的背景图像等。 ### 7. CSS技巧 - **table边框合并**: `border-collapse: collapse;`使得表格边框合并。 - **取消a标签...

    html和css 常用

    3. 页面框架的搭建需要使用到各种标签,如标题标签(h1到h6)、段落标签(p)、列表标签(ul、ol和li)等。 4. 常规标记用于定义特殊内容,如图片(img)、链接(a)、表格(table)、表单(form)等。 5. 空标记不...

    css规范文档

    - 避免在HTML中直接使用`style`属性,而是通过外部CSS文件控制样式。 - 为输入元素添加`&lt;label&gt;`标签以提供更好的可用性。 - 图片作为背景时,使用CSS处理;重要图片需添加`alt`属性,必要元素和截断元素添加`...

    新手学习DIV+CSS难点之经验总结

    创建一个简单的水平导航条,可以使用`&lt;ul&gt;`和`&lt;li&gt;`标签,并通过CSS来布局。 **CSS示例代码:** ```css ul { list-style: none; /* 移除默认样式 */ margin: 0; padding: 0; } li { display: inline-block; /...

    reset.css文件 CSS代码 下载.zip

    重置CSS(reset.css)是前端开发中的一个重要概念,它旨在消除浏览器之间的默认样式差异,为网站提供一个统一的基础,以便开发者更容易地控制页面布局和样式。在网页设计中,不同的浏览器对HTML元素的默认样式处理...

Global site tag (gtag.js) - Google Analytics