帅帅辉的博客

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/1835514464028422144.htm"
                           title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a>
                        <span class="text-muted">露露_e800</span>

                        <div>今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得</div>
                    </li>
                    <li><a href="/article/1835513803861749760.htm"
                           title="机器学习与深度学习间关系与区别" target="_blank">机器学习与深度学习间关系与区别</a>
                        <span class="text-muted">ℒℴѵℯ心·动ꦿ໊ོ꫞</span>
<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%AD%A6%E4%B9%A0/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/python/1.htm">python</a>
                        <div>一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入</div>
                    </li>
                    <li><a href="/article/1835513701143244800.htm"
                           title="铭刻于星（四十二）" target="_blank">铭刻于星（四十二）</a>
                        <span class="text-muted">随风至</span>

                        <div>69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但</div>
                    </li>
                    <li><a href="/article/1835513424734416896.htm"
                           title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a>
                        <span class="text-muted">Magnetic_h</span>
<a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                        <div>目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添</div>
                    </li>
                    <li><a href="/article/1835511542284644352.htm"
                           title="学点心理知识，呵护孩子健康" target="_blank">学点心理知识，呵护孩子健康</a>
                        <span class="text-muted">静候花开_7090</span>

                        <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div>
                    </li>
                    <li><a href="/article/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835509770287673344.htm"
                           title="swagger访问路径" target="_blank">swagger访问路径</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a>
                        <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div>
                    </li>
                    <li><a href="/article/1835509643619692544.htm"
                           title="如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update" target="_blank">如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update</a>
                        <span class="text-muted">iBaoxing</span>
<a class="tag" taget="_blank" href="/search/github/1.htm">github</a>
                        <div>如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对</div>
                    </li>
                    <li><a href="/article/1835508130608410624.htm"
                           title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a>
                        <span class="text-muted">某公司摸鱼前端</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div>
                    </li>
                    <li><a href="/article/1835508131032035328.htm"
                           title="ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）" target="_blank">ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）</a>
                        <span class="text-muted">研学随笔</span>
<a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a>
                        <div>我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==</div>
                    </li>
                    <li><a href="/article/1835507248395284480.htm"
                           title="【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数" target="_blank">【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数</a>
                        <span class="text-muted">广龙宇</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6Rust/1.htm">一起学Rust</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Rust%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">Rust设计模式</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分</div>
                    </li>
                    <li><a href="/article/1835506996258893824.htm"
                           title="回溯 Leetcode 332 重新安排行程" target="_blank">回溯 Leetcode 332 重新安排行程</a>
                        <span class="text-muted">mmaerd</span>
<a class="tag" taget="_blank" href="/search/Leetcode%E5%88%B7%E9%A2%98%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">Leetcode刷题学习记录</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a>
                        <div>重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB</div>
                    </li>
                    <li><a href="/article/1835506869838376960.htm"
                           title="Python数据分析与可视化实战指南" target="_blank">Python数据分析与可视化实战指南</a>
                        <span class="text-muted">William数据分析</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE/1.htm">数据</a>
                        <div>在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学</div>
                    </li>
                    <li><a href="/article/1835504817905168384.htm"
                           title="2019-12-22-22:30" target="_blank">2019-12-22-22:30</a>
                        <span class="text-muted">涓涓1016</span>

                        <div>今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的</div>
                    </li>
                    <li><a href="/article/1835504217729626112.htm"
                           title="Python教程：一文了解使用Python处理XPath" target="_blank">Python教程：一文了解使用Python处理XPath</a>
                        <span class="text-muted">旦莫</span>
<a class="tag" taget="_blank" href="/search/Python%E8%BF%9B%E9%98%B6/1.htm">Python进阶</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代</div>
                    </li>
                    <li><a href="/article/1835502704827396096.htm"
                           title="将cmd中命令输出保存为txt文本文件" target="_blank">将cmd中命令输出保存为txt文本文件</a>
                        <span class="text-muted">落难Coder</span>
