CSS-寬度自適應和瀏覽器相容筆記

来源:https://www.cnblogs.com/tynam/archive/2019/05/08/10834091.html
-Advertisement-
Play Games

自適應 寬度自適應：網頁元素根據視窗或子元素自動調整寬度 適用百分比進行設置，例如：100% 鋪滿；50% 占據一般寬度 塊元素如果不設置寬度，預設為100% 自適應中可以設置最大或者最小寬度和高度 例如：min-height：300px；最小高度為300px； 但是在IE6瀏覽器中不識別 min- ...


自適應

　　寬度自適應：網頁元素根據視窗或子元素自動調整寬度

　　　　適用百分比進行設置，例如：100% 鋪滿；50% 占據一般寬度

　　　　　　塊元素如果不設置寬度，預設為100%

　　　　自適應中可以設置最大或者最小寬度和高度

　　　　　　例如：min-height：300px；最小高度為300px；

　　　　　　但是在IE6瀏覽器中不識別 min-height/max-height/min-width/max-width 屬性，height 屬性在IE6中類似min-height ；

　　　　　　IE6 中解決最小高度方法：

　　　　　　　　hack1:min-height:value;_height:value;

　　　　　　　　hack2:min-height:value; height:auto!import; height:value;　　　　　　

　　高度自適應　

　　　　設置方法：html,body {height:100%;}

　　　　　　需要自適應的元素：height: 100%;

　　　　根據父元素自適應

　　　　　　父元素：height: value;

　　　　　　需要自適應的子元素：height:100%;

　　　　　　height:auto;  指根據塊內元素自動調節；

　　　　　　height：100%；指相對父塊高度而定義。按照離他最近且有定義高度的父層的高度進行定義；　　　

 

瀏覽器相容

　　五大瀏覽器四大內核　　　

　　　　IE瀏覽器內核：Trident內核，也是俗稱的IE內核；
　　　　Chrome瀏覽器內核：統稱為Chromium內核或Chrome內核，以前是Webkit內核，現在是Blink內核；
　　　　Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核；
　　　　Safari瀏覽器內核：Webkit內核；
　　　　Opera瀏覽器內核：最初是自己的Presto內核，後來是Webkit，現在是Blink內核；
　　為什麼會出現瀏覽器相容性問題

　　　　因為不同瀏覽器使用內核及所支持的HTML（標準通用標記語言下的一個應用）等網頁語言標準不同；以及用戶客戶端的環境不同（如解析度不同）造成的顯示效果不能達到理想效果。最常見的問題就是網頁元素位置混亂，錯位。

　　CSS Bug

　　　　css樣式在各瀏覽器中解析不一致的情況，或者說css樣式在瀏覽器中不能正確顯示的問題

　　CSS Hack

　　　　css 中， hack是指一種兼容性css在不同瀏覽器中正確顯示的技巧方法，因為他們都屬於個人對css代碼的非官網修改，或非官網的補丁。

　　Filter　

　　　　過濾的意思，他是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法，本質上說Filter是一種用來過濾不同瀏覽器的Hack類型

 

對瀏覽器css相容性的學習理解及問題解決彙總

　　轉載：https://www.cnblogs.com/ahao68/p/5431250.html

一、從瀏覽器內核的角度 來看，瀏覽器相容性問題可分為以下三類：   

     1. 渲染相關：和樣式相關的問題，即體現在佈局效果上的問題。 

     2. 腳本相關：和腳本相關的問題，包括JavaScript和DOM、BOM方面的問題。對於某些瀏覽器的功能方面的特性，也屬於這一類。 

     3. 其他類別：除以上兩類問題外的功能性問題，一般是瀏覽器自身提供的功能，在內核層之上的。

 

二、瀏覽器相容性相關問題及其解決思路

1、目前，各主流瀏覽器的新版本，對於  W3C  的標準支持很好，因此，首先保證代碼符合 W3C 的標準，這是解決瀏覽器相容問題的前提。

     其次，對於某些支持受限的屬性，針對不同的瀏覽器添加相應的首碼，比如-webkit-、-o-、-moz-。

 

 

2、不同瀏覽器預設的內外邊距不同的問題 

解決： *{margin:0;padding:0;}

 

3、不同瀏覽器水平居中的問題：ie6-7文本居中，嵌套的塊元素也會居中 ，ff /opera /safari /ie8文本會居中，嵌套塊不會居中 

