前端常見的十種佈局

来源:https://www.cnblogs.com/zxlh1529/archive/2023/03/18/17226718.html
-Advertisement-
Play Games

前端常見的十種佈局方式 作為一個開發小白，也是第一次編寫博客文章，若有錯誤請各位大牛大佬指正，輕噴！！！ 我在學校接觸最多的就是前端，然後最近在學習新的前端知識，發現前端佈局常見的有很多種，不同的應用場景有不同的佈局方式，下麵就來簡單介紹一下吧。 靜態佈局 浮動佈局 定位佈局 柵格佈局 table布 ...


前端常見的十種佈局方式

作為一個開發小白，也是第一次編寫博客文章，若有錯誤請各位大牛大佬指正，輕噴！！！

我在學校接觸最多的就是前端，然後最近在學習新的前端知識，發現前端佈局常見的有很多種，不同的應用場景有不同的佈局方式，下麵就來簡單介紹一下吧。

  • 靜態佈局
  • 浮動佈局
  • 定位佈局
  • 柵格佈局
  • table佈局
  • 彈性（flex）佈局
  • 聖杯佈局
  • 自適應佈局
  • 流式佈局
  • 響應式佈局

前端常用佈局方式

大部分前端佈局都是自上而下，或者自左而右；並且不同的佈局能夠給用戶帶來不一樣的體驗，好的更是能瞬間吸引用戶。

靜態佈局

靜態佈局常見於pc端，是給頁面設定固定的寬高且居中佈局，web網站開發的單位一般用px。

特點：不管頁面多大，始終都是用初始設置的值，一般是定寬相當於min-width。
優點：簡單，沒有相容性問題。現在還有一些門戶網站和企業官網在用，他們有些設備的尺寸是固定的，這個靜態佈局就適合了。而且對於剛入門的技術小白是很適合學習也很容易接受。
缺點：不會隨著屏幕的大小而變化。
下麵是一個靜態佈局的例子：
img

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>靜態佈局</title>
		<style>
			body {
				margin: 0px auto;
				color: white;
				text-align: center;
				line-height: 200px;
			}
			
			.container {
				min-width: 1600px;
				background: indianred;
				margin: 0 auto;
			}
			
			nav,
			section {
				float: left;
				min-height: 200px;
			}
			
			section {
				width: 70%;
			}
			
			nav {
				width: 30%;
				background: blueviolet;
			}
			
			.clearfix:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="clearfix">
				<nav>這是左邊導航</nav>
				<section>這是右邊內容</section>
			</div>
		</div>
	</body>

</html>

浮動佈局

浮動佈局是調用浮動屬性來使得元素向左或者向右移動從而共用一行，直到碰到包含框或者另一個浮動框。浮動元素是脫離文檔流的，不占據頁面空間，但不脫離文本流，且浮動會將行內元素和行內塊元素轉化為塊元素。

特點：

  1. 脫離標準普通流的控制(浮) 移動到指定位置(動), (俗稱脫標)。
  2. 浮動的盒子不再保留原先的位置，會一行內顯示並且元素頂部對齊。
  3. 浮動的元素會具有行內塊元素的特性。