<a class="tag" taget="_blank" href="/search/Windows/1.htm">Windows</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/window/1.htm">window</a>
                        <div>最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再</div>
                    </li>
                    <li><a href="/article/1835499615491813376.htm"
                           title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a>
                        <span class="text-muted">彩云飘过</span>

                        <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835498219489030144.htm"
                           title="高端密码学院笔记285" target="_blank">高端密码学院笔记285</a>
                        <span class="text-muted">柚子_b4b4</span>

                        <div>高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要</div>
                    </li>
                    <li><a href="/article/1835497792265613312.htm"
                           title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
                        <span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
                        <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div>
                    </li>
                    <li><a href="/article/1835497710975807488.htm"
                           title="从0到500+，我是如何利用自媒体赚钱？" target="_blank">从0到500+，我是如何利用自媒体赚钱？</a>
                        <span class="text-muted">一列脚印</span>

                        <div>运营公众号半个多月，从零基础的小白到现在慢慢懂了一些运营的知识。做好公众号是很不容易的，要做很多事情；排版、码字、引流…通通需要自己解决，业余时间全都花费在这上面涨这么多粉丝是真的不容易，对比知乎大佬来说，我们这种没资源，没人脉，还没钱的小透明来说，想要一个月涨粉上万，怕是今天没睡醒（不过你有的方法，算我piapia打脸）至少我是清醒的，自己慢慢努力，实现我的万粉目标！大家快来围观、支持我吧！孩子</div>
                    </li>
                    <li><a href="/article/1835497074049773568.htm"
                           title="数组去重" target="_blank">数组去重</a>
                        <span class="text-muted">好奇的猫猫猫</span>

                        <div>整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法</div>
                    </li>
                    <li><a href="/article/1835496402042580992.htm"
                           title="GitHub上克隆项目" target="_blank">GitHub上克隆项目</a>
                        <span class="text-muted">bigbig猩猩</span>
<a class="tag" taget="_blank" href="/search/github/1.htm">github</a>
                        <div>从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835495644123459584.htm"
                           title="Day1笔记-Python简介&标识符和关键字&输入输出" target="_blank">Day1笔记-Python简介&标识符和关键字&输入输出</a>
                        <span class="text-muted">~在杰难逃~</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/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/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a>
                        <div>大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程</div>
                    </li>
                    <li><a href="/article/1835494131535802368.htm"
                           title="人工智能时代，程序员如何保持核心竞争力？" target="_blank">人工智能时代，程序员如何保持核心竞争力？</a>
                        <span class="text-muted">jmoych</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
                        <div>随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员</div>
                    </li>
                    <li><a href="/article/1835493651992637440.htm"
                           title="大伟说成语之唉声叹气" target="_blank">大伟说成语之唉声叹气</a>
                        <span class="text-muted">求索大伟</span>

                        <div>＊大伟说成语＊【唉声叹气】叹气：因心里不痛快或不如意而吐出长气，发出声音。因为痛苦、憋闷或感伤而发出叹息的声音。【大伟说】情绪外露，非人类所特有，动物亦有情绪，悲哀和欢乐所表示的情绪亦是不一样的，会嗷嗷大叫也会低吟痛哭。不同的是，人类的情绪更复杂，更多样，更丰富。唉声叹气，可以说是最基础的情绪，因为无奈而举足无措，不知该如何如何化解，只有独自一人慢慢承受，长吁短叹不知如何是好，其实是无能无力的表现</div>
                    </li>
                    <li><a href="/article/1835493626688401408.htm"
                           title="Python快速入门 —— 第三节：类与对象" target="_blank">Python快速入门 —— 第三节：类与对象</a>
                        <span class="text-muted">孤华暗香</span>
<a class="tag" taget="_blank" href="/search/Python%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/1.htm">Python快速入门</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>第三节：类与对象目标：了解面向对象编程的基础概念，并学会如何定义类和创建对象。内容：类与对象：定义类：class关键字。类的构造函数：__init__()。类的属性和方法。对象的创建与使用。示例：classStudent:def__init__(self,name,age,major):self.name&#</div>
                    </li>
                    <li><a href="/article/1835493374514262016.htm"
                           title="MongoDB Oplog 窗口" target="_blank">MongoDB Oplog 窗口</a>
                        <span class="text-muted">喝醉酒的小白</span>
<a class="tag" taget="_blank" href="/search/MongoDB/1.htm">MongoDB</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
                        <div>在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限</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>