解決： 塊元素設置  margin-left:auto;margin-right:auto 或margin:0 auto; 或外層嵌套div設置<div align=”center”></div>

          浮動塊元素的居中：<div style="margin:0px auto;"><div style="float:left;"></div></div>

 

4、不同瀏覽器垂直居中的問題 ： 在瀏覽器中 想要垂直居中，設置vertical-align:middle; 不起作用。例如：ie6下文本與文本輸入框對不齊，需設置

     vertical-align:middle，但是文本框的內容不會垂直居中 

解決： 給容器設置一個與其高度相同的行高 line-height:與容器的height一樣

 

5、不同瀏覽器關於高度問題 ： 如果是動態地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。 如果設定了高度，內容過      多時，ie6下會自動增加高度、其他瀏覽器會超出邊框

解決： 1.設置overflow:hidden; 2.高度自增height:auto!important;height:100px;

  

6、IE6 預設的div高度問題： ie6預設div高度為一個字體顯示的高度，在ie6下div的高度大於等於一個字的高度，因此在ie6下定義高度為1px的容器，顯示的是一個字                                          體的高度

解決：為這個容器設置下列屬性之一 1、設置overflow:hidden; 2、設置line-height:1px; 3、設置zoom:0.08 

 

7、IE6 最小高度(寬度)的問題： ie6不支持min-height、min-width屬性，預設height是最小高度，width是最小寬度。

解決： 使用ie6不支持但其餘瀏覽器支持的屬性!important。 設置屬性min-height:200px; height:auto !important; height:200px;

 

8、td高度的問題 ： table中td的寬度都不包含border的寬度，但是oprea和ff中td的高度包含了border的高度 

解決： 設置line-height和height一樣。在ie中如果td中的沒有內容，那麼border將不會顯示

 

9、div嵌套p時，出現空白行問題：div中顯示<p>文本</p>，ff、oprea、Chrome：top和bottom都會出現空白行，但是在ie下不會出現空白行。

解決：設置p的margin:0px，再設置div的padding-top和padding-bottom

 

10、IE6-7圖片下麵有空隙的問題：塊元素中含有圖片時，ie6-7中會出現圖片下有空隙

解決：1、在源代碼中讓</div>和<img>在同一行

        2、將圖片轉換為塊級對象display:block; 

        3、設置圖片的垂直對齊方式  vertical-align:top/middle/bottom 
        4、改變父對象的屬性，如果父對象的寬、高固定，圖片大小隨父對象而定，那麼可以對父元素設置： overflow:hidden;  

        5、設置圖片的浮動屬性  float:left;

 

11、IE6雙倍邊距的問題 ： ie6中設置浮動，同時又設置margin時，會出現雙倍邊距的問題 例float:left;width:100px;margin:0 100px;  

解決： 設置display:inline;

 

12、IE6兩個層之間3px的問題： 左邊層採用浮動，右邊沒有採用浮動，這時在ie6中兩層之間就會產生3像素的間距 

解決： 1、右邊層也採用浮動  float  2、左邊層添加屬性  margin-right:-3px;

 

13、IE6 子元素絕對定位的問題： 父級元素使用padding後，子元素使用絕對定位，不能精確定位 

解決： 在子元素中設置  _left:-20px; _top:-1px;

 

14、顯示手型cursor:hand 問題： ie6/7/8、opera  都支持 ，但是safari 、 ff 不支持 

解決： 寫成 cursor:pointer;  (所有瀏覽器都能識別) 

 

15、IE6-7 line-height失效的問題： 在ie中img與文字放一起時， line-height不起作用  

解決：都設置成float

 

16、td自動換行的問題 ： Table寬度固定，td自動換行 

解決： 設置Table的table-layout:fixed，td的word-wrap:break-word

 

17、子容器浮動後，父容器擴展問題： 子容器都float以後，父容器沒有設定高度,父容器將不會擴展

 解決： 只需要添加一個clear:both的div，代碼如下：

 <div style="border:1px solid #333;width:204px"> 
    <div style="width:100px;border:1px solid #333; float:left; ">子容器a</div> 
    <div style="width:100px;border:1px solid #333; float:left;">子容器b</div> 
    <div style="clear:both"></div>

 </div>

 

18、透明png圖片會帶背景色問題： 在ie6下透明的png圖片會帶一個背景色 

解決： 

background-image: url(icon_home.png);/* 其他瀏覽器 */ 

background-repeat: no-repeat;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */ 
_background-image: none; /* IE6 */ 

 