優點：表格佈局方式簡單，且相容性好，是當時非常有效的一種佈局方式。
缺點：需要調整網站佈局對代碼改動很大，頁面的寬度不夠會影響佈局，還有 table 比 其他 HTML 標簽占據更多位元組，延遲頁面生成速度等等。
這裡我使用文字環繞的例子：
img

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>浮動佈局</title>
		<style>
			.box{
				width: 520px;
				overflow: hidden;
				border: 2px solid paleturquoise;
				padding: 10px;
				margin: 20px auto;
				border-radius: 5px;
			}
			.box_left {
				float: left;
				width: 150px;
				margin-right: 15px;
				padding: 1em;
				border-radius: 5px;
				background-color: blueviolet;
				min-height: 150px;
				color: white;
				text-align: center;
				line-height: 150px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="box_left">向左浮動</div>
			<p>浮動佈局是調用浮動屬性來使得元素向左或者向右移動從而共用一行，直到碰到包含框或者另一個浮動框。浮動元素是脫離文檔流的，不占據頁面空間，但不脫離文本流，且浮動會將行內元素和行內塊元素轉化為塊元素。
			</p>
			<div style="clear: both;"></div>
			<p>浮動佈局是調用浮動屬性來使得元素向左或者向右移動從而共用一行，直到碰到包含框或者另一個浮動框。浮動元素是脫離文檔流的，不占據頁面空間，但不脫離文本流，且浮動會將行內元素和行內塊元素轉化為塊元素。</p>
		</div>
	</body>

</html>

註：在上面的例子中我們可以看到浮動元素下麵文字沒有受到影響，是因為在下麵的 div 的樣式加了 clear:both 來清除浮動的影響。
擴展：一般浮動佈局可以使用樣式 box-sizing:border-box; 來確保每個盒子的寬高（包括內邊距和邊框）不會因為擴大而破裂，可以輕鬆使用浮動佈局。

定位佈局

定位佈局是給元素設置 position 屬性從而控制元素顯示在不規則的位置，偏向於單個元素定位操作。
position 有五個選項值：

  • static 靜態定位：頁面元素定位的預設值，出現在正常流中；
  • fixed 固定定位：元素相對於頁面視窗是固定位置的，即使視窗滾動它也不會移動，fixed 屬性是脫離文檔流的，不會占據空間，但會重疊其他元素之上；例如側邊導航條的固定定位等。
  • relative 相對定位：以自身作為參照物，對象不可層疊、不脫離文檔流，移動相對定位元素，但它原本所占的空間不會改變。通過 top, bottom, left, right 定位；
  • absolute 絕對定位，選擇最近一個設置有相對定位的父元素進行絕對定位，若沒有則以 body 的坐標原點為參照。與其他元素重疊，脫離文檔流，不占空間，通過 top, bottom, left, right 定位；
  • sticky 粘性定位：基於滾動位置來定位，在 relative 和 fixed 之間切換，當超出頁面目標區域時，就是 fixed 固定在目標位置，否則為 relative；元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效，否則其行為與相對定位相同。

這些不同的定位在不同的場景有不同的作用，這裡就不一一列舉。

特點：定位佈局中不同的屬性有各自的特點，最明顯的是使用定位的元素獨立開來。
優點：無需考慮元素的顯示方式和位置，直接獨立定位，方便控制。
缺點：很難預測各元素之間是否有影響，例如重疊覆蓋等。
以父元素相對子元素絕對佈局為例：
img

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>定位佈局</title>
		<style>
			.container {
				position: relative;
				width: 400px;
				height: 400px;
				background-color: chocolate;
			}
			.box{
				width: 100px;
				height: 100px;
				position: absolute;
				background-color: antiquewhite;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				text-align: center;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">這是子元素</div>
		</div>
	</body>
</html>

註：在上面的例子中我們可以看到子元素居中於父元素，這裡是絕對定位配合使用 transform: translate(-50%,-50%); 來居中佈局。

柵格佈局

柵格佈局也被稱為網格佈局，它是一種新興的佈局方式，常用的有瀑布流（每列的項目高度是隨機的，根據自身的內容而定，詳細可以看這個）。柵格佈局是二維的，包含了行和列，與彈性佈局相似，柵格系統也是由柵格容器包裹柵格元素進行使用，且它的佈局很簡單，就是把一個區域劃分為一個個的格子排列好，再把需要的元素填充進去。它的應用場景沒有彈性佈局和浮動佈局多，因為有些瀏覽器對它的支持性較不好。詳細可以看這位大佬的CSS柵格佈局

特點：重視比例、秩序、連續感和現代感。以及對存在於版面上的元素進行規劃、組合、保持平衡或者打破平衡，以便讓信息可以更快速、更便捷、更系統和更有效率的讀取；另外最重要的一點是，負空間的規劃（即：留白）也是柵格系統設計當中非常重要的部分 ---wiki
優點：

  1. 能大大的提高網頁的規範性和可重用性。在柵格系統下，固定和靈活的尺寸，這對於大型網站的開發和維護來說，能節約不少成本。
  2. 基於柵格進行設計，可以讓整個網站各個頁面的佈局保持一致。這能增加頁面的相似度，提升用戶體驗。
  3. 將多個項目放入網格單元格或區域中，可以部分重疊。
    缺點：相容性不好。
    這裡使用grip佈局，還有跟 flex 和響應式結合等。
    img
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>柵格佈局</title>
    <style>
        main {
            border: solid 5px gray;
            display: inline-grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
        }

        main div {
            background: burlywood content-box;
            padding: 10px;
            border: 1px black dashed;
            text-align: center;
            line-height: 80px;
            color: #fff;
        }
    </style>
</head>

<body>
    <main>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
   </main>
</body>

</html>

table佈局

在我看來柵格佈局跟 table 有相似的點，但是柵格佈局比較友好，只是 div 進行各種處理。table 佈局是在父元素使用 display:table; 子元素使用 display:table-row或 display:table-cell; 子元素會預設自動平均劃分父元素的空間。

特點：如果設置其中一個子元素 table-cell 為固定寬度，那麼其餘子級容器會自動平分寬度沾滿父級容器。
優點：相容性好，容易上手，做表格是100%正確。
缺點：

  1. 比其他 html 標簽占更多的位元組。造成下載時間延遲，占用伺服器更多的流量資源（代碼冗餘）。
  2. 渲染不友好，阻礙瀏覽器渲染引擎的渲染順序，等內容全部載入完成在顯示表格，會延遲頁面的生成速度，讓用戶等待時間更久。
  3. 靈活性差，一旦設計確定會變死，後期很難通過 CSS 改變新的面貌，且不能自適應。
  4. 不利於搜索引擎抓取信息，直接影響到網站的排名。
    這裡使用簡單的 table 佈局例子：
    img
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>table佈局</title>
		<style>
			.box {
				width: 600px;
				height: 100px;
				display: table;
			}
			
			.a,
			.b,
			.c,
			.d {
				display: table-cell;
			}
			
			.a {
				background: blueviolet;
			}
			
			.b {
				background: aqua;
			}
			
			.c {
				background: palevioletred;
			}
			
			.d {
				background: hotpink;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
			<div class="d"></div>
		</div>
	</body>

</html>

彈性（flex）佈局

flexible 模型又被稱為 flexbox，它不像柵格佈局可以同時處理行跟列，只能處理單行或者當列，是一維的佈局模型。它可以簡便、完整且適應的實現頁面各種佈局，web網站頁面一般用 em 或者 rem 單位(1em = 16px, 1rem = 10px)，小程式一般用 rpx 單位(1px = 2rpx)進行相對佈局，特別的是字體能夠放縮方便且自適應。flex 是我平常使用最多的佈局，它適用的場景有很多，主要是用於比例分割居中顯示，例如攜程的移動頁面或者淘寶網頁的佈局等。

特點：能夠調整其子元素在不同的屏幕解析度下用最適合的方法填充合適的空間。
優點：適應性強，容易上手，且很簡便的完成很多頁面佈局效果，後期維護容易，若需求細微度不高，那麼是很好的選擇。
缺點：相容性差，在低版本的瀏覽器有可能渲染不出效果（ie9及以上）。
註：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。
img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex佈局</title>
    <style>
        .flexbox {
            width: 500px;
            background: bisque;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding: 10px;
        }
        .flexbox div {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            border: 1px solid #fefefe;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="flexbox">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

聖杯佈局

看到聖杯佈局是不是會想到雙飛翼佈局呢？其實聖杯佈局跟雙飛翼的佈局區別在於中間是否有包括兩邊的區域，聖杯佈局是沒有的，兩邊或者一邊非主要部分填充父元素的 padding；而雙飛翼佈局是有的，但多了一層 dom 節點，非主要部分用的是 center 部分的 margin 空間，聯想一下名字就好啦!下麵看圖吧比較容易清楚：
img
img

聖杯佈局要求頭部跟尾部要有固定的高，寬則占滿屏幕；中間是一個三欄佈局，比頭尾高度要高，兩側寬度不變，中間自動充滿區域。其實這樣一來只要有去瀏覽過網站的大佬們都知道聖杯佈局比較常見，大部分網站比較喜歡這種佈局。聖杯佈局可以用浮動、flex 和 grid 三種實現。

特點：中間主要部分放在文檔流前面保證先行渲染。
優點：佈局簡單，縮到最小也不會變形。
缺點：瀏覽器相容性不是很友好。當瀏覽器無限放大的時候聖杯會破碎掉，而當 center 部分寬小於 兩邊或者單邊就會發生佈局混亂。
下麵使用浮動來實現聖杯佈局：
img

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>聖杯佈局</title>
</head>
<style>
  body {
    min-width: 600px;
    font-size: 20px;
  }
 
  #header, #footer {
    background-color: blueviolet;
    text-align: center;
    height: 100px;
    line-height: 100px;
  }
  #footer {
    clear: both;
  }
 
  #center {
    padding-left: 200px; 
    padding-right: 200px;  
    overflow: hidden;
  }
 
  #center .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #content {
    width: 100%;
    background: rgb(206, 201, 201);
  }
 
  #nav {
    width: 200px;           
    right: 200px;         
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
 
  #aside {
    width: 200px;         /*  */
    margin-left: -200px;  
    right: -200px;
    background: rgb(231, 105, 2);
  }
 
