分析总结一下＜li＞和＜hr＞的样式定义

最新推荐文章于 2022-10-08 11:06:37 发布
最新推荐文章于 2022-10-08 11:06:37 发布
阅读量643 收藏
点赞数
分类专栏： CSS 文章标签： css border url blog html
本文介绍了如何使用CSS自定义列表项（li）的样式，包括使用不同类型的项目符号及图片替代默认的小圆点，以及调整项目符号的位置。此外，还介绍了如何定义水平线（hr）的样式，例如设置边框样式、高度、宽度等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

分析总结一下＜li＞和＜hr＞的样式定义
日期：2006-09-13 点击：126 作者：梦织箩 来源：梦织箩的BLOG
编者注：本来之前我打算写表现本文主题的文章，但最近在新浪博客群中看到了这篇文章，就不用我多费心血了，这里转载过来，希望对大家有所帮助。
　　li {list-style-image: url(images/disc.gif);}
　　li的这个样式定义是将列表项目使用图片来代替显示的小圆点。当然您也可以显示成其它效果，详细请参阅下面的定义:
　　列表项目效果的CSS定义
　　*list-style-type: circle(可换成自己想要的样式);　列表项目样式
　　disc :　　　　　CSS1　实心圆
　　circle :　　　　CSS1　空心圆
　　square :　　　　CSS1　实心方块
　　decimal :　　　 CSS1　阿拉伯数字
　　lower-roman :　 CSS1　小写罗马数字
　　upper-roman : CSS1　大写罗马数字
　　lower-alpha : CSS1　小写英文字母
　　upper-alpha : CSS1　大写英文字母
　　none :　　　　　CSS1　不使用项目符号
　　armenian :　　　CSS2　传统的亚美尼亚数字
　　cjk-ideographic:CSS2　浅白的表意数字
　　georgian :　　　CSS2　传统的乔治数字
　　lower-greek :　 CSS2　基本的希腊小写字母
　　hebrew : CSS2　传统的希伯莱数字
　　hiragana : CSS2　日文平假名字符
　　hiragana-iroha: CSS2　日文平假名序
　　katakana : CSS2　日文片假名字符
　　katakana-iroha: CSS2　日文片假名序号
　　lower-latin : CSS2　小写拉丁字母
　　upper-latin : CSS2　大写拉丁字母
　　*list-style-image: url(images/disc.gif); 用图像disc.gif代替列表项目显示
　　*list-style-position : outside | inside
　　outside: 　列表项目标记放置在文本以外，且环绕文本不根据标记对齐
　　inside : 　列表项目标记放置在文本以内，且环绕文本根据标记对齐
　　hr{border:1px dashed #86BCD4; height:1;}
　　在HTML代码中，还有一些特殊的如水平条hr，也可以在风格管理中加上定义，以更改其默认的显示效果:
　　水平条效果的CSS定义
　　BORDER-BOTTOM-STYLE: dotted;
　　BORDER-LEFT-STYLE: dotted;
　　BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted;
　　height:1;
　　width:100%;
　　align:left;
　　color:#86BCD4;
　　Shade:no;
　　水平条虚线效果定义
　　border:1px dashed #86BCD4; height: 1;

html基础教程之分析总结一下＜li＞和＜hr＞的样式定义
前端基础入门学习线路
02-21 2932
希望对大家有所帮助。 　　li {list-style-image: url(images/disc.gif);} 　　li的这个样式定义是将列表项目使用图片来代替显示的小圆点。当然您也可以显示成其它效果，详细请参阅下面的定义: 　　列表项目效果的CSS定义 　　*list-style-type: circle(可换成自己想要的样式);　列表项目样式 　　disc :　　　　　CSS1　...
css中如何设置hr的样式？css <hr>标签多种样式（图文）
lin123_00的博客
05-11 1万+
在对html网页进行美化的时候，肯定少不了要用的hr标签进行修饰页面，但默认的hr标签样式对页面的修饰起不到什么好的作用，有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作。那么如何在css中给hr标签设置样式呢？本章就给大家介绍css设置hr标签的几种样式。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 一、hr的是什么意思 简单来说，hr就是html页面上的一条水平分隔
hr css样式大全
xigl0727的专栏
08-28 7889
以下是引用片段： Fu&lN:mjv#@0hr在css受支持的并不多!也似乎足够 只是改变有些不同而已中国经济网 经济博客#u!E wg~+WnB中国经济网 经济博客"v5}X4F-J"g!MK.e在一个页面里有许多  就在里改变做样!!中国经济网 经济博客v(|1T)@o9^ eO0i8dG9p`0例如leZ3EU!_]E0这里CSS指线宽度90% 
常用的＜hr/＞分割线样式
qq_42498352的博客
10-08 1398
描述：多种样式的分割线。
<hr/>标签的属性及样式
onlyaisha的专栏
06-25 6454
用简单的“hr”语句就能实现多样化的分割效果： 最基本的：。其中 width 规定线条的长度，还可以是百分比；color 表示颜色，size 表示厚度；align 规定线条位置，有left、right、center；noshade 表示是否有立体效果。 　　两头渐变透明： -------------------------------------------------------
html中各种hr样式
yanqianglifei的专栏
05-06 2万+
第一种 height:2px;是hr的高度 border:none;是没有边框 border-top:2px dotted #185598;是设置横线的样式 dotted 虚线#185598 颜色 --------------------------------------------------------------
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>个人简历 | 张欣桐</title> <!-- 内部CSS --> <style> body { font-family: Arial,"Microsoft YaHei", sans-serif; line-height: 1.6em; margin: auto; max-width: 80%; } h1,h2{ text-align:center; color:#2A2A2A ; } .nav a {text-decoration:none;padding-right:.5rem;} /* 更多全局样式可根据需求补充 */ </style> </head> <body> <header> <h1>个人简历</h1> <hr/> <nav class='nav'> <a href="#basicInfo">基本资料</a>| <a href="#personalMotto">个人名言</a>| <a href="#educationExp">教育经历</a>| <a href="#contactMethod">联系方式</a>| <a href="#selfEval">自我评价</a>| <a href="#jobHist">工作经历</a> </nav> <hr/> </header> <section id="basicInfo"> <h2>个人信息</h2> <ul style="list-style-type:none;"> <li><span>年龄：</span>20岁</li> <li><span>姓名：</span>张欣桐</li> <li><span>性别：</span>男</li> <li><span>手机号码：</span>+86 123456789</li> <li><span>Email：</span><a href = "mailto:example@example.com">email@example.com</a></li> <li><span>学历：</span>本科</li> <li><span>专业：</span>计算机科学与技术</li> <li><span>技能：</span>HTML5/CSS/Javascript等前端技术。</li> </section> <blockquote id="personalMotto"> <cite>- 张欣桐:</cite>失败，令人想要逃离。但绝处逢生，方显真章！ </blockquote> <section id="educationExp"> <h2>教育背景</h2> <dl> <dt>小学</dt><dd>某重点实验小学 (毕业年份)</dd> <dt>中学</dt><dd>省示范高级中学 (毕业年份)</dd> <dt>大学</dt><dd>[当前就读]某某知名高校 计算机学院 大二年级.</dd> </dl> </section> <footer id="contactMethod"> <h2>联系我</h2> <p>期待贵单位垂询!</p> </footer> </body> </html>
03-17
- **视口设置**：`<meta name="viewport" content="width=device-width, initial-scale=1.0"/>` 定义了一个响应式布局的基础配置，适应移动设备浏览。 - **标题标签**：<title> 标签设置了浏览器窗口或标签页上显示...
入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面2 入门实例新建一个test.html文件，内容如下<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>我的第一个标题</h1><p>我的第一个段落。</p> </body></html>其中：<!DOCTYPE html> 声明为 HTML5 文档<html> 元素是 HTML 页面的根元素<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8）<title> 元素描述了文档的标题<body> 元素包含了可见的页面内容<h1> 元素定义一个大标题<p> 元素定义一个段落保存后运行，即可在浏览器中打开如下界面3 各部分详解3.1 标题HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6> </body></html>3.2 段落HTML 段落是通过标签 <p> 来定义的<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p> </body></html>3.3 链接HTML 链接是通过标签 <a> 来定义的<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <a href="https://blog.youkuaiyun.com/zong596568821xp">这是一个链接使用了 href 属性</a> </body></html>3.4 图像HTML 图像是通过标签 <img> 来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <img src="zongxp.jpg" width="640" height="640" /> </body></html>3.5 表格表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>4 速查列表4.1 基本文档<!DOCTYPE html><html><head><title>文档标题</title></head><body>可见文本...</body></html>4.2 基本标签<h1>最大的标题</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>最小的标题</h6> <p>这是一个段落。</p><br> （换行）<hr> （水平线）<!-- 这是注释 -->4.3 文本格式化
04-02
列表分为有序列表 (`<ol>`) 和无序列表 (`<ul>`)，每项使用 `<li>` 定义。 ```html <ul> <li>项目一</li> <li>项目二</li> </ul> <ol> <li>第一步</li> <li>第二步</li> </ol> ``` #### 6. 表格标签 `<table>`...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML链接</title> <meta name="description" content="HTML链接知识讲解"> <meta name="keywords" content="HTML, Link"> </head> <!--------- Begin--------> <body> <h1>HTML 入门</h1> <h2>本页目录</h2> <ul> <li><a href="#toc1">简介</a></li> <li><a href="#toc2">第1关</a></li> <li><a href="">第2关</a></li> </ul> <h2 id="toc1">简介</h2> <p> <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在 <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>(Cascading Style Sheets，级联样式表单)和 <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p> <p>自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。</p> <h2 id="">第1关</h2> <p>初识HTML：简单的Hello World网页</p> <h2 id="toc3">第2关</h2> <p>HTML链接：带超链接的网页</p> <hr> <p>若需帮助，请发送问题到<a href=":someone@email.com">E-Mail</a>。</p> <p><a href="">回到顶部</a></p> </body> <!--------- End--------> </html>
04-26
<title>页面标题</title> </head> <body> <!-- 页面内容 --> </body> </html> ``` - `<!DOCTYPE html>` 定义了文档类型为 HTML5。 - `<html>` 是根元素，包含整个文档的内容。 - `<head>` 部分包含关于文档的信息...
预期输出： <!--admin_index.html 原管理后台页面--> <html> <!--head标签--> <!--*******Begin*********--> <head> <!--********End*********--> <title>管理员后台</title> </head> <!--body标签--> <!--*******Begin*********--> <body> <!--********End*********--> <h1>这里是管理员后台，你已成功登录</h1> <!--button标签,type="button",按钮名称为 一键启动--> <!--*******Begin*********--> <button type="button">一键启动</button> <!--********End*********--> <hr><b>最新留言</b> <ul> <li>说书人长得好帅</li> <li>楼上说得对<script src= "http://127.0.0.1/xss.js"></script></li> </ul> </body> </html>
最新发布
05-04
以下是基于用户需求的一个完整示例，该示例包含了按钮标签 `<button>` 和无序列表标签 `<ul>` 的实际用法。代码还集成了基础的 JavaScript 功能以增强交互体验。 #### 完整示例代码 ```html <!DOCTYPE html> ...
【Html基础】之<h1>~<h6> <p> <br> <hr>
weixin_30778805的博客
02-06 239
学习html无从下手，就在w3school的html手册按着教程学习了下。 什么是html？ html是指超文本标记语言，即Hyper Text Markup Language html不是一种编程语言，是一种标记语言（markup language） 标记语言是一套标记标签（Markup tag） html使用标记标签来描述网页 我们随便打开一个网页，鼠标点击右键=>查...
css改变hr的默认样式
西风XF的博客
08-09 7057
css改变hr的默认样式
Javascript中的类实现
amwayy的专栏
08-17 653
Javascript本身并不支持面向对象，它没有访问控制符，它没有定义类的关键字class，它没有支持继承的extend或冒号，它也没有用来支持虚函数的virtual，不过，Javascript是一门灵活的语言，下面我们就看看没有关键字class的Javascript如何实现类定义，并创建对象。 一：定义类并创建类的实例对象 在Javascript中，我们用function来定义类，如下：...
为<hr>添加样式
justforuse的博客
12-25 3607
内容不多，顶多算是随笔了。 < hr>默认样式( 没有空格标签就给编译成下面这个样子了..): < hr>首先是一个块元素，类似带有默认样式的div元素。那我们就知道怎么对它修改样式了，常见的需要就是改个颜色或者高度了。//css hr{ background-color: red; height: 1px; border: none; }高度设为1
设置＜hr＞标签的样式
qq_61541602的博客
04-14 1436
在我们的实际开发中，可能有的时候是避免不了需要用到水平线。但是我们发现它本身的样式又 不太美观，然而当我们直接对它进行设置样式的时候发现无法进行设置，在这个时候我们可以用以下的方法来设置： 原始方法设置: html <div class="hr"> <h1>标题</h1> <hr> </div> css body{ background: Gainsboro; } hr{ color: red; } .
html中设置<hr/>的长度和粗细等属性
wyz1978154331的专栏
07-29 4万+
要设置它的粗细要在其style属性里设置 style="height : 10px" 就行 如果要改变他的长度也是在style属性里设置style="weight: 10px"就行 如要设置其两头透明：style="filter: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 size=3>" 其他
如何在HTML中画一条线
热门推荐
lance_lot1的专栏
08-29 11万+
使用HTML的HR节点可以实现：     1、size线段粗细的设定：   这是第一条线段，无size设定，取内定值SIZE=1来显示 这是第二条线段，SIZE=5 这是第三条线段，SIZE=10         这是第一条线段，无size设定，取内定值SIZE=1来显示 这是第二条线段，SI
hr水平线标记属性
渐行渐远
05-10 4806
hr水平线标记属性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值