全棧工程師必須要掌握的前端CSS技能

来源:https://www.cnblogs.com/hsiang/archive/2023/09/12/17692345.html
-Advertisement-
Play Games

作為一名全棧工程師，在日常的工作中，可能更側重於後端開發，如：C#，Java，SQL ，Python等，對前端的知識則不太精通。在一些比較完善的公司或者項目中，一般會搭配前端工程師，UI工程師等，來彌補後端開發的一些前端經驗技能上的不足。但並非所有的項目都會有專職前端工程師，在一些小型項目或者初創公... ...


作為一名全棧工程師，在日常的工作中，可能更側重於後端開發，如：C#，Java，SQL ，Python等，對前端的知識則不太精通。在一些比較完善的公司或者項目中，一般會搭配前端工程師，UI工程師等，來彌補後端開發的一些前端經驗技能上的不足。但並非所有的項目都會有專職前端工程師，在一些小型項目或者初創公司中，職能劃分並不明確，往往要一個人前後端全都會做， 所以作為一名全棧工程師或者後端工程師，掌握必備的前端知識，也是必不可少的一項技能。今天就著重講解一下，作為一名全棧工程師，前端CSS方面的必須要掌握的相關知識。

 

什麼是CSS?

 

CSS 指的是層疊樣式表 (Cascading Style Sheets)，描述瞭如何在屏幕、紙張或其他媒體上顯示 HTML 元素。通俗點講：CSS是對網頁中的標簽進行美化的。

 

CSS語法

 

CSS 規則集（rule-set）由選擇器和聲明塊組成：

  1. 選擇器指向您需要設置樣式的 HTML 元素。
  2. 聲明塊包含一條或多條用分號分隔的聲明。
  3. 每條聲明都包含一個 CSS 屬性名稱和一個值，以冒號分隔。
  4. 多條 CSS 聲明用分號分隔，聲明塊用花括弧括起來。

CSS語法示例如下：

本文主要從幾個方面進行講解CSS樣式。

 

size尺寸

 

尺寸相關屬性主要設置頁面中標簽樣式的大小，邊框，邊距等信息。如下所示：

  1. width 頁面元素寬度，可以設置固定值，如：50px，也可以設置百分比 如：50%
  2. height 頁面元素高度，如果內容超過標簽元素的高度值，則會溢出。如果需要截斷，則需要配合overflow屬性進行設置。
  3. max-width 最大寬度，max-height 最大高度
  4. min-wdith 最小寬度，min-height 最小高度
  5. border 邊框 可以給3個值，格式為：邊框寬度 邊框樣式 邊框顏色。如：1px dotted grey。註意多個值之間用空格隔開。
  6. border-radius 邊框四個角的角度半徑。預設為直角，可以通過設置此屬性為圓角。
  7. padding 內邊距，內容和邊框之間的距離。可以設置4個值 4px 10px 20px 3px，分別代表：上，右，下，左 四個方向的內邊距;
  8. box-sizing 標簽大小方式，屬性允許我們在元素的總寬度和高度中包括內邊距（填充）和邊框。預設情況下，標簽的整體寬度是width+左右padding+邊框。所以如果設置寬度為100%，padding大於0的時候，預設會有滾動條。可以設置此屬性為border-box進行解決。
  9. margin 外邊距，表示標簽與外部標簽的距離。預設情況，瀏覽器會為標簽設置預設邊距。可通過*{margin:0;padding:0}進行清除預設邊距。
  10. margin-bottom/margin-top 底部邊距/頂部邊距， 表示頁面元素底部/頂部與其他元素之間的邊距。
  11. margin-left/margin-right 左側邊距/右側邊距，表示頁面元素左側/右側與其他元素之間的邊距。可設置auto自適應，也可以設置固定值。
  12. overflow 內容溢出後的處理方式，如：hidden隱藏。

關於尺寸【邊框，邊距，內容，寬度，高度】的示意圖，如下所示：

 

background背景

 

背景相關屬性，主要設置頁面標簽元素的背景樣式，如背景色，背景圖等信息，如下所示：

  1. background-color 背景顏色， 如 #f9f9f9;
  2. background-image  背景圖片，設置格式： url('圖片路徑')，圖片路徑可以是絕對路徑，也可以是相對路徑，也可以是網路路徑。註意背景圖和背景色不能同時生效
  3. box-shadow 陰影效果， 格式為：陰影偏移x 陰影偏移y 陰影暈染寬度  陰影顏色 如:5px 5px 5px grey。

 

