Web前端—移動Web第四天（vw適配方案、vw和vh的基本使用、綜合案例-酷我音樂）

版本說明

當前版本號[20231122]。

版本修改說明
20231122初版

目錄

文章目錄

  • 版本說明
  • 目錄
  • 移動 Web 第四天
    • 01-vw適配方案
      • vw和vh基本使用
      • vw布局
      • vh布局
      • 混用問題
    • 02-綜合案例-酷我音樂
      • 準備工作
      • 頭部布局
      • 頭部內容
      • 搜索區域
      • banner 區域
      • 標題公共樣式
      • 排行榜內容
      • 推薦歌單布局
      • 推薦歌單內容
      • 下載區域
      • 頭部固定

移動 Web 第四天

01-vw適配方案

vw和vh基本使用

vw和vh是相對單位，相對視口尺寸計算結果，可以直接實現移動端適配效果。

  • vw：viewport width（1vw = 1/100視口寬度 ）
  • vh：lviewport height ( 1vh = 1/100視口高度 )

vw布局

vw單位的尺寸 = px 單位數值 / ( 1/100 視口寬度 )

  1. 確定設計稿對應的vw尺寸 （1/100視口寬度）

    1. 查看設計稿寬度 → 確定參考設備寬度 (視口寬度) → 確定 vw 尺寸 （1/100 視口寬度

  2. vw單位的尺寸 = px 單位數值 / ( 1/100 視口寬度 )

vh布局

  1. 確定設計稿對應的vh尺寸 （1/100視口高度）

    1. 查看設計稿寬度 → 確定參考設備高度 (視口高度) → 確定 vh 尺寸 （1/100 視口高度）

  2. vh單位的尺寸 = px 單位數值 / ( 1/100 視口高度 )

混用問題

注：是否可以 vw 和 vh 混用呢？

vh是1/100視口高度，全面屏視口高度尺寸大，如果混用可能會導致盒子變形

02-綜合案例-酷我音樂

1682666610217

準備工作

1682666716132

  • HTML 結構
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">

  • less 樣式

    要注意：// out: ../css/要在第一行，才會生效。如果放到非第一行去， css 文件就會與 less文件放在一起。

// out: ../css/@import "./base";

image-20231120160953143

頭部布局

  • HTML 結構
<!-- 頭部 -->
<header><div class="left">left</div><a href="#">下載APP</a>
</header>
  • less 樣式
body {background-color: #f9fafb;
}@vw:3.75vw;// 頭部
header {display: flex;justify-content: space-between;align-items: center;padding: 0 (15 / @vw);height: (50 / @vw);background-color: #fff;
}

1、把頭部區域圈出來。

<body><!-- 頭部 --><header>1</header>
</body>

body{background-color: #f9fafb;
}// 頭部
header{background-color: #fff;
}

image-20231120161925102

2、給頭部區域加上內外邊距。

@vw:3.75vw;
// 頭部
header{padding: 0 (15 / @vw);height: (50 / @vw);background-color: #fff;
}

image-20231120162214285

3、分成左右兩部分，并設置Flex容器中項目的垂直對齊方式。

<!-- 頭部 --><header><div class="left">left</div><a href="#">下載APP</a></header>

@vw:3.75vw;
// 頭部
header{display: flex;justify-content: space-between;align-items: center;padding: 0 (15 / @vw);height: (50 / @vw);background-color: #fff;
}

image-20231120163150065

頭部內容

  • less 樣式
header {// 左邊.left {width: (235 / @vw);height: (50 / @vw);background-image: url(../assets/head.png);background-size: contain;background-repeat: no-repeat;}a {width: (80 / @vw);height: (30 / @vw);background-color: #ffe31b;border-radius: (15 / @vw);text-align: center;line-height: (30 / @vw);font-size: (14 / @vw);}
}

1、添加上背景圖片，并設置背景圖像的尺寸和重復方式。

  • 背景圖像會保持其原始尺寸，同時可能被拉伸或壓縮以適應容器的大小。
  • 設置為 no-repeat 時，背景圖像不會在水平方向上重復，也不會在垂直方向上重復。這意味著背景圖像只會顯示一次，并且不會隨著容器的大小變化而自動調整。
// 左邊.left{height: (50 / @vw);width: (235 / @vw);background-image: url(../assets/head.png);background-size: contain;background-repeat: no-repeat;}

image-20231120163845274

