整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來
隨著前端開發(fā)越來越關(guān)注效率：通過選擇器的使用和簡化代碼來快速加載渲染。像Less、SCSS這樣的預(yù)處理器在工作的時候，需要繞的路較長，而直接使用css速度會更快。這里涵蓋了20個css技巧來幫助你減少重復(fù)規(guī)則和復(fù)寫，在布局中標(biāo)準(zhǔn)化樣式流程，不僅可以幫助你高效地創(chuàng)建自己的框架，而且可以解決許多常見的問題。
如何提升你的CSS技能？掌握這20個css技巧即可[完整版]
如果您對CSS比較陌生，看看這篇文章CSS選擇器如此之多，你了解多少？
css重置庫如normalize.css已經(jīng)被使用很多年了，它們可以為你的網(wǎng)站樣式提供一個比較清晰的標(biāo)準(zhǔn)，來確保跨瀏覽器之間的一致性。大多數(shù)項(xiàng)目并不需要這些庫包含的所有規(guī)則，可以通過一條簡單的規(guī)則來應(yīng)用于布局中的所有元素，刪除所有的margin、padding改變?yōu)g覽器默認(rèn)的盒模型。
*{
box-sizing:border-box;
margin:0;
padding:0
}
使用box-sizing聲明是可選擇，如果你使用下面繼承的盒模型形式可以跳過它
讓盒模型從html 繼承：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
當(dāng)你多少次試著去設(shè)計柵格布局如：組合或者圖片畫廊，如果使用浮動的方式，那么就需要去清除浮動和重置外邊距來使其分解成所需要行數(shù)。為了避免nth-、first-、last-child 問題 ，可以使用flexbox 的space-between 屬性值
.flex-container{
display:flex;
justify-content:space-between;
}
.flex-container .item{
flex-basis:23%;
}
在web設(shè)計中，我們通常使用：last-child nth-child 選擇器來覆蓋原先聲明應(yīng)在父選擇器上的樣式。比如說一個導(dǎo)航菜單，通過使用borders 來給每個鏈接Link創(chuàng)建分割符，然后再在加上一條規(guī)則 解除最后一個link的border
.nav li {
border-right: 1px solid #666;
}
.nav li:last-child {
border-right: none;
}
這是一種很混亂的方式，它不僅強(qiáng)制瀏覽器以一種方式渲染，然后又通過特定的選擇器來撤銷它。這樣覆蓋樣式是不可避免的。然而，最重要的是，我們可以通過使用：not偽類(pseudo-class) 在你想聲明的元素上僅僅只使用一種樣式：
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
上面就是，除了最后一個li以外，所有的 .nav li 都加上了border樣式，是不是很簡單！ 當(dāng)然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有語義化（semantic）和容易理解的。
如何提升你的CSS技能？掌握這20個css技巧即可[完整版]
導(dǎo)致低樣式效率（inefficient stylesheets）的一件事就是不斷的重復(fù)聲明。最好是做下項(xiàng)目規(guī)劃和組合規(guī)則，這樣CSS會更流暢。實(shí)現(xiàn)這一點(diǎn)，就需要我們理解級聯(lián)（cascade）,以及如何在通用選擇器寫的樣式可以繼承在其他地方。行間距（line-height）可以作為 給你的整個項(xiàng)目設(shè)置的一個屬性，不僅可以減小代碼量，而且可以讓你的網(wǎng)站的樣式給一個標(biāo)準(zhǔn)的外觀
body {
line-height: 1.5;
}
請注意，這里的聲明沒有單位，我們只是告訴瀏覽器 讓它渲染行高是 渲染字體大小的1.5倍
在沒有準(zhǔn)備使用CSSGrid 布局的時候，設(shè)置垂直居中布局的全局規(guī)則是一個很好的方式，可以為優(yōu)雅（elegantly）的設(shè)置內(nèi)容布局奠定一個基礎(chǔ)
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
這15種CSS居中的方式，你都用過哪幾種？
SVG使用于所有分辨類，并且所有瀏覽器也都支持。所以可以將.png .jpg .gif 等文件 丟棄。FontAwsome5中 也提供了SVG的圖標(biāo)字體。設(shè)置SVG的格式就跟其他圖片類型一樣：
.logo {
background: url("logo.svg");
}
溫馨提示：如果將SVG用在可交互的元素上比如說button，SVG 會產(chǎn)生無法加載的問題。可以通過下面這個規(guī)則來確保SVG可以訪問到（確保在HTML中已設(shè)置適當(dāng)?shù)腶ria屬性）
.no-svg .icon-only:after {
content: attr(aria-label);
}
如何提升你的CSS技能？掌握這20個css技巧即可[完整版]
使用通用選擇器（universal selector）* 和相鄰的兄弟選擇器（adjacent sibling selector）+ 可以提供一個強(qiáng)大的的CSS功能，給緊跟其他元素中的文檔流中的所有元素設(shè)置統(tǒng)一的規(guī)則
* + * {
margin-top: 1.5rem;
}
這是一個很棒的技巧，可以幫你創(chuàng)建更加均勻的類型跟間距。在上面的列子中，跟在其他元素后面的元素，比如說H3后面的H4，或者一個段落之后的一個段落，他們之間至少1.5rems的間距（大約為30px）
一致的垂直節(jié)奏提供了一種視覺美學(xué)，使內(nèi)容更具可讀性。如果owl選擇器過于通用，請在元素內(nèi)使用通用選擇器（*）為布局的特定部分創(chuàng)建一致的垂直節(jié)奏：
.intro > * {
margin-bottom: 1.25rem;
}
假設(shè)您希望對換行到多行的長文本行應(yīng)用統(tǒng)一的間距、邊距、突出顯示或背景色，但不希望整個段落或標(biāo)題看起來像一個大塊。Box Decoration Break屬性允許您僅對文本應(yīng)用樣式，同時保持填充和頁邊距的完整性。如果要在懸停時應(yīng)用突出顯示，或在滑塊中設(shè)置子文本樣式以具有突出顯示的外觀，則此功能尤其有用：
.p {
display: inline-block;
box-decoration-break: clone;
-o-box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
內(nèi)聯(lián)塊聲明允許將顏色、背景、頁邊距和填充應(yīng)用于每行文本，而不是整個元素，克隆聲明確保將這些樣式均勻地應(yīng)用于每行。
表格可能很難處理，所以嘗試使用table-layout：fixed來保持單元格相等寬度：
.calendar {
table-layout: fixed;
}
如何提升你的CSS技能？掌握這20個css技巧即可[完整版]
這對于通過CMS插入的鏈接特別有用，CMS通常不具有類屬性，并幫助您在不影響級聯(lián)的情況下對其進(jìn)行特定樣式設(shè)置。例如，<a>元素沒有文本值，但href屬性有一個鏈接：
a[href^="http"]:empty::before {
content: attr(href);
}
說到鏈接樣式，您可以在幾乎每個樣式表中找到一個通用的A樣式。這迫使您為子元素中的任何鏈接編寫額外的覆蓋和樣式規(guī)則，并且在使用像WordPress這樣的CMS時，可能會導(dǎo)致您的主鏈接樣式比按鈕文本顏色更容易出現(xiàn)問題。嘗試這種較少干擾的方式為“默認(rèn)”鏈接添加樣式：
a[href]:not([class]) {
color: #999;
text-decoration: none;
transition: all ease-in-out .3s;
}
要創(chuàng)建具有固有比率的框，您需要做的就是將頂部或底部填充應(yīng)用于div：
.container {
height: 0;
padding-bottom: 20%;
position: relative;
}
.container div {
border: 2px dashed #ddd;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
使用20％進(jìn)行填充使得框的高度等于其寬度的20％。無論視口的寬度如何，子div都將保持其縱橫比（100％/ 20％= 5：1）。
如何提升你的CSS技能？掌握這20個css技巧即可[完整版]
這個技巧不是關(guān)于代碼縮減，而是關(guān)于細(xì)化設(shè)計細(xì)節(jié)的。破碎的圖像發(fā)生的原因有很多，要么不雅觀，要么導(dǎo)致混亂（只是一個空元素）。用這個小小的CSS創(chuàng)建更美觀的效果：
img {
display: block;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
img:before {
content: "We're sorry, the image below is missing :(";
display: block;
margin-bottom: 10px;
}
img:after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
在設(shè)置根目錄的基本字體大小后，例如html字體大小：15px；，可以將包含元素的字體大小設(shè)置為rem:
article {
font-size: 1.25rem;
}
aside {
font-size: .9rem;
}
然后將文本元素的字體大小設(shè)置為em
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
現(xiàn)在，每個包含的元素都變得分區(qū)化，更易于樣式化、更易于維護(hù)和靈活。
web開發(fā)中該用 em 還是 rem 呢？
如何提升你的CSS技能？掌握這20個css技巧即可[完整版]
當(dāng)您處理無法從源代碼輕松控制的內(nèi)容時,這對于自定義用戶樣式表來說是一個很好的技巧。這個技巧將幫助您避免在加載頁面時自動播放視頻中的聲音干擾訪問者，并再次提供了精彩的：not（）偽選擇器：
video[autoplay]:not([muted]) {
display: none;
}
響應(yīng)布局中的字體大小應(yīng)該能夠自動調(diào)整到視區(qū)，從而保存編寫媒體查詢的工作，以處理字體大小。可以使用:not和視區(qū)單位，根據(jù)視區(qū)高度和寬度計算字體大小：
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
現(xiàn)在，您可以使用根em單位，該單位基于:not：
body {
font: 1rem/1.6 sans-serif;
}
結(jié)合上面的rem/em技巧以獲得更好的控制。有關(guān)管理Safari舊版本的提示，請參閱CSS Fix for iOS VH Unit Bug。
為了避免移動瀏覽器（iOS Safari等）在點(diǎn)擊<select>下拉列表時放大HTML表單元素，請在添加font-size樣式：
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
最后，最強(qiáng)大的CSS級別來自于CSS變量，它允許您聲明一組公共屬性值，這些值可以通過樣式表中任何位置的關(guān)鍵字重用。你可能有一套顏色在整個項(xiàng)目中使用，以保持一致性。在CSS中反復(fù)重復(fù)這些顏色值不僅是件煩人的事情，而且還容易出錯。如果某個顏色在某個時刻需要改變，你就不得不去尋找和替換，這是不可靠或不快速的，當(dāng)為最終用戶構(gòu)建產(chǎn)品時，變量使得定制變得容易得多。例如：
如何提升你的CSS技能？掌握這20個css技巧即可[完整版]
:root {
--main-color: #06c;
--accent-color: #999;
}
h1, h2, h3 {
color: var(--main-color);
}
a[href]:not([class]),
p,
footer span{
color: var(--accent-color);
}
喜歡小編的點(diǎn)擊關(guān)注，了解更多知識！
掉查詢數(shù)據(jù)庫重復(fù)數(shù)據(jù)
在開發(fā)過程中遇到一個，不知道什么原因連表查詢的數(shù)據(jù)出現(xiàn)重復(fù)，使用了php自帶函數(shù)array_unique()這個，無法實(shí)現(xiàn)我的需求，使用到返回的數(shù)據(jù)為null。
因此我需要找到一個辦法去除查詢到重復(fù)的數(shù)據(jù)，我想到兩種方法。
第一種：
foreach循環(huán)將那查詢到的數(shù)據(jù)for循環(huán)，當(dāng)出現(xiàn)重復(fù)的id時候，我將這個數(shù)據(jù)只保留一次到一個空數(shù)組中，然后在html頁面進(jìn)行展示，這樣感覺有些麻煩。
第二種：
我在網(wǎng)上找到tp3一個過濾重復(fù)數(shù)據(jù)的一個數(shù)據(jù)庫自帶函數(shù)distinct ( true )；
index=
index=select->distinct ( true )->where ( ‘parent_id=0’ )->field ( ‘index’ )->select ();//例子！
然后我在tp5也使用這個函數(shù)發(fā)現(xiàn)也可以過濾重復(fù)數(shù)據(jù)，代碼如下：
$list = Db::name('Apply')
->alias("a")
->distinct ( true )
->field("a.*,b.company_name,d.anchor_name")
->join("merchants b",'a.merchants_id=b.gl_merchants_id')
->join("home_class c",'a.status=c.id')
->join("anchor d",'a.zhu_phone=d.anchor_phone')
->where($map)
->order("a.apply_id desc")
->paginate($num,false,['query' => Request::instance()->param()]);
$list->toArray();
foreach ($list as $k=>$v){
if($v['screen_class_id']=='0'){
$screen_class = '未綁定';
}else{ $screen_class = '綁定';
}
if($v['goods_id_num']=='' || $v['goods_id_num']=='null'){
$v['goods_id_num'] = '0';
}
// pre($);die;
$live_status = Db::name('live')
->where(['room_id'=>$v['room_id']])
->value('live_status');
if($v['is_shenhe']=='4' && $live_status=='2'){
$v['is_shenhe'] = '5';
}
$live_id = Db::name('live')
->where(['room_id'=>$v['room_id']])
->value('live_id');
$v['live_id'] = $live_id;
$data = array();
$data = $v;
$data['screen_class'] = $screen_class;
$list->offsetSet($k,$data);
}
個人建議使用第二種，效率高，不僅僅在開發(fā)效率還是在運(yùn)行效率上。
END
① B/S架構(gòu)：Browser/Server（瀏覽器/服務(wù)器的交互形式。）
② C/S架構(gòu)：Client/Server（客戶端/服務(wù)器的交互形式。）
① 什么是HTML？② 怎么開發(fā)HTML？③ 怎么運(yùn)行HTML?
?由大量的標(biāo)簽組成，每一個標(biāo)簽都有開始標(biāo)簽和結(jié)束標(biāo)簽。
?超文本：圖片、聲音、視頻等
?編輯器有：HBuilder、vscode等
③ 直接采用瀏覽器打開HTML文件就能運(yùn)行
④ HTML是誰制定的？
?W3C制定了HTML的規(guī)范：每個瀏覽器生產(chǎn)廠家都會遵守規(guī)范。HTML也會按照規(guī)范去寫代碼
?HTML規(guī)范目前最高的版本是：HTML5.0，簡稱H5
?我們現(xiàn)在主要學(xué)的HTML4.0（基本用法）
?w3school：先出現(xiàn)的，和W3C無關(guān)
?w3cschool：后出現(xiàn)的，和W3C無關(guān)
?W3C制定了很多規(guī)范：HTML/XML/http協(xié)議/https協(xié)議……
頁面效果圖：
超鏈接的作用：
通過超鏈接可以從瀏覽器向服務(wù)器發(fā)送請求。
效果圖：
地址欄提交的信息：
?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=
14、表單的說明：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