</style>
 
<body>
  <header id="header">header</header>
  <div id="center">
    <section id="content" class="column">content</section>
    <nav id="nav" class="column">nav</nav>
    <aside id="aside" class="column">aside</aside>
  </div>
  <footer id="footer">footer</footer>
 
 
</body>
 
</html>

自適應佈局

當時 Ethan Marcotte 提出這個自適應這個概念是為了能夠解決移動端網頁的問題。總結的來說就是創建多個靜態佈局，每個佈局對應一個屏幕的解析度範圍，每個靜態佈局頁面的元素大小不會因為視窗的改變而變化，除非從一個靜態佈局變到另外一個佈局，不然在同一設備下還是固定的佈局。常用的方式有使用 CSS 的 @media 媒體查詢，也有高成本的 JS 進行設計開發，或者使用第三方開源框架 bootstrap，這個能夠很好的支持多個瀏覽器。

特點：自適應多端，不同的解析度下為固定佈局，不會使元素大小發生變化。
優點：

  1. 對網站的複雜程度相容性大。
  2. 測試容易，代碼執行效率高，降低了開發者的頁面開發成本代價。
  3. 在一定寬度範圍內提供了穩定的視覺體驗，增加用戶體驗。
    缺點：對老舊或者非標準的瀏覽器相容性較差，當對一個頁面作出修改時，同時需要改變多種尺寸的佈局，流程相對變得繁瑣。
    下麵用的CSS媒體查詢的方式來實現響應式佈局：
    img img
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自適應佈局</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            #head, #foot, #main
            {
                height: 100px;
                width: 1200px;
                background-color: blanchedalmond;
                text-align: center;
                font-size: 30px;
                line-height: 100px;
                margin: 0 auto;
            }
            #head div{
                display: none;
                font-size: 20px;
                height: 30px;
                width: 100px;
                background-color: greenyellow;
                float: right;
                line-height: 30px;
                margin-top: 35px;
            }
            #head ul{
                width: 80%;
            }
            #head ul li{
                width: 20%;
                float: left;
                text-align: center;
                list-style: none;font-size: 20px;
            }
            #main{
                height: auto;
                margin: 10px auto;
                overflow: hidden;
            }
            .left, .center, .right{
                height: 500px;
                line-height: 500px;
                float: left;
                width: 20%;
                background-color: peachpuff;
            }
            .center{
                width: 60%;
                border-left: 10px solid #FFF;
                border-right: 10px solid #FFF;
                box-sizing: border-box;
            }
            @media only screen and (max-width: 1200px) {
                #head, #foot, #main{
                width: 100%;
                }
            }
            @media only screen and (max-width: 612px) {
                .left, .center, .right{
                    width: 100%;
                    display: block;
                    height: 150px;
                    line-height: 150px;
                }
                .center{
                    border: hidden;
                    border-top: 10px  solid #FFFFFF;
                    border-bottom: 10px solid #FFFFFF;
                    height: 500px;
                    line-height: 600px;
                }
                #head ul{
                    display: none;
                }
                #head div{
                    display: block;
                }
            }
        </style>   
    </head>
    <body>
        <div>
            <header id="head">
                <ul>
                    <li>nav1</li>
                    <li>nav2</li>
                    <li>nav3</li>
                    <li>nav4</li>
                    <li>nav5</li>
                </ul>
                <div>icon</div>
            </header>
            <section id="main">
                <div class="left">left</div>
                <div class="center">center</div>
                <div class="right">right</div>
            </section>
            <footer id="foot">footer</footer>
        </div>
    </body>
