CSS學習摘要-定位實例

来源:https://www.cnblogs.com/tielemao/archive/2018/06/05/9140364.html
-Advertisement-
Play Games

CSS學習摘要 定位實例 === 註:全文摘自 "MDN CSS定位實例" 列表消息盒子 我們研究的第一個例子是一個經典的選項卡消息框,你想用一塊小區域包括大量信息時,一個非常常用的特征。這包括含有大信息量的應用,比如策略戰爭游戲,比如從移動版的網頁,屏幕狹小、空間有限;比如你可能想要放置許多信息的 ...


CSS學習摘要-定位實例

註:全文摘自MDN-CSS定位實例

列表消息盒子

我們研究的第一個例子是一個經典的選項卡消息框,你想用一塊小區域包括大量信息時,一個非常常用的特征。這包括含有大信息量的應用,比如策略戰爭游戲,比如從移動版的網頁,屏幕狹小、空間有限;比如你可能想要放置許多信息的緊湊消息框,不用就會充滿整個UI。我們簡單的例子完成後就會像下麵這樣:

註意: 你能看完整的示例,可運行在 info-box.html (source code)。檢出它以理解你在本文章里要建立什麼。

你可能會想:”為什麼不僅僅做獨立的選項卡為一個獨立的網頁,然後通過點擊不同的標簽來在不同的頁面跳轉來達到這個效果?“這樣代碼可能會簡單一些,是的。但是這樣每個獨立的”頁面“視圖將會實際上是一個新載入的網頁,跨視圖更難保存信息,並把這個特征融入一個更大的UI設計。另外,所謂的”單頁應用“正在變得非常流行——尤其是移動網頁UI——因為把一切的服務放在一個單獨的文件上可以減少HTTP請求的數量來瀏覽所有內容,從而提高性能。

註意: 一些網路開發者甚至更超前,每次只載入一頁的信息,並且使用JavaScript諸如 XMLHttpRequest特征動態改變信息顯示。在你學習的此刻,然而,我們希望儘可能保持簡單。接下來有一些JavaScript,但是只有一點。

在開始之前,我們需要你拷貝文件到本地,當作起始的HTML文件—— info-box-start.html. 保存到你的電腦合適的位置,然後在你的編輯器里打開。讓我們看看包含在 body 里的HTML代碼:

<section class="info-box">
  <ul>
    <li><a href="#" class="active">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>
  <div class="panels">
    <article class="active-panel">
      <h2>The first tab</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
    </article>
    <article>
      <h2>The second tab</h2>

      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
    </article>
    <article>
      <h2>The third tab</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>

      <ol>
        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
        <li>Aliquam ut porttitor urna.</li>
        <li>Nulla facilisi</li>
      </ol>
    </article>
  </div>
</section>

這樣我們已經得到了一個<section>元素帶有類(class)為 info-box。此元素又包含一個 <ul> 和一個 <div>。無序列表包含三個列表項,列表項有鏈接在內,實際上將成為用於點擊後顯示內容面板的選項卡。 div 包含三個<article> (<article>元素表示文檔、頁面、應用或網站中的獨立結構,其意在成為可獨立分配的或可復用的結構,如在發佈中,它可能是論壇帖子、雜誌或新聞文章、博客、用戶提交的評論、互動式組件,或者其他獨立的內容項目。) 元素,構成對應於每個選項卡的內容面板。 每個面板包含一些示例內容。

這裡的思路是我們將樣式化選項卡看起來是一個標準的水平導航菜單,使用絕對定位樣式化面板互相坐落其頂上。我們也給你一點JavaScript包含到你的頁面上,當選項卡被按下時,顯示對應的面板,並且樣式化選項卡本身。你不需要在這個階段瞭解JavaScript本身,但是你應該儘快學習一些基本的 JavaScript——你的用戶界面越複雜,越需要一些JavaScript來實現你渴望的功能。