2、設置“下載APP”的背景框，讓文本會在水平方向上居中對齊。

 // 右邊a{width: (80 / @vw);height: (30 / @vw);background-color: #ffe31b;text-align: center;line-height: (30 / @vw);border-radius: (15 / @vw);font-size: (14 / @vw);}

image-20231120164646571

搜索區域

  • HTML 結構
<!-- 搜索 -->
<div class="search"><div class="txt"><span class="iconfont icon-sousuo"></span><span>搜索你想聽的歌曲</span></div>
</div>
  • less 樣式
// 搜索
.search {padding: (10 / @vw) (15 / @vw);height: (52 / @vw);// background-color: pink;.txt {height: (32 / @vw);background-color: #f2f4f5;border-radius: (16 / @vw);text-align: center;line-height: (32 / @vw);color: #a1a4b3;font-size: (14 / @vw);.iconfont {font-size: (16 / @vw);}}
}

1、列出搜索區域。

// 搜索區域
.search{padding: (10 / @vw) (15 / @vw);height: (42 / @vw);background-color: pink;
}

image-20231120165119660

2、對文本的區域設置邊距。

 .txt{height: (32 / @vw);background-color: #f2f4f5;border-radius: (16 / @vw);}

image-20231120165729043

3、在框內添加字體圖標和搜索提示詞。

<!-- 搜索區域 --><div class="search"><div class="txt"><span class="iconfont icon-sousuo"></span><span>搜索你想聽的歌曲</span></div></div>

.txt{height: (32 / @vw);background-color: #f2f4f5;border-radius: (16 / @vw);text-align: center;line-height: (32 / @vw);color: #a1a4b3;}

image-20231120170258808

4、設置字體圖標的大小。

.txt{height: (32 / @vw);background-color: #f2f4f5;border-radius: (16 / @vw);text-align: center;line-height: (32 / @vw);color: #a1a4b3;font-size: (14 / @vw);.iconfont{font-size: (16 / @vw);}}

image-20231120170527597

banner 區域

  • HTML 結構
<!-- banner -->
<div class="banner"><ul><li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li></ul>
</div>
  • less 樣式
// banner
.banner {padding: 0 (15 / @vw);height: (108 / @vw);// background-color: pink;ul {li {width: (345 / @vw);height: (108 / @vw);img {width: 100%;height: 100%;// cover完全覆蓋// 縮放img，圖片比例跟父級盒子比例不同，避免圖片擠壓變形object-fit: cover;border-radius: (5 / @vw);}}}
}

1、給banner區域騰出位置。

 <!-- banner區域 --><div class="banner">1</div>

// banner區域
.banner{padding: 0 (15 / @vw);height: (108 / @vw);background-color: pink;
}

image-20231121084335122

2、插入圖片，并且讓圖片完全覆蓋，當圖片比例與父級盒子比例不同時，就縮放img，避免圖片因擠壓而產生變形。

<!-- banner區域 --><div class="banner"><ul><li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li></ul></div>

// banner區域
.banner{padding: 0 (15 / @vw);height: (108 / @vw);background-color: pink;ul{li{width: (345 / @vw);height: (108 / @vw);img{width: 100%;height: 100%;// cover代表圖片是完全覆蓋的// 當圖片比例與父級盒子比例不同時，縮放img，避免圖片擠壓變形object-fit: cover;}}}
}

image-20231121085107216

注：

  // cover代表圖片是完全覆蓋的// 當圖片比例與父級盒子比例不同時，縮放img，避免圖片擠壓變形object-fit: cover;

3、再把背景色去掉。

 border-radius: (5 / @vw);

image-20231121085352579

標題公共樣式

  • HTML 結構
<!-- 排行榜 -->
<div class="list"><!-- 標題 --><div class="title"><h4>酷我排行榜</h4><a href="#">更多<span class="iconfont icon-right"></span></a></div>
</div>
  • less 樣式
// 排行榜
.list {margin-top: (20 / @vw);padding: 0 (15 / @vw);
}// 標題 → 公共樣式
.title {display: flex;justify-content: space-between;margin-bottom: (16 / @vw);line-height: (25 / @vw);h4 {font-size: (20 / @vw);}a {font-size: (12 / @vw);color: #a1a4b3;}
}

1、對 排行榜 區域進行設置。

 <!-- 排行榜 --><div class="list"><!-- 標題 --><div class="title"><h4>酷我排行榜</h4><a href="#">更多<span class="iconfont icon-right"></span></a></div></div>

// 排行榜
.list{margin-top: (20 / @vw);padding: 0 (15 / @vw);
}

image-20231121090150160

2、設置排行榜標題區域為水平對齊方式。元素之間會平均分配空間，并且兩端的元素分別靠近容器的開始和結束位置。

// 標題
.title{display: flex;justify-content: space-between;margin-bottom: (16 / @vw);
}

image-20231121090427131

3、改變文字的樣式。

// 標題
.title{display: flex;justify-content: space-between;margin-bottom: (16 / @vw);line-height: (25 / @vw);h4{font-size: 20px;}a{font-size: 12px;color: #a1a4b3;text-align: center;}
}

image-20231121091429983

排行榜內容

  • HTML 結構
<!-- 內容 -->
<div class="content"><ul><li><div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div><div class="txt"><a href="#" class="more">酷我熱歌榜<span class="iconfont icon-right"></span></a><a href="#">1.櫻花樹下的約定（完整版） - 旺仔小喬</a><a href="#">2.就讓這大雨全都落下 - 容祖兒</a><a href="#">3.缺氧 - 軒姨（相信光）</a></div></li><li><div class="pic"><img src="./assets/icon_rank_new.png" alt=""></div><div class="txt"><a href="#" class="more">酷我新歌榜<span class="iconfont icon-right"></span></a><a href="#">1.櫻花樹下的約定（完整版） - 旺仔小喬</a><a href="#">2.就讓這大雨全都落下 - 容祖兒</a><a href="#">3.缺氧 - 軒姨（相信光）</a></div></li><li><div class="pic"><img src="./assets/icon_rank_rise.png" alt=""></div><div class="txt"><a href="#" class="more">酷我飆升榜<span class="iconfont icon-right"></span></a><a href="#">1.櫻花樹下的約定（完整版） - 旺仔小喬</a><a href="#">2.就讓這大雨全都落下 - 容祖兒</a><a href="#">3.缺氧 - 軒姨（相信光）</a></div></li></ul>
</div>
  • less 樣式
// 排行榜
.list {margin-top: (20 / @vw);padding: 0 (15 / @vw);li {display: flex;margin-bottom: (16 / @vw);height: (105 / @vw);background-color: #fff;border-radius: (10 / @vw);.pic {margin-right: (20 / @vw);img {width: (105 / @vw);height: (105 / @vw);border-radius: (10 / @vw);}}.txt {a {display: block;font-size: (12 / @vw);color: #a1a4b3;line-height: 1.8;}.more {font-size: (14 / @vw);color: #333;.iconfont {font-size: (16 / @vw);}}}}
}

1、設置三個li標簽。

 <!-- 排行榜 --><div class="list"><!-- 標題 --><div class="title"><h4>酷我排行榜</h4><a href="#">更多<span class="iconfont icon-right"></span></a></div><!-- 內容 --><div class="content"><ul><li>1</li><li>2</li><li>3</li></ul></div></div>

// 排行榜
.list{margin-top: (20 / @vw);padding: 0 (15 / @vw);li{margin-bottom: (16 / @vw);height: (105 / @vw);background-color: #fff;border-radius: (10 / @vw);}
}

image-20231121094048141

2、將每個li標簽分為兩部分，圖片及文字。

<li><div class="pic">1</div><div class="txt">2</div></li>

li{display: flex;margin-bottom: (16 / @vw);height: (105 / @vw);background-color: #fff;border-radius: (10 / @vw);.pic{margin-right: (20 / @vw);}}

image-20231121094357773

3、插入圖片。

<li><div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div><div class="txt">2</div></li>

 .pic{margin-right: (20 / @vw);img{width: (105 / @vw);height: (105 / @vw);border-radius: (10 / @vw);}}

image-20231121094656120

4、將文字區域設置成 display: block; ，是為了讓每個 a 標簽都可以換行。

<li><div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div><div class="txt"><a href="#" class="more">酷我熱歌榜<span class="iconfont icon-right"></span></a><a href="#">1.櫻花樹下的約定（完整版） - 旺仔小喬</a><a href="#">2.就讓這大雨全都落下 - 容祖兒</a><a href="#">3.缺氧 - 軒姨（相信光）</a></div></li>

.txt{a{display: block;}}

image-20231121095258016

5、改變右邊區域的樣式。

.txt{a{display: block;line-height: 1.8;font-size: (12 / @vw);color: #a1a4b3;}.more{font-size: (14 / @vw);color: #333;.iconfont{font-size: (16 / @vw);}}}

image-20231121100100249

推薦歌單布局

  • HTML 結構
<!-- 推薦歌單 -->
<div class="recommend"><!-- 標題 --><div class="title"><h4>推薦歌單</h4><a href="#">更多<span class="iconfont icon-right"></span></a></div><!-- 內容 --><div class="content"><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div>
</div>
  • less 樣式
// 推薦歌單
.recommend {padding: 0 (15 / @vw);ul {display: flex;flex-wrap: wrap;justify-content: space-between;li {margin-bottom: (16 / @vw);width: (105 / @vw);height: (143 / @vw);background-color: pink;}}
}

1、設置歌單區域的內邊距。

<!-- 推薦歌單 --><div class="recommend">1</div>

// 推薦歌單
.recommend{padding: 0 (15 / @vw);
}

image-20231121102207639

2、按照之前設置標題的套路，在這里繼續使用。

<!-- 推薦歌單 --><div class="recommend"><!-- 標題 --><div class="title"><h4>推薦歌單</h4><a href="#">更多<span class="iconfont icon-right"></span></a></div></div>

image-20231121102651376

3、分6個li標簽，當容器寬度不足以容納所有元素時，元素自動換行并均勻分布，同時保持兩端元素靠邊的效果。

<!-- 推薦歌單 --><div class="recommend"><!-- 標題 --><div class="title"><h4>推薦歌單</h4><a href="#">更多<span class="iconfont icon-right"></span></a></div><!-- 內容 --><div class="content"><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div></div>

// 推薦歌單
.recommend{padding: 0 (15 / @vw);ul{display: flex;flex-wrap: wrap;justify-content: space-between;li{width: (105 / @vw);height: (143 / @vw);margin-bottom: (16 / @vw);background-color: pink;}}
}

image-20231121103416777

推薦歌單內容

  • HTML 結構
<li><div class="pic"><img src="./assets/song01.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！勁爆旋律縈繞雙耳</div>
</li>
<li><div class="pic"><img src="./assets/song02.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！勁爆旋律縈繞雙耳</div>
</li>
<li><div class="pic"><img src="./assets/song03.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！勁爆旋律縈繞雙耳</div>
</li>
<li><div class="pic"><img src="./assets/song02.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！勁爆旋律縈繞雙耳</div>
</li>
<li><div class="pic"><img src="./assets/song03.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！勁爆旋律縈繞雙耳</div>
</li>
<li><div class="pic"><img src="./assets/song01.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！勁爆旋律縈繞雙耳</div>
</li>
  • less 樣式
// 圖片
.pic {position: relative;width: (105 / @vw);height: (105 / @vw);img {width: 100%;height: 100%;object-fit: cover;border-radius: (10 / @vw);}.cover {position: absolute;left: 0;bottom: 0;width: (70 / @vw);height: (28 / @vw);background-color: rgba(0,0,0,0.8);border-radius: 0 (10 / @vw) 0 (10 / @vw);text-align: center;line-height: (28 / @vw);color: #fff;font-size: (14 / @vw);}
}
// 文字
.txt {font-size: (14 / @vw);
}

1、給每個li標簽添加圖片及文字。

 <li><div class="pic"><img src="./assets/song01.jpeg" alt=""></div><div class="txt">抖音嗨爆DJ！勁爆旋律縈繞雙耳</div></li>

 li{width: (105 / @vw);height: (143 / @vw);margin-bottom: (16 / @vw);background-color: pink;// 圖片.pic{width: (105 / @vw);height: (105 / @vw);img{width: 100%;height: 100%;object-fit: cover;}}}

image-20231121104104301

2、改變文字大小并把底色注銷掉。

// 文字.txt{font-size: (14 / @vw);}

image-20231121104450496

3、插入左下角的表數值的框。

<div class="cover">18.2W</div>

// 圖片.pic{position: relative;width: (105 / @vw);height: (105 / @vw);img{width: 100%;height: 100%;object-fit: cover;border-radius: (10 / @vw);}.cover{position: absolute;left: 0;bottom: 0;}}

image-20231121105012958

4、改變背景透明度及圓角顯示。

 .cover{position: absolute;left: 0;bottom: 0;width: (70 / @vw);height: (28 / @vw);background-color: rgba(0, 0, 0, 0.8);border-radius: 0 (10 / @vw) 0 (10 / @vw);}

image-20231121105328710

5、設置里面的數字位置水平及垂直居中。

// 里面的數字text-align: center;line-height: (28 / @vw);color: #fff;

image-20231121105550166

下載區域

  • HTML 結構
<!-- 安裝，下載 -->
<div class="download"><img src="./assets/logo.png" alt=""><p>安裝酷我音樂 發現更多好音樂</p><span class="iconfont icon-right"></span>
</div>
  • less 樣式
// 下載
.download {position: fixed;left: (15 / @vw);bottom: (30 / @vw);display: flex;align-items: center;padding: 0 (10 / @vw) 0 (15 / @vw);width: (345 / @vw);height: (45 / @vw);background-color: #fff;border-radius: (22 / @vw);img {margin-right: (10 / @vw);width: (36 / @vw);height: (36 / @vw);}p {flex: 1;font-size: (14 / @vw);}span {width: (32 / @vw);height: (32 / @vw);background-color: #f2f3f5;border-radius: 50%;text-align: center;line-height: (32 / @vw);font-size: (16 / @vw);}
}

1、給下載區域描出框的位置。

<!-- 下載區域 --><div class="download">1</div>

// 下載區域
.download{width: (345 / @vw);height: (45 / @vw);padding: 0 (10 / @vw) 0 (15 / @vw);color: #333;
}

image-20231121110346844

2、進一步修改細節。

// 下載區域
.download{position: fixed;left: (15 / @vw);bottom: (30 / @vw);width: (345 / @vw);height: (45 / @vw);padding: 0 (10 / @vw) 0 (15 / @vw);color: #fff;
}

image-20231121110726950

3、設置元素的邊框圓角半徑。

background-color: #fff;
border-radius: (22 / @vw);

image-20231121112026637

4、將區域中的圖片、文字和字體圖標加上去。

 <!-- 下載區域 --><div class="download"><img src="./assets/logo.png" alt=""><p>安裝酷我音樂 發現更多好音樂</p><span class="iconfont icon-right"></span></div>

.download{display: flex;……img{width: (36 / @vw);height: (36 / @vw);}
}

image-20231121112557315

5、設置區域中的內容垂直對齊。

// 下載區域
.download{……align-items: center;img{width: (36 / @vw);height: (36 / @vw);margin: 0 (10 / @vw) 0 0;}
}

image-20231121113354145

6、修改文字的大小。flex: 1;為設置Flex容器中項目的彈性伸縮比例。當設置為 1 時，項目會平均分配可用空間。在這里當分配好圖標和字體圖標完后，剩下的空間均為 p 所用。

p{flex: 1;font-size: (14 / @vw);}

image-20231121113609715

7、設置"span"的元素樣式為一個圓形的容器，并具有指定的寬度、高度、背景顏色、邊框圓角半徑、行高和文本對齊方式。

span{width: (32 / @vw);height: (32 / @vw);background-color: #f2f3f5;border-radius: 50%;line-height: (32 / @vw);text-align: center;}

image-20231121114022736

頭部固定

問題：

1、寬度不夠

2、搜索欄沒了

  • less 樣式
// 頭部
header {position: fixed;left: 0;top: 0;display: flex;justify-content: space-between;align-items: center;padding: 0 (15 / @vw);// 固定定位的盒子，寬度靠內容撐開，希望寬度100%width: 100%;height: (50 / @vw);background-color: #fff;
}// 搜索
.search {// 頭部固定定位，脫標不占位，搜索去最頂了，加上外邊距擠下來即可margin-top: (50 / @vw);padding: (10 / @vw) (15 / @vw);height: (52 / @vw);
}

1、設置頭部固定。

header{position: fixed;left: 0;top: 0;// 固定定位的盒子，寬度靠內容撐開，所以我們希望寬度為100%width: 100%;……
}

image-20231121115214543

2、我們會發現，搜索框沒有顯示出來了，是因為固定頭部的區域把其給覆蓋了。我們只需要添加上邊距，讓搜索框下來，這樣我們就能看到了。

// 搜索區域
.search{// 頭部固定定位，拖標不定位，搜索去最頂處了，加上外邊距擠下來即可margin-top: (50 / @vw);……
}

image-20231121115513531

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/160136.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/160136.shtml
英文地址，請注明出處：http://en.pswp.cn/news/160136.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Cuda out of memory原因以及解決辦法

Cuda out of memory原因以及解決辦法

Cuda out of memory原因以及解決辦法 文章目錄 Cuda out of memory原因以及解決辦法batch_size設置過大 batch_size設置過大 最近在做對抗訓練方面的實驗&#xff0c;當batch_size設置為256的時候&#xff0c;出現cuda out of memory. 當將batch_size修改為128時&#xff0c;則…
閱讀更多...
mysql使用--連接查詢

mysql使用--連接查詢

1.連接查詢 如&#xff1a;SELECT * FROM t1, t2; 上述FROM語句將t1表&#xff0c;t2表連接。 假設t1表含n條記錄&#xff0c;t2表含m條記錄&#xff0c;則t1, t2得到的表將包含n*m條記錄。 我們以一個混合連接&#xff0c;過濾的查詢分析語句執行過程。 如&#xff1a;SELECT…
閱讀更多...
thinkphp文件夾生成zip壓縮包

thinkphp文件夾生成zip壓縮包

一、準備工作&#xff0c;使用phpinfo()查看有沒有zip擴展 <?php echo phpinfo(); ?>Thinkphp使用PHP自帶的ZipArchive壓縮文件或文件夾 顯示enabled 說明已經配置好 如果沒有安裝擴展的&#xff0c;請參照以下方法&#xff1a; 1、下載對應版本的擴展包&#xff1a…
閱讀更多...
Java操作excel之poi

Java操作excel之poi

1. 創建Excel 1.1 創建新Excel工作簿 引入poi依賴 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</ar…
閱讀更多...
VXLAN虛擬擴展局域網

VXLAN虛擬擴展局域網

閱讀更多...
QTableView 和 QAbstractTableModel

QTableView 和 QAbstractTableModel

1.自定義類繼承QAbstractTableModel 頭文件如下&#xff1a; #ifndef TESTMOUDLE_H #define TESTMOUDLE_H #include "StructTest.h" #include <QAbstractTableModel> class TestMoudle : public QAbstractTableModel { public: TestMoudle(QStringList&…
閱讀更多...
如何一次性解壓多個文件

如何一次性解壓多個文件

第一步&#xff1a;多選壓縮包 第二步&#xff1a;右鍵解壓即可 一句話&#xff0c;單個怎么解壓&#xff0c;多個就怎么解壓&#xff0c;只不過先選中 參考&#xff1a;如何一次性解壓多個文件
閱讀更多...
智能安全帽作業記錄儀賦能智慧工地人臉識別勞務實名制

智能安全帽作業記錄儀賦能智慧工地人臉識別勞務實名制

需求背景 建筑工地是一個安全事故多發的場所。目前&#xff0c;工程建設規模不斷擴大&#xff0c;工藝流程紛繁復雜&#xff0c;如何完善現場施工現場管理&#xff0c;控制事故發生頻率&#xff0c;保障文明施工一直是施工企業、政府管理部門關注的焦點。尤其隨著社會的不斷進…
閱讀更多...
YARN，ZOOKEERPER--學習筆記

YARN，ZOOKEERPER--學習筆記

1&#xff0c;YARN組件 1.1YARN簡介 YARN表示分布式資源調度&#xff0c;簡單地說&#xff0c;就是&#xff1a;以分布式技術完成資源的合理分配&#xff0c;讓MapReduce能高效完成計算任務。 YARN是Hadoop核心組件之一&#xff0c;用于提供分布式資源調度服務。 而在Hadoop …
閱讀更多...
邏輯漏洞（業務邏輯）dami CMS

邏輯漏洞（業務邏輯）dami CMS

邏輯漏洞&#xff08;業務支付邏輯漏洞&#xff09;dami CMS 0x01 業務邏輯簡介 業務邏輯指的是一個系統或應用程序中的實際業務規則和流程。它描述了如何處理特定的業務需求、數據和操作。業務邏輯通常是根據特定行業或組織的需求而設計的。 在軟件開發中&#xff0c;業務邏…
閱讀更多...
零編程基礎Python的全面學習指南

零編程基礎Python的全面學習指南

文章目錄 前言什么是編程&#xff1f;Python代碼對應的機器碼準備開始Windows變量類型整型字符串型布爾類型字符串連接和整數相加if 語句捕獲用戶輸入導入MacWindows游戲時間&#xff01;小結關于Python技術儲備一、Python所有方向的學習路線二、Python基礎學習視頻三、精品Pyt…
閱讀更多...
磐舟CI使用說明及案例

磐舟CI使用說明及案例

整體介紹 磐舟作為一個devops產品&#xff0c;它具備基礎的CI流水線功能。同時磐舟的流水線是完全基于云原生架構設計的&#xff0c;在使用時會有一些注意事項。這里首先我們要了解磐舟整體的流水線打包邏輯。 文檔結構說明 一般來說&#xff0c;磐舟推薦單個業務的標準git庫…
閱讀更多...
反編譯-ApkTool

反編譯-ApkTool

ApkTool下載地址&#xff1a; Apktool | ApktoolA tool for reverse engineering Android apk fileshttps://apktool.org/ 1、使用 apktool 解包 執行 java -jar apktool_2.4.1.jar d demo.apk -o demo 命令 java -jar apktool_2.4.1.jar d demo.apk -o demo 其中 d 后面是…
閱讀更多...
Nevron Vision for .NET 2023.1 Crack

Nevron Vision for .NET 2023.1 Crack

Nevron Vision for .NET 適用于桌面和 Web 應用程序的高級數據可視化 Nevron Vision for .NET提供最全面的組件&#xff0c;用于構建面向 Web 和桌面的企業級數據可視化應用程序。 該套件中的組件具有連貫的 2D 和 3D 數據可視化效果&#xff0c;對觀眾產生巨大的視覺沖擊力。我…
閱讀更多...
基于window10的遠程桌面報錯：要求的函數不受支持 的問題解決方法

基于window10的遠程桌面報錯：要求的函數不受支持 的問題解決方法

基于window10的遠程桌面報錯&#xff1a;要求的函數不受支持 的問題解決方法 設置方法&#xff1a; 一、WINR 在框內輸入gpedit.msc 二、依次打開 計算機配置----管理模板-----系統—憑據分配—加密數據庫修正–改為以啟用—易受攻擊 第一步&#xff1a; 第二步&#xff1a;…
閱讀更多...
并查集總結

并查集總結

并查集簡介 并查集是一種可以動態維護若干個不重疊的結合&#xff0c;并支持合并與查詢的數據結構 并查集是一種樹狀的數據結構&#xff0c;可以用于維護傳遞關系以及聯通性。 并查集有兩種操作&#xff1a; find&#xff1a;查詢一個元素屬于哪個集合merge:合并兩個集合 模…
閱讀更多...
爆款文章有訣竅，內容創作者如何能持續產出優質內容

爆款文章有訣竅，內容創作者如何能持續產出優質內容

內容營銷人有沒有這么一種共鳴&#xff1a;10 萬 那么多&#xff0c;為什么不能多我一個&#xff1f; 通常&#xff0c;我們把瀏覽量 / 閱讀量高、轉評贊數量高的內容看作爆款&#xff0c;而數據如果達到 10 萬 則是超級爆款。因為&#xff0c;閱讀量高意味著內容得到了大量的曝…
閱讀更多...
【Linux】使用Makefile自動化編譯項目：簡化開發流程、提高效率

【Linux】使用Makefile自動化編譯項目：簡化開發流程、提高效率

文章目錄 示例一&#xff1a;編譯一個進度條程序示例二&#xff1a;編譯一個簡單的程序gcc的幾個選項結論 當你開始一個新的軟件項目時&#xff0c;編寫一個好的Makefile是非常重要的。Makefile是一個文本文件&#xff0c;用于指定如何構建和編譯項目。它定義了目標文件、依賴關…
閱讀更多...
打字母的時候，字母間距突然變大，解決辦法

打字母的時候，字母間距突然變大，解決辦法

中文模式下&#xff0c;按shift空格即可
閱讀更多...
8年老鳥整理，自動化測試-準備測試數據詳細...

8年老鳥整理，自動化測試-準備測試數據詳細...

目錄&#xff1a;導讀 前言一、Python編程入門到精通二、接口自動化項目實戰三、Web自動化項目實戰四、App自動化項目實戰五、一線大廠簡歷六、測試開發DevOps體系七、常用自動化測試工具八、JMeter性能測試九、總結&#xff08;尾部小驚喜&#xff09; 前言 大部分類型的測試…
閱讀更多...
最新文章

Copyright @ 2022~2023