sublime text3的使用

先安裝sublime text3 （好像這個版本比2好就選擇這個了）

安裝直接官網(wǎng)下載就行了官網(wǎng)地址：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

關(guān)閉 Sublime text3，并打開安裝目錄，備份一下 sublime_text.exe（以防萬一）

打開網(wǎng)址：https://hexed.it

點擊上面的 Open File，彈出的對話框中選擇已安裝后的 sublime_text.exe。

Ctrl+F 搜索查找，輸入97 94 0D，然后點擊按鈕 Search Now。

然后在97 94 0D上面點擊，替換為00 00 00即可！

最后點擊上面的 Export 按鈕導(dǎo)出，將完成后的文件復(fù)制到剛才的目錄替換掉原來的文件即可！

三、輸入注冊碼注冊

打開 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技術(shù)的最新版本，為網(wǎng)頁設(shè)計師和開發(fā)者帶來了強(qiáng)大的新功能和更廣闊的創(chuàng)作空間。它不僅增強(qiáng)了網(wǎng)頁的表現(xiàn)力，還提供了豐富的動畫、過渡和布局選項。本文將深入探討CSS3的核心特性，并通過實際代碼示例，展示它如何改變和提升現(xiàn)代網(wǎng)頁設(shè)計。

一、CSS3的新特性

1.1 邊框和背景

CSS3引入了圓角邊框、邊框陰影和背景漸變，極大地豐富了邊框和背景的設(shè)計可能性。

示例代碼：

/* 圓角邊框 */
.box {
  border-radius: 15px;
}

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

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

1.2 文本效果

CSS3提供了文本陰影、自動換行和文本溢出處理等功能，增強(qiáng)了文本的美觀性和可讀性。

示例代碼：

/* 文本陰影 */
.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轉(zhuǎn)換

CSS3支持元素在二維和三維空間中的轉(zhuǎn)換，如旋轉(zhuǎn)、縮放、傾斜和移動。

示例代碼：

/* 2D 轉(zhuǎn)換 */
.transform-2d {
  transform: rotate(30deg);
}

/* 3D 轉(zhuǎn)換 */
.transform-3d {
  transform: rotateX(120deg);
}

1.4 過渡

CSS3過渡效果可以在某個屬性值改變時平滑地過渡，為用戶帶來更自然的交互體驗。

示例代碼：

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

/* 鼠標(biāo)懸停時寬度變化的過渡效果 */
.transition:hover {
  width: 300px;
}

1.5 動畫

CSS3動畫允許您在不使用JavaScript的情況下創(chuàng)建復(fù)雜的動畫效果。

示例代碼：

/* 簡單的動畫 */
@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是一種現(xiàn)代布局模式，易于實現(xiàn)復(fù)雜的布局設(shè)計。

示例代碼：

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

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

2.2 網(wǎng)格布局（Grid）

網(wǎng)格布局是一種二維布局系統(tǒng)，適用于創(chuàng)建復(fù)雜的網(wǎng)頁布局。

示例代碼：

/* 網(wǎng)格容器 */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}

/* 網(wǎng)格項目 */
.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響應(yīng)式設(shè)計

CSS3媒體查詢使得創(chuàng)建響應(yīng)式網(wǎng)頁變得容易，可以根據(jù)不同屏幕尺寸應(yīng)用不同的樣式規(guī)則。

示例代碼：

/* 默認(rèn)樣式 */
body {
  background-color: lightblue;
}