text文本處理

 

文本處理相關屬性，主要設置文本相關內容的屬性，如：顏色，字體，字型大小，加粗，斜體等內容。如下所示：

  1. color 前景顏色，即文字內容的顏色。
  2. text-indent 文本首行縮進，可以設置像素 如：12px；也可以設置縮進字元數，如： 2em。其中設置em可以隨著大小自適應。
  3. font-size 字體大小，如：16px。
  4. font-family 設置字體 如：黑體，Arial等。
  5. font-weight 文本粗細 預設normal，主要值為：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 繼承值。
  6. text-align 文本對齊 如：left，right，center
  7. line-height 行高，設置行高可以設置文本在行內的位置。
  8. text-shadow 文本陰影，和box-shadow設置格式一致。
  9. text-decoration 文本裝飾，用於設置或刪除文本裝飾 如：dashed underline grey。
  10. wirting-mode 文本內容的書寫模式，定義了文本在水平或垂直方向上如何排布。主要值為：writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr，如：vertical-lr，表示豎著顯示，從左往右排列。預設適用於中文。
  11. text-orientation，英文方向，如upright，則英文也會垂直顯示。

 

position位置

 

位置相關屬性主要設置頁面標簽元素的左，右，上，下等位置信息，主要通過position進行設置。

position 位置屬性，指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。

  1. absolute 絕對定位，生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。配合top 設置距離上方距離，left 設置距離左側距離，預設相對於body。可以通過設置父元素的定位方式relatvice相對定位，來改變絕對定位的參考對象。
  2. position fixed固定定位，相對於視口的距離，不會隨著頁面的拖動而改變。
  3. relative 生成相對定位的元素，相對於其正常位置進行定位。
  4. static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
  5. inherit 規定應該從父元素繼承 position 屬性的值。

position位置示例

 

layout佈局

 

如果我們希望將預設的網頁標簽呈現效果，更改為我們希望的呈現效果，這種操作就稱之為網頁佈局。在進行佈局處理的時候，需要用到佈局相關的屬性。佈局通過display屬性【設置元素是否被視為塊或者內聯元素以及用於子元素的佈局，例如流式佈局、網格佈局或彈性佈局】進行設置。

 

1. flex佈局

 

flex佈局又稱彈性佈局，它使用flexbox使得容器有了彈性，更加適應各種設備的不同寬度，而不必依賴於傳統的塊狀佈局和浮動定位。它是CSS3中新增的規範，目前主流瀏覽器均已支持。值得一提的是，Flex佈局不支持IE9及以下版本。

flex佈局中主要包含了以下五個概念：

1. 彈性容器（flex container）：採用Flex佈局的外層容器。

2. 彈性項（flex item）：容器中的子元素。

3. 主軸（main axis）： 彈性容器的水平或垂直方向。

4. 交叉軸（cross axis）：與主軸垂直的方向。

5. 對齊方式（align）：設置彈性項在彈性容器內的對齊方式。

彈性佈局常用屬性，如下所示：

  1. display 設置flex。是對元素內部標簽呈現效果的一種處理。
  2. flex-direction：用於設置主軸的方向。它有四個取值：row：預設值，主軸為水平方向column：主軸為垂直方向row-reverse：主軸為水平方向，但是從右向左排列column-reverse：主軸為垂直方向，但是從下往上排列。
  3. flex-wrap：用於定義彈性容器里的彈性項是否應該換行。它有三個取值：nowrap：預設值，彈性項不換行 wrap：彈性項自動換行，如果需要的話 wrap-reverse：彈性項自動換行，但是倒序排列
  4. align-items: 定義在交叉軸上彈性項的對齊方式。它有五個取值：flex-start：彈性項在交叉軸上從上至下排列flex-end：彈性項在交叉軸上從下至上排列center：彈性項在交叉軸上居中排baseline：每個彈性項都根據其文本基線進行對齊stretch：預設值，彈性項在交叉軸上被拉伸填滿彈性容器
  5. justify-content:定義在主軸上彈性項的對齊方式。它有五個取值：flex-start：預設值，彈性項在主軸上從左至右排列flex-end：彈性項在主軸上從右至左排列center：彈性項在主軸上居中排列space-between：彈性項在主軸上平均分佈排列，左右兩端沒有空隙space-around：彈性項在主軸上平均分佈排列，各自之間有空隙
  6. align-content：定義彈性容器內的多行彈性項在交叉軸上的對齊方式。它有六個取值：flex-start：彈性項在交叉軸上從上至下排列flex-end：彈性項在交叉軸上從下至上排列center：彈性項在交叉軸上居中排列space-between：彈性項在交叉軸上平均分佈排列，每行之間沒有空隙space-around：彈性項在交叉軸上平均分佈排列，每行之間有空隙stretch：預設值，彈性項在交叉軸上被拉伸填滿彈性容器
  7. flex：1佈局元素比例。可以通過設置不同內部元素的flex來進一步設置不同區塊比例。