19、list-style-position預設值的問題： ie下list-style-position預設為inside,   firefox預設為outside 

解決： css中指定為outside即可解決相容性問題

 

20、 list-style-image準確定位的問題：  li前設置圖片時，圖片與其後的文字對齊問題 

解決：1、採用背景定位 和 字元縮進的方法 background:url() no-repeat left center; text-index:16px;

         2、採用相對定位方法 li 設置list-style:url(); li的子元素position:relative;top:-5px; 

 

21、ul標簽預設值的問題 ： ul標簽在ff中預設是有padding值的,而在ie中只有margin有值

 解決： 定義ul{margin:0;padding:0;}就能解決大部分問題 

 

22、IE中li指定高度後，出現排版錯誤 問題： 在ie下如果為li指定高度可能會出現排版錯位

解決： 設置line-height

 

23、ul或li浮動後，顯示在div外 問題： div中的ul或li設置float以後，都不在div中 

解決： 必須在ul標簽後加<div style="clear:both"></div>來閉合外層div 

 

24、ul或者li浮動後，margin變大 問題： ul設置 float後，在ie中margin將變大 

解決： 設置ul的display:inline，li的list-style-position:outside；li浮動問題設置li的display:inline

 

25、嵌套使用ul、li的問題：  ie的bug，嵌套使用ul、li時，裡層的li設置float以後，外層li不設置float, 裡面的ul頂部和它外面的li總是有一段間距 

解決： 設置裡面的ul的zoom:1

 

26、 IE6-7 li底部有3px的問題 ：這個bug產生的充要條件是li的子元素浮動並且li設置了以下CSS屬性之一：width、height、zoom、padding-top、padding-bottom、                                                    margin-top、margin-bottom。

解決：

1、div設置clear:left|both，這時li不能設置width、height、zoom。  

2、li設置float:left，這時li可以設置width、height、zoom。  

3、li設置clear:left|both，這時li不能設置width、height、zoom。

4、IE6/IE7的這個Bug可以通過給li中的div設置vertical-align:top|middle|bottom解決。

 

27、IE6 垂直列表間隙的問題：  li中有a且設置display:block時，ie6中列表間會出現空隙 

解決： 1、li中加display:inline; 2、li使用float  然後 clear:both; 3、給包含的文本末尾添加一個空格 4、設置width 

 

28、IE6 列表背景顏色失效的問題 ： 當父元素設置position:relative;時，在ie6中第一個ul、ol、dl的背景顏色失效

 解決： ul、ol、dl 都設置為position:relative;

 

29、IE6-7 列表背景顏色失效的問題2 ： 做橫嚮導航欄時，ul設置為float且有背景色，li設置為float。ie6-7背景顏色失效 

解決： 很多ie的bug都可以通過觸發layout來解決 ul添加屬性 1、height:1%; 2、float:left; 3、zoom:1;

 

30、列表不能換行的問題 ：  li設置為浮動，後面的li緊隨其後，不能換行

 解決： 1、為這個ul定義合適的寬高 2、給包含這個ul 的父div定義合適的寬高。

 

31、超鏈接訪問過後hover樣式不出現的問題 ： 擊超鏈接後，hover、active樣式沒有效果

解決： 改變CSS屬性的排列順序: L-V-H-A

 

32、 禁用中文輸入法的問題 ： 不能在輸入框中輸入漢字 

解決： 只在ie系列 和ff中有效 ime-mode:disabled    (但可以粘貼) 禁用粘貼： onpaste="return false"

 

33、除去滾動條的問題 ： 隱藏滾動條 

解決： 1、只有ie6-7支持<body scroll="no"> 2、除ie6-7不支持 body{overflow:hidden} 3、所有瀏覽器 html{overflow:hidden}

 

34、讓層顯示在FLASH之上：

解決：把FLASH設置透明 1、<param name=" wmode " value="transparent" /> 2、<param name="wmode" value="opaque"/>

 

35、去除鏈接虛線邊框的問題 ： 當點擊超鏈接後，ie6/7/8  ff會出現虛線邊框 ,而opera、safari沒有虛線邊框

 解決： ie6/7中 設置為a { blr:expression(this.onFocus=this.blur()) }  ie8 和 ff 都不支持expression  在ie8 、ff中設置為  :focus { outline: none; }

 

36、css濾鏡的問題 ： css濾鏡只在ie中有效，Firefox, Safari(WebKit), Opera只能夠設置透明，它們不支持濾鏡filter，無法實現圖片切換中間變換的效果，只能通過透明度來                                設置。 

