... Sheets（层叠样式表）的缩写，是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等 XML方言）文档的呈现。在Web开发中，CSS负责定义网页内容的布局、颜色、字体和其他视觉表现形式。通过将样式与结构分离，CSS使得开发者可以独立控制网页的内容和表现。块级元素 , 在HTML和CSS中，块级元素是指默认情况下占据其父元素整个宽度，并从新行开始渲染的元素类型。例如，段落 <p>、标题 <h1> 至 <h6> 以及 <div> 等都是块级元素。块级元素可以通过CSS中的text-indent属性实现首行缩进，且可以设置width、height、margin、padding等属性。 text-indent属性 , 在CSS中，text-indent是一个用于指定元素内文本首行缩进量的样式属性。它允许开发者设置一个绝对长度值（如px、em）或者百分比值作为缩进量，若取负值，则文本会向左移动。例如，在文章中提到的示例代码“p text-indent: 2em; ”，表示将所有段落（<p>元素）的首行文本缩进2个em单位。 list-style属性 , 在CSS中，list-style属性用于一次性设置列表项目的符号、图像或编号样式。它包含了三个子属性。 list-style-position属性 , 这是CSS中list-style属性的一个子属性，用于确定列表项目符号相对于列表内容的位置。当list-style-position设置为inside时，列表项符号会被放置在内边距区域内，与文本内容对齐，这可能导致文本缩进效果，如同文章所展示的例子，实现了符号列的缩进效果。而当其设为outside时，列表项符号会出现在外边距区域，不影响文本的常规缩进。

2023-02-27 22:17:26

523

逻辑鬼才

HTML

光头强代码html

...业人员，他们主要运用HTML、CSS和JavaScript等技术构建网站的视觉层、交互逻辑以及动态功能。在本文中，光头强就是一名优秀的前端开发工程师，他精通多种编程语言并熟练编写HTML代码来构建清晰且结构化的网页内容。 HTML , 超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言，通过一系列标签（如<p>、<pre>等）来描述网页结构和内容，使浏览器能够解析并正确展示网页信息。在文章中，光头强使用HTML语言编写了段落和预格式化文本的示例代码，展示了其在前端开发中的基础性和重要性。预格式化文本 , 在HTML中，预格式化文本是指保留原始文本所有空格、换行和缩进格式的文本内容。通过使用<pre>标签可以实现预格式化文本的展示，确保源代码、诗歌、地址等需要特定格式的文本在网页上显示时保持原有格式不变。文中提到，光头强在编写HTML代码时运用了<pre>标签来清晰地展示代码片段或其他需要保持原样式的文本内容。

2023-05-13 09:23:43

468

软件工程师

CSS

css段落进2个字节

...常要调整的就是元素的样式设置。其中，段落是HTML中普遍的元素，而要对段落的样式设置进行调整，则需要使用CSS的段落进2个字节属性。下面就让我们来深入了解这个属性吧。首先，我们需要了解，CSS中，段落进2个字节的属性是text-indent。通过这个属性，我们可以调整段落开头首行间距，让文本看起来更加整洁有序。应用时，我们需要在CSS中设置该属性，并设置相应的值。例如： p { text-indent: 2em; } 上面的代码就是针对所有p标签设置段落进2个字节的样式设置。其中，2em表示2倍的字号大小，也就是2个中文字符的宽度。需要注意的是，在使用段落进2个字节属性时，其作用的对象并不局限于p标签。我们也可以通过该属性来调整其他元素的缩进，例如li标签、div标签等。最后，为了更好地展示代码，我们可以使用pre标签来包裹代码块，以保持代码的格式和排版。例如： p { text-indent: 2em; } 总之，CSS的段落进2个字节属性是一种非常有用的样式设置功能，可以让网页内容更加整洁美观。通过学习和掌握这个属性，我们可以更好地优化网站的用户体验。

2023-09-15 09:40:08

493

电脑达人

HTML

修改网页html代码格式化

...网站的期间，时常要对HTML程序代码进行调整，以满足不同的要求和格式要求。而在调整HTML程序代码时，往往需要进行优化，使程序代码更加组织有序、易读性更强。比如，以下是一段未经处理的优化的HTML程序代码： <html><head><title>网页标题</title></head><body><div id="content"><p> 此处是网页内容 </p></div></body></html> 如果将未经处理的优化的程序代码粘贴到文本编辑器中，会发现程序代码难以查看，也不便于搜索和调整。要解决这个问题，可以使用优化工具对HTML程序代码进行优化。这样可以使程序代码具有更好的层级结构，便于理解和调整。以下是优化后的HTML程序代码： <html> <head> <title>网页标题</title> </head> <body> <div id="content"> <p> 此处是网页内容 </p> </div> </body> </html> 通过优化，我们可以清晰地看到网页结构，便于调整和调整程序代码。优化工具有许多种，如Notepad++、Sublime Text、Online HTML Formatter等。这些工具都可以方便地进行程序代码优化，提高程序代码的易读性和可维护性。在编写程序代码时，建议使用缩进、换行等规则，将程序代码组织有序，避免过度嵌套、过长的行等不利于程序代码理解和优化的问题。在使用优化工具时，也可以自定义这些规则，以达到最佳的程序代码结构和易读性。

2023-07-25 14:28:54

508

程序媛

CSS

CSS 控制中文标点符号排版：字间距、white-space 与 letter-spacing 属性的实际运用

