擊右上方紅色按鈕關注“web秀”,讓你真正秀起來
在css3到來之前,都是用js來操作dom元素,計算位置,大小,形成瀑布流布局。但是有了css3之后,一切實現起來就太簡單了,沒有復雜的邏輯,輕松的幾行樣式代碼就可以搞定。
基于waterfall.js(11.8kb),還得寫入基礎的樣式,初始化等等,對比其他js,已經是很簡單了。
var waterfall = new WaterFall({ container: '#waterfall', pins: ".pin", loader: '#loader', gapHeight: 20, gapWidth: 20, pinWidth: 216, threshold: 100 });
但是,有了css3,再簡潔的js,都比不過簡單的css代碼。
關鍵點,橫向 flex 布局嵌套多列縱向 flex 布局,使用了 vw 進行自適應縮放
// pug 模板引擎 div.g-container -for(var i = 0; i<4; i++) div.g-queue -for(var j = 0; j<8; j++) div.g-item
不熟悉pug模板(jade)的,可以先去了解一下。其實看大致也就懂了,就是循環多個元素,沒有復雜的邏輯。
$lineCount: 4; $count: 8; // 隨機數(瀑布流某塊的高度) @function randomNum($max, $min: 0, $u: 1) { @return ($min + random($max)) * $u; } // 隨機顏色值 @function randomColor() { @return rgb(randomNum(255), randomNum(255), randomNum(255)); } .g-container { display: flex; flex-direction: row; justify-content: space-between; overflow: hidden; } .g-queue { display: flex; flex-direction: column; flex-basis: 24%; } .g-item { position: relative; width: 100%; margin: 2.5% 0; } @for $i from 1 to $lineCount+1 { .g-queue:nth-child(#{$i}) { @for $j from 1 to $count+1 { .g-item:nth-child(#{$j}) { height: #{randomNum(300, 50)}px; background: randomColor(); // 瀑布流某塊中間的數字 &::after { content: "#{$j}"; position: absolute; color: #fff; font-size: 24px; // 水平垂直居中 top: 50%; left: 50%; transform: translate(-50%, -50%); } } } } }
預覽:
CSS 實現瀑布流布局(display: flex)
演示地址: 點擊文章結尾“了解更多”
關鍵點, column-count: 元素內容將被劃分的最佳列數 break-inside: 避免在元素內部插入分頁符
// pug 模板引擎 div.g-container -for(var j = 0; j<32; j++) div.g-item
column-count 看起來比display: flex更科學,模板不需要2層循環,更簡潔明了。如果真正用到數據上面,會更好處理。
$count: 32; // 隨機數(瀑布流某塊的高度) @function randomNum($max, $min: 0, $u: 1) { @return ($min + random($max)) * $u; } // 隨機顏色值 @function randomColor() { @return rgb(randomNum(255), randomNum(255), randomNum(255)); } .g-container { column-count: 4; column-gap: .5vw; padding-top: .5vw; } .g-item { position: relative; width: 24vw; margin-bottom: 1vw; break-inside: avoid; } @for $i from 1 to $count+1 { .g-item:nth-child(#{$i}) { height: #{randomNum(300, 50)}px; background: randomColor(); &::after { content: "#{$i}"; position: absolute; color: #fff; font-size: 2vw; top: 50%; left: 50%; transform: translate(-50%, -50%); } } }
預覽:
CSS 實現瀑布流布局(column-count)
演示地址: 點擊文章結尾“了解更多”
關鍵點, 使用 grid-template-columns、grid-template-rows 分割行列 使用 grid-row 控制每個 item 的所占格子的大小
// pug 模板引擎 div.g-container -for(var i = 0; i<8; i++) div.g-item
樣式
$count: 8; // 隨機數(瀑布流某塊的高度) @function randomNum($max, $min: 0, $u: 1) { @return ($min + random($max)) * $u; } // 隨機顏色值 @function randomColor() { @return rgb(randomNum(255), randomNum(255), randomNum(255)); } .g-container { height: 100vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(8, 1fr); } @for $i from 1 to $count+1 { .g-item:nth-child(#{$i}) { position: relative; background: randomColor(); margin: 0.5vw; &::after { content: "#{$i}"; position: absolute; color: #fff; font-size: 2vw; top: 50%; left: 50%; transform: translate(-50%, -50%); } } } .g-item { &:nth-child(1) { grid-column: 1; grid-row: 1 / 3; } &:nth-child(2) { grid-column: 2; grid-row: 1 / 4; } &:nth-child(3) { grid-column: 3; grid-row: 1 / 5; } &:nth-child(4) { grid-column: 4; grid-row: 1 / 6; } &:nth-child(5) { grid-column: 1; grid-row: 3 / 9; } &:nth-child(6) { grid-column: 2; grid-row: 4 / 9; } &:nth-child(7) { grid-column: 3; grid-row: 5 / 9; } &:nth-child(8) { grid-column: 4; grid-row: 6 / 9; } }
display: grid樣式上面感覺也不好用,需要書寫很多grid-column、grid-row。
預覽:
CSS 實現瀑布流布局(display: grid)
演示地址: 點擊文章結尾“了解更多”
通過,這3種CSS瀑布流布局,你更喜歡哪一種呢?
個人更喜歡column-count,看起來更加清晰,容易理解,代碼量也很少。
喜歡小編的點擊關注,了解更多知識!
源碼地址請點擊下方“了解更多”
由于漢字的特殊性,在css網頁布局中,中文排版有別于英文排版。排版是一個麻煩的問題,小編認為,作為一個優秀的網頁設計師和網頁制作人員,掌握一些簡單的中文排版技巧是不可或缺的,所以今天特意總結了幾個簡單實用的技巧,希望對大家有所幫助。
Web前端教程
一、如何設定文字字體、顏色、大小等
font-style設定斜體,比如font-style:italic
font-weight設定文字粗細,比如font-weight:bold
font-size設定文字大小,比如font-size:12px
line-height設定行距,比如line-height:150%
color設定文字顏色,注意不是font-color喔,比如color:red
font-family設定字體,比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋體,sans-serif
二、使用margin,text-align 控制段落
中文段落使用p標簽,左右、段前段后的空白,都可以通過margin來控制。
比如
p{
margin:18px 6px 6px 18px;/*分別是上、右、下、左,十二點開始的順時針方向*/
}
而text-align則用于文字的對齊方式。
比如
p{
text-align:center;/*居中對齊*/
}
除了居中對齊之外,對齊方式還有左對齊、右對齊和兩端對齊,對應的屬性值分別為left、right、justify。
提示:由于默認的margin值會導致頁面排版出現問題,特別是ul、ol、p、dt、dd等標簽。小編的解決之道就是把所有標簽的margin值定義為0。
三、豎排文字—使用writing-mode
writing-mode屬性有兩個值lr-tb和tb-rl,前者是默認的左-右、上-下,后者是上-下、右-左。
寫法如
p{
writing-mode:tb-rl;
}
四、使用list-style美化列表
如果我們的排版涉及到列表,不妨考慮為它添加些項目符號進行美化。
在CSS里,項目符號包括disc(實心圓點)、circle(空心圓圈)、square(實心方塊)、decimal(阿拉伯數字)、lower-roman(小寫羅馬數字)、upper-roman(大寫羅馬數字)、lower-alpha(小寫英文字母)、upper-alpha(大寫英文字母)、none(無)。
嘿嘿!我們可用的項目符號數量不少喔,但美中不足的是我們不能為它們設定大小,也不能設定垂直方向上的對齊。
如果我們想設定一個列表的項目符號為方塊,可以這樣寫:
li{
list-style:square;
}
小編在這里提醒大家一下:當一個項目列表的左外邊距設為零的時候,list-style-position:outside的項目符號不會顯示。
五、使用text-overflow 實現固定寬度漢字截斷
用后臺語言可以對從數據庫里的字段內容做截斷處理,如果想對列表應用該樣式,我們可以這樣寫:
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
六、首字下沉
如果你想制作首字下沉效果,不妨考慮偽對象:first-letter并配合font-size、float屬性。
p:first-letter{
padding:6px;
font-size:32pt;
float:left;
}
七、首行縮進—使用text-indent
text-indent可以使得容器內首行縮進一定單位。比如中文段落一般每段前空兩個漢字。
可以這么寫
p{
text-indent:2em;/*em是相對單位,2em即現在一個字大小的兩倍*/
}
注意:如果font-size是12px的話,那么text-indent:2em則代表縮進24px。
八、固定寬度漢字(詞)折行—使用word-break
在排版的時候,你是否為一個詞組,其中一個字出現在上面而另一個字折斷到下一行去而發愁呢?不用愁,這時使用word-break就可以輕松解決問題了。
九、關于漢字注音—使用ruby標簽和ruby-align屬性
最后小編向大家介紹一下ruby標簽和ruby-align屬性 。這是一個比較冷門的技巧,可能平時使用不多,但小編覺得不妨提供給大家預防不時之需。
如果我們想為漢字注音就可以這樣寫
<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>
然后通過ruby-align設置其對齊方式。
以上就是今日整理的“Web前端教程:簡單實用的CSS網頁布局中文排版技巧”一文,希望為正在學習Web前端的同學提供參考。你記住并理解了嗎?以后酷仔每日均會提供MySQL、Python及Web相關的教程及習題,趕快學習起來吧。
<divclass="parent">
<divclass="child"></div>
</div>
.parent{
width: 500px;
height: 200px;
background: red;
text-align: center;
}
.child{
display: inline-block;
width: 300px;
height: 100px;
background: blue;
}
<divclass="parent">
<divclass="child"></div>
</div>
.parent{width: 500px;
height: 400px;
background: red;
}
.child{margin: 0 auto;
width: 300px;
height: 100px
;background: blue;
}
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 400px;
background: red;
}
.child {
position: absolute;
top: 0;
left: 50%;
margin-left: -150px;
width: 300px;
height: 100px;
background: blue;
}
<divclass="parent">
<divclass="child"></div>
</div>
.parent {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 400px;
background: red;
}
.child {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
width: 300px;
height: 100px;
background: blue;
}
<divclass="parent">
<divclass="child"></div>
</div>
.parent {
display: flex;
justify-content: center;
width: 500px;
height: 400px;
background: red;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
<divclass="parent">
<divclass="child"></div>
</div>
.parent {
width: 500px;
height: 400px;
background: red;
display: table-cell;
vertical-align: middle;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
<divclass="parent">
<divclass="child">
</div></div>
.parent {
width: 500px;
height: 400px;
background: red;
line-height: 400px;
}
.child {
width: 300px;
height: 100px;
background: blue;
display: inline-block;
vertical-align: middle;
}
<divclass="parent">
<divclass="child"></div>
</div>
.parent {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 400px;
background: red;
}
.child {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 300px;
height: 100px;
background: blue;
}
<divclass="parent">
<divclass="child"></div>
</div>
.parent {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 400px;
background: red;
}
.child {
position: absolute;
top: 50%;
left: 0;
margin-top: -50px;
width: 300px;
height: 100px;
background: blue;
}
<divclass="parent">
<divclass="child"></div>
</div>
.parent {
width: 500px;
height: 400px;
background: red;
display: flex;
align-items: center;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
<divclass="parent">
<divclass="child"></div>
</div>
.parent {
width: 500px;
height: 400px;
background: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 300px;
height: 100px;
background: blue;
display: inline-block;
}
<divclass="parent">
<divclass="child"></div>
</div>
.parent {
width: 500px;
height: 400px;
background: red;
position: relative;
left: 0;
right: 0;
}
.child {
width: 300px;
height: 100px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<divclass="parent">
<divclass="child"></div>
</div>
.parent {
width: 500px;
height: 400px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
left{float:left;width:100px;} .right{margin-left:100px;}
<div class="left">left</div>
<div class="right">right</div>
* {
margin: 0;
padding: 0;
}
.left {
height: 400px;
width: 300px;
background: red;
float: left;
}
.right {
height: 400px;
margin-left: 300px;
background: blue;
}
<div class="parent">
<div class="left">
left
</div>
<div class="right-fix">
<div class="right">
right
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.left {
width: 300px;
height: 400px;
float: left;
background: red;
}
.right-fix {
width: 100%;
margin-left: -300px;
float: right;
}
.right {
margin-left: 300px;
height: 400px;
background: blue;
}
.left{width:寬度值;float:left;} .right{overflow:hidden;}
<divclass="parent">
<divclass="left">
left
</div><divclass="right">
right
</div>
</div>
/*設置overflow:hidden;創建BFC。根據BFC特性,BFC不會與float box 重疊。*/
* {
margin: 0;
padding: 0;
}
.left {
width: 300px;
height: 400px;
float: left;
background: red;
}
.right {
height: 400px;
background: blue;
overflow: hidden;
}
table 實現
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
* {
margin: 0;
padding: 0;
}
.parent {
display: table;
table-layout: fixed;
width: 100%;
}
.left {
width: 300px;
height: 400px;
background: red;
display: table-cell;
}
.right {
height: 400px;
background: blue;
display: table-cell;
}
flex 實現
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
width: 100%;
}
.left {
width: 300px;
height: 400px;
background: red;
}
.right {
height: 400px;
background: blue;
flex: 1;
}
float margin 實現
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
* {
margin: 0;
padding: 0;
}
.left {
width: 100%;
height: 400px;
background: red;
float: left;
margin-right: -300px;
}
.right {
height: 400px;
background: blue;
width: 300px;
float: right;
}
table 實現
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
* {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
display: table;
table-layout: fixed;
}
.left {
width: 100%;
height: 400px;
background: red;
display: table-cell;
}
.right {
height: 400px;
background: blue;
width: 300px;
display: table-cell;
}
flex 實現
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
* {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
display: flex;
}
.left {
flex: 1;
background: red;
display: table-cell;
}
.right {
height: 400px;
background: blue;
width: 300px;
}
float margin 實現
<div class="parent">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
* {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
}
.left,
.center {
background: red;
float: left;
width: 300px;
height: 400px;
}
.center {
background: yellow;
}
.right {
height: 400px;
background: blue;
margin-left: 600px;
}
float overflow 實現
<div class="parent">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
* {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
}
.left,
.center {
background: red;
float: left;
width: 300px;
height: 400px;
}
.center {
background: yellow;
}
.right {
height: 400px;
background: blue;
overflow: hidden;
}
table 實現
<div class="parent">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
*{
margin: 0;
padding: 0;
}
.parent{
width: 100%;
display: table;
table-layout: fixed;
}
.left,
.center{
background: red;
display: table-cell;
width: 300px;
height: 400px;
}
.center{
background: yellow;
}.right{
height: 400px;
background: blue;
display: table-cell;
}
想要更多關于前端培訓學習資料,可以關注“廣州藍景”微信公眾號,進行詳細的了解。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。