通過以上三個屬性的設置可以方便的講內容進行佈局，如居中，左上，右上，左下，右下等

 

 

2. grid佈局

 

CSS 網格佈局（Grid）是一套二維的頁面佈局系統，它的出現將完全顛覆頁面佈局的傳統方式。

gird佈局的基本概念

  1. 容器（container）——有容器屬性
  2. 項目（items）——有項目屬性
  3. 行（row)
  4. 列（column）
  5. 間距（gap) ——單元格之間的距離
  6. 區域（area）—— 自己劃分每個單元格占據的區域
  7. 內容（content)

flex適合一維佈局，grid適合二維佈局。將內部元素已行列的形式展示

  1. display:grid。
  2. grid-template-columns，列設置，可以設置固定列寬度，如200px 300px 400px等，也可以設置百分比寬度 如：20% 30% 40% 10%等；也可以設置比例，如：1fr 1fr 1fr其中fr是比例的意思。可以設置repeate(3,1fr)或者repeate(auto-fill,200px)等；或者混合設置如：200px auto 200px。
  3. grid-template-rows 行設置。可以設置的內容和列設置一致。
  4. 屬性justify-items 和 justify-self 以行軸為參照對齊項目，屬性align-items 和 align-self 以列軸為參照對齊項目。

 

綜合示例（一）

 
關於size尺寸，background背景，文本，position位置，佈局的綜合示例，如下所示：
綜合示例效果有：文本加粗，顏色，元素內間距，外間距，邊框，背景色，位置，flex佈局，書寫模式等綜合應用。效果如下所示：

示例源碼Html部分，如下所示：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css"  />
  </head>
  <body>
    <div class="container">
      <div class="article article-v">
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
      </div>
    </div>
    <div class="article article-h">
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
        <div class="poem">
          <span class="title">涼州詞</span>
          <span class="author">作者 唐，王之渙</span>
          <span class="content">黃河遠上白雲間，</span>
          <span class="content">一片孤城萬仞山。</span>
          <span class="content">羌笛何須怨楊柳，</span>
          <span class="content">春風不度玉門關。</span>
        </div>
      </div>
    </div>
  </body>
</html>
示例源碼css部分，如下所示：
*{
  padding: 0px;
  margin: 0px;
}
.container{
  width: 100%;
}
.article{
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  flex:1;
  flex-direction: row;
  justify-content: center;
}
.article .poem{
  border: 1px;
  border-style: dotted;
  border-color: #f9f9f9;
  border-radius: 2px;
  margin: 4px;
  width: 15%;
}
.article-v .poem{
  background-color: goldenrod;
  display: flex;
}
.article .poem span{
  padding:4px;
  margin: 4px;
  letter-spacing: 6px;
  color: #F9F9F9;
  font-family: Arial, Helvetica, sans-serif;
}
.article .poem .title{
  display: block;
  font-size: larger;
  font-weight: bolder;
}
.article .poem .author{
  display: block;
  font-size: large;
  font-weight: bold;
}
.article .poem .content{
  display: block;
  font-size: 18px;
}
.article-v .poem .title{
  writing-mode: vertical-lr;
}
.article-v .poem .author{
  writing-mode: vertical-lr;
}
.article-v .poem .content{
  writing-mode: vertical-lr;
}
.article-h .poem{
  background-color: darkblue;
  display: block;
}

 