...过程中，CSS（层叠样式表）对于页面布局和样式的控制起着至关重要的作用。然而，在处理中文内容时，尤其是涉及到中文标点符号的排版问题，我们可能会遇到一些挑战。这篇文章会带你一起深入地“挖掘”这个主题，我们不仅会滔滔不绝地讨论，还会甩出一些实实在在的实例代码，手把手教你如何漂亮地搞定这些问题。 1. 中文标点符号的特殊性首先，让我们理解一下为什么中文标点符号在CSS排版中会引发问题。不同于英文标点，中文标点通常具有更强的内联性，例如全角句号、逗号等不会出现在单词或句子的尾部，而是紧贴前一个字符。此外，中文段落间的换行规则也与英文不同，新段落不直接跟在上一段文字后面，而是需要保持一定的缩进距离。 html 这是一段中文文本，结尾的句号应该紧贴前一个字。这是新的一段，注意它与上一段之间的间距。 2. CSS中的默认排版行为在默认情况下，浏览器根据W3C规范对中文标点进行处理，但在某些场景下，如自定义字体、行高、字间距等因素可能会影响标点符号的正常排布。 css / 默认CSS / body { font-family: '宋体', sans-serif; } / 这种情况下标点符号一般能正确显示，但如果更换其他非中文字体，可能出现标点位置异常 / 3. 解决方案一调整字间距为了解决标点过于紧凑或分散的问题，我们可以利用CSS的letter-spacing属性调整字间距，确保标点符号与汉字间有合适的间距。 css p { letter-spacing: normal; / 或者设置具体像素值，如0.1em / } 4. 解决方案二使用white-space属性针对中文段落换行问题，可以运用white-space属性。例如，使用pre-wrap可保留文本中的换行符并允许自动换行。 css p { white-space: pre-wrap; text-indent: 2em; / 设置首行缩进以符合中文段落排版习惯 / } 5. 解决方案三针对特定标点符号的定位对于个别特殊的标点符号，还可以通过伪元素结合margin或padding实现精准定位。 css p::after { content: "。"; / 添加一个全角句号 / margin-left: -0.1em; / 微调标点符号的位置 / } 6. 思考与探讨虽然以上方法能够有效改善中文标点符号的排版效果，但实际应用中还需结合具体场景灵活调整。同时，随着CSS3及Web typography的发展，诸如text-align-last、line-break等高级特性也为更精细的排版提供了可能。因此，在优化中文排版体验的过程中，我们需要不断学习和探索，让CSS更好地服务于我们的多语言网页设计。总结来说，面对CSS中的中文标点符号排版问题，关键在于理解其内在规律，借助CSS属性工具箱，辅以细致入微的调试与观察，才能达到理想的效果。在这个过程中，作为开发者大伙儿，咱们得把每一个细节都当作是手中的艺术品在精心打磨，得用真心去感知、去打造那种让人读起来超爽的体验，就像工匠对自己的作品精雕细琢一样。

2023-06-22 11:49:35

441

彩虹之上_

JQuery插件下载

3种jQuery和css3精美文字排版特效插件

...CSS3强大的动画及样式控制能力，为网页设计师和开发者提供了一套独特的文本装饰工具。该插件的核心基于开源项目jquery.lettering.js，它专门用于将HTML元素中的文本进行精细分割，实现对单个字符、单词或行的独立样式控制。此插件包含了三种精心设计的文字特效样式，每一种都能够赋予网页文本前所未有的视觉表现力。通过简单的集成与配置，用户可以轻松地将平淡无奇的文字段落转换成艺术化的布局和动画效果。无论是动态流动的文字排列、创意十足的立体字效，还是炫酷夺目的颜色变换，都能一键应用到网页内容中，营造出杂志级别的精致排版效果。总之，这款插件充分利用了现代浏览器支持的CSS3特性，结合jQuery的强大功能，使得网页中的文字排版不再受限于传统的静态样式，从而大大提升了用户体验和网站整体设计水准。只需寥寥数行代码，即可实现丰富的动态文字排版特效，无疑是网页设计领域的一款实用利器。点我下载文件大小：51.53 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-05-23 18:36:49

本站

HTML

下雪的代码html

下面是一个简易的HTML代码，用来呈现下雪的特效：下雪特效以上代码包括一个简易的JS函数，用来在网页上持续地创造飘雪，并让它们自上而下降落到下面。在样式模板中，我们运用了预格式化标签来呈现整段代码，以区分于其余文本段落。所以，我们必须在上下文中插入p标签来自然地过渡到代码段。

2023-08-21 12:02:08

458

软件工程师

CSS

css段落空两格怎么设置

... Sheets（层叠样式表）的缩写，是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。在本文中，CSS被用来设置HTML段落元素（p标签）的样式，特别是控制段落之间的行间距。 margin属性 , 在CSS中，margin属性定义了元素周围的空间区域，即边距。它能够分别设置一个元素的上、右、下、左四个方向的外边距。在文章语境中，通过给段落（p标签）设置margin属性，具体为\ 0 0 2em 0\ ，可以调整该段落与下方段落之间的距离，实现段落间空出两格的效果。 em单位 , em是一个相对长度单位，在CSS中常用于定义字体大小和其它尺寸。它的值等于当前元素的字体大小。在本文中，将段落的下边距设置为“2em”，意味着下边距将是段落文本字体大小的两倍。这样做的好处在于，无论基础字体大小如何变化，下边距都会根据字体大小进行相应的等比例调整，从而保证段落间距始终保持一定的可读性比例。

2023-10-09 16:18:52

480

软件工程师

CSS

css样式设置文本之间的间距

CSS样式 , CSS（Cascading Style Sheets）样式是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。在本文中，CSS样式特指应用于网页设计中的文本间距设置，开发者通过编写CSS代码定义文本的颜色、字体、大小、行间距、内边距、外边距等视觉表现属性，以达到美化和优化文本易读性的目的。 line-height属性 , line-height是CSS中一个核心的文本排版属性，它用于设置元素内部行间距，即一行文本基线到下一行文本基线之间的距离。在文章语境中，line-height属性被用来调整文本行与行之间的垂直间距，比如将其设置为1.5倍行距，可以增加文本的呼吸感，提升阅读体验。 margin属性 , 在CSS中，margin属性代表元素的外边距，也就是元素边框与相邻元素之间的空白区域。在本文中，margin-bottom属性被用作调整段落之间的间距，通过设置一定像素值，可以在段落之间创建空白间隔，有助于区分不同的内容区块，增强内容层次感和页面布局美感。 padding属性 , padding属性在CSS中指的是元素内容区与边框之间的空间，也即内边距。虽然在给出的文章片段中没有直接演示padding属性如何影响文本间距，但在实际网页设计中，padding属性同样可被用来控制元素内部文本与其他元素或边框的距离，从而间接影响文本显示的紧凑程度以及与其他元素的相对位置关系。

2023-04-19 11:26:47

539

程序媛

CSS

css样式里文本怎么首行缩进

