sublime text3的使用

先安装sublime text3 （好像这个版本比2好就选择这个了）

安装直接官网下载就行了官网地址：http://www.sublimetextcn.com/3/

一、在hosts中添加（成功后可还原）

hosts地址: C:\Windows\System32\drivers\etc

#sublimetext　
127.0.0.1 www.sublimetext.com
127.0.0.1 sublimetext.com
127.0.0.1 sublimehq.com
127.0.0.1 telemetry.sublimehq.com
127.0.0.1 license.sublimehq.com
127.0.0.1 45.55.255.55
127.0.0.1 45.55.41.223

二、修改编辑 sunlime_text.exe

关闭 Sublime text3，并打开安装目录，备份一下 sublime_text.exe（以防万一）

打开网址：https://hexed.it

点击上面的 Open File，弹出的对话框中选择已安装后的 sublime_text.exe。

Ctrl+F 搜索查找，输入97 94 0D，然后点击按钮 Search Now。

然后在97 94 0D上面点击，替换为00 00 00即可！

最后点击上面的 Export 按钮导出，将完成后的文件复制到刚才的目录替换掉原来的文件即可！

三、输入注册码注册

打开 Sublime text，然后点击菜单 Help -> Enter Lisence :

----- BEGIN LICENSE -----
TwitterInc
200 User License
EA7E-890007
1D77F72E 390CDD93 4DCBA022 FAF60790
61AA12C0 A37081C5 D0316412 4584D136
94D7F7D4 95BC8C1C 527DA828 560BB037
D1EDDD8C AE7B379F 50C9D69D B35179EF
2FE898C4 8E4277A8 555CE714 E1FB0E43
D5D52613 C3D12E98 BC49967F 7652EED2
9D2D2E61 67610860 6D338B72 5CF95C69
E36B85CC 84991F19 7575D828 470A92AB
------ END LICENSE ------

安装Package Control:

https://packagecontrol.io/installation

Command Palette

Open the command palette

Win/Linux: ctrl+shift+p, Mac: cmd+shift+p

Type

Install Package Control, press enter

Menu

Open the Tools menu
Select Install Package Control…

This will download the latest version of Package Control and verify it using public key cryptography. If an error occurs, use the manual method instead.

我常用的两个插件

Emmet

Prettify HTML-CSS-JS Prettify

言

CSS3，作为CSS技术的最新版本，为网页设计师和开发者带来了强大的新功能和更广阔的创作空间。它不仅增强了网页的表现力，还提供了丰富的动画、过渡和布局选项。本文将深入探讨CSS3的核心特性，并通过实际代码示例，展示它如何改变和提升现代网页设计。

一、CSS3的新特性

1.1 边框和背景

CSS3引入了圆角边框、边框阴影和背景渐变，极大地丰富了边框和背景的设计可能性。

示例代码：

/* 圆角边框 */
.box {
  border-radius: 15px;
}

/* 边框阴影 */
.box {
  box-shadow: 10px 10px 5px grey;
}

/* 背景渐变 */
.background {
  background: linear-gradient(to right, red, yellow);
}

1.2 文本效果

CSS3提供了文本阴影、自动换行和文本溢出处理等功能，增强了文本的美观性和可读性。

示例代码：

/* 文本阴影 */
.text-shadow {
  text-shadow: 2px 2px 5px #FF0000;
}

/* 自动换行 */
.word-wrap {
  word-wrap: break-word;
}

/* 文本溢出 */
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

1.3 2D和3D转换

CSS3支持元素在二维和三维空间中的转换，如旋转、缩放、倾斜和移动。

示例代码：

/* 2D 转换 */
.transform-2d {
  transform: rotate(30deg);
}

/* 3D 转换 */
.transform-3d {
  transform: rotateX(120deg);
}

1.4 过渡

CSS3过渡效果可以在某个属性值改变时平滑地过渡，为用户带来更自然的交互体验。

示例代码：

/* 过渡效果 */
.transition {
  transition: width 2s;
}

/* 鼠标悬停时宽度变化的过渡效果 */
.transition:hover {
  width: 300px;
}

1.5 动画

CSS3动画允许您在不使用JavaScript的情况下创建复杂的动画效果。

示例代码：

/* 简单的动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.animation {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

二、CSS3布局

2.1 弹性盒子布局（Flexbox）

Flexbox是一种现代布局模式，易于实现复杂的布局设计。

示例代码：

/* Flexbox 容器 */
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Flexbox 项目 */
.flex-item {
  flex: 1;
}

2.2 网格布局（Grid）

网格布局是一种二维布局系统，适用于创建复杂的网页布局。

示例代码：

/* 网格容器 */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}