一般設置

開始前,在<style>開閉標簽之間添加下麵的代碼:

html {
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

這隻是一些一般設置,在我們頁面上設置了無襯線的字體、使用 box-sizing 模型,去掉 <body> 預設外邊距。

下一步,在你早先的CSS下麵加入如下代碼:

.info-box {
  width: 450px;
  height: 400px;
  margin: 0 auto;
}

這對內容設置具體的高度和寬度、在屏幕居中使用老把戲 margin: 0 auto 。在早先的課程中我們建議儘可能不固定內容容器的高度。這個情況下是可以的,因為我們是在選項卡中固定的內容,如果每個標簽都有不同的高度,看起來也有些不和諧。

樣式化我們的選項卡

現在我們希望樣式化選項卡看上去像選項卡——基本,這些是一個水平的導航標簽,但不是點擊之後載入不同的網頁,和我們之前在課程中見到的不同,相反,他們在同一頁面上顯示不同的面板。首先,在你的CSS底部添加下列規則,從無序列表中移除預設的padding-leftmargin-top值:

.info-box ul {
  padding-left: 0;
  margin-top: 0;
}

註意: 我們正在使用後代選擇器,整個例子 .info-box 都位於鏈的開始——這樣頁面已經帶有其他內容時,我們可以插入這個特征,不害怕與應用於頁面其他部分的樣式衝突。

接下來,我們將樣式化水平選項卡——列表項都要左浮動確保他們一行合起來,他們的list-style-type被設置為 none 用以去除項目符號,寬度(width)設置為 150px 以便於適應這個info-box。鏈接( <a>)元素設置為display inline-block,這樣他們將在一行顯示,仍然保持樣式可設置,他們會被樣式化合適的選項卡按鈕,通過一系列的其他屬性。

添加下列的CSS:

.info-box li {
  float: left;
  list-style-type: none;
  width: 150px;
}

.info-box li a {
  display: inline-block;
  text-decoration: none;
  width: 100%;
  line-height: 3;
  background-color: red;
  color: black;
  text-align: center;
}

最後,對於本節,我們將會在鏈接狀態上設置一些樣式。首先,我們要設置標簽的 :focus:hover 狀態,讓他們在獲得焦點/滑鼠懸浮的時候看起來不同,給用戶提供一些可視化反饋。其次,當某個選項卡的類( class )出現 active 時,我們為其設置一條相同的樣式規則。我們將通過使用JavaScript來設置,當一個標簽被點擊時。把這些CSS放置在你的其他樣式後面:

.info-box li a:focus, .info-box li a:hover {
  background-color: #a60000;
  color: white;
}

.info-box li a.active {
  background-color: #a60000;
  color: white;
}

樣式化面板

下一步工作是樣式化我們的面板,現在開始吧!

首先,添加下列的規則去樣式化 .panels <div> 容器。我們簡單的設置一個固定的高度,確保面板包含在info-box裡面,position relative 設置 <div>為定位上下文,這樣你能然後相對自身放置定位子元素,而不是相對<html>元素,最後我們清除(clear)浮動,設置在上面CSS中,這樣避免影響佈局的剩餘部分。

.info-box .panels {
  height: 352px;
  position: relative;
  clear: both;
}

在本節的最後,我們將對包含我們面板的單獨 <article>元素設置樣式。我們添加的第一條規則就是絕對定位面板,讓他們都位於<div>容器的左上角——這一部分對整個佈局特性是關鍵的,就像使面板互相位於頂部。規則設置面板為和容器同樣的高度,給內容一些內邊距,設置字體顏色(color),和背景顏色(background-color)。

我們將添加的第二條規則,對帶有類( class )為( active-panel )的面板,設置z-index為 1,會讓他位於其他的面板之上(預設定位元素 z-index 的值是 0,會使預設元素位於下麵)。同樣的,我們會在合適的時候用JavaScript 來添加這個類。

.info-box article {
  position: absolute;
  top: 0;
  left: 0;
  height: 352px;
  padding: 10px;
  color: white;
  background-color: #a60000;
}

.info-box .active-panel {
  z-index: 1;
}

添加我們的JavaScript

讓這些特性工作的最後一步是添加一些JavaScript。添加下列一塊代碼,準確的寫在你的開始和結束的<script>標簽之間(在接下來的HTML內容中你將會發現這些):

var tabs = document.querySelectorAll('.info-box li a');
var panels = document.querySelectorAll('.info-box article');

for(i = 0; i < tabs.length; i++) {
  var tab = tabs[i];
  setTabHandler(tab, i);
}

function setTabHandler(tab, tabPos) {
  tab.onclick = function() {
    for(i = 0; i < tabs.length; i++) {
      if(tabs[i].getAttribute('class')) {
        tabs[i].removeAttribute('class');
      }
    }

    tab.setAttribute('class', 'active');

    for(i = 0; i < panels.length; i++) {
      if(panels[i].getAttribute('class')) {
        panels[i].removeAttribute('class');
      }
    }

    panels[tabPos].setAttribute('class', 'active-panel');
  }
}

這些代碼做瞭如下工作:

  • 首先我們保存所有的選項卡和所有的面板引用到兩個變數中,名為 tabspanels,這樣此後我們可以容易地為它們做事。

  • 然後我們使用 for 迴圈遍歷所有的選項卡,並且在每一個上運行叫做setTabHandler() 的函數,此函數建立當每個選項卡被點擊時應該發生的功能。 運行時, 函數會被傳遞選項卡,和一個索引數i 指明選項卡在tabs 數組中的位置。

  • 在setTabHandler()函數中,這個標簽創建了一個onclick事件來處理點擊,所以當標簽被點擊的時候,接下來會發生:

    • 一個for迴圈用來清除所有標簽當前存在的類。

    • 當點擊的時候在標簽上創建了一個active 類——從相關聯的元素中繼承了CSS的一些屬性,具有和panels的樣式相同的顏色,背景顏色。

    • 一個for迴圈用於清除所有面板當前存在的類。

    • 當標簽被點擊的時候在和標簽相對應的面板上創建了一個active-panel 類——從相關聯的元素中繼承了CSS的一些屬性,使他的z-index屬性被設置為1,讓他能位於所有的面板的上面。

效果如下:

一個固定位置的列表消息盒子

在我們的第二個例子中,我們將會採用我們的第一個例子——我們的消息盒子——把她加到一個滿的網頁之中去。但是不僅僅是這樣——我們將固定她的位置,以便於他能待在瀏覽器視窗的同一個位置。當主要內容滾動時,這個消息盒子將會待在屏幕的同一個位置。我們完工以後的例子長下麵這樣:

註:你可以點擊藍字 fixed-info-box.html (source code)預覽完成後的效果,看看哪些部分是你在這篇文章里你要製作的。

在開始的時候,你可以使用第一部分中完成的例子,或者從我們的Github倉庫中info-box.html 拷貝info-box.html到本地。

添加HTML

首先,我們需要一些額外的內容在當前的主內容中。添加下列部分在你的body標簽之中,在已存在的部分之中前:

<section class="fake-content">
  <h1>Fake content</h1>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
</section>

註:你可以隨意更改內容,替換為你想要內容。

更改存在的CSS

接下來我們需要對之前的Css進行一些小修改,讓消息盒子放置和定位的好一些。刪除你的margin: 0 auto (不需要居中顯示),添加fixed定位;調整top 屬性把她粘在瀏覽器的視域。

.info-box {
  width: 450px;
  height: 400px;
  position: fixed;
  top: 0;
}

對主內容樣式設計

對於這個例子來說唯一剩下的事情就是給主內容提供一些樣式設計。添加下麵的規則到你剩下的Css 的下麵:

.fake-content {
  background-color: #a60000;
  color: white;
  padding: 10px;
  height: 2000px;
  margin-left: 470px;
}

開始我們給這個內容和消息盒子面板一樣的背景顏色,顏色,內邊距。然後給他一個大的margin-left使他移動到右邊,為消息盒子在左邊騰出位置,以便於各個部分不重疊。

這標志著第二個例子的結束;我們希望你能感到第三個例子,完全是因為興趣。

一個滑動隱藏的面板

最後一個我們在這裡介紹的例子是通過按圖標使面板滑動出現或者消失——就像前面提到的,這種場景在移動端的佈局很流行,因為移動端的屏幕很小,所以你不希望使用大部分界面來顯示一個有用的內容而是用消息面板或者菜單代替。

我們完工後的例子長這樣:

提示:你可以點擊藍字hidden-info-panel.html (source code)預覽完成後的效果,仔細看看哪些部分是你在這篇文章里你要製作的。

在一開始,老規矩在我們的Githib代碼倉庫拷貝hideen-info-panel-start.html(源碼)。

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Hidden info panel</title>

  <style>
    /* || Checkbox hack to control information box display */
    label[for="toggle"] {
      font-size: 3rem;
      position: absolute;
      top: 4px;
      right: 5px;
      z-index: 1;
      cursor: pointer;
    }
    input[type="checkbox"] {
       position: absolute;
       top: -100px;
    }
    /* information box styling */
    aside {
      background-color: #a60000;
      color: white;
      width: 340px;
      height: 100%;
      padding: 0 20px;
      position: fixed;
      top: 0;
      right: -370px;
      transition: 0.6s all;
    }
    /* Second part of the checkbox hack — the checked state */
    input[type=checkbox]:checked + aside {
      right: 0px;
    }
  </style>

</head>
<body>


  <label for="toggle">?</label>
  <input type="checkbox" id="toggle">
  <aside>
    <h2>Information</h2>

    <p>Some very important information about your app:</p>

    <ol>
      <li>It has a really cool slide-out information box.</li>
      <li>This information box uses a combination of fixed positioning and a CSS transition for the smooth sliding.</li>
      <li>It also uses a cool technique called the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>.</li>
      <li>This allows you to create a nice "toggle on/toggle off" UI effect without using any JavaScript, which will work in IE9 and above (the smooth transition will work in IE10 and above.)</li>

    </ol>

  </aside>
</body>
</html>

這個例子並沒有用先前的例子,所以我們需要一個新的開始文件。讓我們來仔細觀察一下這個HTML文件:

<label for="toggle">❔</label>
<input type="checkbox" id="toggle">
<aside>

  ...

</aside>

//label的 for屬性規定label屬性綁定到哪個表單元素。

開始,我們看到了一個label 元素和input元素——<label>元素普遍用來聯繫文字標簽和表單,目的是能更好的理解表單(允許用戶查看表單元素的描述)。這裡通過for屬性綁定id到了<input>標簽的checkbox元素。

提示:我們已經設置了一個特殊的問題標記特性到我們的HTML中,來當作我們的信息圖標——這代表著這個按鈕將可以按下顯示或隱藏面板。

現在我們使用這些元素稍稍不同的目的——另一個<label>標簽有副作用使你能通過點擊checkbox的label標簽來選擇這個checkbox,就好像點擊了這個checkbox自己一樣。這就會實現有名的checkbox hack 技術,可以提供無JS的方法來控制一個元素,通過一個按鈕的聯繫。我們將控制的元素使aside元素,通過其他兩個(為了簡潔起見,我們已將其內容從上述代碼列表中刪除)。

在下麵的部分我們將解釋這一切如何運作。

設置表單元素樣式

首先讓我們處理表單元素 - 在style標簽之間添加以下CSS:

label[for="toggle"] {
  font-size: 3rem;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
  cursor: pointer;
}

input[type="checkbox"] {
  position: absolute;
  top: -100px;
}
  • 第一條label樣式的規則,我們有:

    • 設置字體大小使圖標更美觀。

    • 設置為絕對定位,使用top屬性和right屬性來讓他能很合適的位於右上角。

    • 設置z-index屬性為1——因此當信息面板被賦予樣式和顯示的時候,不會覆蓋我們的圖標;相反圖標依然會位於最上層能夠再次被按下來隱藏信息平板。

    • 使用cursor屬性來說改變滑鼠的指針,當滑鼠懸浮在圖標上面的時候變成一個手形指針(就像你看到的當懸浮在鏈接上一樣),作為一個額外的可視化線索告訴用戶這個圖標可以做一些有趣的事情。

  • 第二條規則是在實際的<input>checkbox元素上設置絕對定位屬性,並隱藏在頂部的上面,我們並不希望在我們的用戶界面里看到她。

設置面板的樣式

現在是時候為實際的滑動面板設計風格了。在你的css底部添加下列規則:

aside {
  background-color: #a60000;
  color: white;

  width: 340px;
  height: 98%;
  padding: 10px 1%;

  position: fixed;
  top: 0;
  right: -370px;

  transition: 0.6s all;
}

這裡有很多項——讓我們一點一點討論:

  • 首先,我們在信息盒子中設置了一些簡單的背景顏色和顏色。

  • 然後,我們在面板上設置一個固定的寬度,讓她的高度充滿整個瀏覽器視窗的高度。

  • 我們同樣包括一些內邊距來組成我們小於那個要的高度和寬度總體的值(如果我們沒有設置box-sizing:border-box來說的話是很必要的,正如這個例子)

  • 然後,我們設置面板的定位為fixed,即使頁面的內容在滾動,也總是顯示在同一個位置。我們把設置top屬性讓視窗粘在頂部,然後設置預設情況下遠離屏幕,設置right屬性使其位於屏幕的右邊。

  • 最後我們設置transition屬性,Transitions是一個有意思的特性,允許你在狀態改變的時候平滑的過渡,而不是粗暴的“變”或“還原”。在這個例子中我們嘗試在checkbox被選中時讓面板平滑的滑動到屏幕上。(或者換句話說,當問題標記圖標被點擊以後——記住,點擊

設置選擇後的狀態

這是最後的css添加——把這些放到你的css底部:

input[type=checkbox]:checked + aside {
  right: 0px;
}

這裡的選擇器是複雜的——我們選擇<input>元素鄰接的<aside>元素,但是僅僅在他被選擇(請註意使用checked偽類來實現此目的),在這種情況下,我們將right屬性設置為0px,會造成面板再次出現在屏幕上(由於過渡屬性會平滑的出現)。再一次點擊這個標簽會取消選中checkbox,面板將會跟著再一次消失。

所以你有它 ——一個相當巧妙的避免使用JavaScript來創建一個切換按鈕效果方式。 這將在IE9及以上版本中起作用(平滑過渡將在IE10及更高版本中起作用)。這種效果確實有一些問題 ——這是有點濫用表單元素(它們不是為了這個目的),並且在可訪問性方面效果不是很好 - 標簽在預設情況下不可聚焦,並且表單元素的非語義使用可能會導致屏幕朗讀器出現問題。 JavaScript和鏈接或按鈕可能更合適,但這樣的實驗仍然很有趣。

最後完成的代碼如下:
(另外這裡我使用了?來取代那個問號的圖標,效果是一樣的。)

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Hidden info panel</title>

  <style>
    /* || Checkbox hack to control information box display */
    label[for="toggle"] {
      font-size: 3rem;
      position: absolute;
      top: 4px;
      right: 5px;
      z-index: 1;
      cursor: pointer;
    }
    input[type="checkbox"] {
       position: absolute;
       top: -100px;
    }
    /* information box styling */
    aside {
      background-color: #a60000;
      color: white;
      width: 340px;
      height: 98%;
      padding: 10px 1%;
      position: fixed;
      top: 0;
      right: -370px;
      transition: 0.6s all;
    }
    /* Second part of the checkbox hack — the checked state */
    input[type=checkbox]:checked + aside {
      right: 0px;
    }
  </style>

</head>
<body>


  <label for="toggle">?</label>
  <input type="checkbox" id="toggle">
  <aside>
    <h2>Information</h2>

    <p>Some very important information about your app:</p>

    <ol>
      <li>It has a really cool slide-out information box.</li>
      <li>This information box uses a combination of fixed positioning and a CSS transition for the smooth sliding.</li>
      <li>It also uses a cool technique called the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>.</li>
      <li>This allows you to create a nice "toggle on/toggle off" UI effect without using any JavaScript, which will work in IE9 and above (the smooth transition will work in IE10 and above.)</li>

    </ol>

  </aside>
</body>
</html>

gif效果圖:

總結

這樣完成了我們對定位的關註——現在,你應該理解基本機制的工作原理,同樣理解了怎樣應用這些知識去構建一些有趣的用戶界面功能,不要由於你還未完全理解所有的知識而擔心——定位是一個相當高級的話題,你可以隨時讀這篇文章來幫助你的理解。下一個主題我們將轉向Flexbox。

【end】


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

-Advertisement-
Play Games
更多相關文章
  • 先描述一下,這個問題,是如何遇到的 在ajax調用遠程服務的時候,報了一個Origin xxxxxx is not allowed by Access-Control-Allow-Origin 的錯誤, 大概的意思就是說,沒有許可權,解決方法據說要在服務端的response裡面設置一個許可權(網上有例子 ...
  • 如何通過自定義的deepclone,實現對對象,數組的深拷貝。 ...
  • 搭建第一個htttp伺服器 1.核心代碼 訪問路徑查看結果: 2.知識要點 require: 用於載入核心模塊,fs,http等 server: 提供Web服務(發送請求,處理請求,處理數據,發送響應) request: 請求對象,發送請求的客戶端的對象,可以獲取客戶端的請求信息 response: ...
  • 一、JQuery介紹 二、JQuery的優勢 三、jQuery庫包含功能 HTML元素選取 HTML元素操作 CSS操作 HTML事件函數 JavaScript特效和動畫 HTMLDOM遍歷和修改 AJAX Utilites 四、jQuery版本支持 1.x:相容IE768,使用最為廣泛的,官方只做 ...
  • 比如 、`left transform translate`方法,他們的百分比都是相較誰而言的? 、`left`是基於父元素的: translate的參數:left(x 坐標) 和 top(y 坐標) 位置參數 , 如果是百分比,會以本身的長寬做參考 的時候: 把 設置成 的時候, 的左、上距離就是 ...
  • HTML 文檔中的所有內容都是節點: 整個文檔是一個文檔節點 document 每個 HTML 元素是元素節點 element HTML 元素內的文本是文本節點 每個 HTML 屬性是屬性節點 註釋是註釋節點 圍繞DOM節點的操作可以概括為四種:增、刪、改、查 一、增: 增加新元素 如需向 HTML ...
  • JavaScript 是允許你在網頁中實現複雜事情的一門編程語言 —— 每次當你瀏覽網頁時不只是顯示靜態信息—— 顯示即時更新的內容, 或者互動式的地圖,或 2D/3D 圖形動畫,又或者自動播放視頻等,你可以確信,JavaScript 參與其中。 ...
  • 【註:以下內容參考https://blog.csdn.net/stilling2006/article/details/54376743】 一、認識Sublime text 1、一款跨平臺代碼編輯器,在Linux、OSX和Windows下均可使用; 2、可擴展,包含大量實用插件,可以通過安裝自己領域 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...