CSS样式 , CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。在本文中，CSS样式是控制文本首行缩进效果的关键技术手段，通过定义一系列属性和值，开发者可以精确调整网页元素的布局、颜色、字体大小、缩进等视觉表现。 text-indent属性 , text-indent是CSS中的一个属性，专门用于设置元素内文本内容的首行缩进量。在文章上下文中，开发者可以通过给text-indent属性指定一个正数值（例如。 padding-left属性 , padding-left是CSS中盒模型的一部分，用来定义元素内边距的左部距离。在本文讨论的语境中，padding-left属性也可以用于模拟文本首行缩进的效果，即增加文本区域左侧的空白空间。然而，与text-indent不同的是，设置padding-left不仅影响首行，还会使整个元素内部的内容都产生左移，而且可能会影响元素本身的尺寸大小。因此，在Web前端开发中，开发者需要根据实际需求和设计要求来选择合适的属性进行文本缩进处理。

2023-12-18 13:15:57

473

电脑达人

CSS

css水平线粗细怎么设置

...性。水平线通过CSS样式表实现，可以设置粗细、颜色、长度等参数。下面我们就来学习一下如何设置CSS水平线的粗细。首先，在HTML文件中使用标签来创建段落，然后通过CSS样式表来设置该段落中出现的水平线的粗细，可以使用border-bottom属性或hr标签进行设置。使用border-bottom属性设置水平线：这是一段文本，下方有一条粗细为1像素，颜色为黑色的水平线。 border-bottom属性包含两个参数：宽度以及样式。在上面的代码中，我们设置了宽度为1像素，样式为实线，颜色为黑色。你可以根据需要自行调整。使用hr标签设置水平线：使用hr标签设置水平线的代码比较简洁。height属性控制水平线高度，border和color属性控制边框以及颜色，background-color属性控制背景颜色。综上所述，我们可以通过使用border-bottom属性或hr标签来设置CSS水平线的粗细。根据实际需要，对代码进行相应的修改，可以达到理想的效果。

2023-10-03 17:12:50

1133

软件工程师

HTML

冰墩墩程序代码 html

...它的程序代码一般由 HTML 语言编写。HTML 是一种用于建立网页的标记语言。以下是冰墩墩程序代码的一个简单例子： <!DOCTYPE html> <html> <head> <title>冰墩墩程序代码</title> </head> <body> <h1>冰墩墩的简介</h1> <p>冰墩墩是一款可爱的教育机器人，它的外观是一只企鹅。冰墩墩有充足的语音交互功能，能够与小孩进行互动，帮助他们研习中文和各种知识。</p> <h2>冰墩墩的特性</h2> <ul> <li>充足的教育资源</li> <li>智慧的语音交互</li> <li>可爱的外观规划</li> </ul> <p>如果你想了解更多关于冰墩墩的信息，请访问我们的官方网站。</p> <a href="https://www.bingdungu.com">访问冰墩墩官网</a> </body> </html> 上面的代码示例中，<!DOCTYPE html> 界定了 HTML 文档类型，<html> 代表 HTML 根元素。<head> 元素包含了网页的头部信息，<body> 元素包含了网页的主要内容。<h1> 和 <h2> 代表标题栏，<p> 代表文本段落，<ul> 和 <li> 代表无序列表。在 HTML 中，标签和属性都是大小写敏感的。标签一般是成对出现的，即有开始标签和结束标签。属性用于为 HTML 元素提供附加的信息，一般包含在开始标签中，并以键值对的形式出现。 HTML 是一种基本的前端技术，他的能力并不局限于教育机器人，它可以为网页的规划和开发提供重要的支持。

2023-09-24 23:37:14

415

码农

CSS

css模块放置不了最底部

...由于CSS充当网页的样式表，要求在网页元素载入之前进行加载，以保证样式可以被准确地运用。但是，一些程序员期望将CSS代码嵌入HTML文档的尾部，以提升网页的加载速度。这种做法的原因是，在CSS代码载入之前，网页的HTML结构已经可以被解析和渲染，所以这种做法可以减少用户等待网页完成加载的时间。然而，并不是所有的情况下都可以将CSS嵌入HTML文档的尾部。其中一个原因是，如果在CSS代码载入之前，用户对网页进行了交互（例如点击了链接或按钮），那么这些交互过程可能会被网页加载的延迟所干扰。另外，将CSS代码嵌入HTML文档的尾部，可能会导致一些奇怪的样式问题。例如，如果某个CSS样式定义了一个冲突的样式，那么在CSS代码载入之前，浏览器可能会首先运用网页的默认样式，然后在CSS代码加载完成之后，重新运用CSS样式。 <!DOCTYPE html> <html> <head> <title>CSS样式放置</title> <style> / 这里是CSS代码 / </style> </head> <body> <p>这是一个段落，它的样式将由上面的CSS代码来定义。</p> <pre> 如果要将CSS代码嵌入HTML文档的尾部，请注意以上的问题。 </pre> </body> </html>

2023-12-20 17:00:57

449

软件工程师

HTML

一个网站的html代码是什么

HTML , HyperText Markup Language，超文本标记语言。是一种用于创建网页的标准标记语言，通过HTML代码可以定义网页的结构、内容和样式，如文章中的<html>标签定义了整个网页的开始和结束，<head>标签内包含网页元信息（如标题），<body>标签则承载了网页主体内容。 HTML5 , 是HTML语言的第五次重大修改版本，提供了更强大的功能和标准化支持，以适应现代网络应用的需求。在文章中，示例网站采用的就是HTML5标准格式，包括使用<header>、<nav>、<main>、<section>等新的语义化标签来明确网页不同部分的功能和作用。语义化标签 , 在HTML5中引入的一类具有特定含义的标签，它们不仅描述了元素的外观或样式，更重要的是表达了元素的内容意义和在文档结构中的角色。例如，<header>表示页面头部区域，<nav>表示导航链接区，<section>用于划分文档的不同主题区域，这些标签有助于搜索引擎优化和辅助技术理解网页内容，从而提升网页的可访问性和用户体验。标签 , HTML中的标签是由尖括号包围的关键词，用于标识网页元素的开始和结束，以及描述元素的类型和属性。例如，<p>标签表示一个段落，<a>标签定义了一个链接，<h1>到<h6>标签分别代表从最高级到最低级的标题。属性 , HTML标签中的附加信息，用来提供该标签或元素更多的描述或功能设置。例如，在文章中的<a href=\ \ >，href就是链接标签的一个属性，它定义了链接的目标地址；而<title>这是一个示例网站</title>中的title则是head部分的一个属性，用于指定网页的标题。