transition 過渡

 

CSS 過渡允許您在給定的時間內平滑地改變屬性值。主要設置屬性，如下所示：

  1. transition    簡寫屬性，用於將四個過渡屬性設置為單一屬性。格式：屬性1 時間 運動模式，屬性2 時間 運動模式等，其中運動模式可以省略，預設勻速變換，如：width 1s，即寬度在1秒內完成，而不是瞬間完成。不僅可以指定具體屬性，也可以用all代表所有屬性，如：all 2s。運動模式預設為Linear線性變換，還可以有其他值，如： ease-in , ease-in-out等。
  2. transition-delay    規定過渡效果的延遲（以秒計）。
  3. transition-duration    規定過渡效果要持續多少秒或毫秒。
  4. transition-property    規定過渡效果所針對的 CSS 屬性的名稱。
  5. transition-timing-function    規定過渡效果的速度曲線。

 

transform變換

 

1. 2D變換

 

transform設置變換，一般設置2D變換

  1. translate設置位移，設置在x軸，y軸方向上的移動，如translate(200px,300px)。也可以分開設置TranslateX(200px)，translateY(200px)。
  2. rotate，設置旋轉，如rotate(30deg)，預設以中心旋轉。
  3. transform-origin 變換中心，如：center,right ,bottom等。此屬性一般設置在元素本身的屬性中，而不是設置在交互變換效果樣式中。
  4. scale 縮放，元素的縮放 如scale(0.5)是x軸，y軸方向的縮放。也可以設置兩個值，分別控制縮放的比例，如scale(1,2)。
  5. skew 傾斜，可以設置在x軸，y軸方向上的傾斜如：skew(20deg)。也可以分別進行設置，如skew(10deg,20deg)

 

2. 3D變換

 

3D變換，一般設定一個容器，即容器內容的子元素進行3D方式進行渲染展示，容器外的預設2D展示。

  1. transform-style:preserve-3d設置容器內容進行3D渲染。
  2. perspective 設置景深，即視口與觀察者之間的距離。
  3. translate3d設置3D位移轉換，如translate3d(100px,0,0)設置
  4. rotate3D，設置3D的選擇，如rotate(0,0,0,100deg)，前3個參數表示x,y,z三個軸上是否生效，1表示生效，0表示不生效。第4個參數表示角度。

 

animation動畫

 

CSS動畫使元素逐漸從一種樣式變為另一種樣式。您可以隨意更改任意數量的 CSS 屬性。如需使用 CSS 動畫，您必須首先為動畫指定一些關鍵幀。關鍵幀包含元素在特定時間所擁有的樣式。

動畫相關屬性，如下所示：

  1. @keyframes   定義關鍵幀動畫，規定動畫模式。
  2. animation    設置所有動畫屬性的簡寫屬性，格式：animation 關鍵幀名稱 時長 infinite 動畫模式
  3. animation-delay    規定動畫開始的延遲。
  4. animation-direction    定動畫是向前播放、向後播放還是交替播放。
  5. animation-duration    規定動畫完成一個周期應花費的時間。
  6. animation-fill-mode    規定元素在不播放動畫時的樣式（在開始前、結束後，或兩者同時）。
  7. animation-iteration-count    規定動畫應播放的次數。
  8. animation-name    規定 @keyframes 動畫的名稱。
  9. animation-play-state    規定動畫是運行還是暫停。
  10. animation-timing-function    規定動畫的速度曲線。

 

綜合示例（二）

 

綜合示例2主要應用過渡，變換，動畫等效果，如下所示：

示例源碼Html如下所示：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index2.css" />
  </head>
  <body>
    <div class="container">
      <div class="box">
        <div class="one">我在後面</div>
        <div class="two">我在前面</div>
      </div>
    </div>
  </body>
</html>

示例源碼CSS部分，如下所示：