/* 网格项目 */
.grid-item {
  background-color: rgba(255, 255, 0, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

三、CSS3响应式设计

CSS3媒体查询使得创建响应式网页变得容易，可以根据不同屏幕尺寸应用不同的样式规则。

示例代码：

/* 默认样式 */
body {
  background-color: lightblue;
}

/* 当屏幕宽度小于 600px 时应用 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

四、CSS3实用工具类

CSS3提供了许多实用工具类，如字体图标库（如Font Awesome）、实用工具框架（如Tailwind CSS），简化了开发过程。

示例代码（使用Font Awesome）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

<i class="fas fa-user"></i> <!-- 显示用户图标 -->

总结

CSS3极大地丰富了网页设计的可能性，通过边框、背景、文本效果、转换、过渡、动画、布局和响应式设计等特性，为开发者提供了强大的工具。它不仅提升了网页的美观性和交互性，还增强了用户体验。通过实际代码示例，我们可以看到CSS3如何实现复杂的视觉效果和布局，同时保持了代码的简洁性和可维护性。随着技术的发展，CSS3将继续推动网页设计向更加先进和用户友好的方向发展。

HTML文本格式化通常使用一系列特定的标签来改变文本的外观或结构。这些标签可以控制文本的字体、大小、颜色、对齐方式等，也可以用来标记文本的逻辑结构（如段落、标题、列表等）。除了这些基本的格式化标签，HTML还支持通过CSS（级联样式表）来更精细和灵活地控制文本的格式和样式。

参考文档：https://www.cjavapy.com/article/3306/

1、标题

HTML中，文本格式化和结构化主要通过一系列标签来完成，其中标题（Headings）标签是最常用于定义文本格式的元素之一。HTML提供了六级标题标签，从 <h1> 到 <h6>，<h1> 表示最高级别的标题，而 <h6> 表示最低级别的标题。这些标题标签不仅帮助改善网页的结构和可读性，还对搜索引擎优化（SEO）至关重要，因为搜索引擎使用这些标签来识别网页上的不同部分和内容的层次结构。每个级别的标题都有默认的样式，通常是不同的大小和加粗，以显示它们的层次结构

<h1>这是一个 H1 标题</h1>
<h2>这是一个 H2 标题</h2>
<h3>这是一个 H3 标题</h3>
<h4>这是一个 H4 标题</h4>
<h5>这是一个 H5 标题</h5>
<h6>这是一个 H6 标题</h6>

2、段落与换行

HTML中，文本格式化通常涉及使用特定的标签来控制文本的显示方式。段落和换行是两个基本但非常重要的文本格式化概念。用<p>创建段落，<br>插入换行。

1）段落 (<p> 标签)

<p> 标签自带上下边距，用以区分不同的段落。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

2）换行 (<br> 标签)

<br> 标签只是简单地添加一个换行点，不添加任何额外的空间或边距，并且通常用于诗歌或地址等需要精确控制换行位置的文本。

这是文本行的开始。<br>这是新的一行，但在同一个段落内。

3、强调文本

使用<em>和<strong>强调文本。HTML中，强调文本通常使用 <em> 和 <strong> 标签来实现。这两个标签既有语义意义，也影响文本的表现形式。

<em> 标签用于表示强调文本，通常表现为斜体，用以表示文本的轻度强调。

<strong> 标签用于表示更强烈的强调，通常表现为加粗，表示文本的高度强调。

<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>

4、列表

HTML 提供了两种主要的列表类型：有序列表（<ol>）和无序列表（<ul>）。两种类型都使用列表项（<li>）来定义列表中的实际项。

1）有序列表

有序列表以 <ol> 标签开始。每个列表项都放在 <li> 标签内。列表是有序的，也就是每个项目都是编号的。这适用于项目顺序很重要的列表，如食谱或待办事项列表。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

2）无序列表

无序列表以 <ul> 标签开始。像有序列表一样，每个项都放在 <li> 标签内。然而，无序列表中的项目不是编号的。使用圆点符号进行表示。这适用于项目顺序不重要的列表，如购物清单。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

5、使用示例

<!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>

<h1>HTML 文本格式化</h1>
<p>这是一个<em>斜体</em>和<strong>加粗</strong>的示例。</p>
<p><u>这段文本下划线</u>和<s>这段文本是删除线</s>。</p>
<p>化学水分子公式为H<sub>2</sub>O，E=mc<sup>2</sup>。</p>

<pre>
这是预格式化文本，
保留了空格和
换行符。
</pre>

<blockquote>这是一个长引用的示例，可能包含多个段落。</blockquote>
<p>这是一个<q>短引用</q>的示例。</p>

<p>使用<code>HTML</code>和<code>CSS</code>进行网页设计。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>复制文本。</p>
<p><samp>这是计算机程序的输出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作为变量。</p>

</body>
</html>

参考文档：https://www.cjavapy.com/article/3306/

在线咨询

上一篇：如何成为不可取代的前端开发？- 学习资料包
下一篇：Decoder详解