前端頁面重構技巧總結TIP【持續更新...】
本文均爲項目實戰經驗，要求兼容至IE8，因此如下內容均爲兼容代碼，歡迎各位小夥伴批評指教。其實重構頁面是一門學問，看似簡單，卻暗藏不少學問。實際項目中頁面的重構有如下幾點最基本需求：css
1.須要使用合理的標籤進行語義化；html
2.可擴展性，在頁面的某個標籤內增長新的內容（文字或標籤），不會對原有內容形成影響。jquery
3.當頁面接受後臺數據時，標籤內容替換後，頁面佈局與樣式不會受到影響。git
4.兼容性（根據項目須要）github
頁面重構基本思想：web
1.漸進加強思想（以兼容要求的最低版本爲基礎，主鍵向高層次的瀏覽器靠攏）；例如：項目須要兼容至IE8的透明背景，則先須要使用透明背景圖片，在此基礎上再進行其餘樣式的編寫。chrome
2.優雅降級（在不影響頁面結構的狀況下爲低版本瀏覽器進行效果降級）json
3.代碼重用思想；包括相同結構的DOM結構和公用的CSS樣式api
技巧彙總瀏覽器
1.li統同樣式，列表居中
以下如中間內容區爲1200px;但要確保每一個li的樣式是統一的，這樣既方便後臺程序進行循環，樣式也不會亂；若無需作兼容則使用：first-child選擇器就能實現，作兼容兼容時須要使ul外再套一層盒子作居中，而實際上ul是沒有劇中的（ul寬度大於ul的外層盒子）
應用公式爲（5列） 4 * margin-right + 5 * li的width=1200 ul的寬度爲 1200 + margin-right
代碼以下：
<div class="con"> </div> <div class="ul-box"> <ul class="li-box"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
*{padding: 0;margin: 0;} .con{ width: 1200px; height: 200px; background: #ff0; margin: 0 auto; } .li-box{ width: 1250px; overflow: hidden; } .li-box li{ list-style: none; float: left; width: 200px; height: 400px; background: #f00; margin: 0 50px 20px 0; } .ul-box{ width: 1200px; margin: 0 auto; }
效果以下：
2.select樣式美化與兼容
目前純css樣式實現select的全部瀏覽器樣式一直是沒法實現的，最後換了一下思路，大膽使用了屬性hack；
在chrome和FF下隱藏默認樣式，顯示css自定義樣式，在ie下隱藏自定義樣式，顯示默認樣式。
<select name=""> <option value=""></option> </select>
select{ width: 100px; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url("drag.png"); background-position: right center; padding-right: 0 \9; background: none \9; }
3. 多行內元素垂直居中
（1）正常文檔流（2）脫離文檔流
在使用了table-cell以後，元素對寬高告訴敏感，沒法設置寬高，寬高自動被撐開。若想設置寬高須要高增長float使其脫離文檔流。
<div class="box"> <div class="fl"> <span>標題</span> <img src="images/index-logo.png" alt=""> <img src="images/play.png" alt=""> </div> <div class="fr"> </div> </div> <div class="box2"> <span>標題</span> <img src="images/index-logo.png" alt=""> <span>標題</span> <img src="images/play.png" alt=""> </div>
*{padding: 0;margin: 0} .box{ width: 100%; overflow: hidden; background: #ff0; } .box:after{clear: both;} .fl,.fr{ width: 50%; float: left; height: 100px; display: table-cell; line-height: 100px; } .fl img{ vertical-align: middle; display: inline-block; } .box2{ clear: both; width: 100%; height:100px; float: left; background: #ccc; line-height: 100px; display: table-cell; } .box2 img{ vertical-align: middle; }
4.基於jqury的錨連接緩衝滾動
<div class="fix-nav"> <a>點擊nav1</a> <a>點擊nav2</a> </div> <div class="box1"> </div> <h2 id="nav1">nav1</h2> <div class="box1"> </div> <h2 id="nav2">nav2</h2> <div class="box1"> </div> <div class="box1"> </div> <div class="box1"> </div>
*{padding: 0;margin: 0;} .box1{ width: 100%; height:500px; background: #ff0; } .fix-nav{ position: fixed; width: 100%; height:60px; background: #ccc; } .fix-nav a{ background: #f00; display: inline-block; line-height: 60px; text-align: center; cursor: pointer; }
//須要引入jquery var jsonScroll={ "0":$("#nav1").offset().top-60, "1":$("#nav2").offset().top-60, }; console.log(jsonScroll) var scrollNav=$(".fix-nav a"); scrollNav.each(function(i,ele){ $(ele).attr("index",i); $(ele).click(function(){ $("html,body").animate({scrollTop:jsonScroll[$(this).attr("index")]},500,"swing"); }) })
5.調用百度地圖，添加標註
http://api.map.baidu.com/lbsapi/createmap/index.html
打開連接後獲取中心位置座標，而後添加定位標註後獲取代碼，但標註的樣式老是不顯示，緣由是百度地圖的樣式與咱們寫的樣式衝突了，增長下面的CSS樣式便可
#map img { max-width: inherit; }
6.單行文本溢出隱藏並用省略號代替
<h2 class="title">標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容</h2>
.title{ width: 200px; height: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
7.多行文本溢出用省略號顯示
（1）只適用於chrome
<p class="des">段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內
容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內
容段落內容段落內容段落內容段落內容段落內容</p>
.des{
width: 500px;
height: 90px;
overflow: hidden;
line-height: 30px;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}
(2)兼容高端瀏覽器
.des{ width: 500px; height: 90px; line-height: 30px; position: relative; overflow: hidden; } .des:after{ content:"..."; width: 20px; height: 30px; background: #fff; color: #000; z-index: 2; position: absolute; right: 0; bottom: 0; }
8.background-size須要在background-url以後纔有效
9.background-size:cover 的兼容IE8 方案
$(".bg-filter").css({
"-webkit-background-size":"cover",
"-moz-background-size": "cover",
"-o-background-size": "cover",
"background-size": "cover",
///必須在此處指明背景圖片位置
"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/index-item-bg3.jpg',sizingMethod='scale'",
///必須在此處指明背景圖片位置
"-ms-filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/index-item-bg3.jpg',sizingMethod='scale'"
})
10.定位相對位置爲padding-box
<div class="outer"> <div class="inner"> </div> </div>
.outer{ width: 100px; height: 100px; border: 10px solid #000; background: #ff0; position: relative; padding: 10px; } .inner{ width: 30px; height: 30px; background: #f00; position: absolute; top: 0; left: 0; }
11.字符間距在ps下的計算方法：
css字符間距（px）= ps字符間距/1000*font-size
12.兼容IE8的background-size
方法1：濾鏡
body {
background: url() no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='', sizingMethod='scale');
-ms-filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='', sizingMethod='scale');
}
方法二：經過引入htc文件計算屏幕尺寸控制img標籤尺寸，模擬background-size:cover;效果
you can use this file (https://github.com/louisremi/background-size-polyfill 「background-size polyfill」) for IE8 that is really simple to use:
.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
13 純CSS的 自適應設備的全屏顯示
.box{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #ff0;
}
<div class="box"> </div>
14.圖片祛色（黑白）
img{
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
img:hover{
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
-o-filter: grayscale(1);
}
15.box-shadow僞3D效果
<div class="box"> 盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容 </div>
.box{
width: 300px;
height: 300px;
cursor: pointer;
-webkit-transition: transform linear 0.2s,box-shadow linear 0.2s;
-moz-transition: transform linear 0.2s,box-shadow linear 0.2s;
-ms-transition: transform linear 0.2s,box-shadow linear 0.2s;
-o-transition: transform linear 0.2s,box-shadow linear 0.2s;
transition: transform linear 0.2s,box-shadow linear 0.2s;
}
.box:hover{
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
-webkit-transform: translateY(-3px);
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
transform: translateY(-3px);
}
16. 樹圖結構
可無限擴展
<div class="tree-box"> <div class="tree"> <ul> <li class="text-c first-fork"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> <ul class="fork"> <li class="fork-l fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> <ul class="fork"> <li class="fork-l fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> <ul class="fork"> <li class="fork-l fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> </li> <li class="fork-r fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> </li> </ul> </li> <li class="fork-r fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> <ul class="fork"> <li class="fork-l fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> </li> <li class="fork-r fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> </li> </ul> </li> </ul> </li> <li class="fork-r fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> <ul class="fork"> <li class="fork-l fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> <ul class="fork"> <li class="fork-l fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> </li> <li class="fork-r fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> </li> </ul> </li> <li class="fork-r fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> <ul class="fork"> <li class="fork-l fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> </li> <li class="fork-r fork-b" style="width: 50%;float:left;"> <a href="#" class="dot"> <div class="name"> mayun </div> <div class="vip"> VIP1 </div> </a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div>
*{
padding:0;
margin:0;
}
.vip-type li{
width: 33.33%;
float: left;
}
.vip-type ul{
overflow:hidden;
}
.vip-chos{
width: 100%;
height: 100%;
border: 2px solid #ccc;
border-radius: 5px;
text-align: center;
color: #1b82d1;
}
.now-vip{
border: 2px solid #1b82d1;
}
.dot{
color: #fff;
display: inline-block;
}
.tree{
width: 100%;
height: 20px;
position: relative;
text-align: center;
}
.tree ul{
padding-top: 30px;
position: relative;
}
.tree li{
padding-top: 30px;
}
.fork{
width: 100%；
}
.tree .fork:before{
content: "";
width: 0;
height: 30px;
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #959595;
}
.fork-b{
position: relative;
}
.fork-l:after{
content: "";
width: 50%;
height: 30px;
top: 0;
left: 50%;
position: absolute;
border-top: 1px solid #959595;
border-left: 1px solid #959595;
}
.fork-r:before{
content: "";
width: 50%;
height: 30px;
top: 0;
position: absolute;
right: 50%;
border-top: 1px solid #959595;
border-right: 1px solid #959595;
}
.vip{
background: #7bb0dc;
}
.name{
background: #1b82d1;
}
17.overflow-y:auto帶來的寬度問題
咱們都瞭解，能夠經過使用overflow-y:auto的方式使垂直方向的內容溢出後經過滾動條顯示，但隨之而來的問題是增長滾動條後盒子的寬度也會隨之增長，所以可能會對佈局產生影響，對此須要增長 overflow-x:hidden;即可將滾動條寬度包含在盒子的寬度以內。
18. 背景漸變的IE兼容處理
須要注意的是css順序不可改變，顏色爲十六進制
.bg{
width: 200px;
height: 300px;
background: #fff000;
background:-moz-linear-gradient(top,#fff000,#ff0000);
background:-webkit-linear-gradient(top, #fff000, #ff0000);
background:-ms-linear-gradient(top,#fff000,#ff0000);
background:linear-gradient(top,#fff000, #ff0000);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#fff000,endColorstr=#ff0000)";
}
19. 兼容IE下的 ico圖標引入
<link rel="Shortcut Icon" type="image/x-icon" href="images/favor.ico">
20.純CSS選項卡
<div class="bar"> <div class="tab-nav"> <span>首頁</span> <div class="tab-box"> </div> </div> <div class="tab-nav"> <span>首頁</span> <div class="tab-box"> </div> </div> <div class="tab-nav"> <span>新聞</span> <div class="tab-box"> </div> </div> <div class="tab-nav"> <span>案例</span> <div class="tab-box"> </div> </div> </div>
.bar{
background: #f2f2f2;
height: 46px;
line-height: 46px;
border: 1px solid #c0c0c0;
}
.bar:after{
content: ""
clear:both;
}
.tab-nav{
height: 46px;
position: relative;
float: left;
width: 180px;
}
.tab-nav:hover .tab-box{
display: block;
z-index: -1;
}
.tab-nav span{
position: absolute;
display: block;
width: 100%;
height: 46px;
top: 0;
left: 0;
box-sizing: content-box;
/*padding: 0 15px;*/
position: relative;
text-align: center;
}
.tab-nav:hover span{
margin-left: -1px;
border-right: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
border-bottom: 1px solid #f2f2f2;
}
.tab-nav:hover{
z-index: 10;
}
.tab-box{
width: 600px;
height: 400px;
background: #f2f2f2;
border: 1px solid #c0c0c0;
position: absolute;
z-index: 5;
top: 46px;
left: -1px;
display: none;
}
20.單行顯示
word-break:keep-all; white-space: nowrap;
相關文章
- 1. 前端面試總結——持續更新
- 2. 前端常見調試技巧篇總結（持續更新...）
- 3. MySQL小技巧總結（持續更新）
- 4. 前端佈局總結（持續更新）
- 5. 前端面試-面試題梳理總結（持續更新...）
- 6. vue技巧彙總-持續更新
- 7. css 技巧 （持續更新）
- 8. 前端面試題總結——JS（持續更新中）
- 9. 前端面試題總結——HTML(持續更新中)
- 10. 前端面試題總結——VUE（持續更新中）
- 更多相關文章...
- • Markdown 高級技巧 - Markdown 教程
- • ADO 更新記錄 - ADO 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
相關文章