帅帅辉的博客

html、css学习记录【uniapp前奏】

Html

声明：该学习笔记源于菜鸟自学网站，特此记录笔记。很多示例源于此官网，若有侵权请联系删除。

文章目录

Html
- - 声明： CSS 全称 Cascading Style Sheets，层叠样式表。是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！
CSS
- CSS里的ID与Class [CSS里的ID跟Class：](https://www.runoob.com/css/css-id-class.html)
- 背景样式background [光看不练白瞎](https://www.runoob.com/css/css-background.html)
- 外边距margin [点一点](https://www.runoob.com/css/css-margin.html)
- 内边距padding [我是超超超链接](https://www.runoob.com/css/css-padding.html)
- 文本样式Text [TEXT](https://www.runoob.com/css/css-text.html)
- 边框 border [菜鸟网站的boder](https://www.runoob.com/css/css-border.html)
- 尺寸（Dimension）[Dimension常用属性](https://www.runoob.com/css/css-dimension.html)
- 展示Display与可见性Visibility [占不占空间与android里的visibility属性](https://www.runoob.com/css/css-display-visibility.html)
- Overflow 有滚动条的scrollview [Overflow](https://www.runoob.com/css/css-overflow.html)
- Float浮动 [Float浮动链接](https://www.runoob.com/css/css-float.html)
- CSS圆角border-radius [border-radius圆角属性](https://www.runoob.com/css3/css3-border-radius.html)
- CSS3中的渐变 [渐变：Gradients](https://www.runoob.com/css3/css3-gradients.html)
- 按钮 [按钮的各种效果](https://www.runoob.com/css3/css3-buttons.html)

这是一个简单的html也是最最最原始的“道生一一生二二生三三生万物”里面的一：





头



身体

它有个头有身体，头里面一般放网页的元：meat（一个定义网页编码格式的属性声明），以及网页的title：就是网页在你的（360或者2345或者IE或者火狐或者谷歌）浏览器里展示出来的时候，标签栏里的内容。
身体里面一般放页面的主体展示内容，比如标题啊，段落啊,图片啊之类的…
这是一个示例：（可以copy下来放到一个新建.txt文件里，再给后缀改为.html双击打开看一下效果）





菜鸟教程(runoob.com)


 
我的第一个标题
 
我的第一个段落。

一些常见的疑问：什么是html？什么是html标签？什么是html元素？可以访问菜鸟教学的官网进行理论知识补充，这里不再记录。我是链接，点我！

一些常用的标签：

基本标签：
最大的标题
 次大的标题
 . . . 
 . .
 . 
最小的标题
 
这是一个段落，它前后都会有空行

 （换行，可以理解为回车键）
 （水平线，就是这个： -------）


文本格式化标签：
粗体文本
计算机代码
强调文本
斜体文本
键盘输入 
预格式化文本
更小的文本
重要的文本
 
 （缩写）
 （联系信息）
 （文字方向）
 （从另一个源引用的部分）
 （工作的名称）
 （删除的文本）
 （插入的文本）
_{（下标文本）
^{（上标文本）}}

链接的标签：

普通的链接：链接文本
图像链接： 
邮件链接： 发送e-mail
书签：
提示部分
跳到提示部分

是不是发现跟上面的基本标签不一样了？标签开始里面多了属性（《标签属性》《/标签》）。
菜鸟教程对属性的介绍是这样的：属性可以在元素中添加附加信息，属性一般描述于开始标签，属性总是以名称/值对的形式出现，比如：name=“value”。
最常用的链接标签就需要属性来辅助了：链接文本

这是上面常见标签的展示：

对应的网页：index.html

DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
head>
<body>
<h1>最大的标题h1>
<h2> 次大的标题h2>
<h3> . . . h3>
<h4> . .h4>
<h5> . h5>
<h6>最小的标题h6>
 
<p>这是一个段落，它前后都会有空行p>
<br> 
<hr> 
	


	
<b>粗体文本b>
<code>计算机代码code>
<em>强调文本em>
<i>斜体文本i>
<kbd>键盘输入kbd> 
<pre>预格式化文本pre>
<small>更小的文本small>
<strong>重要的文本strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
	<br>	<br>	<br>	<br>
	
<a href="http://www.example.com/">链接文本a>
body>
html>

至此，网页的核心已经说了一部分了，下面将讲解最最最最重要的另一部分了css:

：
上面说了链接的标签：访问菜鸟教程里面的href叫做标签a的属性。关于属性的介绍呢这里也只说一下链接部分的属性，更多属性知识想了解点击这里去学习：菜鸟属性学习
链接的标签a中可以存放的属性有这些：

href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）
title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

源码在这儿，可以自己试一下index.html：

DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
head>
<body>

<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!a>

<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。p>

body>
html>

：
说一下head标签:head 元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为:

, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
</code></pre> 
  <p>这里面提到了一个样式文件CSS，脚本Script。我们先说样式文件CSS，你可以这么理解它如果说html是一个网页的骨头的话它就是血肉细胞，Script则是网页的血管和神经网络。</p> 
  <p>先说head标签里面能放的东西：</p> 
  <ul> 
   <li><strong>mea</strong>t开头已经说了它叫元，声明整个网页的编码格式像这样：<code><meta charset="utf-8"> </code>写在html的head里，浏览器在打开你的网页之后就知道你这个网页用的是utf-8编码了，就不会导致乱码了。</li> 
   <li><strong>base</strong>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:<code><base href="http://www.runoob.com/images/" target="_blank"></code>像这样你的整个网页的默认链接就声明好了<a href="http://img.e-com-net.com/image/info8/fa097eba94b648e1adedbaae1a684e7a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fa097eba94b648e1adedbaae1a684e7a.jpg" alt="html、css学习记录【uniapp前奏】_第4张图片" width="650" height="195" style="border:1px solid black;"></a></li> 
   <li><strong>link</strong>标签定义了文档与外部资源之间的关系。</li> 
   <li><strong>link</strong>标签通常用于链接到样式表:<code><link rel="stylesheet" type="text/css" href="mystyle.css"></code>能观察到它的属性跟上面提到的标签a有两个一样的，它的href在a标签里是填要跳转的网络地址的，在这儿功能一样但是要跳转的不再是网络链接地址了，而是被链接的文档位置，rel还是原来的功能,type是规定被链接文档的 MIME 类型。下面是一些link的相关属性介绍：<a href="http://img.e-com-net.com/image/info8/5e311f1e41a643fb8f6d087579160284.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5e311f1e41a643fb8f6d087579160284.jpg" alt="html、css学习记录【uniapp前奏】_第5张图片" width="635" height="838" style="border:1px solid black;"></a><a href="http://img.e-com-net.com/image/info8/1da8c40b2b37483c8f4780f0d6337253.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1da8c40b2b37483c8f4780f0d6337253.jpg" alt="html、css学习记录【uniapp前奏】_第6张图片" width="650" height="206" style="border:1px solid black;"></a></li> 
   <li><strong>style</strong>上面说的外部资源呢，讲的就是CSS资源了，在正式进入CSS学习之前，在讲一个标签叫：style标签定义了HTML文档的样式文件引用地址。在style元素中你也可以直接添加样式来渲染 HTML 文档 :下面你将读到一段非常重要的声明，重要到你对于后面uniapp的理解以及学习进度。</li> 
  </ul> 
  <h4>声明： CSS 全称 Cascading Style Sheets，层叠样式表。是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！</h4> 
  <h2>CSS</h2> 
  <p>问：什么是CSS?</p> 
  <ul> 
   <li class="task-list-item"> CSS 指层叠样式表 (Cascading Style Sheets)</li> 
   <li class="task-list-item"> 样式定义<strong>如何显示</strong> HTML 元素</li> 
   <li class="task-list-item"> 样式通常存储在<strong>样式表</strong>中</li> 
   <li class="task-list-item"> 把样式添加到 HTML 4.0 中，是为了<strong>解决内容与表现分离的问题</strong></li> 
   <li class="task-list-item"> <strong>外部样式表</strong>可以极大提高工作效率</li> 
   <li class="task-list-item"> 外部样式表通常存储在 <strong>CSS 文件</strong>中</li> 
   <li class="task-list-item"> 多个样式定义可<strong>层叠</strong>为一个</li> 
  </ul> 
  <p>样式表~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p> 
  <p>当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。如何插入样式表，插入样式表的方法有三种：<br> <strong>外部样式表(External style sheet)<br> 内部样式表(Internal style sheet)<br> 内联样式(Inline style)</strong></p> 
  <p><strong>外部样式：</strong> 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：<br> index.html</p> 
  <pre><code class="prism language-bash"><span class="token operator"><</span>head<span class="token operator">></span>
<span class="token operator"><</span>link <span class="token assign-left variable">rel</span><span class="token operator">=</span><span class="token string">"stylesheet"</span> <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"text/css"</span> <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"mystyle.css"</span><span class="token operator">></span>
<span class="token operator"><</span>/head<span class="token operator">></span>
</code></pre> 
  <p>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。<br> 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：<br> mystyle.css：</p> 
  <pre><code class="prism language-bash">hr <span class="token punctuation">{</span>color:sienna<span class="token punctuation">;</span><span class="token punctuation">}</span>
p <span class="token punctuation">{</span>margin-left:20px<span class="token punctuation">;</span><span class="token punctuation">}</span>
body <span class="token punctuation">{</span>background-image:url<span class="token punctuation">(</span><span class="token string">"/images/back40.gif"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> 
  <p><strong>内部样式：</strong> 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 </p> 
  <pre><code class="prism language-bash"><span class="token operator"><</span>head<span class="token operator">></span>
<span class="token operator"><</span>style<span class="token operator">></span>
hr <span class="token punctuation">{</span>color:sienna<span class="token punctuation">;</span><span class="token punctuation">}</span>
p <span class="token punctuation">{</span>margin-left:20px<span class="token punctuation">;</span><span class="token punctuation">}</span>
body <span class="token punctuation">{</span>background-image:url<span class="token punctuation">(</span><span class="token string">"images/back40.gif"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token operator"><</span>/style<span class="token operator">></span>
<span class="token operator"><</span>/head<span class="token operator">></span>
</code></pre> 
  <p><strong>内联样式：</strong> 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：</p> 
  <pre><code class="prism language-bash"><span class="token operator"><</span>p <span class="token assign-left variable">style</span><span class="token operator">=</span><span class="token string">"color:sienna;margin-left:20px"</span><span class="token operator">></span>这是一个段落。<span class="token operator"><</span>/p<span class="token operator">></span>
</code></pre> 
  <hr> 
  <p><mark><strong>跟java的继承特性一样，css也有自己的继承特性：</strong></mark></p> 
  <p><a href="http://img.e-com-net.com/image/info8/335224d5382c4531a167043649a63562.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/335224d5382c4531a167043649a63562.jpg" alt="html、css学习记录【uniapp前奏】_第7张图片" width="650" height="417" style="border:1px solid black;"></a><br> <strong>也就是说它有一个优先级：</strong><br> 多重样式优先级，样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。</p> 
  <p>一般情况下，优先级如下：</p> 
  <p><strong>（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式</strong></p> 
  <p><strong>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:</strong><br> <a href="http://img.e-com-net.com/image/info8/763b704d7e8f4e48849a9820d50eeee0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/763b704d7e8f4e48849a9820d50eeee0.jpg" alt="html、css学习记录【uniapp前奏】_第8张图片" width="570" height="120" style="border:1px solid black;"></a><br> 示例一：</p> 
  <pre><code class="prism language-bash"><span class="token operator"><</span><span class="token operator">!</span>DOCTYPE html<span class="token operator">></span>
<span class="token operator"><</span>html<span class="token operator">></span>
<span class="token operator"><</span>head<span class="token operator">></span>
<span class="token operator"><</span>meta <span class="token assign-left variable">charset</span><span class="token operator">=</span><span class="token string">"utf-8"</span><span class="token operator">></span>
<span class="token operator"><</span>title<span class="token operator">></span>菜鸟教程<span class="token punctuation">(</span>runoob.com<span class="token punctuation">)</span><span class="token operator"><</span>/title<span class="token operator">></span>
<span class="token operator"><</span>style<span class="token operator">></span>
body <span class="token punctuation">{</span>background-color:yellow<span class="token punctuation">;</span><span class="token punctuation">}</span>
h1   <span class="token punctuation">{</span>font-size:36pt<span class="token punctuation">;</span><span class="token punctuation">}</span>
h2   <span class="token punctuation">{</span>color:blue<span class="token punctuation">;</span><span class="token punctuation">}</span>
p    <span class="token punctuation">{</span>margin-left:50px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token operator"><</span>/style<span class="token operator">></span>
<span class="token operator"><</span>/head<span class="token operator">></span>

<span class="token operator"><</span>body<span class="token operator">></span>

<span class="token operator"><</span>h<span class="token operator"><span class="token file-descriptor important">1</span>></span>这个标题设置的大小为 <span class="token number">36</span> pt<span class="token operator"><</span>/h<span class="token operator"><span class="token file-descriptor important">1</span>></span>
<span class="token operator"><</span>h<span class="token operator"><span class="token file-descriptor important">2</span>></span>这个标题设置的颜色为蓝色：blue<span class="token operator"><</span>/h<span class="token operator"><span class="token file-descriptor important">2</span>></span>

<span class="token operator"><</span>p<span class="token operator">></span>这个段落的左外边距为 <span class="token number">50</span> 像素：50px<span class="token operator"><</span>/p<span class="token operator">></span> 

<span class="token operator"><</span>/body<span class="token operator">></span>
<span class="token operator"><</span>/html<span class="token operator">></span>
</code></pre> 
  <p>效果图：<br> <a href="http://img.e-com-net.com/image/info8/d4fe1af09df64d30afa11ad5641bfc73.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d4fe1af09df64d30afa11ad5641bfc73.jpg" alt="html、css学习记录【uniapp前奏】_第9张图片" width="650" height="334" style="border:1px solid black;"></a><br> 示例二：</p> 
  <pre><code class="prism language-bash"><span class="token operator"><</span><span class="token operator">!</span>DOCTYPE html<span class="token operator">></span>
<span class="token operator"><</span>html<span class="token operator">></span>
<span class="token operator"><</span>head<span class="token operator">></span>
<span class="token operator"><</span>meta <span class="token assign-left variable">charset</span><span class="token operator">=</span><span class="token string">"utf-8"</span><span class="token operator">></span>
<span class="token operator"><</span>title<span class="token operator">></span>菜鸟教程<span class="token punctuation">(</span>runoob.com<span class="token punctuation">)</span><span class="token operator"><</span>/title<span class="token operator">></span>
<span class="token operator"><</span>style<span class="token operator">></span>
body <span class="token punctuation">{</span>background-color:tan<span class="token punctuation">;</span><span class="token punctuation">}</span>
h1   <span class="token punctuation">{</span>color:maroon<span class="token punctuation">;</span>font-size:20pt<span class="token punctuation">;</span><span class="token punctuation">}</span>
hr   <span class="token punctuation">{</span>color:navy<span class="token punctuation">;</span><span class="token punctuation">}</span>
p    <span class="token punctuation">{</span>font-size:11pt<span class="token punctuation">;</span>margin-left:15px<span class="token punctuation">;</span><span class="token punctuation">}</span>
a:link    <span class="token punctuation">{</span>color:green<span class="token punctuation">;</span><span class="token punctuation">}</span>
a:visited <span class="token punctuation">{</span>color:yellow<span class="token punctuation">;</span><span class="token punctuation">}</span>
a:hover   <span class="token punctuation">{</span>color:black<span class="token punctuation">;</span><span class="token punctuation">}</span>
a:active  <span class="token punctuation">{</span>color:blue<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token operator"><</span>/style<span class="token operator">></span>
<span class="token operator"><</span>/head<span class="token operator">></span>

<span class="token operator"><</span>body<span class="token operator">></span>

<span class="token operator"><</span>h<span class="token operator"><span class="token file-descriptor important">1</span>></span>这是标题<span class="token operator"><</span>/h<span class="token operator"><span class="token file-descriptor important">1</span>></span>
<span class="token operator"><</span>hr<span class="token operator">></span>

<span class="token operator"><</span>p<span class="token operator">></span>你可以看到这个段落是
被设定的 CSS 渲染的。<span class="token operator"><</span>/p<span class="token operator">></span>

<span class="token operator"><</span>p<span class="token operator">></span><span class="token operator"><</span>a <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"https://www.runoob.com"</span> 
<span class="token assign-left variable">target</span><span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>这是一个链接<span class="token operator"><</span>/a<span class="token operator">></span><span class="token operator"><</span>/p<span class="token operator">></span>

<span class="token operator"><</span>/body<span class="token operator">></span>
<span class="token operator"><</span>/html<span class="token operator">></span>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/28990d54a97d4c65b0d4b6276c2881fd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/28990d54a97d4c65b0d4b6276c2881fd.jpg" alt="html、css学习记录【uniapp前奏】_第10张图片" width="650" height="484" style="border:1px solid black;"></a></p> 
  <h3>CSS里的ID与Class CSS里的ID跟Class：</h3> 
  <p>id以 # 来定义<br> class以 . 来定义</p> 
  <p>在html元素中设置CSS样式，你需要在元素中设置ID和Class选择器。<br> id选择器可以为标有特定id的HTML元素指定特定的样式，HTML元素以id属性来设置id选择器，CSS中id选择器以#来定义。以下示例规则应用于元素属性id=”para1“:</p> 
  <pre><code class="prism language-bash"><span class="token comment">#para1</span>
<span class="token punctuation">{</span>
    text-align:center<span class="token punctuation">;</span>
    color:red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p><strong>ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。</strong></p> 
  <p>class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。class选择器在HTML中以class属性表示，在css中，类选择器以一个.号显示：</p> 
  <pre><code class="prism language-bash">.center <span class="token punctuation">{</span>text-align:center<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> 
  <p><strong>当然还可以这么用：多个class选择器可以使用空格分开：</strong><br> <a href="http://img.e-com-net.com/image/info8/e023c1fd99344cb2b266d1be0dd972f7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e023c1fd99344cb2b266d1be0dd972f7.jpg" alt="html、css学习记录【uniapp前奏】_第11张图片" width="650" height="236" style="border:1px solid black;"></a><br> CSS的一些常见常用属性：</p> 
  <h3>背景样式background 光看不练白瞎</h3> 
  <pre><code class="prism language-bash">　  background-color:<span class="token comment">#F5E2EC; /*背景颜色*/ </span>
　　background:transparent<span class="token punctuation">;</span> /*透视背景*/ 
　　background-image <span class="token builtin class-name">:</span> url<span class="token punctuation">(</span>/image/bg.gif<span class="token punctuation">)</span><span class="token punctuation">;</span> /*背景图片*/ 
　　background-attachment <span class="token builtin class-name">:</span> fixed<span class="token punctuation">;</span> /*浮水印固定背景*/ 
　　background-repeat <span class="token builtin class-name">:</span> repeat<span class="token punctuation">;</span> /*重复排列-网页默认*/ 
　　background-repeat <span class="token builtin class-name">:</span> no-repeat<span class="token punctuation">;</span> /*不重复排列*/ 
　　background-repeat <span class="token builtin class-name">:</span> repeat-x<span class="token punctuation">;</span> /*在x轴重复排列*/ 
　　background-repeat <span class="token builtin class-name">:</span> repeat-y<span class="token punctuation">;</span> /*在y轴重复排列*/ 
　　指定背景位置
　　background-position <span class="token builtin class-name">:</span> <span class="token number">90</span>% <span class="token number">90</span>%<span class="token punctuation">;</span> /*背景图片x与y轴的位置*/ 
　　background-position <span class="token builtin class-name">:</span> <span class="token function">top</span><span class="token punctuation">;</span> /*向上对齐*/ 
　　background-position <span class="token builtin class-name">:</span> buttom<span class="token punctuation">;</span> /*向下对齐*/ 
　　background-position <span class="token builtin class-name">:</span> left<span class="token punctuation">;</span> /*向左对齐*/ 
　　background-position <span class="token builtin class-name">:</span> right<span class="token punctuation">;</span> /*向右对齐*/ 
　　background-position <span class="token builtin class-name">:</span> center<span class="token punctuation">;</span> /*居中对齐*/

CSS3之后增加了：
	background-image   //CSS3中可以通过background-image属性添加背景图片 不同的背景图像和图像用逗号隔开，所有的图片中	显示在最顶端的为第一张。
	background-size   //background-size指定背景图像的大小。之前背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。
	background-origin  //指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像
	background-clip   //背景剪裁属性是从指定位置开始绘制。

———————————————————————————————————————————————————————————————————

</code></pre> 
  <h3>外边距margin 点一点</h3> 
  <pre><code class="prism language-bash">margin-top:100px<span class="token punctuation">;</span>
margin-bottom:100px<span class="token punctuation">;</span>
margin-right:50px<span class="token punctuation">;</span>
margin-left:50px<span class="token punctuation">;</span>
</code></pre> 
  <p>margin属性可以有一到四个值。</p> 
  <ul> 
   <li>margin:25px 50px 75px 100px;<br> 上边距为25px<br> 右边距为50px<br> 下边距为75px<br> 左边距为100px</li> 
   <li>margin:25px 50px 75px;<br> 上边距为25px<br> 左右边距为50px<br> 下边距为75px</li> 
   <li>margin:25px 50px;<br> 上下边距为25px<br> 左右边距为50px</li> 
   <li>margin:25px;<br> 所有的4个边距都是25px</li> 
  </ul> 
  <p><strong>还可以指定厘米：margin-top:2cm;<br> 还可以指定距离某一个控件有多远：margin-bottom:25%;</strong></p> 
  <h3>内边距padding 我是超超超链接</h3> 
  <p>Padding属性，可以有一到四个值。</p> 
  <ul> 
   <li>padding:25px 50px 75px 100px;<br> 上填充为25px<br> 右填充为50px<br> 下填充为75px<br> 左填充为100px</li> 
   <li>padding:25px 50px 75px;<br> 上填充为25px<br> 左右填充为50px<br> 下填充为75px</li> 
   <li>padding:25px 50px;<br> 上下填充为25px<br> 左右填充为50px</li> 
   <li>padding:25px;<br> 所有的填充都是25px</li> 
  </ul> 
  <p><strong>厘米和百分比它也支持的</strong></p> 
  <h3>文本样式Text TEXT</h3> 
  <p>添加颜色部分：</p> 
  <pre><code class="prism language-bash">body <span class="token punctuation">{</span>color:red<span class="token punctuation">;</span><span class="token punctuation">}</span>
h1 <span class="token punctuation">{</span>color:<span class="token comment">#00ff00;}</span>
h2 <span class="token punctuation">{</span>color:rgb<span class="token punctuation">(</span><span class="token number">255,0</span>,0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> 
  <ul> 
   <li><strong>text-align</strong>文本对齐方式：</li> 
  </ul> 
  <pre><code class="prism language-bash">h1 <span class="token punctuation">{</span>text-align:center<span class="token punctuation">;</span><span class="token punctuation">}</span>
p.date <span class="token punctuation">{</span>text-align:right<span class="token punctuation">;</span><span class="token punctuation">}</span>
p.main <span class="token punctuation">{</span>text-align:justify<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/65f40fd1ee52491d826ebc00cd18d223.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/65f40fd1ee52491d826ebc00cd18d223.jpg" alt="html、css学习记录【uniapp前奏】_第12张图片" width="650" height="213" style="border:1px solid black;"></a></p> 
  <ul> 
   <li><strong>text-decoration ：</strong> 属性用来设置或删除文本的装饰。</li> 
  </ul> 
  <pre><code class="prism language-bash">a <span class="token punctuation">{</span>text-decoration:none<span class="token punctuation">;</span><span class="token punctuation">}</span>//从设计的角度看 text-decoration属性主要是用来删除链接的下划线的

h1 <span class="token punctuation">{</span>text-decoration:overline<span class="token punctuation">;</span><span class="token punctuation">}</span>//字体头上有划线
h2 <span class="token punctuation">{</span>text-decoration:line-through<span class="token punctuation">;</span><span class="token punctuation">}</span>//字体中间有划线
h3 <span class="token punctuation">{</span>text-decoration:underline<span class="token punctuation">;</span><span class="token punctuation">}</span>//字体底部有下划线
</code></pre> 
  <p>大小写文本转换</p> 
  <pre><code class="prism language-bash">p.uppercase <span class="token punctuation">{</span>text-transform:uppercase<span class="token punctuation">;</span><span class="token punctuation">}</span> //THIS IS SOME TEXT.全部大写
p.lowercase <span class="token punctuation">{</span>text-transform:lowercase<span class="token punctuation">;</span><span class="token punctuation">}</span> //this is some text.全部小写
p.capitalize <span class="token punctuation">{</span>text-transform:capitalize<span class="token punctuation">;</span><span class="token punctuation">}</span> //This Is Some Text.首字母大写
</code></pre> 
  <ul> 
   <li><strong>text-indent</strong>文本缩进：</li> 
  </ul> 
  <pre><code class="prism language-bash">p <span class="token punctuation">{</span>text-indent:50px<span class="token punctuation">;</span><span class="token punctuation">}</span> //一段话第一行的缩进
</code></pre> 
  <p>小总结：</p> 
  <pre><code class="prism language-bash"> 序号 中文说明 标记语法 
　　<span class="token number">1</span> 行 间 距 <span class="token punctuation">{</span>line-height:数值<span class="token operator">|</span>inherit<span class="token operator">|</span>normal<span class="token punctuation">;</span><span class="token punctuation">}</span> 
　　<span class="token number">2</span> 文本修饰 <span class="token punctuation">{</span>text-decoration:inherit<span class="token operator">|</span>none<span class="token operator">|</span>underline<span class="token operator">|</span>overline<span class="token operator">|</span>line-through<span class="token operator">|</span>blink<span class="token punctuation">}</span> 
　　<span class="token number">3</span> 段首空格 <span class="token punctuation">{</span>text-indent:数值<span class="token operator">|</span>inherit<span class="token punctuation">}</span> 
　　<span class="token number">4</span> 水平对齐 <span class="token punctuation">{</span>text-align:left<span class="token operator">|</span>right<span class="token operator">|</span>center<span class="token operator">|</span>justify<span class="token punctuation">}</span> 
　　<span class="token number">5</span> 垂直对齐 <span class="token punctuation">{</span>vertical-align:inherit<span class="token operator">|</span><span class="token function">top</span><span class="token operator">|</span>bottom<span class="token operator">|</span>text-top<span class="token operator">|</span>text-bottom<span class="token operator">|</span>baseline<span class="token operator">|</span>middle<span class="token operator">|</span>sub<span class="token operator">|</span>super<span class="token punctuation">}</span> 
　　<span class="token number">6</span> 书写方式 <span class="token punctuation">{</span>writing-mode:lr-tb<span class="token operator">|</span>tb-rl<span class="token punctuation">}</span> 


    color <span class="token builtin class-name">:</span> <span class="token comment">#999999; /*文字颜色*/</span>
　　font-family <span class="token builtin class-name">:</span> 宋体,sans-serif<span class="token punctuation">;</span> /*文字字体*/ 
　　font-size <span class="token builtin class-name">:</span> 9pt<span class="token punctuation">;</span> /*文字大小*/ 
　　font-style:itelic<span class="token punctuation">;</span> /*文字斜体*/ 
　　font-variant:small-caps<span class="token punctuation">;</span> /*小字体*/ 
　　letter-spacing <span class="token builtin class-name">:</span> 1pt<span class="token punctuation">;</span> /*字间距离*/ 
　　line-height <span class="token builtin class-name">:</span> <span class="token number">200</span>%<span class="token punctuation">;</span> /*设置行高*/ 
　　font-weight:bold<span class="token punctuation">;</span> /*文字粗体*/ 
　　vertical-align:sub<span class="token punctuation">;</span> /*下标字*/ 
　　vertical-align:super<span class="token punctuation">;</span> /*上标字*/ 
　　text-decoration:line-through<span class="token punctuation">;</span> /*加删除线*/ 
　　text-decoration: overline<span class="token punctuation">;</span> /*加顶线*/ 
　　text-decoration:underline<span class="token punctuation">;</span> /*加下划线*/ 
　　text-decoration:none<span class="token punctuation">;</span> /*删除链接下划线*/ 
　　text-transform <span class="token builtin class-name">:</span> capitalize<span class="token punctuation">;</span> /*首字大写*/ 
　　text-transform <span class="token builtin class-name">:</span> uppercase<span class="token punctuation">;</span> /*英文大写*/ 
　　text-transform <span class="token builtin class-name">:</span> lowercase<span class="token punctuation">;</span> /*英文小写*/ 
　　text-align:right<span class="token punctuation">;</span> /*文字右对齐*/ 
　　text-align:left<span class="token punctuation">;</span> /*文字左对齐*/ 
　　text-align:center<span class="token punctuation">;</span> /*文字居中对齐*/ 
　　text-align:justify<span class="token punctuation">;</span> /*文字分散对齐*/ 
　　vertical-align属性
　　vertical-align:top<span class="token punctuation">;</span> /*垂直向上对齐*/ 
　　vertical-align:bottom<span class="token punctuation">;</span> /*垂直向下对齐*/ 
　　vertical-align:middle<span class="token punctuation">;</span> /*垂直居中对齐*/ 
　　vertical-align:text-top<span class="token punctuation">;</span> /*文字垂直向上对齐*/ 
　　vertical-align:text-bottom<span class="token punctuation">;</span> /*文字垂直向下对齐*/ 

————————————————-
小总结来自博客：【~heart将心比心】
原文链接：https://blog.csdn.net/qq_42412061/article/details/127691649 
</code></pre> 
  <p>CSS3之后新增的文本特性：</p> 
  <ul> 
   <li>text-shadow</li> 
   <li>box-shadow</li> 
   <li>text-overflow</li> 
   <li>word-wrap</li> 
   <li>word-break</li> 
  </ul> 
  <pre><code class="prism language-csharp">h1
<span class="token punctuation">{</span>
<span class="token comment">//指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色</span>
    text<span class="token operator">-</span>shadow<span class="token punctuation">:</span> 5px 5px 5px #FF0000<span class="token punctuation">;</span> 
<span class="token punctuation">}</span>

div <span class="token punctuation">{</span>
<span class="token comment">//CSS3 中 CSS3 box-shadow 属性适用于盒子阴影 有模糊效果</span>
    box<span class="token operator">-</span>shadow<span class="token punctuation">:</span> 10px 10px 5px #<span class="token number">888888</span><span class="token punctuation">;</span> 
<span class="token punctuation">}</span>
</code></pre> 
  <h3>边框 border 菜鸟网站的boder</h3> 
  <p><strong>1，定义边框的大样式</strong>：</p> 
  <pre><code class="prism language-bash">p.none <span class="token punctuation">{</span>border-style:none<span class="token punctuation">;</span><span class="token punctuation">}</span> //无边框
p.dotted <span class="token punctuation">{</span>border-style:dotted<span class="token punctuation">;</span><span class="token punctuation">}</span> //点虚线边框
p.dashed <span class="token punctuation">{</span>border-style:dashed<span class="token punctuation">;</span><span class="token punctuation">}</span> //粗虚线边框
p.solid <span class="token punctuation">{</span>border-style:solid<span class="token punctuation">;</span><span class="token punctuation">}</span>  //实线边框
p.double <span class="token punctuation">{</span>border-style:double<span class="token punctuation">;</span><span class="token punctuation">}</span>  //双边框
p.groove <span class="token punctuation">{</span>border-style:groove<span class="token punctuation">;</span><span class="token punctuation">}</span> //凹槽边框
p.ridge <span class="token punctuation">{</span>border-style:ridge<span class="token punctuation">;</span><span class="token punctuation">}</span> //垄状边框
p.inset <span class="token punctuation">{</span>border-style:inset<span class="token punctuation">;</span><span class="token punctuation">}</span>  //嵌入边框
p.outset <span class="token punctuation">{</span>border-style:outset<span class="token punctuation">;</span><span class="token punctuation">}</span> //外凸边框
p.hidden <span class="token punctuation">{</span>border-style:hidden<span class="token punctuation">;</span><span class="token punctuation">}</span> //隐藏边框
p.mix <span class="token punctuation">{</span>border-style: dotted dashed solid double<span class="token punctuation">;</span><span class="token punctuation">}</span> //混合边框
</code></pre> 
  <p>展示一下UI显示：<br> <a href="http://img.e-com-net.com/image/info8/b5b5575a58bd4e7eaa4e930e4ce42029.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b5b5575a58bd4e7eaa4e930e4ce42029.jpg" alt="html、css学习记录【uniapp前奏】_第13张图片" width="650" height="250" style="border:1px solid black;"></a><br> <strong>2，边框的宽度</strong> ： border-width</p> 
  <pre><code class="prism language-bash">// thick , medium , thin

p.one
<span class="token punctuation">{</span>
    border-style:solid<span class="token punctuation">;</span>
    border-width:5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
p.two
<span class="token punctuation">{</span>
    border-style:solid<span class="token punctuation">;</span>
    border-width:medium<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p><strong>3,边框颜色</strong> ：border-color</p> 
  <pre><code class="prism language-bash">p.one
<span class="token punctuation">{</span>
    border-style:solid<span class="token punctuation">;</span>
    border-color:red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
p.two
<span class="token punctuation">{</span>
    border-style:solid<span class="token punctuation">;</span>
    border-color:<span class="token comment">#98bf21;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>1中边框的样式也可以各设各的：</p> 
  <pre><code class="prism language-bash">border-style属性可以有1-4个值：

 - <span class="token number">1</span>，border-style:dotted solid double dashed<span class="token punctuation">;</span>
		上边框是 dotted
		右边框是 solid
		底边框是 double
		左边框是 dashed
 - <span class="token number">2</span>，border-style:dotted solid double<span class="token punctuation">;</span>
		上边框是 dotted
		左、右边框是 solid
		底边框是 double
 - <span class="token number">3</span>，border-style:dotted solid<span class="token punctuation">;</span>
		上、底边框是 dotted
		右、左边框是 solid
 - <span class="token number">4</span>，border-style:dotted<span class="token punctuation">;</span>
		四面边框是 dotted

各设各的就是这样：
<span class="token operator"><</span>style<span class="token operator">></span>
p
<span class="token punctuation">{</span>
    border-top-style:dotted<span class="token punctuation">;</span>
    border-right-style:solid<span class="token punctuation">;</span>
    border-bottom-style:dotted<span class="token punctuation">;</span>
    border-left-style:solid<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span>/style<span class="token operator">></span>
</code></pre> 
  <h3>尺寸（Dimension）Dimension常用属性</h3> 
  <pre><code class="prism language-bash">属性				描述
height			设置元素的高度。
line-height		设置行高。
max-height		设置元素的最大高度。
max-width		设置元素的最大宽度。
min-height		设置元素的最小高度。
min-width		设置元素的最小宽度。
width			设置元素的宽度。
</code></pre> 
  <h3>展示Display与可见性Visibility 占不占空间与android里的visibility属性</h3> 
  <p>display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。</p> 
  <p><em>跟安卓布局文件里的none invisibility的区别是一样的！</em><br> <strong>隐藏元素 - display:none或visibility:hidden</strong><br> 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。</p> 
  <pre><code class="prism language-bash">display:none<span class="token punctuation">;</span>  //隐藏控件且不占空间
visibility:hidden<span class="token punctuation">;</span>  //控件不可见 但是还在原地
display:inline<span class="token punctuation">;</span> //把原有的展示在一行
display:block<span class="token punctuation">;</span>  //把原有的块儿给展开
</code></pre> 
  <h3>Overflow 有滚动条的scrollview Overflow</h3> 
  <pre><code class="prism language-bash">div <span class="token punctuation">{</span>
    width: 200px<span class="token punctuation">;</span>
    height: 50px<span class="token punctuation">;</span>
    background-color: <span class="token comment">#eee;</span>
    overflow: scroll<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p><strong>CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。</strong></p> 
  <p><mark>overflow属性有以下值：</mark></p> 
  <table> 
   <thead> 
    <tr> 
     <th>值</th> 
     <th>描述</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>visible</td> 
     <td>默认值。内容不会被修剪，会呈现在元素框之外。</td> 
    </tr> 
    <tr> 
     <td>hidden</td> 
     <td>内容会被修剪，并且其余内容是不可见的。</td> 
    </tr> 
    <tr> 
     <td>scroll</td> 
     <td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</td> 
    </tr> 
    <tr> 
     <td>auto</td> 
     <td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td> 
    </tr> 
    <tr> 
     <td>inherit</td> 
     <td>规定应该从父元素继承 overflow 属性的值。</td> 
    </tr> 
   </tbody> 
  </table> 
  <h3>Float浮动 Float浮动链接</h3> 
  <p>可以理解为word文本里图片插入字符时的几种状况，会随着窗口变化。</p> 
  <pre><code class="prism language-bash">.类名 
<span class="token punctuation">{</span>
  <span class="token operator">==</span>  float:left<span class="token punctuation">;</span>  <span class="token operator">==</span>
    width:110px<span class="token punctuation">;</span>
    height:90px<span class="token punctuation">;</span>
    margin:5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。</p> 
  <p>clear 属性指定元素两侧不能出现浮动元素。</p> 
  <pre><code class="prism language-bash">.text_line
<span class="token punctuation">{</span>
    clear:both<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>像这样：<br> <a href="http://img.e-com-net.com/image/info8/410b6b7d393a49a79b7b574647da7060.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/410b6b7d393a49a79b7b574647da7060.jpg" alt="html、css学习记录【uniapp前奏】_第14张图片" width="650" height="342" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/6200e5f2dda149eaa697b1dd5a794048.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6200e5f2dda149eaa697b1dd5a794048.jpg" alt="html、css学习记录【uniapp前奏】_第15张图片" width="650" height="444" style="border:1px solid black;"></a></p> 
  <p><strong>CSS3边框</strong><br> border-radius： 圆角边框<br> box-shadow：阴影属性<br> border-image： 允许你指定一个图片作为边框</p> 
  <pre><code class="prism language-bash"> border-radius: 50px 20px<span class="token punctuation">;</span> //如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角
 border-radius:25px<span class="token punctuation">;</span>//四个角都是圆形
</code></pre> 
  <table> 
   <thead> 
    <tr> 
     <th>属性</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>border-image</td> 
     <td>设置所有边框图像的速记属性。</td> 
    </tr> 
    <tr> 
     <td>border-radius</td> 
     <td>一个用于设置所有四个边框- *-半径属性的速记属性</td> 
    </tr> 
    <tr> 
     <td>box-shadow</td> 
     <td>附加一个或多个下拉框的阴影</td> 
    </tr> 
   </tbody> 
  </table> 
  <h3>CSS圆角border-radius border-radius圆角属性</h3> 
  <pre><code class="prism language-css"><span class="token selector">#rcorners1</span> <span class="token punctuation">{</span>  
   <span class="token property">border-radius</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>    
   <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span>  
   <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>     
   <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>  
   <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> 
   <span class="token punctuation">}</span>
<span class="token selector">#rcorners2</span> <span class="token punctuation">{</span>    
   <span class="token property">border-radius</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> 
   <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #8AC007<span class="token punctuation">;</span>    
   <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>  
   <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>    
   <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>   
   <span class="token punctuation">}</span>
 <span class="token selector">#rcorners3</span> <span class="token punctuation">{</span>    
   <span class="token property">border-radius</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>  
   <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>paper.gif<span class="token punctuation">)</span></span><span class="token punctuation">;</span>    
   <span class="token property">background-position</span><span class="token punctuation">:</span> left top<span class="token punctuation">;</span>
   <span class="token property">background-repeat</span><span class="token punctuation">:</span>  repeat<span class="token punctuation">;</span> 
   <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>  
   <span class="token property">width</span><span class="token punctuation">:</span>   200px<span class="token punctuation">;</span>  
   <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>  
    <span class="token punctuation">}</span>
</code></pre> 
  <p>CSS3 border-radius - 指定每个圆角<br> 如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。<br> 但是，如果你要在四个角上一一指定，可以使用以下规则：</p> 
  <ul> 
   <li>四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。</li> 
   <li>三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角</li> 
   <li>两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角</li> 
   <li>一个值： 四个圆角值相同</li> 
  </ul> 
  <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>菜鸟教程(runoob.com)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> 
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> 
<span class="token selector">#rcorners4</span> <span class="token punctuation">{</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 15px 50px 30px 5px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> 
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> 
<span class="token punctuation">}</span>

<span class="token selector">#rcorners5</span> <span class="token punctuation">{</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 15px 50px 30px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> 
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> 
<span class="token punctuation">}</span>

<span class="token selector">#rcorners6</span> <span class="token punctuation">{</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 15px 50px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> 
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> 
<span class="token punctuation">}</span> 
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>四个值 - border-radius: 15px 50px 30px 5px:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>三个值 - border-radius: 15px 50px 30px:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>两个值 - border-radius: 15px 50px:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre> 
  <p>效果图：<br> <a href="http://img.e-com-net.com/image/info8/98c866e843284459890292e8cab7f537.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/98c866e843284459890292e8cab7f537.jpg" alt="html、css学习记录【uniapp前奏】_第16张图片" width="379" height="734" style="border:1px solid black;"></a><br> 还有椭圆形的：</p> 
  <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>菜鸟教程(runoob.com)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> 
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> 
<span class="token selector">#rcorners7</span> <span class="token punctuation">{</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 50px/15px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> 
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> 
<span class="token punctuation">}</span>
<span class="token selector">#rcorners8</span> <span class="token punctuation">{</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 15px/50px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> 
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> 
<span class="token punctuation">}</span>

<span class="token selector">#rcorners9</span> <span class="token punctuation">{</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> 
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
<span class="token punctuation">}</span> 
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>椭圆边框 - border-radius: 50px/15px:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 椭圆边框 - border-radius: 15px/50px:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>椭圆边框 - border-radius: 50%:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/a416601164674c22849b603728710c3e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a416601164674c22849b603728710c3e.jpg" alt="html、css学习记录【uniapp前奏】_第17张图片" width="301" height="665" style="border:1px solid black;"></a><br> 小总结：</p> 
  <table> 
   <thead> 
    <tr> 
     <th>属性</th> 
     <th>描述</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>border-radius</td> 
     <td>所有四个边角 border-<em>-</em>-radius 属性的缩写</td> 
    </tr> 
    <tr> 
     <td>border-top-left-radius</td> 
     <td>定义了左上角的弧度</td> 
    </tr> 
    <tr> 
     <td>border-top-right-radius</td> 
     <td>定义了右上角的弧度</td> 
    </tr> 
    <tr> 
     <td>border-bottom-right-radius</td> 
     <td>定义了右下角的弧度</td> 
    </tr> 
    <tr> 
     <td>border-bottom-left-radius</td> 
     <td>定义了左下角的弧度</td> 
    </tr> 
   </tbody> 
  </table> 
  <hr> 
  <h3>CSS3中的渐变 渐变：Gradients</h3> 
  <p>下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p> 
  <pre><code class="prism language-html">#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}
</code></pre> 
  <ul> 
   <li>线性渐变 - 从左到右<br> 下面的实例演示了<strong>从左边开始的线性渐变</strong>。起点是红色，慢慢过渡到黄色：</li> 
  </ul> 
  <pre><code class="prism language-html">#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}
</code></pre> 
  <ul> 
   <li>线性渐变 - 对角<br> 你可以通过指定水平和垂直的起始位置来制作一个对角渐变。<br> 下面的实例演示了<strong>从左上角开始</strong>（<strong>到右下角</strong>）的线性渐变。起点是红色，慢慢过渡到黄色：</li> 
  </ul> 
  <pre><code class="prism language-html">#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}
</code></pre> 
  <ul> 
   <li>使用角度<br> 如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。</li> 
  </ul> 
  <pre><code class="prism language-html">background-image: linear-gradient(angle, color-stop1, color-stop2);
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/08e5de033a284f899c3f65306dfda244.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/08e5de033a284f899c3f65306dfda244.jpg" alt="html、css学习记录【uniapp前奏】_第18张图片" width="364" height="303" style="border:1px solid black;"></a><br> 但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。<br> 下面的实例演示了如何在线性渐变上使用角度：<br> <a href="http://img.e-com-net.com/image/info8/ebc026ff396848b2a3766d32271c9ba0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ebc026ff396848b2a3766d32271c9ba0.jpg" alt="html、css学习记录【uniapp前奏】_第19张图片" width="650" height="196" style="border:1px solid black;"></a><br> 当然也可以创建多个颜色节点：</p> 
  <pre><code class="prism language-csharp"><span class="token preprocessor property">#grad {</span>
  background<span class="token operator">-</span>image<span class="token punctuation">:</span> linear<span class="token operator">-</span><span class="token function">gradient</span><span class="token punctuation">(</span>red<span class="token punctuation">,</span> yellow<span class="token punctuation">,</span> green<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token preprocessor property">#grad {</span>
  <span class="token comment">/* 标准的语法 */</span>
  background<span class="token operator">-</span>image<span class="token punctuation">:</span> linear<span class="token operator">-</span><span class="token function">gradient</span><span class="token punctuation">(</span><span class="token class-name">to</span> right<span class="token punctuation">,</span> red<span class="token punctuation">,</span>orange<span class="token punctuation">,</span>yellow<span class="token punctuation">,</span>green<span class="token punctuation">,</span>blue<span class="token punctuation">,</span>indigo<span class="token punctuation">,</span>violet<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p><strong>像下面这样：</strong><br> <a href="http://img.e-com-net.com/image/info8/e3b31cf397594eb7b5ae91bead12a9e5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e3b31cf397594eb7b5ae91bead12a9e5.jpg" alt="html、css学习记录【uniapp前奏】_第20张图片" width="650" height="231" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>使用透明度（transparent）<br> CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。<br> 为了添加透明度，我们使用 <strong>rgba() 函数</strong>来定义颜色节点。<strong>rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明</strong>。</li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector">#grad</span> <span class="token punctuation">{</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/84651a195e7b4635ae2c2d92ffb5ef5c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/84651a195e7b4635ae2c2d92ffb5ef5c.jpg" alt="html、css学习记录【uniapp前奏】_第21张图片" width="650" height="161" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>一个重复的线性渐变：</li> 
  </ul> 
  <pre><code class="prism language-csharp"><span class="token preprocessor property">#grad {</span>
  <span class="token comment">/* 标准的语法 */</span>
  background<span class="token operator">-</span>image<span class="token punctuation">:</span> repeating<span class="token operator">-</span>linear<span class="token operator">-</span><span class="token function">gradient</span><span class="token punctuation">(</span>red<span class="token punctuation">,</span> yellow <span class="token number">10</span><span class="token operator">%</span><span class="token punctuation">,</span> green <span class="token number">20</span><span class="token operator">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>圆形渐变radial-gradient：略。。。。</p> 
  <h3>按钮 按钮的各种效果</h3> 
  <ul> 
   <li>按钮的样式：</li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector"><style>
.button</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>
----------------------------------------------------------------------------------------
<button>默认按钮</button>
<a href=<span class="token string">"#"</span> class=<span class="token string">"button"</span>>链接按钮</a>
<button class=<span class="token string">"button"</span>>按钮</button>
<input type=<span class="token string">"button"</span> class=<span class="token string">"button"</span> value=<span class="token string">"输入框按钮"</span>>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/7336bcf0be80402da1d4c73bf3fbac40.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7336bcf0be80402da1d4c73bf3fbac40.jpg" alt="html、css学习记录【uniapp前奏】_第22张图片" width="507" height="139" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>按钮颜色</li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector"><style>
.button</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* 绿色 */</span>
    <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.button2</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #008CBA<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 蓝色 */</span>
<span class="token selector">.button3</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #f44336<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 红色 */</span>
<span class="token selector">.button4</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #e7e7e7<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 灰色 */</span>
<span class="token selector">.button5</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #555555<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 黑色 */</span>
</style>
-----------------------------------------------------------------------------------------
<button class=<span class="token string">"button"</span>>Green</button>
<button class=<span class="token string">"button button2"</span>>Blue</button>
<button class=<span class="token string">"button button3"</span>>Red</button>
<button class=<span class="token string">"button button4"</span>>Gray</button>
<button class=<span class="token string">"button button5"</span>>Black</button>

</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/d2e9e41257554441ba362fa2fef59cd9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d2e9e41257554441ba362fa2fef59cd9.jpg" alt="html、css学习记录【uniapp前奏】_第23张图片" width="605" height="196" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>按钮大小</li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector"><style>
.button</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span>
    <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.button1</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.button2</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.button3</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.button4</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.button5</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span><span class="token punctuation">}</span>
</style>
---------------------------------------------------------------------------------------
<button class=<span class="token string">"button button1"</span>>10px</button>
<button class=<span class="token string">"button button2"</span>>12px</button>
<button class=<span class="token string">"button button3"</span>>16px</button>
<button class=<span class="token string">"button button4"</span>>20px</button>
<button class=<span class="token string">"button button5"</span>>24px</button>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/ea5c20063b864853ace506cd7eda62f4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ea5c20063b864853ace506cd7eda62f4.jpg" alt="html、css学习记录【uniapp前奏】_第24张图片" width="650" height="171" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>圆角按钮</li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector"><style>
.button</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span>
    <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.button1</span> <span class="token punctuation">{</span><span class="token property">border-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.button2</span> <span class="token punctuation">{</span><span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.button3</span> <span class="token punctuation">{</span><span class="token property">border-radius</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.button4</span> <span class="token punctuation">{</span><span class="token property">border-radius</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.button5</span> <span class="token punctuation">{</span><span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><span class="token punctuation">}</span>
</style>

-------------------------------------------------------------------------------------
<button class=<span class="token string">"button button1"</span>>2px</button>
<button class=<span class="token string">"button button2"</span>>4px</button>
<button class=<span class="token string">"button button3"</span>>8px</button>
<button class=<span class="token string">"button button4"</span>>12px</button>
<button class=<span class="token string">"button button5"</span>>50%</button>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/8c50ccaa53e24de88b8568dc5986ef1f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8c50ccaa53e24de88b8568dc5986ef1f.jpg" alt="html、css学习记录【uniapp前奏】_第25张图片" width="650" height="184" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>按钮边框</li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector"><style>
.button</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span>
    <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.button1</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> 
    <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> 
    <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #4CAF50<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.button2</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> 
    <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> 
    <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #008CBA<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.button3</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> 
    <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> 
    <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #f44336<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.button4</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #e7e7e7<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.button5</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #555555<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>

---------------------------------------------------------------------------------------
<button class=<span class="token string">"button button1"</span>>Green</button>
<button class=<span class="token string">"button button2"</span>>Blue</button>
<button class=<span class="token string">"button button3"</span>>Red</button>
<button class=<span class="token string">"button button4"</span>>Gray</button>
<button class=<span class="token string">"button button5"</span>>Black</button>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/d611c6b4fada403ab68ab1bd502af3f9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d611c6b4fada403ab68ab1bd502af3f9.jpg" alt="html、css学习记录【uniapp前奏】_第26张图片" width="650" height="137" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>按钮阴影</li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector"><style>
.button</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span>
    <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
    <span class="token property">-webkit-transition-duration</span><span class="token punctuation">:</span> 0.4s<span class="token punctuation">;</span> <span class="token comment">/* Safari */</span>
    <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.4s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.button1</span> <span class="token punctuation">{</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 8px 16px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.2<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 6px 20px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.19<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">//hover 这个是有悬停阴影效果的
.button2:hover</span> <span class="token punctuation">{</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 12px 16px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.24<span class="token punctuation">)</span><span class="token punctuation">,</span>0 17px 50px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.19<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>
-------------------------------------------------------------------------------------------
<button class=<span class="token string">"button button1"</span>>阴影按钮</button>
<button class=<span class="token string">"button button2"</span>>鼠标悬停后出现阴影</button>
</code></pre> 
  <p>效果：<br> <a href="http://img.e-com-net.com/image/info8/7274d5989fe14d3fac1aadc227c9e337.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7274d5989fe14d3fac1aadc227c9e337.jpg" alt="html、css学习记录【uniapp前奏】_第27张图片" width="605" height="199" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>禁用按钮</li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector"><style>
.button</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span>
    <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.disabled</span> <span class="token punctuation">{</span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 0.6<span class="token punctuation">;</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> not-allowed<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>

-------------------------------------------------------------------------------------
<button class=<span class="token string">"button"</span>>正常按钮</button>
<button class=<span class="token string">"button disabled"</span>>禁用按钮</button>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/fb9eb76f80da472ab114cefcedf00f2a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fb9eb76f80da472ab114cefcedf00f2a.jpg" alt="html、css学习记录【uniapp前奏】_第28张图片" width="530" height="182" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>按钮宽度</li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector"><style>
.button</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span>
    <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.button1</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.button2</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.button3</span> <span class="token punctuation">{</span>
    <span class="token property">padding-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">padding-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/a0c1d3153c6748bbbb24aefe84c07ea3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a0c1d3153c6748bbbb24aefe84c07ea3.jpg" alt="html、css学习记录【uniapp前奏】_第29张图片" width="650" height="275" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>按钮组</li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector"><style>
.button</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span>
    <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
    <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.button:hover</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #3e8e41<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>

-----------------------------------------------------------------------------------------
<button class=<span class="token string">"button"</span>>Button</button>
<button class=<span class="token string">"button"</span>>Button</button>
<button class=<span class="token string">"button"</span>>Button</button>
<button class=<span class="token string">"button"</span>>Button</button>

</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/fc606162b6b94f82b75aa8173751d1a3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fc606162b6b94f82b75aa8173751d1a3.jpg" alt="html、css学习记录【uniapp前奏】_第30张图片" width="530" height="141" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>带边框按钮组</li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector">.button</span> <span class="token punctuation">{</span>
    <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid green
<span class="token punctuation">}</span>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/a6a851379f324e319f6e7709d07078ae.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a6a851379f324e319f6e7709d07078ae.jpg" alt="html、css学习记录【uniapp前奏】_第31张图片" width="513" height="120" style="border:1px solid black;"></a></p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1707523450291171328"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Web前端,前端知识学习,html,css,学习,uniapp基础)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1943258945300787200.htm"
                           title="想转行网络安全，可以先看看过来人的建议" target="_blank">想转行网络安全，可以先看看过来人的建议</a>
                        <span class="text-muted">孤独的汤姆</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a>
                        <div>在当前就业形势下，不少朋友面临转行的困境。网络安全作为一个热门领域，自然也吸引了许多人的目光。本文将就转行网络安全这一话题，提供一些切实可行的建议。网络安全行业概况网络安全涵盖了从基础的脚本编写到高级的漏洞研究等多个层面。该领域包括但不限于：渗透测试、漏洞评估、恶意软件分析、入侵检测、信息安全管理等。这些内容的复杂性不一，从基础的安全监控到复杂的安全架构设计都涉及其中。这就意味着，尽管有些领域可能</div>
                    </li>
                    <li><a href="/article/1943258818959962112.htm"
                           title="MySQL窗口函数学习" target="_blank">MySQL窗口函数学习</a>
                        <span class="text-muted">小菜0-o</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>视频链接基本语法窗口限定一个范围，它可以理解为满足某些条件的记录集合，窗口函数也就是在窗口范围内执行的函数。基本语法窗口函数有over关键字，指定函数执行的范围，可分为三部分:分组子句(partitionby)，排序子句(orderby)，窗口子句(rows)over(partitionbyorderbyrowsbetweenand)窗口函数适用于在不破坏原有表结构的基础上，新增一列窗口的确定分组</div>
                    </li>
                    <li><a href="/article/1943258314733318144.htm"
                           title="TypeScript" target="_blank">TypeScript</a>
                        <span class="text-muted">两年半.倸枸</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>一、简介1、TS是什么？以JS为基础构建的语言，一个JS的超集。可以在任何支持JS的平台中执行；TS扩展了JS，并添加了类型；TS不能被JS解析器直接执行，需要将TS编译为JS；2、TS增加了什么增加了类型、支持ES新特性、添加了ES不具备的新特性、配置选项。二、环境搭建1、安装Node.js2、安装TS：npmi-gtypescript3、创建一个TS文件4、使用TSC对TS文件进行编译：tsc</div>
                    </li>
                    <li><a href="/article/1943257432801210368.htm"
                           title="MySQL事务实现原理" target="_blank">MySQL事务实现原理</a>
                        <span class="text-muted">巴里巴气</span>
<a class="tag" taget="_blank" href="/search/MySQL%E7%9F%A5%E8%AF%86%E8%AE%B0%E5%BD%95/1.htm">MySQL知识记录</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                        <div>目录MySQL事务介绍事务基础及其实现原理回滚日志MVCC多版本并发控制事务的特性多个事务同时执行出现的三种现象四种隔离级别及其实现原理尽量不要使用长事务MySQL事务介绍要保证⼀组数据库操作，要么全部成功，要么全部失败事务是在存储引擎层实现的,MySQL是支持多存储引擎的系统,不是所有的存储引擎都支持事务,目前最常用的存储引擎InnoDB是支持事务的事务基础及其实现原理回滚日志回滚日志是一种用于</div>
                    </li>
                    <li><a href="/article/1943256296887218176.htm"
                           title="大模型——什么是 Vibe Coding？从零开始学习 AI 辅助编程" target="_blank">大模型——什么是 Vibe Coding？从零开始学习 AI 辅助编程</a>
                        <span class="text-muted">不二人生</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/%E8%BE%85%E5%8A%A9%E7%BC%96%E7%A8%8B/1.htm">辅助编程</a>
                        <div>大模型——什么是VibeCoding？从零开始学习AI辅助编程VibeCoding：代码消失，直觉驱动的软件开发新浪潮？生成式人工智能的指数级增长正不断重塑各个行业，软件开发领域也不例外。大约在2025年初，一股源自美国硅谷的新思潮开始引起关注：开发者似乎可以借助AI工具，在几乎不直接编写代码的情况下构建产品。这种依赖直觉、跳脱传统编码苦役的开发方式，被赋予了一个颇具时代感的名字——VibeCod</div>
                    </li>
                    <li><a href="/article/1943256170558976000.htm"
                           title="CMake基础：条件判断详解" target="_blank">CMake基础：条件判断详解</a>
                        <span class="text-muted"></span>

                        <div>目录1.简介2.核心判断类型及示例2.1.变量相关判断2.2.数值判断2.3.文件/路径判断2.4.目标/组件判断2.5.系统与编译器判断2.6.逻辑组合（与/或/非）2.7.括号分组（优先级控制）2.8.判断某个元素是否在列表中3.常见实用场景4.注意事项相关链接1.简介CMake的条件判断是通过if()/elseif()/else()/endif()结构实现流程控制的核心，常用于根据环境、配置</div>
                    </li>
                    <li><a href="/article/1943255540025061376.htm"
                           title="Gemini vs DeepSeek：Transformer 架构下的技术路线差异与企业级选择" target="_blank">Gemini vs DeepSeek：Transformer 架构下的技术路线差异与企业级选择</a>
                        <span class="text-muted">charles666666</span>
<a class="tag" taget="_blank" href="/search/transformer/1.htm">transformer</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><a class="tag" taget="_blank" href="/search/%E4%BA%A7%E5%93%81%E7%BB%8F%E7%90%86/1.htm">产品经理</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
                        <div>一、引言：从商业价值切入Gemini和DeepSeek都基于Transformer架构，但在技术路线和应用场景上各有侧重。本文将解密同源Transformer下的技术分野，帮助企业做出更明智的大模型选型决策。二、Transformer核心机制精要Transformer架构是现代大语言模型的基础，其核心机制包括自注意力机制和前馈神经网络。自注意力机制使模型能够捕捉序列中元素的全局依赖关系，但也是GP</div>
                    </li>
                    <li><a href="/article/1943255035660005376.htm"
                           title="Redis 分布式锁实现与实践" target="_blank">Redis 分布式锁实现与实践</a>
                        <span class="text-muted">佑瞻</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E4%B8%8E%E7%9F%A5%E8%AF%86%E5%9B%BE%E8%B0%B1/1.htm">数据库与知识图谱</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                        <div>在分布式系统架构中，多个独立进程对共享资源的并发访问控制是常见需求，分布式锁作为解决这一问题的关键技术，在缓存更新、任务调度、库存管理等场景中发挥着重要作用。本文将从基础原理出发，详细阐述基于Redis的分布式锁实现方案，包括单实例模式与Redlock算法，并探讨其在实际应用中的关键考量。分布式锁核心概念分布式锁是一种跨进程、跨机器的同步机制，用于保证多个分布式节点对共享资源的互斥访问。一个可靠的</div>
                    </li>
                    <li><a href="/article/1943254153493016576.htm"
                           title="【无标题】Python ---Day2 复合类型之序列类型、映射类型和集合类型的学习！！！" target="_blank">【无标题】Python ---Day2 复合类型之序列类型、映射类型和集合类型的学习！！！</a>
                        <span class="text-muted"></span>

                        <div>系列文章目录文章目录系列文章目录前言一、复合类型初识1.1列表类型1.1.1列表创建1.1.2列表运算1.1.3列表访问1.1.3.1索引1.1.3.2反向索引1.1.3.3切片1.1.4列表操作1.1.4.1添加数据1.1.4.2修改数据1.1.4.3删除数据1.2元组类型1.2.1元组创建1.2.2元组操作1.2.2.2查看元组1.2.2.3解包技能1.2.3元组运算1.2.4元组不可变二、映</div>
                    </li>
                    <li><a href="/article/1943253775326179328.htm"
                           title="脑电分析入门指南：信号处理、特征提取与机器学习" target="_blank">脑电分析入门指南：信号处理、特征提取与机器学习</a>
                        <span class="text-muted">Ao000000</span>
<a class="tag" taget="_blank" href="/search/%E4%BF%A1%E5%8F%B7%E5%A4%84%E7%90%86/1.htm">信号处理</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
                        <div>脑电分析入门指南一、为什么要研究脑电1.课题目标（解决什么问题）2.输入与输出二、脑电分析的整体流程三、每一步详解1.数据采集2.预处理3.特征提取4.特征选择/降维5.分类与识别四、研究过程中遇到的挑战与解决方法五、学习感受一、为什么要研究脑电1.课题目标（解决什么问题）本课题旨在通过对脑电（EEG）的采集与分析，提取有用的神经信息，实现对某类脑状或行为的识别/预测/评估。例如：情绪识别、疾病诊</div>
                    </li>
                    <li><a href="/article/1943250751207829504.htm"
                           title="java组件化设计_构建之路—谈谈组件化后端构建和实现" target="_blank">java组件化设计_构建之路—谈谈组件化后端构建和实现</a>
                        <span class="text-muted"></span>

                        <div>前言这一篇文章，准备了很久，构思了很久，草稿了很久。从个人编程至今，历经了C，C++，Java，到现如今的NodeJS。也后端到前端，再回到后端。更从学校里的学生信息管理系统到大型商业系统构建，是的，我曾一直以为编程也就是如此了，由瀑布模型，敏捷开发，设计模式等等组成的软件工程大致就是如此了。相信可能很多人也会有和我类似的想法，是否也都曾迷茫过？幸运的是，伴随着对前端的接触和深入，云雾散开。前端组</div>
                    </li>
                    <li><a href="/article/1943250624887975936.htm"
                           title="【动手学深度学习】4.10 实战Kaggle比赛：预测房价" target="_blank">【动手学深度学习】4.10 实战Kaggle比赛：预测房价</a>
                        <span class="text-muted">XiaoJ1234567</span>
<a class="tag" taget="_blank" href="/search/%E3%80%8A%E5%8A%A8%E6%89%8B%E5%AD%A6%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0%E3%80%8B/1.htm">《动手学深度学习》</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
                        <div>目录4.10实战Kaggle比赛：预测房价1）数据预处理2）模型定义与训练3）模型评估与预测4）模型训练与预测提交5）示例超参数（可调）4.10实战Kaggle比赛：预测房价数据来源：Kaggle房价预测比赛.1）数据预处理读取数据importpandasaspdtrain_data=pd.read_csv('../data/kaggle_house_pred_train.csv')test_da</div>
                    </li>
                    <li><a href="/article/1943249869019869184.htm"
                           title="【机器学习-08】参数调优宝典：网格搜索与贝叶斯搜索等攻略" target="_blank">【机器学习-08】参数调优宝典：网格搜索与贝叶斯搜索等攻略</a>
                        <span class="text-muted">云天徽上</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
                        <div>博主简介：曾任某智慧城市类企业算法总监，目前在美国市场的物流公司从事高级算法工程师一职，深耕人工智能领域，精通python数据挖掘、可视化、机器学习等，发表过AI相关的专利并多次在AI类比赛中获奖。CSDN人工智能领域的优质创作者，提供AI相关的技术咨询、项目开发和个性化解决方案等服务，如有需要请站内私信或者联系任意文章底部的的VX名片（ID：xf982831907）博主粉丝群介绍：①群内初中生、</div>
                    </li>
                    <li><a href="/article/1943248985909161984.htm"
                           title="PPT 图形制作神器推荐：从基础到 AI 的高效工具指南" target="_blank">PPT 图形制作神器推荐：从基础到 AI 的高效工具指南</a>
                        <span class="text-muted"></span>

                        <div>在当今信息飞速传播的时代，PPT已成为展示观点、传递信息的重要媒介。一份出色的PPT，不仅要有清晰的逻辑和丰富的内容，美观且直观的图形更是吸引观众注意力、提升信息传达效率的关键。无论是商务汇报中展示数据趋势的图表，还是教学课件里解释概念的示意图，恰当的PPT图形都能让演示效果事半功倍。那么，如何高效地生成这些助力PPT出彩的图形呢？接下来，我们将深入探讨多种实用方法，并着重为您推荐功能强大的Pic</div>
                    </li>
                    <li><a href="/article/1943248859576725504.htm"
                           title="前端如何实现大文件上传" target="_blank">前端如何实现大文件上传</a>
                        <span class="text-muted">行云＆流水</span>
<a class="tag" taget="_blank" href="/search/Vue3/1.htm">Vue3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一、基础技术实现文件分片（切片上传）将大文件按固定大小（如2MB/片）切割为多个Blob分片，通过file.slice()实现。优势：避免单次请求超时，支持断点续传。并发控制与异步上传使用Promise.all控制并发，避免浏览器请求阻塞。关键点：上传失败需自动重试。代码实现切片上传importaxiosfrom"axios";import{onMounted}from"vue";function</div>
                    </li>
                    <li><a href="/article/1943248858679144448.htm"
                           title="KTO（Kahneman-Tversky Optimization）技术详解与工程实现" target="_blank">KTO（Kahneman-Tversky Optimization）技术详解与工程实现</a>
                        <span class="text-muted">DK_Allen</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/KTO/1.htm">KTO</a>
                        <div>KTO（Kahneman-TverskyOptimization）技术详解与工程实现一、KTO核心思想KTO是基于行为经济学前景理论（ProspectTheory）的偏好优化方法，突破传统偏好学习需要成对数据的限制，仅需单样本绝对标注（好/坏）即可优化模型。其创新性在于：损失函数设计：将人类对"收益"和"损失"的非对称心理反应量化数据效率：无需构建偏好对（y_w>y_l），直接利用松散标注二、KT</div>
                    </li>
                    <li><a href="/article/1943246843366404096.htm"
                           title="打造自己的组件库（二）CSS工程化方案" target="_blank">打造自己的组件库（二）CSS工程化方案</a>
                        <span class="text-muted">行云＆流水</span>
<a class="tag" taget="_blank" href="/search/Vue3%E7%BB%84%E4%BB%B6%E5%BA%93/1.htm">Vue3组件库</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/Vue3/1.htm">Vue3</a><a class="tag" taget="_blank" href="/search/vue3%E7%BB%84%E4%BB%B6%E5%BA%93/1.htm">vue3组件库</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>1.css工程化方案1.1.目录结构设计src/assets/styles/├──index.scss#主入口文件├──variables.scss#全局CSS变量定义├──mixins.scss#SCSS混入├──reset.scss#样式重置└──theme/├──light.scss#亮色主题└──dark.scss#暗色主题1.2.CSS工程化特点1.2.1模块化导入@use'./them</div>
                    </li>
                    <li><a href="/article/1943244697753415680.htm"
                           title="NLP-D7-李宏毅机器学习---X-Attention&&GAN&BERT&GPT" target="_blank">NLP-D7-李宏毅机器学习---X-Attention&&GAN&BERT&GPT</a>
                        <span class="text-muted">甄小胖</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/bert/1.htm">bert</a>
                        <div>—0521今天4:30就起床了！真的是迫不及待想看新的课程！！！昨天做人脸识别系统的demo查资料的时候，发现一个北理的大四做cv的同学，差距好大！！！我也要努力呀！！不是比较，只是别人可以做到这个程度，我也一定可以！！！要向他学习！！！开始看课程啦！-----0753看完了各种attention，由于attention自己计算的限制，当N很大的时候会产生计算速度问题，从各种不同角度（人工知识输入</div>
                    </li>
                    <li><a href="/article/1943241548133101568.htm"
                           title="Spring 生态创新应用：微服务架构设计与前沿技术融合实践" target="_blank">Spring 生态创新应用：微服务架构设计与前沿技术融合实践</a>
                        <span class="text-muted">七夜zippoe</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>在数字化转型的深水区，企业级应用正面临从“单体架构”向“分布式智能架构”的根本性跃迁。Spring生态以其二十年技术沉淀形成的生态壁垒，已成为支撑这场变革的核心基础设施。从2002年RodJohnson发布《ExpertOne-on-OneJ2EEDesignandDevelopment》奠定的理论基础，到如今覆盖从开发到运维全链路的技术矩阵，Spring始终以“简化开发”为初心，构建出适配不同业</div>
                    </li>
                    <li><a href="/article/1943240664615546880.htm"
                           title="大型语言模型中的提示工程系统综述：技术与应用" target="_blank">大型语言模型中的提示工程系统综述：技术与应用</a>
                        <span class="text-muted">AI专题精讲</span>
<a class="tag" taget="_blank" href="/search/Paper%E9%98%85%E8%AF%BB/1.htm">Paper阅读</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a>
                        <div>摘要提示工程已成为扩展大型语言模型（LLMs）和视觉语言模型（VLMs）能力的不可或缺的技术。这种方法利用任务特定的指令（称为prompt），在不修改核心模型参数的情况下增强模型效能。与更新模型参数不同，prompt仅通过给定指令即可引出所需的模型行为，从而实现预训练模型在下游任务中的无缝集成。prompt可以是提供上下文以引导模型的自然语言指令，也可以是激活相关知识的学习向量表示。这一新兴领域已</div>
                    </li>
                    <li><a href="/article/1943237512055025664.htm"
                           title="[C语言初阶]指针初阶" target="_blank">[C语言初阶]指针初阶</a>
                        <span class="text-muted"></span>

                        <div>目录一、指针是什么？二、指针与指针类型三、野指针及其避免方法3.1什么是野指针？3.2野指针产生的原因：3.3如何避免野指针？四、指针运算4.1应用：实现strlen函数五、指针与数组六、二级指针七、指针数组指针是C语言的灵魂所在，也是许多初学者感到困惑的概念。本文将带你系统学习指针的基础知识，从指针的本质到指针运算，再到指针与数组的关系，最后介绍二级指针和指针数组的概念。通过本文的学习，你将建立</div>
                    </li>
                    <li><a href="/article/1943236881370116096.htm"
                           title="PyTorch 在 Python 自然语言处理中的运用" target="_blank">PyTorch 在 Python 自然语言处理中的运用</a>
                        <span class="text-muted">Python编程之道</span>
<a class="tag" taget="_blank" href="/search/Python%E7%BC%96%E7%A8%8B%E4%B9%8B%E9%81%93/1.htm">Python编程之道</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
                        <div>PyTorch在Python自然语言处理中的运用关键词：PyTorch，Python，自然语言处理，深度学习，文本分类，情感分析摘要：本文全面探讨了PyTorch在Python自然语言处理（NLP）领域的运用。首先介绍了相关背景知识，包括目的范围、预期读者等内容。接着详细阐述了核心概念，如词嵌入、循环神经网络等，并给出了相应的原理示意图和流程图。深入讲解了核心算法原理，结合Python代码进行详细</div>
                    </li>
                    <li><a href="/article/1943234110327681024.htm"
                           title="公众号 SEO 排名优化效果跟踪：基础数据记录表" target="_blank">公众号 SEO 排名优化效果跟踪：基础数据记录表</a>
                        <span class="text-muted">xinxinseo_</span>
<a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%B9%B3%E5%8F%B0/1.htm">微信公众平台</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1/1.htm">微信</a><a class="tag" taget="_blank" href="/search/%E7%99%BE%E5%BA%A6/1.htm">百度</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a>
                        <div>在进行公众号SEO排名优化时，系统记录和分析数据是评估优化效果、调整策略的关键。以下为精心设计的基础数据记录表模板，涵盖核心指标，助你清晰掌握优化进展。一、文章基础数据记录表文章标题发布时间阅读量点赞数在看数留言数分享数阅读完成率平均阅读时长搜索来源阅读量搜索来源占比[填写文章标题][具体年月日时分][数字][数字][数字][数字][数字][百分比][X分X秒][数字][百分比][填写文章标题][</div>
                    </li>
                    <li><a href="/article/1943233857218211840.htm"
                           title="富集分析——GO、KEGG" target="_blank">富集分析——GO、KEGG</a>
                        <span class="text-muted">ersanshi055</span>
<a class="tag" taget="_blank" href="/search/%E7%94%9F%E4%BF%A1%E5%B0%8F%E8%8F%9C%E9%B8%9F/1.htm">生信小菜鸟</a><a class="tag" taget="_blank" href="/search/%E5%AF%8C%E9%9B%86%E5%88%86%E6%9E%90/1.htm">富集分析</a><a class="tag" taget="_blank" href="/search/GO/1.htm">GO</a><a class="tag" taget="_blank" href="/search/kegg/1.htm">kegg</a>
                        <div>一、富集分析的基础认知在生物信息学研究领域，基因功能解析及通路阐释是众多分析流程中的关键环节，富集分析（EnrichmentAnalysis）是将基因或蛋白列表按照功能进行分类的统计方法，目的是找出在特定基因集中显著富集的功能类别或通路。通过这种方法，研究人员可以理解一组基因（如差异表达基因）在哪些生物学过程、分子功能或通路中代表。1.富集分析分类基因本体论富集分析（GeneOntologyEnr</div>
                    </li>
                    <li><a href="/article/1943231967583596544.htm"
                           title="【Bluedroid】BLE 地址解析列表的初始化与清除机制（btm_ble_resolving_list_init）" target="_blank">【Bluedroid】BLE 地址解析列表的初始化与清除机制（btm_ble_resolving_list_init）</a>
                        <span class="text-muted">byte轻骑兵</span>
<a class="tag" taget="_blank" href="/search/Android/1.htm">Android</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/Android/1.htm">Android</a><a class="tag" taget="_blank" href="/search/Bluedroid/1.htm">Bluedroid</a>
                        <div>本文深入分析Android蓝牙协议栈中BLE地址解析列表的核心管理流程，涵盖从主机协议栈初始化到控制器硬件操作的全链路实现。重点解析可解析私有地址（RPA）处理机制、隐私保护技术实现，探讨标准HCI命令与厂商特定命令在地址解析中的协同工作方式，揭示了BLE隐私机制的底层实现原理。一、概述1.BLE隐私机制基础可解析随机地址(RPA)与身份解析密钥(IRK)解析列表(ResolvingList)的作</div>
                    </li>
                    <li><a href="/article/1943228942446030848.htm"
                           title="蓝牙协议栈低功耗之安全管理协议层(SMP)" target="_blank">蓝牙协议栈低功耗之安全管理协议层(SMP)</a>
                        <span class="text-muted">写代码的无赖的猴子</span>
<a class="tag" taget="_blank" href="/search/BLE%E4%BD%8E%E5%8A%9F%E8%80%97%E8%93%9D%E7%89%99%E5%8D%8F%E8%AE%AE%E6%A0%88/1.htm">BLE低功耗蓝牙协议栈</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E4%B8%8E%E9%80%9A%E4%BF%A1/1.htm">信息与通信</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a>
                        <div>逻辑链路控制和适配协议层L2CAPSMP层阶段一阶段二Legacyparing安全连接交换公匙鉴权阶段1鉴权阶段2阶段三LElegacypairing：LESecureConnections交叉密匙特性配对PDU类型Hello，我是无赖的猴子，一个蓝牙爱好者，分享蓝牙相关的知识，关注我，学习蓝牙：蓝牙文章链接直达：1.profile层（待更新）2.属性协议层(ATT)（待更新）3.安全管理协议层(</div>
                    </li>
                    <li><a href="/article/1943228186959605760.htm"
                           title="在实训云平台上配置云主机" target="_blank">在实训云平台上配置云主机</a>
                        <span class="text-muted">酒城译痴无心剑</span>
<a class="tag" taget="_blank" href="/search/Spark%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%882%EF%BC%89/1.htm">Spark基础学习笔记（2）</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E8%AE%AD%E4%BA%91/1.htm">实训云</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E4%B8%BB%E6%9C%BA/1.htm">云主机</a><a class="tag" taget="_blank" href="/search/%E8%BF%9C%E7%A8%8B%E8%BF%9E%E6%8E%A5/1.htm">远程连接</a>
                        <div>文章目录零、学习目标一、实训云升级二、实训云登录（一）登录实训云（二）切换界面语言（三）规划云主机实例三、创建网络三、创建路由器四、连接子网五、创建虚拟网卡六、管理安全组规则七、创建云主机（一）云主机规划（二）创建ied云主机（三）创建其它云主机八、本机利用FinalShell连接虚拟机（一）连接ied云主机（二）连接其它云主机九、配置云主机（一）配置ied云主机1、查看IP地址2、配置主机名3、</div>
                    </li>
                    <li><a href="/article/1943226420847243264.htm"
                           title="企业内网系统：从传统开发到智能赋能的进化之路" target="_blank">企业内网系统：从传统开发到智能赋能的进化之路</a>
                        <span class="text-muted">飞算JavaAI开发助手</span>
<a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>在当今数字化浪潮中，企业内网系统作为支撑日常运营的核心基础设施，其开发效率与质量直接关系到企业的竞争力。传统开发模式下，程序员需要手动完成需求分析、架构设计、代码编写、测试调试等全流程工作，不仅耗时费力，还容易因人为疏忽导致质量隐患。而随着人工智能技术的突破性进展，以飞算JavaAI为代表的智能开发工具正在重塑企业内网系统的开发范式，为程序员提供从设计到落地的全链路智能支持。一、传统企业内网系统开</div>
                    </li>
                    <li><a href="/article/1943224532697411584.htm"
                           title="B端模块（1）：用户管理模块的定义、功能、页面和设计原则。" target="_blank">B端模块（1）：用户管理模块的定义、功能、页面和设计原则。</a>
                        <span class="text-muted"></span>

                        <div>B端管理系统都是各个模块的有机结合，保证系统的正常运转，这点和人体系统一样，比如消化、呼吸、循环系统等等。从本期开始，贝格前端工场将详细B端各个模块，一共分为20期，本期是第一期，欢迎老铁们持续关注。B端的用户管理指的是针对企业或者组织内部的业务用户进行管理和控制的一种系统功能。在B端（BusinesstoBusiness）场景中，企业通常需要对其内部员工、合作伙伴、供应商等业务用户进行管理，以确</div>
                    </li>
                    <li><a href="/article/1943224280456163328.htm"
                           title="钉钉企业应用开发系列：前端实现钉钉扫码登录功能" target="_blank">钉钉企业应用开发系列：前端实现钉钉扫码登录功能</a>
                        <span class="text-muted">脑袋大大的</span>
<a class="tag" taget="_blank" href="/search/%E9%92%89%E9%92%89%E7%94%9F%E6%80%81%E5%88%9B%E4%B8%9A%E8%80%85%E4%B8%93%E6%A0%8F/1.htm">钉钉生态创业者专栏</a><a class="tag" taget="_blank" href="/search/%E9%92%89%E9%92%89/1.htm">钉钉</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AC%AC%E4%B8%89%E6%96%B9%E7%99%BB%E5%BD%95/1.htm">第三方登录</a>
                        <div>本文将围绕“钉钉扫码登录”这一功能点展开讲解，并结合前端技术栈（HTML+JavaScript+Vue3）进行实现。我们将通过调用钉钉开放平台提供的JSAPI来实现扫码登录的功能，并展示完整的代码示例。一、前置准备1.注册钉钉开发者账号并创建企业应用访问钉钉开放平台。创建一个企业内部应用或第三方企业应用。获取corpId和redirect_uri等信息，用于后续配置。2.获取扫码登录权限确保你的应</div>
                    </li>
                                <li><a href="/article/62.htm"
                                       title="关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题" target="_blank">关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题</a>
                                    <span class="text-muted">何必如此</span>
<a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/%E8%B6%85%E9%93%BE%E6%8E%A5/1.htm">超链接</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/1.htm">文件下载</a><a class="tag" taget="_blank" href="/search/%E7%AA%97%E5%8F%A3/1.htm">窗口</a>
                                    <div>生成下载页面是需要选择“录入提交页面”，生成之后默认的下载页面<a>标签超链接为：<a href="<%=root_stimage%>stimage/image.jsp?filename=<%=strfile234%>&attachname=<%=java.net.URLEncoder.encode(file234filesourc</div>
                                </li>
                                <li><a href="/article/189.htm"
                                       title="【Spark九十八】Standalone Cluster Mode下的资源调度源代码分析" target="_blank">【Spark九十八】Standalone Cluster Mode下的资源调度源代码分析</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/cluster/1.htm">cluster</a>
                                    <div>在分析源代码之前，首先对Standalone Cluster Mode的资源调度有一个基本的认识： 
首先，运行一个Application需要Driver进程和一组Executor进程。在Standalone Cluster Mode下，Driver和Executor都是在Master的监护下给Worker发消息创建(Driver进程和Executor进程都需要分配内存和CPU，这就需要Maste</div>
                                </li>
                                <li><a href="/article/316.htm"
                                       title="linux上独立安装部署spark" target="_blank">linux上独立安装部署spark</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85/1.htm">安装</a><a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/1.4/1.htm">1.4</a><a class="tag" taget="_blank" href="/search/%E9%83%A8%E7%BD%B2/1.htm">部署</a>
                                    <div>下面讲一下linux上安装spark，以 Standalone Mode 安装 
  
1）首先安装JDK 
  
下载JDK：jdk-7u79-linux-x64.tar.gz  ，版本是1.7以上都行，解压 tar -zxvf jdk-7u79-linux-x64.tar.gz   
  
然后配置 ~/.bashrc&nb</div>
                                </li>
                                <li><a href="/article/443.htm"
                                       title="Java 字节码之解析一" target="_blank">Java 字节码之解析一</a>
                                    <span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81/1.htm">字节码</a><a class="tag" taget="_blank" href="/search/javap/1.htm">javap</a>
                                    <div>  
         
  
一：  Java  字节代码的组织形式    
  
类文件 {  
     OxCAFEBABE ，小版本号，大版本号，常量池大小，常量池数组，访问控制标记，当前类信息，父类信息，实现的接口个数，实现的接口信息数组，域个数，域信息数组，方法个数，方法信息数组，属性个数，属性信息数组  
}  
&nbs</div>
                                </li>
                                <li><a href="/article/570.htm"
                                       title="java各种小工具代码" target="_blank">java各种小工具代码</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>1.数组转换成List 
import java.util.Arrays;

Arrays.asList(Object[] obj); 2.判断一个String型是否有值 
import org.springframework.util.StringUtils;

if (StringUtils.hasText(str)) 3.判断一个List是否有值 
import org.spring</div>
                                </li>
                                <li><a href="/article/697.htm"
                                       title="加快FineReport报表设计的几个心得体会" target="_blank">加快FineReport报表设计的几个心得体会</a>
                                    <span class="text-muted">老A不折腾</span>
<a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a>
                                    <div>一、从远程服务器大批量取数进行表样设计时，最好按“列顺序”取一个“空的SQL语句”，这样可提高设计速度。否则每次设计时模板均要从远程读取数据，速度相当慢！！ 
二、找一个富文本编辑软件（如NOTEPAD+）编辑SQL语句，这样会很好地检查语法。有时候带参数较多检查语法复杂时，结合FineReport中生成的日志，再找一个第三方数据库访问软件（如PL/SQL）进行数据检索，可以很快定位语法错误。 
</div>
                                </li>
                                <li><a href="/article/824.htm"
                                       title="mysql linux启动与停止" target="_blank">mysql linux启动与停止</a>
                                    <span class="text-muted">墙头上一根草</span>

                                    <div>如何启动/停止/重启MySQL一、启动方式1、使用 service 启动：service mysqld start2、使用 mysqld 脚本启动：/etc/inint.d/mysqld start3、使用 safe_mysqld 启动：safe_mysqld&二、停止1、使用 service 启动：service mysqld stop2、使用 mysqld 脚本启动：/etc/inin</div>
                                </li>
                                <li><a href="/article/951.htm"
                                       title="Spring中事务管理浅谈" target="_blank">Spring中事务管理浅谈</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1%E7%AE%A1%E7%90%86/1.htm">事务管理</a>
                                    <div>   
Spring中事务管理浅谈  
By Tony Jiang@2012-1-20 Spring中对事务的声明式管理 
拿一个XML举例    
[html]  
view plain 
copy 
print 
?    
 
 <?xml version="1.0" encoding="UTF-8"?>&nb</div>
                                </li>
                                <li><a href="/article/1078.htm"
                                       title="php中隐形字符65279（utf-8的BOM头）问题" target="_blank">php中隐形字符65279（utf-8的BOM头）问题</a>
                                    <span class="text-muted">alxw4616</span>

                                    <div>php中隐形字符65279（utf-8的BOM头）问题 
今天遇到一个问题. php输出JSON 前端在解析时发生问题:parsererror. 
  
调试: 
1.仔细对比字符串发现字符串拼写正确.怀疑是 非打印字符的问题. 
2.逐一将字符串还原为unicode编码. 发现在字符串头的位置出现了一个 65279的非打印字符. 
  
     </div>
                                </li>
                                <li><a href="/article/1205.htm"
                                       title="调用对象是否需要传递对象(初学者一定要注意这个问题)" target="_blank">调用对象是否需要传递对象(初学者一定要注意这个问题)</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BC%A0%E9%80%92%E4%B8%8E%E8%B0%83%E7%94%A8%E6%8A%80%E5%B7%A7/1.htm">对象的传递与调用技巧</a>
                                    <div>  
  
类和对象的简单的复习,在做项目的过程中有时候不知道怎样来调用类创建的对象,简单的几个类可以看清楚,一般在项目中创建十几个类往往就不知道怎么来看 
  
为了以后能够看清楚,现在来回顾一下类和对象的创建,对象的调用和传递(前面写过一篇) 
  
类和对象的基础概念: 
  
JAVA中万事万物都是类 类有字段(属性),方法,嵌套类和嵌套接</div>
                                </li>
                                <li><a href="/article/1332.htm"
                                       title="JDK1.5 AtomicLong实例" target="_blank">JDK1.5 AtomicLong实例</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/AtomicLong/1.htm">AtomicLong</a>
                                    <div>JDK1.5 AtomicLong实例 
类 AtomicLong 
可以用原子方式更新的 long 值。有关原子变量属性的描述，请参阅 java.util.concurrent.atomic 包规范。AtomicLong 可用在应用程序中（如以原子方式增加的序列号），并且不能用于替换 Long。但是，此类确实扩展了 Number，允许那些处理基于数字类的工具和实用工具进行统一访问。 
 </div>
                                </li>
                                <li><a href="/article/1459.htm"
                                       title="自定义的RPC的Java实现" target="_blank">自定义的RPC的Java实现</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/rpc/1.htm">rpc</a>
                                    <div>        网上看到纯java实现的RPC，很不错。 
        RPC的全名Remote Process Call，即远程过程调用。使用RPC，可以像使用本地的程序一样使用远程服务器上的程序。下面是一个简单的RPC 调用实例，从中可以看到RPC如何</div>
                                </li>
                                <li><a href="/article/1586.htm"
                                       title="【RPC框架Hessian一】Hessian RPC Hello World" target="_blank">【RPC框架Hessian一】Hessian RPC Hello World</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Hello+world/1.htm">Hello world</a>
                                    <div>什么是Hessian 
The Hessian binary web service protocol makes web services usable without requiring a large framework, and without learning yet another alphabet soup of protocols. Because it is a binary p</div>
                                </li>
                                <li><a href="/article/1713.htm"
                                       title="【Spark九十五】Spark Shell操作Spark SQL" target="_blank">【Spark九十五】Spark Shell操作Spark SQL</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a>
                                    <div>在Spark Shell上，通过创建HiveContext可以直接进行Hive操作 
  
1. 操作Hive中已存在的表 
  
[hadoop@hadoop bin]$ ./spark-shell
Spark assembly has been built with Hive, including Datanucleus jars on classpath
Welcom</div>
                                </li>
                                <li><a href="/article/1840.htm"
                                       title="F5　往header加入客户端的ip" target="_blank">F5　往header加入客户端的ip</a>
                                    <span class="text-muted">ronin47</span>

                                    <div>when HTTP_RESPONSE {if {[HTTP::is_redirect]}{         HTTP::header replace Location [string map {:port/ /} [HTTP::header value Location]]HTTP::header replace Lo</div>
                                </li>
                                <li><a href="/article/1967.htm"
                                       title="java-61-在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差. 求所有数对之差的最大值。例如在数组{2, 4, 1, 16, 7, 5," target="_blank">java-61-在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差. 求所有数对之差的最大值。例如在数组{2, 4, 1, 16, 7, 5,</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>思路来自： 
http://zhedahht.blog.163.com/blog/static/2541117420116135376632/ 
写了个java版的 
 
 


public class GreatestLeftRightDiff {

	/**
	 * Q61.在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差。
	 * 求所有数对之差的最大值。例如在数组</div>
                                </li>
                                <li><a href="/article/2094.htm"
                                       title="mongoDB 索引" target="_blank">mongoDB 索引</a>
                                    <span class="text-muted">开窍的石头</span>
<a class="tag" taget="_blank" href="/search/mongoDB%E7%B4%A2%E5%BC%95/1.htm">mongoDB索引</a>
                                    <div>在这一节中我们讲讲在mongo中如何创建索引 
      得到当前查询的索引信息 
     db.user.find(_id:12).explain(); 
       cursor: basicCoursor 指的是没有索引 
 &</div>
                                </li>
                                <li><a href="/article/2221.htm"
                                       title="[硬件和系统]迎峰度夏" target="_blank">[硬件和系统]迎峰度夏</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F/1.htm">系统</a>
                                    <div>  从这几天的气温来看，今年夏天的高温天气可能会维持在一个比较长的时间内 
 
   所以，从现在开始准备渡过炎热的夏天。。。。 
 
   每间房屋要有一个落地电风扇，一个空调(空调的功率和房间的面积有密切的关系) 
   坐的，躺的地方要有凉垫，床上要有凉席 
   
   电脑的机箱</div>
                                </li>
                                <li><a href="/article/2348.htm"
                                       title="基于ThinkPHP开发的公司官网" target="_blank">基于ThinkPHP开发的公司官网</a>
                                    <span class="text-muted">cuiyadll</span>
<a class="tag" taget="_blank" href="/search/%E8%A1%8C%E4%B8%9A%E7%B3%BB%E7%BB%9F/1.htm">行业系统</a>
                                    <div>后端基于ThinkPHP，前端基于jQuery和BootstrapCo.MZ 企业系统 
 
 轻量级企业网站管理系统 
 运行环境:PHP5.3+, MySQL5.0 
 
系统预览 
 
 系统下载：http://www.tecmz.com  
 预览地址：http://co.tecmz.com  
 
各种设备自适应 
 
 响应式的网站设计能够对用户产生友好度，并且对于</div>
                                </li>
                                <li><a href="/article/2475.htm"
                                       title="Transaction and redelivery in JMS (JMS的事务和失败消息重发机制)" target="_blank">Transaction and redelivery in JMS (JMS的事务和失败消息重发机制)</a>
                                    <span class="text-muted">darrenzhu</span>
<a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1/1.htm">事务</a><a class="tag" taget="_blank" href="/search/%E6%89%BF%E8%AE%A4/1.htm">承认</a><a class="tag" taget="_blank" href="/search/MQ/1.htm">MQ</a><a class="tag" taget="_blank" href="/search/acknowledge/1.htm">acknowledge</a>
                                    <div>JMS Message Delivery Reliability and Acknowledgement Patterns 
 
http://wso2.com/library/articles/2013/01/jms-message-delivery-reliability-acknowledgement-patterns/ 
 
 
Transaction and redelivery in </div>
                                </li>
                                <li><a href="/article/2602.htm"
                                       title="Centos添加硬盘完全教程" target="_blank">Centos添加硬盘完全教程</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/hardware/1.htm">hardware</a>
                                    <div>Linux的硬盘识别: 
 sda        表示第1块SCSI硬盘 
 hda       表示第1块IDE硬盘 
 scd0      表示第1个USB光驱 
 一般使用“fdisk -l”命</div>
                                </li>
                                <li><a href="/article/2729.htm"
                                       title="yii2 restful web服务路由" target="_blank">yii2 restful web服务路由</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a>
                                    <div>路由 
随着资源和控制器类准备，您可以使用URL如 http://localhost/index.php?r=user/create访问资源，类似于你可以用正常的Web应用程序做法。 
在实践中，你通常要用美观的URL并采取有优势的HTTP动词。 例如，请求POST /users意味着访问user/create动作。 这可以很容易地通过配置urlManager应用程序组件来完成 如下所示</div>
                                </li>
                                <li><a href="/article/2856.htm"
                                       title="MongoDB查询(4)——游标和分页[八]" target="_blank">MongoDB查询(4)——游标和分页[八]</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/MongoDB%E6%B8%B8%E6%A0%87/1.htm">MongoDB游标</a><a class="tag" taget="_blank" href="/search/MongoDB%E6%B7%B1%E5%88%86%E9%A1%B5/1.htm">MongoDB深分页</a>
                                    <div>转载请出自出处：http://eksliang.iteye.com/blog/2177567 一、游标 
        数据库使用游标返回find的执行结果。客户端对游标的实现通常能够对最终结果进行有效控制，从shell中定义一个游标非常简单，就是将查询结果分配给一个变量（用var声明的变量就是局部变量），便创建了一个游标，如下所示： 
> var </div>
                                </li>
                                <li><a href="/article/2983.htm"
                                       title="Activity的四种启动模式和onNewIntent()" target="_blank">Activity的四种启动模式和onNewIntent()</a>
                                    <span class="text-muted">gundumw100</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>Android中Activity启动模式详解 
 
　　在Android中每个界面都是一个Activity，切换界面操作其实是多个不同Activity之间的实例化操作。在Android中Activity的启动模式决定了Activity的启动运行方式。 
 
　　Android总Activity的启动模式分为四种： 
 
 

Activity启动模式设置：

        <acti</div>
                                </li>
                                <li><a href="/article/3110.htm"
                                       title="攻城狮送女友的CSS3生日蛋糕" target="_blank">攻城狮送女友的CSS3生日蛋糕</a>
                                    <span class="text-muted">ini</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
                                    <div>在线预览：http://keleyi.com/keleyi/phtml/html5/29.htm 
  
代码如下： 
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>攻城狮送女友的CSS3生日蛋糕-柯乐义<</div>
                                </li>
                                <li><a href="/article/3237.htm"
                                       title="读源码学Servlet（1）GenericServlet 源码分析" target="_blank">读源码学Servlet（1）GenericServlet 源码分析</a>
                                    <span class="text-muted">jzinfo</span>
<a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8/1.htm">网络应用</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a>
                                    <div>Servlet API的核心就是javax.servlet.Servlet接口，所有的Servlet 类（抽象的或者自己写的）都必须实现这个接口。在Servlet接口中定义了5个方法，其中有3个方法是由Servlet 容器在Servlet的生命周期的不同阶段来调用的特定方法。 
  
  
先看javax.servlet.servlet接口源码：  
package </div>
                                </li>
                                <li><a href="/article/3364.htm"
                                       title="JAVA进阶：VO(DTO)与PO(DAO)之间的转换" target="_blank">JAVA进阶：VO(DTO)与PO(DAO)之间的转换</a>
                                    <span class="text-muted">snoopy7713</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/po/1.htm">po</a>
                                    <div>  
PO即 Persistence Object　　VO即 Value Object 
　VO和PO的主要区别在于：　　VO是独立的Java Object。　　PO是由Hibernate纳入其实体容器（Entity Map）的对象，它代表了与数据库中某条记录对应的Hibernate实体，PO的变化在事务提交时将反应到实际数据库中。 
　实际上，这个VO被用作Data Transfer </div>
                                </li>
                                <li><a href="/article/3491.htm"
                                       title="mongodb group by date 聚合查询日期 统计每天数据（信息量）" target="_blank">mongodb group by date 聚合查询日期 统计每天数据（信息量）</a>
                                    <span class="text-muted">qiaolevip</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a>
                                    <div>/* 1 */
{
    "_id" : ObjectId("557ac1e2153c43c320393d9d"),
    "msgType" : "text",
    "sendTime" : ISODate("2015-06-12T11:26:26.000Z")</div>
                                </li>
                                <li><a href="/article/3618.htm"
                                       title="java之18天 常用的类(一)" target="_blank">java之18天 常用的类(一)</a>
                                    <span class="text-muted">Luob.</span>
<a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/Date/1.htm">Date</a><a class="tag" taget="_blank" href="/search/System/1.htm">System</a><a class="tag" taget="_blank" href="/search/Runtime/1.htm">Runtime</a><a class="tag" taget="_blank" href="/search/Rundom/1.htm">Rundom</a>
                                    <div>System类 
 

import java.util.Properties;

/**
 * System:
 *  out:标准输出,默认是控制台
 *  in:标准输入,默认是键盘
 * 
 *  描述系统的一些信息
 *  获取系统的属性信息:Properties getProperties();
 *  
 * 
 *
 */
public class Sy</div>
                                </li>
                                <li><a href="/article/3745.htm"
                                       title="maven" target="_blank">maven</a>
                                    <span class="text-muted">wuai</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                                    <div>1、安装maven：解压缩、添加M2_HOME、添加环境变量path 
2、创建maven_home文件夹，创建项目mvn_ch01,在其下面建立src、pom.xml，在src下面简历main、test、main下面建立java文件夹 
3、编写类，在java文件夹下面依照类的包逐层创建文件夹，将此类放入最后一级文件夹 
4、进入mvn_ch01 
 4.1、mvn compile ,执行后会在</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>