整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          丟掉JS,CSS也可以獨立完成許多牛掰的功能

          擊右上方紅色按鈕關注“web秀”,讓你真正秀起來

          前言

          在日常項目開發中,在布局方面有遇到哪些問題了?今天來一起看看CSS布局有哪些小技巧,后續開發更輕松。本文主要通過簡單的示例,講述開發中遇到的布局等問題,但不僅限于布局相關,會有其他相關知識點。

          CSS實用技巧第二講:布局處理

          rem自適應布局

          移動端使用rem布局需要通過JS設置不同屏幕寬高比的font-size,結合vw單位和calc()可脫離JS的控制,代碼如下:

          /* 基于UI width=750px DPR=2的頁面 */
          html {
           font-size: calc(100vw / 7.5);
          }
          

          rem 頁面布局, 不兼容低版本移動端,使用需謹慎。

          overflow-x排版橫向列表

          通過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徑向漸變實現優惠券波浪造型》

          移動端1px邊框解決方案

          在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實用技巧第二講:布局處理

          純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實用技巧第二講:布局處理

          純CSS Tabbar切換效果

          <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

          二、pycharm操作說明

          1. 創建項目

          1) 下載完成pycharm, 點擊file-New Project...

          2) 按下圖步驟創建一個項目,目前我們選擇Pure python即可,以后我們可以學習用Django/flask等框架來做完整的系統

          2. 創建HTML文件

          1)在創建的項目空白處鼠標右鍵-New-HTML File

          2)輸入英文的網頁名字,盡量不要輸入中文/特殊字符

          3. HTML格式說明

          當雙擊打開我們創建后的HTML文件,大家會看到下面的界面

          三、網頁設計

          1. 草圖繪制

          在開始開發網頁前,我們需要自己設計下想要把網頁做成什么樣,為了節省成本OF都是自己設計的頁面樣式,可以手繪,也可以在PPT上畫。

          2. css名字定義

          我們先學習一個比較簡單的布局如下圖,大家可以看到下圖已經畫出了我們需要添加的內容,要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住,否則Taylor圖片與文字將會是左右的關系,而不是上下

          四、網頁開發

          1. body部分

          根據上述的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>

          2. 網頁測試

          1)鼠標移到代碼處,在右上角我們會看到一排瀏覽器,我們點擊其中一個運行

          2)目前看到的網頁內容從上到下顯示

          3. head部分

          首先我們簡要了解下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一定會一一解答的。


          主站蜘蛛池模板: 亚洲香蕉久久一区二区三区四区| 无码少妇一区二区| 国产精品亚洲专一区二区三区| 91在线精品亚洲一区二区| 2021国产精品视频一区| 人妻视频一区二区三区免费| 日本精品高清一区二区2021| 一区二区在线视频观看| 亚洲一区二区女搞男| 97一区二区三区四区久久| 视频一区二区三区免费观看| 中文字幕一区二区免费| 亚洲美女视频一区二区三区| 国内精品视频一区二区三区| 国产在线精品一区二区高清不卡| 麻豆AV一区二区三区久久| 激情综合丝袜美女一区二区| 久久91精品国产一区二区| 99国产精品欧美一区二区三区| 一区视频在线播放| 中文字幕一区二区三区人妻少妇| 国产精品伦子一区二区三区| 综合久久一区二区三区 | 激情啪啪精品一区二区| 中文字幕一区二区人妻性色 | 日本高清不卡一区| 成人区人妻精品一区二区不卡| 国产一区三区二区中文在线| 国产乱码精品一区二区三区| 亚洲不卡av不卡一区二区| 国产一区二区三区露脸| 免费无码VA一区二区三区| 无码8090精品久久一区| 偷拍激情视频一区二区三区| 精品亚洲一区二区三区在线观看| 成人在线观看一区| 综合无码一区二区三区四区五区| 国产一区二区精品尤物| 国产亚洲综合精品一区二区三区| 99精品国产一区二区三区不卡 | 五月婷婷一区二区|