2023-03-25 10:33:55

460

码农

CSS

css段落前加实心点

...Sheets，是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。在网页设计中，CSS负责定义元素的布局、颜色、字体等视觉样式，实现内容与表现形式的分离，从而让开发者可以更灵活地控制和美化网页界面。本文中，CSS被用来通过:before伪元素为段落添加实心点，并通过一系列属性设置其实体样式。 Unicode编码 , Unicode是一个国际标准，旨在统一全球多种文字、符号的编码方式，以满足跨语言、跨平台的信息交换需求。在本文语境下，Unicode编码指的是代表实心点的特定字符码位，通过CSS的content属性插入到段落前作为装饰性标记，使得文本更具可读性和美观性。伪元素:before , 在CSS中，伪元素是一种特殊的抽象元素，它们不是DOM树的一部分，但可以通过CSS选择器来应用样式。:before伪元素会在选定元素的内容区域之前插入生成内容。在本文中，我们利用:before伪元素为每个p标签（段落）前面添加一个实心点，通过修改其content属性值来指定插入的内容（即实心点的Unicode编码），并进一步调整其他相关样式，如间距、大小、颜色等。

2023-11-22 13:38:04

393

代码侠

HTML

公司网站html5源代码

...来研究一下公司网站的HTML5底层代码。首先我们启动网站，使用浏览器的开发者工具查阅底层代码，可以看到以下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>企业名称</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="公司网站概述"> <meta name="keywords" content="关键字1, 关键字2, 关键字3"> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="">菜单1</a></li> <li><a href="">菜单2</a></li> <li><a href="">菜单3</a></li> <li><a href="">菜单4</a></li> </ul> </nav> </header> <main> <section> <h1>公司简介</h1> <p>我们是一家创新广告公司，专注于为客户供给最优质的业务。</p> </section> <section> <h1>最新动态</h1> <ul> <li><a href="">动态1</a></li> <li><a href="">动态2</a></li> <li><a href="">动态3</a></li> </ul> </section> <section> <h1>业务内容</h1> <p>我们供给品牌策略、广告创意、媒体发布等业务。</p> </section> </main> <footer> <p>版权信息 © 2021 企业名称。</p> </footer> </body> </html> 这是一个基本的HTML5模板，我们可以看到一些基本的标签： <!DOCTYPE html>：规定文档类型为HTML5 <html>：顶级标签，包括网站页面的所有内容 <head>：页眉部分，包括网站页面的元数据和样式 <body>：网站页面的主体内容 <header>：网站页面的页眉部分，通常包括菜单栏等 <nav>：菜单栏 <main>：网站页面的主体内容区域 <section>：主体内容区域中的块级区域 <h1>：题目 <p>：文本段落 <a>：链接地址 <ul>：项目列表 <li>：项目符号 <footer>：网站页面的页脚部分通过研究这些基本的HTML5标签，我们可以更好地理解公司网站的底层代码，也可以更好地掌握HTML5的基础知识。

2023-11-14 23:39:03

529

算法侠

HTML

HTML中`div`与``元素的详细解析与实际应用：结构化内容、样式修改及页面布局

...！今天我们要来聊一下HTML中的两个非常重要的元素—— 和。这两个元素看似简单，但它们的作用却十分广泛。接下来让我们一起来详细了解一下这两个元素。二、什么是和？首先，我们需要明确这两个元素的基本概念。在HTML中，是一个用于分组的容器元素，可以用来组织网页内容，而则是一个用于标记文本片段的小型容器元素。三、标签的应用接下来我们来看一下标签的应用。下面是一个简单的例子： html 我的第一个 div 这是一个段落。在这个例子中，我们创建了一个名为myDiv的div容器，并将一个标题（）和一个段落（）放入其中。通过这种方式，我们可以轻松地将相关的HTML元素组织在一起。四、标签的应用然后我们来看一下标签的应用。下面也是一个简单的例子： html 我喜欢吃苹果在这个例子中，我们在一个句子中使用了标签，改变了被包围文本的颜色为红色。标签非常适合用于对文本进行样式修改或者定位。五、和的区别那么，和有什么区别呢？首先，主要用于结构化内容，而主要用于添加样式或者语义含义。其次，通常包含整个块级元素，如表格、列表等，而通常只包含行内元素，如文本、链接等。最后，由于是块级元素，所以它有自己的宽度、高度、边距和填充，而只是行内元素，没有这些属性。六、和的使用场景了解了和的基本知识后，我们来看看它们在实际开发中的应用场景。一般来说，我们会用来组织页面布局，例如设置导航栏、侧边栏、主内容区域等。而则常用于添加样式或者调整文本格式，例如改变字体颜色、大小、样式等。七、总结总的来说，和都是HTML中的重要元素，虽然它们的功能有所不同，但在实际开发中经常需要同时使用。了解它们的特点和应用场景，可以帮助我们更好地构建和维护网站。希望这篇文章能对你有所帮助！八、附录更多实例这里再给大家提供一些实例，让大家更深入地理解和的使用： html 这是页眉这是主要内容这是页脚这是一段文字，蓝色的部分是要加粗的文字。以上就是今天的全部内容，感谢你的阅读！如果你有任何问题，欢迎随时向我提问。

2023-10-10 08:03:49

503

心灵驿站-t

JQuery

jquery搜素文字变色

