第9天, 滑動門技術, 兩欄 三欄自適應佈局(聖盃,雙飛翼), 登高佈局, 文字溢位處理 ,單行,多行溢位
阿新 • • 發佈：2020-08-28
day 09
一、滑動門技術
1、什麼是滑動門？
不管文字多少都能夠適應特殊背景的這種效果，就需要用到滑動門技術
2、滑動門技術的原理
使用精靈技術以及padding撐開盒子的特點來製作滑動門
- 使用a標籤包裹span標籤，因為很多的導航都是可以點選的
- a標籤來控制左門，a標籤設定高度、轉行快、新增背景（顯示背景的左半邊部分）
- span標籤來控制右門，span設定高度、轉行快、新增背景（顯示背景的右半邊部分）
<a href="#"><span>首頁首頁首頁首頁</span></a>
<style> a { display: inline-block; height: 33px; line-height: 33px; background: url("images/lTcb_ve.png") no-repeat; padding-left: 15px; text-decoration: none; color: #fff; } span { display: inline-block; height: 33px; padding-right: 15px; background: url("images/lTcb_ve.png") no-repeat right; } </style>
二、多欄佈局解決方案
寬度自適應佈局，讓同一個頁面自動適應不同的裝置大小，從而解決為不同裝置提供不同版本的頁面問題
1、兩欄自適應佈局
左側固定寬度，右側寬度自適應
右側固定寬度，左側的寬度自適
以左側固定寬，右側寬度自適應為例，原理：
- 結構上，左右兩個盒子，左側盒子設定固定寬度，右側盒子width:100%;
- 給左側盒子設定絕對定位（position:absolute）
- 給右側盒子新增一個子盒，並子盒設定padding-left:左側盒子的寬度
<div class="wrap"> <div class="left">左側盒子</div> <div class="right"> <div class="son">右側盒子</div> </div> </div>
<style> /* - 結構上，左右兩個盒子，左側盒子設定固定寬度，右側盒子width:100%; - 給左側盒子設定絕對定位（position:absolute） - 給右側盒子新增一個子盒，並子盒設定padding-left:左側盒子的寬度 */ .wrap>div { min-height: 200px; } .left { position: absolute; width: 300px; background-color: aqua; } .right { width: 100%; background-color: pink; } .son { padding-left: 300px; } </style>
2、三欄自適應佈局
三欄自適應佈局是指左右兩側固定寬度，中間盒子寬度自適應
聖盃佈局和雙飛翼佈局都可以實現三欄自適應，但是實現思路不同
（1）聖盃佈局
實現思路：
- 結構上，需要有左側盒子，右側盒子，中間盒子。結構中放置時先放中間盒子，再放左右兩側盒子
- 左側盒子和右側盒子設定固定寬度，中間盒子width：100%;
- 給左側盒子，右側盒子和中間盒子設定浮動（注意給父元素清浮動）
- 將左側盒子拉到最左邊（margin-left:-100%），將右側盒子拉到最右邊（margin-left:-右側盒子的寬度）
- 將中間盒子露出來（給三個盒子的包裹盒設定padding: 0 右側盒子的寬度 0 左側盒子的寬度）
- 將左側盒子的位置還原（相對定位，left:-左側盒子的寬度）,將右側盒子的位置還原（相對定位，right:-右側盒子的寬度）
<div class="wrap">
<div class="center">中間盒子</div>
<div class="left">左側盒子</div>
<div class="right">右側盒子</div>
</div>
<style>
/* -
- 結構上，需要有左側盒子，右側盒子，中間盒子。結構中放置時先放中間盒子，再放左右兩側盒子
- 左側盒子和右側盒子設定固定寬度，中間盒子width：100%;
- 給左側盒子，右側盒子和中間盒子設定浮動（注意給父元素清浮動）
- 將左側盒子拉到最左邊（margin-left:-100%），將右側盒子拉到最右邊（margin-left:-右側盒子的寬度）
- 將中間盒子露出來（給三個盒子的包裹盒設定padding: 0 右側盒子的寬度 0 左側盒子的寬度）
- 將左側盒子的位置還原（相對定位，left:-左側盒子的寬度）,將右側盒子的位置還原（相對定位，right:-右側盒子的寬度）
*/
.wrap {
padding: 0 200px 0 300px;
}
.wrap>div {
float: left;
min-height: 300px;
}
.left {
position: relative;
left: -300px;
width: 300px;
background-color: aqua;
margin-left: -100%;
}
.right {
position: relative;
right: -200px;
width: 200px;
background-color: tomato;
margin-left: -200px;
}
.center {
width: 100%;
background-color: yellow;
}
</style>
（2）雙飛翼佈局
始於淘寶UED
將佈局比作一隻鳥，先將鳥的身體放好，再放置翅膀
實現思路：
- 結構上，先放中間盒子，中間盒子需要有子盒，再放左側盒子和右側盒子
- 給左側盒子和右側盒子設定固定寬度，中間盒子width:100%
- 給左側盒子，右側盒子和中間盒子設定左浮動（注意給父元素清浮動）
- 將左側盒子拉到最左邊（margin-left:-100%），將右側盒子拉到最右邊（margin-left:-右側盒子的寬度）
- 將中間盒子露出來（給中間的子盒設定margin:0 右側盒子的寬度 0 左側盒子的寬度）
<div class="wrap">
<div class="center">
<div class="son">中間盒子的內容</div>
</div>
<div class="left">左側盒子</div>
<div class="right">右側盒子</div>
</div>
<style>
/*
- 結構上，先放中間盒子，中間盒子需要有子盒，再放左側盒子和右側盒子
- 給左側盒子和右側盒子設定固定寬度，中間盒子width:100%
- 給左側盒子，右側盒子和中間盒子設定左浮動（注意給父元素清浮動）
- 將左側盒子拉到最左邊（margin-left:-100%），將右側盒子拉到最右邊（margin-left:-右側盒子的寬度）
- 將中間盒子露出來（給中間的子盒設定margin:0 右側盒子的寬度 0 左側盒子的寬度）
*/
.wrap>div {
float: left;
min-height: 300px;
}
.left {
width: 200px;
background-color: tomato;
margin-left: -100%;
}
.right {
width: 300px;
background-color: yellowgreen;
margin-left: -300px;
}
.center {
width: 100%;
background-color: violet;
}
.center>.son {
margin: 0 300px 0 200px;
}
</style>
3、等高佈局
等高佈局是指多列子元素在父元素中實現視覺等高的效果
（1）利用內外間距相抵消實現等高
核心點：
-
給子元素水平排列，分別給子元素設定padding-bottom，margin-bottom（內外間距相抵消）
-
給父元素溢位隱藏
<div class="wrap"> <div class="left">左側盒子</div> <div class="center">中間盒子</div> <div class="right">右側盒子</div> </div><style> .wrap { width: 1000px; margin: 0 auto; overflow: hidden; } .left { float:left; width: 200px; background-color: violet; min-height: 200px; padding-bottom: 9999px; margin-bottom: -9999px; } .center { float:left; width: 500px; background-color: turquoise; min-height: 200px; padding-bottom: 9999px; margin-bottom: -9999px; } .right { float:left; width: 300px; background-color: yellow; min-height: 200px; padding-bottom: 9999px; margin-bottom: -9999px; } </style>優缺點：
- 結構簡單，相容所有的瀏覽器
- 實現的是偽等高，合理控制內外間距
（2）利用內容撐開父元素的特點實現等高
- 有幾列就需要巢狀幾層容器，每層容器需要單獨設定背景顏色
<div class="wrap">
<!-- 需要幾列就需要巢狀幾層 -->
<!-- 第一列的背景 -->
<div class="col1">
<!-- 第二列的背景 -->
<div class="col2">
<!-- 第三列的背景 -->
<div class="col3 clearfix">
<div class="left">左側盒子</div>
<div class="center">中間盒子</div>
<div class="right">右側盒子</div>
</div>
</div>
</div>
</div>
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
.wrap {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.col1 {
width: 100%;
background-color: tomato;
}
.col2 {
/* 露出第一列盒子的背景 */
position: relative;
left: 300px;
width: 100%;
background-color: yellow;
}
.col3 {
/* 露出第二列盒子的背景顏色 */
position: relative;
left: 500px;
width: 100%;
background-color: pink;
}
.left {
float: left;
width: 300px;
min-height: 300px;
margin-left: -800px;
}
.center {
float: left;
width: 500px;
min-height: 300px;
margin-left: -500px;
}
.right {
float: left;
width: 200px;
min-height: 300px;
}
</style>
三、文字溢位處理
1、單行文字溢位處理
-
限定容器的寬度
-
文字強制在一行顯示
-
給盒子設定溢位隱藏
-
給超出文字如何處理
- clip 直接裁剪
- ellipsis 溢位顯示省略號
<p>0817web班0817web班0817web班0817web班0817web班0817web班0817web班0817web班0817web班</p><style> p { width: 200px; border: 1px solid red; /* 文字強制在一行顯示 */ white-space: nowrap; /* 溢位隱藏 */ overflow: hidden; /* 文字超出後如何處理 clip 直接裁剪 ellipsis 溢位顯示省略號 */ /* text-overflow: clip; */ text-overflow: ellipsis; } </style>
2、多行文字溢位處理
注意: 這一塊只能用中文,不能用英文.
（1）使用webkit私有屬性進行處理（只適用於webkit核心的瀏覽器）
p {
width: 200px;
border: 1px solid red;
overflow: hidden;
/* 這個屬性不能單獨使用，必須配合下面兩個屬性來使用 */
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
}
-
-webkit-line-clamp屬性 限制顯示的行數
這個屬性不能單獨設定，設定後不生效，需要配合以下兩個屬性才可以生效】
- display: -webkit-box; 將容器轉化為webkit盒子（彈性伸縮盒）
- -webkit-box-orient: vertical; 容器內的子元素的排列方式
（2）利用偽元素模擬溢位顯示省略號的效果（相容性比較好）
- 需要限制盒子的寬度
- 行高與盒子的高度設定成倍數關係
- 利用偽元素建立一個省略號
- 子絕父相（偽元素絕對定位）
- 調整偏移屬性到盒子的右下角
- 給偽元素設定一個跟大背景相同的背景顏色，再通過padding左右微調偽元素的顯示位置
<p>2013年參加湖南衛視《快樂男聲》獲年度總冠軍出道 [1] 。2014年1月首登央視春晚舞臺；同年4月參加戶外真人秀節目《花兒與少年》；9月6日-7日在北京萬事達中心連開兩場“火星”演唱會 [2] ，隨後發行首張個人專輯《卡西莫多的禮物》 [3] ，並憑此專輯獲2015QQ音樂年度最佳內地男歌手及第15屆音樂風雲榜年度最受歡迎男歌手等獎項。2015年7月31日-8月2日在上海大舞臺連開三場個人演唱 [4] ；同年12月發行第二張專輯《異類》，獲2016酷音樂亞洲盛典年度最佳專輯等獎項。</p>
<style>
p {
position: relative;
width: 200px;
border: 1px solid red;
/* 行高跟盒子的高度成倍數關係 */
line-height: 30px;
height: 90px;
}
p::after {
position: absolute;
bottom: 2px;
right: 5px;
content: "...";
background: #fff;
padding: 0 2px;
}
</style>