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詳解