击右上方红色按钮关注“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小时内与您取得联系。