解決： ff中設置透明度   -moz-opacity:0.10;  opacity:0.6; ie中只設置filter:alpha(opacity=50); 時，ie6-7失效，還要設置 1、zoom:1;  2、width:100%; 

 

37、IE6背景閃爍的問題：鏈接、按鈕用CSS sprites作為背景，在ie6下會有背景圖閃爍的現象。原因是:IE6沒有將背景圖緩存，每次觸發hover的時候都會重新載入

解決：用JavaScript設置ie6緩存這些圖片： document.execCommand("BackgroundImageCache ",false,true);

 

38、ff、chrome絕對定位無效 問題： 在IE給td設置position:relative，然後給它包含的一個容器使用position:absolute進行定位是有效的，但在FF和Chrome下卻不可以。 

解決：設置td的display:block。

 

39、IE6 絕對定位的問題 問題： 

<div style="position:relative;border:1px solid orange;text-align:center;"> 
<div style="position:absolute;top:0;left:0; background:#CCC;">dovapour</div> 
<a href="#" title="vapour的blog">內容</a> 

</div>

解決：

left的定位錯誤問題 
1、給父層設置zoom:1觸發layout。  2、給父層設置寬度width   
bottom的定位錯誤問題 
1、給父層設置zoom:1觸發layout。  2、給父層設置高度height

 

40、float的div閉合的問題：  

例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >這裡的NOTfloatC並不希望繼續平移，而是希望往下排。(其中floatA、floatB的屬性已經設置為 float:left;)    
這段代碼在IE中毫無問題，問題出在其他瀏覽器中。原因是NOTfloatC並非float標簽，必須將float標簽 閉合。

解決：

在 <#div class=”floatB”> <#div class=”NOTfloatC”>之間加上 < #div class=”clear”>這個div一定要註意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關係，否則會 產生異常。並且將clear這種樣式定義為為如下即可：.clear{ clear:both;} 

 

41、選框、覆選框與後面的文字對不齊 問題：  

 解決： 
.align{font-size:12px;} 
.align input{ display:block; float:left;} 
.align label{ display:block; float:left; padding-top:3px; *padding-top:5px;} 

不足之處：設置padding後高度和寬頻都會增加

 

42、邊框重疊說明 說明： 

為 table、td 都指定了邊框後，然後使用border-collapse:collapse讓邊框重疊，可以看出在發生重疊時，Firefox 是用 td 覆蓋 table 的，而 IE 是用 table 覆蓋 td 的。使用時候需要註意。

 

43、設置td padding的說明：

設置td的padding以後高度和寬頻都會增加,padding-left和padding-right的效果都一樣增加了td的寬頻，但是padding-top和padding-bottom的效果不一樣。最好不要使用td的ding-top和padding-bottom

 

44、使一個層垂直居中於瀏覽器中 說明：

 使用百分比絕對定位,與外補丁負值的技巧,負值的大小為其自身寬度高度除以二 

div {  position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px;  width:200px; height:200px; border:1px solid red;  }

 

45、行內屬性標簽，設置display:block後採用float佈局，又有橫行的margin的情況，IE6間距bug，IE6里的間距比超過設置的間距

解決：在display:block;後面加入display:inline;display:table;

備註：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

 

46、float的div閉合;清除浮動;自適應高度; 

① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >這裡的NOTfloatC並不希望繼續平移，而是希望往下排。(其中floatA、floatB的屬性已經設置為 float:left;) 這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標簽，必須將float標簽閉合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之間加上 < #div class=”clear”>這個div一定要註意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關係，否則會產生異常。並且將clear這種樣式定義為為如下即可： .clear{ clear:both;} 

②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動適應，要在wrapper裡面加上overflow:hidden; 當包含float的 box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性，用zoom:1;可以做到，這樣就達到了相容。 例如某一個wrapper如下定義： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} 

③對於排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> 比如我們要將page的背景設置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left center right的向下拉長,而 page居然保存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設置成float,所以我們應該這樣解決 <div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一個float left而寬度是100%的DIV解決之 

