擊右上方紅色按鈕關注“web秀”,讓你真正秀起來
在日常項目開發中,在布局方面有遇到哪些問題了?今天來一起看看CSS布局有哪些小技巧,后續開發更輕松。本文主要通過簡單的示例,講述開發中遇到的布局等問題,但不僅限于布局相關,會有其他相關知識點。
CSS實用技巧第二講:布局處理
移動端使用rem布局需要通過JS設置不同屏幕寬高比的font-size,結合vw單位和calc()可脫離JS的控制,代碼如下:
/* 基于UI width=750px DPR=2的頁面 */ html { font-size: calc(100vw / 7.5); }
rem 頁面布局, 不兼容低版本移動端,使用需謹慎。
通過flexbox或inline-block的形式橫向排列元素,對父元素設置overflow-x:auto橫向滾動查看。注意場景: 橫向滾動列表、元素過多但位置有限的導航欄。
CSS實用技巧第二講:布局處理
<div class="horizontal-list flex"> <ul> <li>web秀</li> <li>阿里巴巴</li> <li>字節跳動</li> <li>騰訊</li> <li>百度</li> <li>美團</li> </ul> </div> <div class="horizontal-list inline"> <ul> <li>web秀</li> <li>阿里巴巴</li> <li>字節跳動</li> <li>騰訊</li> <li>百度</li> <li>美團</li> </ul> </div>
scss樣式
.horizontal-list { width: 300px; height: 100px; ul { overflow-x: scroll; cursor: pointer; margin: 0; padding: 0; &::-webkit-scrollbar { height: 6px; } &::-webkit-scrollbar-track { background-color: #f0f0f0; } &::-webkit-scrollbar-thumb { border-radius: 5px; background: linear-gradient(to right, #32bbff, #008cf4); } } li { overflow: hidden; margin-left: 10px; height: 90px; background-color: #00b7a3; line-height: 90px; text-align: center; font-size: 16px; color: #fff; &:first-child { margin-left: 0; } } } .flex { ul { display: flex; flex-wrap: nowrap; justify-content: space-between; } li { flex-shrink: 0; flex-basis: 90px; } } .inline { margin-top: 10px; height: 102px; ul { overflow-y: hidden; white-space: nowrap; } li { display: inline-block; width: 90px; } }
知識點解析:
1、display: flex布局:又名“彈性布局”,任何一個容器都可以指定為Flex布局。詳細內容請點擊
《CSS3中Flex彈性布局該如何靈活運用?》
2、滾動條樣式美化。
如何自定義滾動條樣式了? 掌握這3個選擇器即可。
(1)、::-webkit-scrollbar 定義了滾動條整體的樣式;
(2)、::-webkit-scrollbar-thumb 滑塊部分;
(3)、::-webkit-scrollbar-track 軌道部分;
所以上面scss代碼中,我們書寫了這3個選擇器的樣式,改變了滾動條的樣式。
3、linear-gradient線性漸變。語法如下:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction用角度值指定漸變的方向(或角度), color-stop1, color-stop2,...用于指定漸變的起止顏色。
to right的意思就是從左到右,從一個顏色過渡到另外一個顏色。
請看示例:
CSS實用技巧第二講:布局處理
更多詳細內容請點擊:
《CSS3線性漸變、陰影、縮放實現動畫下雨效果》
《CSS3線性徑向漸變、旋轉、縮放動畫實現王者榮耀匹配人員加載頁面》
《CSS3徑向漸變實現優惠券波浪造型》
在retina屏中,像素比為2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的邊框看起來比真的1px更寬。
我們可以通過偽類加transform的方式解決。
CSS實用技巧第二講:布局處理
transform:用于元素進行旋轉、縮放、移動或傾斜,和設置樣式的動畫并沒有什么關系,就相當于color一樣用來設置元素的“外表”。
詳細transform了解,請點擊:
《CSS3最容易混淆屬性transition transform animation translate》
非常簡單的方式,flexbox橫向布局時,最后一個元素通過margin-left:auto實現向右對齊。
請看示例:
<ul class="nav-list"> <li>HTML5</li> <li>CSS3</li> <li>JAVASCRIPT</li> <li>TYPESCRIPT</li> <li>THREE.JS</li> <li>NODE</li> </ul>
css樣式
.nav-list { display: flex; align-items: center; padding: 0 10px; width: 700px; height: 60px; background-color: #00b7a3; } .nav-list li { padding: 0 10px; height: 40px; line-height: 40px; font-size: 16px; color: #fff; list-style: none; } .nav-list li + li { margin-left: 10px; } .nav-list li:last-child { margin-left: auto; }
CSS實用技巧第二講:布局處理
<div class="accordion"> <input type="checkbox" id="collapse1"> <input type="checkbox" id="collapse2"> <input type="checkbox" id="collapse3"> <article> <label for="collapse1">web秀</label> <p>html<br>javascript<br>css<br>uni app</p> </article> <article> <label for="collapse2"></label> <p>新聞<br>圖片<br>視頻<br>養生</p> </article> <article> <label for="collapse3">阿里巴巴</label> <p>淘寶<br>阿里云<br>閑魚<br>天貓</p> </article> </div>
scss樣式
.accordion { width: 300px; article { margin-top: 5px; cursor: pointer; &:first-child { margin-top: 0; } } input { display: none; padding: 0; margin: 0; &:nth-child(1):checked ~ article:nth-of-type(1) p, &:nth-child(2):checked ~ article:nth-of-type(2) p, &:nth-child(3):checked ~ article:nth-of-type(3) p { border-bottom-width: 1px; max-height: 600px; } } label { display: block; padding: 0 20px; height: 40px; background-color: #00b7a3; cursor: pointer; line-height: 40px; font-size: 16px; color: #fff; } p { overflow: hidden; padding: 0 20px; margin: 0; border: 1px solid #00b7a3; border-top: none; border-bottom-width: 0; max-height: 0; line-height: 30px; transition: all 500ms; } }
CSS實用技巧第二講:布局處理
<div class="tab-navbar"> <input type="radio" name="tab" id="tab1" checked> <input type="radio" name="tab" id="tab2"> <input type="radio" name="tab" id="tab3"> <input type="radio" name="tab" id="tab4"> <nav> <label for="tab1">首頁</label> <label for="tab2">列表</label> <label for="tab3">其他</label> <label for="tab4">我的</label> </nav> <main> <ul> <li>首頁</li> <li>列表</li> <li>其他</li> <li>我的</li> </ul> </main> </div>
scss樣式
*{ padding: 0; margin: 0; } .active { background-color: #00b7a3; color: #fff; } .tab-navbar { display: flex; overflow: hidden; flex-direction: column-reverse; border-radius: 10px; width: 300px; height: 400px; margin: 100px auto; input { display: none; &:nth-child(1):checked { & ~ nav label:nth-child(1) { @extend .active; } & ~ main ul { background-color: #f13f84; transform: translate3d(0, 0, 0); } } &:nth-child(2):checked { & ~ nav label:nth-child(2) { @extend .active; } & ~ main ul { background-color: #44bb44; transform: translate3d(-25%, 0, 0); } } &:nth-child(3):checked { & ~ nav label:nth-child(3) { @extend .active; } & ~ main ul { background-color: #ff7632; transform: translate3d(-50%, 0, 0); } } &:nth-child(4):checked { & ~ nav label:nth-child(4) { @extend .active; } & ~ main ul { background-color: #00bbdd; transform: translate3d(-75%, 0, 0); } } } nav { display: flex; height: 40px; background-color: #f0f0f0; line-height: 40px; text-align: center; label { flex: 1; cursor: pointer; transition: all 300ms; } } main { flex: 1; ul { display: flex; flex-wrap: nowrap; width: 400%; height: 100%; transition: all 300ms; } li { display: flex; justify-content: center; align-items: center; flex: 1; font-weight: bold; font-size: 20px; color: #fff; } } }
CSS實用技巧第二講:布局處理
喜歡小編或者覺得小編文章對你有幫助的,可以點擊一波關注哦!同時,要源碼的小伙伴可以點擊下方“了解更多”。
最后推薦一個專欄文章,感謝小伙伴們多多支持,謝謝大家!
做企業網站的時候,經常能碰到這樣的情況:在某個區域顯示供應商或者是合作伙伴的圖標,以顯示公司的可靠性。
滾動顯示合作伙伴
效果如上圖顯示,兩邊的黃線是為了突出顯示,實際應用中請自己設置。
如何實現的呢?
1、自己寫jquery或者javascript實現,當然可以。不建議這樣做(大神除外),當然如果發生兼容性問題的時候,不得不自己寫。
2、使用現成的插件實現,好多;今天我們就用一款國外比較流行的插件:owl.carousel.min.js來實現。
下面是具體的步驟:
首先:HTML代碼:
⑴,依次引入jquery庫和owl.carousel.min.js插件;見下圖:
引入jquery庫和owl.carousel.min.js
⑵依次引入owl.carousel.min.css和支持的皮膚css
引入owl.carousel.min.css
⑶書寫結構:
html結構
⑷書寫owl.carousel.min.js參數,如下圖:
書寫參數
⑸書寫css文件,注意,這是包裹的容器,而不是插件本身的css,如果需要修改插件本身的css,請修改owl.carousel.css。見下圖:
css樣式
這樣,就搞定了,如第一張動圖的效果,如果自己定制一些樣式,和滾動選項就需要花一點時間來研究了。
號外,如果需要詳細的參數說明,請在評論區留言,我會再寫一篇文章來說明的。
(OF作品展示)
OF之前介紹了用python實現數據可視化、數據分析及一些小項目,但基本都是后端的知識。想要做一個好看的小系統,我們還要學一些前端的知識,今天OF將講解如何用pycharm(全棧開發不錯的工具)做一張好看的網頁,以后我們就可以自己開發網頁/網站放到互聯網上。
主要內容:網頁前端布局
適用人群:Python初學者,前端初學者
準備軟件:pycharm
1) 下載完成pycharm, 點擊file-New Project...
2) 按下圖步驟創建一個項目,目前我們選擇Pure python即可,以后我們可以學習用Django/flask等框架來做完整的系統
1)在創建的項目空白處鼠標右鍵-New-HTML File
2)輸入英文的網頁名字,盡量不要輸入中文/特殊字符
當雙擊打開我們創建后的HTML文件,大家會看到下面的界面
在開始開發網頁前,我們需要自己設計下想要把網頁做成什么樣,為了節省成本OF都是自己設計的頁面樣式,可以手繪,也可以在PPT上畫。
我們先學習一個比較簡單的布局如下圖,大家可以看到下圖已經畫出了我們需要添加的內容,要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住,否則Taylor圖片與文字將會是左右的關系,而不是上下
根據上述的css名字定義,先填充<body>內的代碼,那么我們就完成一半的工作了,代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="intro">
<p class="peo">人物介紹</p>
</div>
<div id="pic1">
<div class="bord">
<img class="img" src="pic/Taylor.png"/>
<p class="word">Taylor</p>
</div>
<div class="bord">
<img class="img" src="pic/yan.png"/>
<p class="word">東</p>
</div>
<div class="bord">
<img class="img" src="pic/song.png"/>
<p class="word">喬</p>
</div>
</div>
</body>
</html>
1)鼠標移到代碼處,在右上角我們會看到一排瀏覽器,我們點擊其中一個運行
2)目前看到的網頁內容從上到下顯示
首先我們簡要了解下flex布局,大家可以看到下圖中#main的style樣式中display:flex,在body部分將3個顏色內容框在<div id="main">中,運行結果是3個顏色的內容橫向展示了,而不是上下
1)那么我們先從“人物介紹”的布局開始,“人物介紹”居中展現(用flex中justify-content:center),而且下面有一條黑線,OF準備用border樣式來實現,所以在<div id=intro>里另加了個<div class=peo>,代碼如下:
(注:style中的#main對應body中的id=main, .main對應class=main)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#intro {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
.peo {
max-width: 10rem;
border-bottom: 0.2rem solid #000000;
font-family: sans-serif;
font-size: 1.5rem;
color: #0070C0;
line-height: 3rem;
}
</style>
</head>
<body>
<div id="intro">
<p class="peo">人物介紹</p>
</div>
<div id="pic1">
<div class="bord">
<img class="img" src="pic/Taylor.png"/>
<p class="word">Taylor</p>
</div>
<div class="bord">
<img class="img" src="pic/yan.png"/>
<p class="word">東</p>
</div>
<div class="bord">
<img class="img" src="pic/song.png"/>
<p class="word">喬</p>
</div>
</div>
</body>
</html>
運行結果:
2)圖片部分是3個<div class=bord>橫向展示,所以要在框住它們的<div id=pic1>樣式中設置flex布局,在<style>里加入以下代碼:
#pic1 {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
運行結果:
3)圖片之間靠太近,圖片大小不一致,文字沒居中,我們在<style>里加入以下代碼:
.bord{
padding: 1rem 2rem;
}
.img {
border: 0.2rem solid #e3e3e3;
max-width: 15rem;
height: 22rem;
}
.word {
text-align: center;
}
運行結果:
今天我們學會了flex布局,今后所有的網頁排版都可以實現了,祝愿大家都有所收獲,完整的代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#intro {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
.peo {
max-width: 10rem;
border-bottom: 0.2rem solid #000000;
font-family: sans-serif;
font-size: 1.5rem;
color: #0070C0;
line-height: 3rem;
}
#pic1 {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
.bord{
padding: 1rem 2rem;
}
.img {
border: 0.2rem solid #e3e3e3;
max-width: 15rem;
height: 22rem;
}
.word {
text-align: center;
}
</style>
</head>
<body>
<div id="intro">
<p class="peo">人物介紹</p>
</div>
<div id="pic1">
<div class="bord">
<img class="img" src="pic/Taylor.png"/>
<p class="word">Taylor</p>
</div>
<div class="bord">
<img class="img" src="pic/yan.png"/>
<p class="word">東</p>
</div>
<div class="bord">
<img class="img" src="pic/song.png"/>
<p class="word">喬</p>
</div>
</div>
</body>
</html>
今天的知識比較基礎但非常實用,每天學會一個小技能,積少成多,以后就能成為大神。如果大家對網頁上的實現有什么不懂的,盡請留言,OF一定會一一解答的。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。