...里我们以一个包含多个段落的包裹元素为例： <div id="content"> <p>这是第一段文字。</p> <p>这是第二段文字。</p> <p>这是第三段文字。</p> </div> 然后，我们可以使用JQuery的each()方法来循环遍历所有的段落，对其中包含关键词的部分进行突出显示。 $(document).ready(function() { $("search-box").on("keyup", function() { var searchTerm = $(this).获取值.toLowerCase(); $("content p").each(function() { var paragraphText = $(this).text().toLowerCase(); if (paragraphText.indexOf(searchTerm) >= 0) { // 突出显示 $(this).html(paragraphText.replace(searchTerm, "" + searchTerm + "")); } else { // 取消突出显示 $(this).html(paragraphText); } }); }); }); 在CSS中设定highlight类的样式： .highlight { background-color: yellow; } 最后，我们就可以愉快地搜索并高亮我们想要的文字了！以上就是使用JQuery完成查找文本改变颜色的方法。JQuery可以帮助开发人员更快、更简单地完成许多常见功能实现，极大提高了开发效率。

2023-04-05 13:26:07

码农

CSS

JavaScript函数未定义问题探析：作用域、定义与命名规范，以及CSS样式表基础介绍

...控制页面元素的布局和样式。不过，在实际动手编程的时候，咱们也常常会碰到一些让人挠头的问题，就比如那个“js函数没定义是怎么个情况”，这些问题真是时不时就能让人感觉脑壳疼。那么，究竟“js函数未定义是怎么回事”呢？今天我们就来一起探究一下这个问题，希望能够给大家带来一些启示。第2章 CSS基础知识首先，我们需要了解一些基本的CSS概念。CSS，大名鼎鼎的Cascading Style Sheets，我们亲切地称它为“层叠样式表”。说白了，它就是一种专门用来打扮HTML或者XML这些标记语言文档的计算机语言，让网页变得美美的、层次分明，就像一位设计师给网站精心搭配衣服和妆容一样。CSS就像个超级精准的造型师，它先用选择器这个“定位神器”，找到HTML文档中那些需要打扮的元素宝宝们。然后，它会通过各种属性和对应的值，给这些元素宝宝们量身定制出独一无二的样式，让页面变得美美的、活灵活现！举个例子，假设我们有一个HTML结构如下： php-template 这是一个标题这是一段文字。我们可以使用CSS来设置这个标题的字体大小和颜色，以及这段文字的行高和颜色。下面是相应的CSS代码： css .container { background-color: f0f0f0; } .title { font-size: 2em; color: 333; } .para { line-height: 1.5; color: 666; } 这样，我们就成功地设置了容器的背景色，标题的字体大小和颜色，以及段落的行高和颜色。这就是CSS的基本用法，也是我们在后续讨论中需要用到的基础知识。第3章 JS函数未定义的原因回到我们一开始提出的问题，“js函数未定义是怎么回事？”这个问题实际上是在问：“为什么我在某个地方使用了一个函数，但是却出现了函数未定义的错误？”这个问题的答案可能有很多，下面我们一一来看一下。第一个可能的原因是，我们确实没有定义这个函数。比如说，我们有一个名为helloWorld的函数，但是在其他地方却忘记定义它了。这种情况简直是最直截了当的啦，解决起来也超级简单，你只需要在需要用到这个函数的地方给它加上一个定义就OK啦，就像给菜加点盐那么简单。 javascript function helloWorld() { console.log("Hello, world!"); } helloWorld(); // 输出 "Hello, world!" 第二个可能的原因是，我们虽然定义了这个函数，但是在使用的时候却拼错了函数名或者写错了参数。这种情况也比较多见，特别是在大型项目中，很容易出现这种错误。 javascript function helloWorld() { console.log("Hello, world!"); } helloWord(); // 报错，因为函数名拼错了第三个可能的原因是，我们使用的函数在一个作用域内是可以访问的，但是在另一个作用域内却不可以访问。这种情况比较复杂，需要我们深入理解作用域的概念才能解决。 javascript let x = 1; if (true) { function foo() { console.log(x); // 输出 1 } } else { function foo() { console.log(x); // 报错，因为x在else的作用域内不可访问 } } foo(); // 报错，因为foo在if的作用域外不可访问以上就是“js函数未定义是怎么回事”的一些可能原因，我们在日常开发中需要根据具体的情况进行分析和处理。第4章如何避免“js函数未定义”的问题？避免“js函数未定义”的问题，其实有很多方法。下面我们就来介绍一些常用的技巧。首先是要注意命名规范。当我们在创建函数的时候，可别忘了给它起个既规范又有意思的名字。就像咱们常说的“驼峰式命名法”，就是一种挺实用的命名规则，你可以把函数名想象成一只可爱的小骆驼，每个单词首字母都像驼峰一样高高地耸起来，这样一来，不仅看起来顺眼，读起来也朗朗上口，更容易让人记住。这样可以让我们的代码更加清晰易懂，也可以减少出错的可能性。其次是要注意作用域的限制。在JavaScript这个编程语言里，每个函数都拥有自己的独立小天地，也就是作用域。这就意味着，当我们呼唤一个函数来干活的时候，得留个心眼儿，千万要注意别跨出这个小天地去调用还没被定义过的函数，否则就可能闹出“函数未定义”的乌龙事件。最后是要注意版本兼容性。假如我们正在玩转一些最新的JavaScript黑科技，但心里也得惦记着那些还在用老旧浏览器的用户群体。这就意味着，咱们还得琢磨琢磨怎么在这些老爷爷级别的浏览器上，找到能兼容这些新特性的备选方案，让它们也能顺畅运行起来。这就意味着咱们得摸清楚各个浏览器的不同版本之间是怎么个兼容法，还有学会如何运用各种小工具和技巧来对付这些可能出现的兼容性问题。总之，“js函数未定义”的问题是一个比较常见的问题，但是只要我们注意一些基本的原则和技巧，就能够有效地避免这个问题。希望本文能够对你有所帮助，如果你还有其他的问题，欢迎随时联系我。

2023-08-12 12:30:02

429

岁月静好_t

转载文章

[转载]基本标签笔记

...;!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><em>强调文本</em><br><strong>加粗文本</strong><br><dfn>定义项目</dfn><br><code>一段电脑代码</code><br><samp>计算机样本</samp><br><kbd>键盘输入</kbd><br><var>变量</var></body></html 2、HTML <audio> 标签 <audio> 标签是 HTML5 提供的用来播放音频文件的。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><audio controls><source src="/statics/demosource/horse.ogg" ><source src="/statics/demosource/horse.mp3" >您的浏览器不支持 audio 元素。</audio></body></html> 3、HTML <area> 标签 <area> 标签可以在图像上划分区域，这些区域是可以点击的，并且对应不同的操作。 <!DOCTYPE html><html><head><meta charset="utf-8"><title>W3Cschool(w3cschool.cn)</title></head><body><p>点击太阳或其他行星，注意变化：</p><img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="planetmap"><map name="planetmap"><area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif"><area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif"><area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif"></map></body></html> 4、HTML <select> 标签定义及使用说明 <select> 元素用来创建下拉列表。 <!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><select><option value="volvo" style="display:none">Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select></body></html> 5、HTML <style> 标签 <style> 标签包含了 HTML 文档的样式详细，在默认情况下，在该元素内写入的样式指令将被认为是CSS。 <!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title><style type="text/css">h1 {color:red;}p {color:blue;}</style></head><body><h1>这是一个标题</h1><p>这是一个段落。</p></body></html> 7、HTML <sub> 标签包含在 <sub> 标签和其结束标签 </sub> 中的内容会以正常内容的一半的高度显示在下方，而且通常较小，请参见下述例子： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> </head><body><p>这个文本包含 <sub>下标</sub>文本。</p><p>这个文本包含 <sup>上标</sup> 文本。</p></body></html> 8、HTML <summary> 标签 <summary> 标签元素作为一个<datails>元素的标题，该标题可以包含详细的信息，但是默认情况下不显示，需要单击才能显示详细信息，请参考下述示 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><details><summary>Copyright 1999-2011.</summary><p> - by Refsnes Data. All Rights Reserved.</p><p>All content and graphics on this web site are the property of the company Refsnes Data.</p></details><p><b>注意：</b>目前只有 Chrome 和 Safari 6 支持 summary 标签。</p></body></html> 9、HTML <table> 标签 <table> 标签用来定义 HTML 表格，一个简单的 HTML 表格应该包括两行两列，如下述示例所示： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> </head><body><table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></table></body></html> 10、HTML <textarea> 标签 <textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本，请参考下述示例： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool 在线教程(w3cschool.cn)</title> </head><body><textarea rows="10" cols="30">我是一个文本框。</textarea></body></html> 11、HTML <tt> 标签 - HTML5 不支持 <tt> 标签用来改变字体样式，使标签中的文本显示为打字机文本，请参考下述例子： <!DOCTYPE html><html><body><p>This text is normal.</p><p><tt>This text is teletype text.</tt></p></body></html> 12、HTML <u> 标签 <u> 标签可以用来对标签内的文本实现下划线样式，请参考下述示例： <!DOCTYPE html><html><body><p>This is a <u>parragraph</u>.</p></body></html> 13、HTML <ul> 标签 <ul> 标签表示HTML页面中项目的无序列表，一般会以项目符号列表呈现，请参考下述例子： <!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><h4>无序列表:</h4><ul><li>咖啡</li><li>茶</li><li>牛奶</li></ul></body></html> 14、HTML <video> 标签 <video> 标签可以将视频内容嵌入到HTML文档中，请参考下述示例： <!DOCTYPE html><html><body><video width="320" height="240" controls><source src="/statics/demosource/movie.mp4" type="video/mp4"><source src="/statics/demosource/movie.ogg" type="video/ogg">您的浏览器不支持 HTML5 video 标签。</video></body></html> 15、HTML <ol> 标签 <ol> 标签在 HTML 中表示有序列表，是 ordered lists 的缩写。您可以自定义有序列表的初始序号，请参考下面的实例： <!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><ol><li>咖啡</li><li>茶</li><li>牛奶</li></ol><ol start="50"><li>咖啡</li><li>茶</li><li>牛奶</li></ol></body></html> 16、HTML <noframes> 标签HTML5不支持该标签 <noframes> 标签用于支持不支持 <frame> 元素的浏览器，请参考下面的示例： <html><head><meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><frameset cols="25%,50%,25%"><frame src="/statics/demosource/frame_a.htm"><frame src="/statics/demosource/frame_b.htm"><frame src="/statics/demosource/frame_c.htm"><noframes>抱歉，您的浏览器不支持 frame 属性！</noframes></frameset></html> 17、HTML <hr> 标签 <hr> 标签表示段落级元素之间的主题划分。例如，在下面的实例中我们对具有主题变化的内容使用了 <hr> 标签： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><h1>HTML</h1><p>HTML 是用于描述 web 页面的一种语言。</p><hr><h1>CSS</h1><p>CSS 定义如何显示 HTML 元素。</p></body></html> 18、HTML <h1> - <h6> 标签 <h1> - <h6> 标签用来定义 HTML 标题，表示了 HTML 网页中六个级别的标题。您可以通过下面的这个实例来看看每个级别的标题有什么区别： <!DOCTYPE html><html><head><meta charset="utf-8"><title>W3Cschool(w3cschool.cn)</title></head><body><h1>这是标题1</h1><h2>这是标题2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6></body></html> 19、HTML <center> 标签 - HTML 5 不支持 <center> 标签控制文本的居中显示，不能在 HTML5 中使用。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><p>这是一些文本。</p><center>这个文本居中对齐。</center><p>这是一些文本</p></body></html> 20、HTML <button> 标签 <button> 标签用来设置 HTML 中的按钮。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><button type="button" onclick="alert('Hello world!')">Click Me!</button></body></html> 21、HTML <br> 标签 <br> 标签是空标签，可插入一个简单的换行符。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><p>使用br元素<br>在文本中<br>换行。</p></body></html> 22、HTML <dt> 标签 <dt> 标签只能够作为 <dl> 标签的一个子元素出现，常常后跟一个 <dd> 标签。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><dl><dt>咖啡</dt><dd>黑色的热饮</dd><dt>牛奶</dt><dd>白色的冷饮</dd></dl></body></html> 23、HTML <fieldset> 标签 <fieldset> 标签内的一组表单元素会在 WEB 浏览器中以特殊的方式显示，比如不同样式的边界、3D效果等。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><form><fieldset><legend>个人信息:</legend>姓名: <input type="text"><br>邮箱: <input type="text"><br>生日: <input type="text"></fieldset></form></body></html> 24、HTML <embed> 标签 <embed> 标签用来定义在页面中嵌入的内容，比如插件。比如，在下面的实例中我们嵌入了一个 flash 动画： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><embed src="/statics/demosource/helloworld.swf" tppabs="http://W3Cschool.com/tags/helloworld.swf"></body></html> 25、HTML <font> 标签 - HTML5 不支持 <font> 标签的使用示例如下所示，该标签已经过时，因此我们不建议您使用该标签。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><p><font size="3" color="red">这是一些文本！</font></p><p><font size="2" color="blue">这是一些文本！</font></p><p><font face="verdana" color="green">这是一些文本！</font></p></body></html> 26、HTML <label> 标签 <label> 标签是一种常见的表单控件，触发对应表单控件功能，让用户在使用表单的时候能够有更好的体验。参考下述的实例： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><p>点击其中一个文本标签选中选项：</p><form action="/statics/demosource/demo-form.php"><label for="male">Male</label><input type="radio" name="sex" id="male" value="male"><br><label for="female">Female</label><input type="radio" name="sex" id="female" value="female"><br><br><input type="submit" value="提交"></form></body></html> 记录一些重要标签！本篇文章为转载内容。原文链接：https://blog.csdn.net/chehec2010/article/details/85060460。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-10-11 23:43:21

296

转载

转载文章

[转载]前端三件套系例之BootStrap——BootStrap基础、 BootStrap布局

...元素 7.2 预定义样式 7.3 尺寸 7.4 激活状态 7.5 禁用状态 8 图片 8.1 响应式图片 8.2 图片形状 9 辅助类 9.1 文本颜色 9.2 背景色 9.3 三角符号 9.4 浮动 9.5 让内容块居中 9.6 清除浮动 9.7 显示或隐藏内容 9.10 图片替换 10 响应式工具 10.1 不同视口下隐藏显示 10.2 打印类 1 BootStrap基础 1 什么是BootStrap 由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 2 BootStrap的版本 BootStrap2 BootStrap3 BootStrap4 3 BootStrap 下载用于生产环境的Bootstrap Bootstrap Less 源码Bootstrap Sass 源码 4 CDN服务 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 5 目录结构生产环境版 bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ ├── bootstrap-theme.css.map│ └── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/├── glyphicons-halflings-regular.eot├── glyphicons-halflings-regular.svg├── glyphicons-halflings-regular.ttf├── glyphicons-halflings-regular.woff└── glyphicons-halflings-regular.woff2 6 基本模板 <!DOCTYPE html><html lang="zh-CN"><head><title>Bootstrap 101 Template</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body><h1>你好，世界！</h1><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body></html> 7 浏览器支持手机浏览器 ——- Chrome Firefox Safari Android Supported Supported N/A iOS Supported Supported Supported 桌面浏览器 ——— Chrome Firefox Internet Explorer Opera Safari Mac Supported Supported N/A Supported Supported Windows Supported Supported Supported Supported Not supported 8 浏览器兼容让 IE8 支持H5新标签页面中引入respond.js <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> IE兼容模式页面中添加如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 国产浏览器切换webkit内核页面中添加如下代码 <meta name="renderer" content="webkit"> 2 BootStrap布局 1 概览 1.1 移动设备优先为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ 1.2 Normalize.css BootStrap内置了Normalize.css 1.3 布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。 <div class="container">...</div> .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 <div class="container-fluid">...</div> 2 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列 2.1 栅格系统简介栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理： “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-不存在，也影响大屏幕设备。 2.2 栅格参数超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) .container 最大宽度 None （自动） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 最大列（column）宽自动 ~62px ~81px ~97px 2.3 栅格系统使用使用单一的一组 .col-md- 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。 <div class="row"><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div></div><div class="row"><div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-6">.col-md-6</div><div class="col-md-6">.col-md-6</div></div> 2.4 不同屏幕设置不同宽度 <div class="row"><div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><div class="row"><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div></div> 2.5 列偏移使用 .col-md-offset- 类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。 <div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div></div><div class="row"><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div></div><div class="row"><div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div> 2.6 列位置移动通过使用 .col-md-push- 和 .col-md-pull- 类就可以很容易的改变列（column）的顺序。 <div class="row"><div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div><div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div></div> 3 排版 3.1 标题 HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 <h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6> 在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。 <h1>h1. Bootstrap heading <small>Secondary text</small></h1><h2>h2. Bootstrap heading <small>Secondary text</small></h2><h3>h3. Bootstrap heading <small>Secondary text</small></h3><h4>h4. Bootstrap heading <small>Secondary text</small></h4><h5>h5. Bootstrap heading <small>Secondary text</small></h5><h6>h6. Bootstrap heading <small>Secondary text</small></h6> 3.2 突出显示通过添加 .lead 类可以让段落突出显示。 <p class="lead">...</p> 3.3 对齐 <p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p> 3.4 改变大小写 <p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p> 3.5 引用 <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote><blockquote class="blockquote-reverse">...</blockquote> 3.6 列表无样式列表 <ul class="list-unstyled"><li>...</li></ul> 内联列表 <ul class="list-inline"><li>...</li></ul> 水平排列的内联列表 <dl class="dl-horizontal"><dt>...</dt><dd>...</dd></dl> 4 代码 4.1 内联代码通过 <code> 标签包裹内联样式的代码片段。 For example, <code><section></code> should be wrapped as inline. 4.2 用户输入通过 <kbd> 标签标记用户通过键盘输入的内容。 To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> 4.3 代码块多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。 <pre><p>Sample text here...</p></pre> 还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。 4.3 变量通过 <var> 标签标记变量。 <var>y</var> = <var>m</var><var>x</var> + <var>b</var> 4.4 程序输出通过 <samp> 标签来标记程序输出的内容。 <samp>This text is meant to be treated as sample output from a computer program.</samp> 5 表格 5.1 基本为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 <table class="table">...</table> 5.2 条纹状表格 <table class="table table-striped">...</table> 5.3 带边框的表格 <table class="table table-bordered">...</table> 5.4 鼠标悬停 <table class="table table-hover">...</table> 5.5 紧缩表格 <table class="table table-condensed">...</table> 5.6 状态类通过这些状态类可以为行或单元格设置颜色。 Class 描述 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 5.7 响应式表格将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。 6 表单 6.1 基本实例单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 <form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form> 6.2 内联表单为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠） 6.3 水平排列的表单通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了 <form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div></form> 6.4 表单控件输入框包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。只有正确设置了 type 属性的输入控件才能被赋予正确的样式。文本域支持多行文本的表单控件。可根据需要改变 rows 属性。多选和单选框默认样式 <div class="checkbox"><label><input type="checkbox" value="">Option one is this and that—be sure to include why it's great</label></div><div class="checkbox disabled"><label><input type="checkbox" value="" disabled>Option two is disabled</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option one is this and that—be sure to include why it's great</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option two can be something else and selecting it will deselect option one</label></div><div class="radio disabled"><label><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>Option three is disabled</label></div> 内联单选和多选框 <label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 1</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2"> 2</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="option3"> 3</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3</label> 不带文本的Checkbox 和 radio <label><input type="checkbox" id="blankCheckbox" value="option1" aria-label="..."></label></div><div class="radio"><label><input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."></label></div> 下拉列表 <select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select> 静态内容如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可 <form class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label">Email</label><div class="col-sm-10"><p class="form-control-static">email@example.com</p></div></div><div class="form-group"><label for="inputPassword" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword" placeholder="Password"></div></div></form> 帮助文字 <label class="sr-only" for="inputHelpBlock">Input with help text</label><input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">...<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> 校验状态 Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。 <div class="form-group has-success"><label class="control-label" for="inputSuccess1">Input with success</label><input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"><span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span></div><div class="form-group has-warning"><label class="control-label" for="inputWarning1">Input with warning</label><input type="text" class="form-control" id="inputWarning1"></div><div class="form-group has-error"><label class="control-label" for="inputError1">Input with error</label><input type="text" class="form-control" id="inputError1"></div><div class="has-success"><div class="checkbox"><label><input type="checkbox" id="checkboxSuccess" value="option1">Checkbox with success</label></div></div><div class="has-warning"><div class="checkbox"><label><input type="checkbox" id="checkboxWarning" value="option1">Checkbox with warning</label></div></div><div class="has-error"><div class="checkbox"><label><input type="checkbox" id="checkboxError" value="option1">Checkbox with error</label></div></div> 添加额外的图标你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可 <div class="form-group has-success has-feedback"><label class="control-label" for="inputSuccess2">Input with success</label><input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span><span id="inputSuccess2Status" class="sr-only">(success)</span></div> 控件尺寸通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg- 类似的类可以为控件设置宽度。高度尺寸创建大一些或小一些的表单控件以匹配按钮尺寸 <input class="form-control input-lg" type="text" placeholder=".input-lg"><input class="form-control" type="text" placeholder="Default input"><input class="form-control input-sm" type="text" placeholder=".input-sm"><select class="form-control input-lg">...</select><select class="form-control">...</select><select class="form-control input-sm">...</select> 水平排列的表单组的尺寸通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。 <form class="form-horizontal"><div class="form-group form-group-lg"><label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label><div class="col-sm-10"><input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"></div></div><div class="form-group form-group-sm"><label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label><div class="col-sm-10"><input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"></div></div></form> 7 按钮 7.1 可作为按钮使用的标签或元素为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式 <a class="btn btn-default" href="" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit"> 7.2 预定义样式 <button type="button" class="btn btn-default">（默认样式）Default</button><button type="button" class="btn btn-primary">（首选项）Primary</button><button type="button" class="btn btn-success">（成功）Success</button><button type="button" class="btn btn-info">（一般信息）Info</button><button type="button" class="btn btn-warning">（警告）Warning</button><button type="button" class="btn btn-danger">（危险）Danger</button><button type="button" class="btn btn-link">（链接）Link</button> 7.3 尺寸需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。 7.4 激活状态添加 .active 类 7.5 禁用状态为 <button> 元素添加 disabled 属性，使其表现出禁用状态。为基于 <a> 元素创建的按钮添加 .disabled 类。 8 图片 8.1 响应式图片在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center <img src="..." class="img-responsive" alt="Responsive image"> 8.2 图片形状 <img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail"> 9 辅助类 9.1 文本颜色 <p class="text-muted">...</p><p class="text-primary">...</p><p class="text-success">...</p><p class="text-info">...</p><p class="text-warning">...</p><p class="text-danger">...</p> 9.2 背景色 <p class="bg-primary">...</p><p class="bg-success">...</p><p class="bg-info">...</p><p class="bg-warning">...</p><p class="bg-danger">...</p> 9.3 三角符号 <span class="caret"></span> 9.4 浮动 <div class="pull-left">...</div><div class="pull-right">...</div> 9.5 让内容块居中 <div class="center-block">...</div> 9.6 清除浮动通过为父元素添加 .clearfix 类可以很容易地清除浮动（float） <div class="clearfix">...</div> 9.7 显示或隐藏内容 <div class="show">...</div><div class="hidden">...</div> 9.10 图片替换使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。 <h1 class="text-hide">Custom heading</h1> 10 响应式工具 10.1 不同视口下隐藏显示 .visible-xs- .visible-sm- .visible-md- .visible-lg- .hidden-xs .hidden-sm .hidden-md .hidden-lg.visible--block .visible--inline .visible--inline-block 10.2 打印类 .visible-print-block.visible-print-inline.visible-print-inline-block.hidden-print 打印机下隐藏本篇文章为转载内容。原文链接：https://blog.csdn.net/m0_67155975/article/details/123351126。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-10-18 14:41:25

150

转载

HTML

个人博客纯html代码

...我将讲解如何应用原始HTML代码建立个人博客。首先，我们需要建立一个html文件，并在头部信息中插入必需的metadata。以下是一个典型的html头部信息： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的个人博客</title> </head> <body> </body> </html> 在body标签内，我们可以开始搭建我们的博客。首先，我们需要一个菜单栏，可以帮助读者便捷浏览网站。以下是一个简单的菜单栏代码样例： <nav> <ul> <li><a href="index.html">主页</a></li> <li><a href="about.html">个人简介</a></li> <li><a href="contact.html">联络方式</a></li> </ul> </nav> 接下来我们需要一个文章目录。以下是一个简单的列表代码样例： <h2>我的博客</h2> <ul> <li><a href="post1.html">我的第一篇博客</a></li> <li><a href="post2.html">我的第二篇博客</a></li> </ul> 最后，我们需要插入一个页脚，让我们的博客看起来更加完整。以下是一个简单的页脚代码样例： <footer> <p>版权所有 © 2021 我的个人博客</p> </footer> 到此为止，我们已经成功建立了一个基本的个人博客。应用p标签和pre标签可以使我们的代码更加清晰易懂。当然，这只是一个起点，我们可以根据自己的需求和兴趣不断地对博客进行改进。

2023-04-28 09:03:31

417

电脑达人

知识学习

实践的时候请根据实际情况谨慎操作。

随机学习一条linux命令：

tail -n 10 file.txt - 显示文件末尾10行。