④萬能float 閉合(非常重要!) 關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上 class="clearfix" 即可,屢試不爽. /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 或者這樣設置：.hackbox{ display:table; //將對象作為塊元素級的表格顯示} 

 

三、csshack的使用

CSS Hack大致有3種表現形式，CSS類內部Hack、選擇器Hack以及HTML頭部引用(if IE)Hack，

1、CSS類內部Hack，使用了漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，最後用“_”將IE7、IE6區分。

複製代碼 
.bb{
height:32px;
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/  
_background-color:#1e0bd1;/*IE6識別*/
}
/*一個用於展示的class為bb的div標簽*/
< div class ="bb"></ div >
複製代碼

 

2、HTML頭部引用(if IE)Hack

只在IE下生效

<!--[if IE]>

這段文字只在IE瀏覽器顯示

<![endif]-->

只在IE6下生效

<!--[if IE 6]>

這段文字只在IE6瀏覽器顯示

<![endif]-->

只在IE6以上版本生效

<!--[if gte IE 6]>

這段文字只在IE6以上(包括)版本IE瀏覽器顯示

<![endif]-->

只在IE8上不生效

<!--[if ! IE 8]>

這段文字在非IE8瀏覽器顯示

<![endif]-->

非IE瀏覽器生效

<!--[if !IE]>

這段文字只在非IE瀏覽器顯示

<![endif]-->

 

3、選擇器Hack

選擇器首碼法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的首碼進行hack。

比如：

*html *首碼只對IE6生效*

+html *+首碼只對IE7生效

@media screen\9{...}只對IE6/7生效

@media \0screen {body { background: red; }}只對IE8有效

                                                                     csshack彙總表

 


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

-Advertisement-
Play Games
更多相關文章
  • iOS----------jenkins
    參考： https://www.jianshu.com/p/41ecb06ae95f ...
  • iOS - iPhone屏幕適配/啟動圖適配/APP圖標適配(iPhone最全尺寸包含iPhoneX/XR/XS/XS Max等)
    趁iPhone新品還沒有發佈,先整理一下屏幕適配、啟動圖適配、APP圖標適配的筆記,方便以後查閱: 註:部分圖片來源於網路 違刪; (一)iPhone屏幕適配: (1)屏幕解析度: ①設計尺寸規範(表格): ②設計尺寸規範(圖文): ③開發尺寸易理解: (二)iPhone劉海屏/非劉海屏PT尺寸簡要 ...
  • Android View篇之自定義驗證碼輸入框
    首先，我們來看看實現的是怎麼樣的效果： 如果我們拿到這樣的UI，想到的佈局應該是用4個 包在橫向的 裡面，但今天要講的View，所以我們決定用一個自定義的 畫出來。 學到什麼？ 基本理解畫布概念 畫布的狀態、平移 佈局測量 畫圖片 功能需求 高亮當前輸入框 輸入滿4個數字自動調用方法 思路 完全重畫 ...
  • 驍龍855,麒麟980,A12,Exynos 9820處理器參數對比分析
    驍龍855基於7nm工藝製程打造，採用了最先進的基於ARM Cortex技術打造的Kryo 485 CPU（三叢集架構：1+3+4），與前代旗艦平臺相比能夠帶來最高達45%的性能提升。集成全新的Adreno 640 GPU，能夠帶來高達20%的圖形渲染速度提升（與Adreno 630對比）。 麒麟9 ...
  • D3.js(v3)+react 製作 一個帶坐標與比例尺的散點圖 (V3版本)
    上一章做了柱形圖，https://www.cnblogs.com/littleSpill/p/10835041.html 這一章做散點圖。 散點圖(Scatter Chart),通常是一橫一豎兩個坐標軸，數據是一組二維坐標，分別對應兩個坐標軸，與坐標軸對應的地方打上點。由此可以猜到，需要的元素包括c ...
  • ES6簡單初識
    ES常用命令介紹 函數的Rest參數和擴展 Promise使用 Module.exports和ES6 import/export的使用 promise使用 promise 為瞭解決callback嵌套,其實就是new一個promise對象 裡面有一個回調方法, 對應參數為正確和錯誤參數 邏輯判斷以後 ...
  • IP地址、功能變數名稱、DNS、URL圖解
    ...
  • D3.js(v3)+react 製作 一個帶坐標與比例尺的柱形圖 (V3版本)
    現在用D3.js + react做一個帶坐標軸和比例尺的柱形圖。我已經儘力把代碼全部註釋上了，最後我也會把完整柱形圖代碼奉上。如果還有疑惑的，可以去翻看一下我之前介紹的方法，以下方法都有介紹到。 還有數據都是自己定義的假數據，大家參考一下製作方法即可。 首先定義柱形圖的數據、繪圖區域的寬高、和上下左 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類