/* 當(dāng)屏幕寬度小于 600px 時應(yīng)用 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

四、CSS3實用工具類

CSS3提供了許多實用工具類，如字體圖標(biāo)庫（如Font Awesome）、實用工具框架（如Tailwind CSS），簡化了開發(fā)過程。

示例代碼（使用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> <!-- 顯示用戶圖標(biāo) -->

總結(jié)

CSS3極大地豐富了網(wǎng)頁設(shè)計的可能性，通過邊框、背景、文本效果、轉(zhuǎn)換、過渡、動畫、布局和響應(yīng)式設(shè)計等特性，為開發(fā)者提供了強(qiáng)大的工具。它不僅提升了網(wǎng)頁的美觀性和交互性，還增強(qiáng)了用戶體驗。通過實際代碼示例，我們可以看到CSS3如何實現(xiàn)復(fù)雜的視覺效果和布局，同時保持了代碼的簡潔性和可維護(hù)性。隨著技術(shù)的發(fā)展，CSS3將繼續(xù)推動網(wǎng)頁設(shè)計向更加先進(jìn)和用戶友好的方向發(fā)展。

HTML文本格式化通常使用一系列特定的標(biāo)簽來改變文本的外觀或結(jié)構(gòu)。這些標(biāo)簽可以控制文本的字體、大小、顏色、對齊方式等，也可以用來標(biāo)記文本的邏輯結(jié)構(gòu)（如段落、標(biāo)題、列表等）。除了這些基本的格式化標(biāo)簽，HTML還支持通過CSS（級聯(lián)樣式表）來更精細(xì)和靈活地控制文本的格式和樣式。

參考文檔：https://www.cjavapy.com/article/3306/

1、標(biāo)題

HTML中，文本格式化和結(jié)構(gòu)化主要通過一系列標(biāo)簽來完成，其中標(biāo)題（Headings）標(biāo)簽是最常用于定義文本格式的元素之一。HTML提供了六級標(biāo)題標(biāo)簽，從 <h1> 到 <h6>，<h1> 表示最高級別的標(biāo)題，而 <h6> 表示最低級別的標(biāo)題。這些標(biāo)題標(biāo)簽不僅幫助改善網(wǎng)頁的結(jié)構(gòu)和可讀性，還對搜索引擎優(yōu)化（SEO）至關(guān)重要，因為搜索引擎使用這些標(biāo)簽來識別網(wǎng)頁上的不同部分和內(nèi)容的層次結(jié)構(gòu)。每個級別的標(biāo)題都有默認(rèn)的樣式，通常是不同的大小和加粗，以顯示它們的層次結(jié)構(gòu)

<h1>這是一個 H1 標(biāo)題</h1>
<h2>這是一個 H2 標(biāo)題</h2>
<h3>這是一個 H3 標(biāo)題</h3>
<h4>這是一個 H4 標(biāo)題</h4>
<h5>這是一個 H5 標(biāo)題</h5>
<h6>這是一個 H6 標(biāo)題</h6>

2、段落與換行

HTML中，文本格式化通常涉及使用特定的標(biāo)簽來控制文本的顯示方式。段落和換行是兩個基本但非常重要的文本格式化概念。用<p>創(chuàng)建段落，<br>插入換行。

1）段落 (<p> 標(biāo)簽)

<p> 標(biāo)簽自帶上下邊距，用以區(qū)分不同的段落。
<p>這是一個段落。</p>
<p>這是另一個段落。</p>

2）換行 (<br> 標(biāo)簽)

<br> 標(biāo)簽只是簡單地添加一個換行點，不添加任何額外的空間或邊距，并且通常用于詩歌或地址等需要精確控制換行位置的文本。

這是文本行的開始。<br>這是新的一行，但在同一個段落內(nèi)。

3、強(qiáng)調(diào)文本

使用<em>和<strong>強(qiáng)調(diào)文本。HTML中，強(qiáng)調(diào)文本通常使用 <em> 和 <strong> 標(biāo)簽來實現(xiàn)。這兩個標(biāo)簽既有語義意義，也影響文本的表現(xiàn)形式。

<em> 標(biāo)簽用于表示強(qiáng)調(diào)文本，通常表現(xiàn)為斜體，用以表示文本的輕度強(qiáng)調(diào)。

<strong> 標(biāo)簽用于表示更強(qiáng)烈的強(qiáng)調(diào)，通常表現(xiàn)為加粗，表示文本的高度強(qiáng)調(diào)。

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

4、列表

HTML 提供了兩種主要的列表類型：有序列表（<ol>）和無序列表（<ul>）。兩種類型都使用列表項（<li>）來定義列表中的實際項。

1）有序列表

有序列表以 <ol> 標(biāo)簽開始。每個列表項都放在 <li> 標(biāo)簽內(nèi)。列表是有序的，也就是每個項目都是編號的。這適用于項目順序很重要的列表，如食譜或待辦事項列表。

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

2）無序列表

無序列表以 <ul> 標(biāo)簽開始。像有序列表一樣，每個項都放在 <li> 標(biāo)簽內(nèi)。然而，無序列表中的項目不是編號的。使用圓點符號進(jìn)行表示。這適用于項目順序不重要的列表，如購物清單。

<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>化學(xué)水分子公式為H<sub>2</sub>O，E=mc<sup>2</sup>。</p>

<pre>
這是預(yù)格式化文本，
保留了空格和
換行符。
</pre>

<blockquote>這是一個長引用的示例，可能包含多個段落。</blockquote>
<p>這是一個<q>短引用</q>的示例。</p>

<p>使用<code>HTML</code>和<code>CSS</code>進(jìn)行網(wǎng)頁設(shè)計。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>復(fù)制文本。</p>
<p><samp>這是計算機(jī)程序的輸出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作為變量。</p>

</body>
</html>

參考文檔：https://www.cjavapy.com/article/3306/

在線咨詢

上一篇：如何成為不可取代的前端開發(fā)？- 學(xué)習(xí)資料包
下一篇：Decoder詳解