.{
  margin: 0px;
  padding:0px;
}
.container{
  position: absolute;
  left: 50px;
  top: 50px;
  transform-style: preserve-3d;
  perspective: 500px;
  transform-origin: center;
}
.container div{
  width: 200px;
  height: 200px;
}
.container .box{
  transform-style: preserve-3d;
  perspective: 500px;
  
  transform-origin: center;
  transition: all 1s;
  animation: xuanzhuan 5s linear infinite;
}
.container .box div{
  position: absolute;
  left: 0px;
  top:0px;
  line-height: 200px;
  text-align: center;
}
.container .box .one{
  transform: translate3d(0,0,-50px);
  border: 1px solid gray;
  background-color: beige;
}
.container .box .two{
  border: 1px solid gray;
  background-color: red;
}

@keyframes xuanzhuan{
  from{
    transform: rotate3d(0,1,0,0deg);
  }
  to{
    transform: rotate3d(0,1,0,360deg);
  }
}

以上就是全棧工程師必須要掌握的前端CSS技能的全部內容。希望可以拋磚引玉，一起學習，共同進步。


作者：小六公子
出處：http://www.cnblogs.com/hsiang/
本文版權歸作者和博客園共有，寫文不易，支持原創，歡迎轉載【點贊】，轉載請保留此段聲明，且在文章頁面明顯位置給出原文連接，謝謝。
關註個人公眾號，定時同步更新技術及職場文章


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 讀高性能MySQL（第4版）筆記07_優化數據類型（下）
    1. ENUM（枚舉） 1.1. MySQL在存儲枚舉時非常緊湊，會根據列表值的數量壓縮到1或者2位元組中 1.2. 轉換為ENUM會使表變小 1.3. 如果表中有其他索引，減少主鍵大小也會使這些非主鍵索引小得多 1.4. ENUM列可以存儲一組預定義的不同字元串值 1.5. ENUM欄位是根據內部整 ...
  • 資料庫基礎面試第四彈
    1. Redis的數據結構有哪些 1. 字元串（String）：字元串是Redis最基本的數據結構。它可以存儲任意類型的數據，包括文本、整數或二進位數據。字元串類型的值最大可以達到512MB。 SET name "John" GET name ``` 將字元串"John"存儲在鍵名為"name"的字 ...
  • Apache DolphinScheduler 如何實現自動化打包+單機/集群部署？
    Apache DolphinScheduler 是一款開源的分散式任務調度系統，旨在幫助用戶實現複雜任務的自動化調度和管理。DolphinScheduler 支持多種任務類型，可以在單機或集群環境下運行。下麵將介紹如何實現 DolphinScheduler 的自動化打包和單機/集群部署。 自動化打包 ...
  • MySQL表設計實踐
    1、表名：應體現具體業務含義，全部小寫，多個單詞下劃線分割。 2、欄位：欄位名應體現具體業務含義，全部小寫、多個單詞下劃線分割，選擇合適的數據類型，並且加註釋 每個表應具有以下公共欄位： 欄位名 欄位類型 欄位說明 id int(11)/bigint(20) 自增主鍵id create_user_i ...
  • GaussDB技術解讀系列丨運維自動駕駛探索
    在第14屆中國資料庫技術大會（DTCC2023）上，華為雲資料庫運維研發總監李東詳細解讀了GaussDB運維繫統自動駕駛探索和實踐。 ...
  • MySQL子查詢相關使用
    SQL文件鏈接在最下麵 MySQL子查詢相關使用 子查詢的實質：一個 select 語句的查詢結果能夠作為另一個語句的輸入值。子查詢不僅可用於 where 子句中，還能夠用於 from 子句中，此時子查詢的結果將作為一個臨時表（temporary table）來使用。 一、 單行子查詢 1、 查詢“ ...
  • iOS MDM（監管鎖）入門
    引言 Apple MDM (Mobile Device Management) 字面理解就是一種管理移動設備的方式，覆蓋 iOS 5 及更高版本的 iPhone/iPod touch/iPad、Mac OS X 10.7 及更高版本的 Mac、TVOS 9 及更高版本的 Apple TV，標題中的 ...
  • 在Vue2和Vue3中JSX的使用集錦
    Vue2安裝JSX支持 有時候，我們使用渲染函數（render function）來抽象組件，而渲染函數使用Vue的h函數來編寫Dom元素相對template語法差別較大，體驗不佳，這個時候就派 JSX 上場了。然而在Vue3中預設是帶了JSX支持的，而在 Vue2 中使用 JSX，需要安裝並使用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類