</html>

擴展：圖片較多的網站適合自適應佈局，但是文字為主的就不太適合了，適合定寬，這樣也會提高相容性和開發效率。

流式佈局

流式佈局也叫百分比佈局（也有叫非固定像素佈局），是頁面中的元素根據屏幕解析度自動進行適配調整，頁面元素大小會發生變化，但是整體佈局不會發生變化，始終都是滿屏顯示。它使用的是百分比定義寬，但高一般會被固定住，這種佈局在早期是為了適應不同尺寸的PC屏幕，但現在在移動端比較常見。

特點：適配，頁面元素的寬度按照屏幕解析度進行適配調整，但整體佈局不變。
優點：通過設置百分比寬度適應不同尺寸的屏幕。
缺點：高度和文字大小都是固定的，所以當屏幕尺寸過大或者過小時某些元素會被拉伸拉扁（高度、文字大小不變），無法正常顯示，顯得不協調，帶來不好的用戶體驗。

常用的流式佈局有：

  • 左側固定，右側自適應
  • 右側固定，左側自適應
  • 左右兩側固定，中間自適應（聖杯佈局）
  • 等分佈局

下麵用等分流式佈局：
img

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- 
			width=device-width 表示元素寬度與當前設備的視口一樣大，
			initial-scale=1.0 表示禁止當前頁面出現縮放
		-->
		<title>流式佈局</title>
		<style>
			body {
				margin: 0;
			}
			
			.container {
				height: 200px;
			}
			
			.item {
				height: 100%;
				/*display: inline-block;*/  
				/* 使用行內塊狀元素會出現邊距像素，寬度要改為24.5，當盒子撐滿會自動換行 */
				float: left;
				width: 25%;
			}
			
			.item1 {
				background-color: blanchedalmond;
			}
			
			.item2 {
				background-color: skyblue;
			}
			
			.item3 {
				background-color: plum;
			}
			
			.item4 {
				background-color: greenyellow;
			}
			/* 消除浮動，相當於在後面增加一個被隱藏的div */
			.clearfix:after {
				content: '';
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
		</style>
	</head>

	<body>
		<!-- 父元素清除浮動 -->
		<div class="container clearfix">
			<div class="item item1"></div>
			<div class="item item2"></div>
			<div class="item item3"></div>
			<div class="item item4"></div>
		</div>
	</body>

</html>

響應式佈局

上面提到了自適應佈局，這裡又提到了響應式佈局，那麼兩者有什麼區別呢？自適應佈局是一套靜態頁面內容佈局對應一個解析度範圍，位置會變但是大小不變，需要多套界面佈局；響應式通過檢測視口解析度判斷是pc端、平板還是手機，針對不同的客戶端在客戶端做處理，來展示不同的佈局和內容從而達到令人滿意的效果，屏幕大小的變化會導致元素的位置和大小都改變，可以說是流式佈局和自適應佈局的結合體，一套界面佈局即可適應所有不同的尺寸和終端，可想而知設計考慮的比自適應複雜的多。

響應式與自適應的原理是相似的，都是檢測設備，根據不同的設備採用不同的css，而且css都是採用的百分比的，而不是固定的寬度，不同點是響應式的模板在不同的設備上看上去是不一樣的，會隨著設備的改變而改變展示樣式，而自適應不會，所有的設備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據設備採用不同的展示樣式，流式就是採用了一些設置，當寬度大於多少時怎麼展示，小於多少時怎麼展示，而且展示的方式向水流一樣，一部分一部分的載入，靜態的就是採用固定寬度的了。--笨鳥兒

特點：創建多個流式佈局對應不同的解析度範圍，即每個屏幕解析度下麵會有一個佈局樣式，元素位置和大小都會變。
優點：面對不同解析度設備靈活性強，能夠快速的解決多設備顯示適應問題，如果有足夠耐心去設計考慮，那麼可以達到很理想的效果。
缺點：

  1. 限制於內容佈局、框架並不複雜的網站。
  2. 需要匹配足夠多的屏幕解析度，效率低下。
  3. 無用代碼多，載入時間加長。
  4. 只能適應主流的寬高。

使用簡單的媒體查詢例子實現：
img img img

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0" />
		<title>響應式佈局</title>
		<style>
			body{
				margin: 0 auto;
				min-width: 375px;
			}
			@media screen and (min-width: 375px) {
				body {
					width: 680px;
					background-color: yellow;
				}
			}
			
			@media screen and (min-width: 612px) {
				body {
					width: 768px;
					background-color: blue;
				}
			}
			
			@media screen and (min-width: 1200px) {
				body {
					width: 1190px;
					background-color: red;
				}
			}
		</style>
	</head>

	<body>
	</body>

</html>

總結

前端佈局有很多種，各式各樣，每個都有它自己適合的應用場景，並不是說主流或者常用好的就是最好的，視情況而定，個人用的比較多的是 flex 佈局

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

-Advertisement-
Play Games
更多相關文章
  • Redis-篇
    最近寫了一個demo：demo的github地址 一. 簡單介紹 1. Server端 它是一個WebApi服務，把它當成一個黑盒就行了。 2. MiddleServer端 是重點，它是一個WebApi服務，包含一個GetValues介面和一個Query2介面。 Query2介面是一個簡單的介面。 ...
  • [ Docker ] 使用 Watchtower 自動更新容器
    Watchtower 是一個用於自動更新 Docker 容器的工具。它可以監視 Docker Hub 或私有倉庫中的鏡像，併在發現新的鏡像版本時自動更新容器。 ...
  • centos 9 設置靜態ip
    (文章目錄) 01、首先配置文件地址改了 地址為 ` /etc/NetworkManager/system-connections/網卡名 ` 網卡名可以使用 ip a查看，紅框中就是網卡名 網卡名 ls命令可以看到有以下配置文件 ` es160.nmconnection ` vi編輯 ` [con ...
  • linux驅動創建節點文件(device和class方式)
    一、共用記憶體是什麼 在Linux系統中，共用記憶體是一種IPC（進程間通信）方式，它可以讓多個進程在物理記憶體中共用一段記憶體區域。 這種共用記憶體區域被映射到多個進程的虛擬地址空間中，使得多個進程可以直接訪問同一段物理記憶體區域中的數據，從而實現進程間的高速數據交換和通信。 二、共用記憶體的原理 共用記憶體基於 ...
  • DevOps到底是個什麼鬼
    前騰訊工程師，經歷過大廠，也經歷過創業！ 我已奔四，但我還在持續學習，持續成長！ 我非常樂意把我的經驗和心得分享給你！ 我是阿銘，關註我，和我一起成長為技術大牛！ ↓↓↓↓↓ 關於DevOps這個概念，可能100個人能給出100個說法，這是因為每個人所接觸到的環境有所差異，不同的公司要解決的問題自然 ...
  • 為什麼文件刪除了但磁碟空間沒有釋放？
    案例現象 這天，監控系統發來一條告警消息，內容說某台伺服器根目錄磁碟占用空間達到閾值，超過百分之八十了 登上伺服器，df -Th 看一下，發現磁碟空間確實不夠用了 進入到根目錄，然後 du -sh * 可以看到，var 目錄下的磁碟空間已經占用了 75G 既然如此，刪除 var 目錄下一些占空間較大 ...
  • 談談 Vue toRef 和 reactive
    reactive reactive 創建一個深層的對象的響應式代理，即對象根屬性以及嵌套對象的屬性都是響應式的。如果使用 ES6 結構賦值，就會使得這個對象的響應式代理第一層（根屬性）屬性失去響應式，但其嵌套下的對象屬性還是響應式的。 shallowReactive 會創建淺層的對象的響應式代理，只 ...
  • 使用JS快速讀取TXT文件
    1 前言 最近有個需求，需要使用JS快速讀取外部大數據文件（60w條記錄的表）。筆者嘗試過使用JS讀取Excel文件，但是跑了十幾分鐘仍未出結果，後來筆者嘗試將原數據保存為TXT文件，再從TXT文件中讀取數據，只需幾秒鐘即可讀取完畢。在此分享一下，也留著以後備用。 2 案例 為方便快速理解，筆者挑選 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類