击右上方红色按钮关注“web秀”,让你真正秀起来
在日常项目开发中,在布局方面有遇到哪些问题了?今天来一起看看CSS布局有哪些小技巧,后续开发更轻松。本文主要通过简单的示例,讲述开发中遇到的布局等问题,但不仅限于布局相关,会有其他相关知识点。
CSS实用技巧第二讲:布局处理
移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制,代码如下:
/* 基于UI width=750px DPR=2的页面 */ html { font-size: calc(100vw / 7.5); }
rem 页面布局, 不兼容低版本移动端,使用需谨慎。
通过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径向渐变实现优惠券波浪造型》
在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实用技巧第二讲:布局处理
<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实用技巧第二讲:布局处理
<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
1) 下载完成pycharm, 点击file-New Project...
2) 按下图步骤创建一个项目,目前我们选择Pure python即可,以后我们可以学习用Django/flask等框架来做完整的系统
1)在创建的项目空白处鼠标右键-New-HTML File
2)输入英文的网页名字,尽量不要输入中文/特殊字符
当双击打开我们创建后的HTML文件,大家会看到下面的界面
在开始开发网页前,我们需要自己设计下想要把网页做成什么样,为了节省成本OF都是自己设计的页面样式,可以手绘,也可以在PPT上画。
我们先学习一个比较简单的布局如下图,大家可以看到下图已经画出了我们需要添加的内容,要注意的地方是比如Taylor的图片和文字一定要用<div class=bord>框住,否则Taylor图片与文字将会是左右的关系,而不是上下
根据上述的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>
1)鼠标移到代码处,在右上角我们会看到一排浏览器,我们点击其中一个运行
2)目前看到的网页内容从上到下显示
首先我们简要了解下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一定会一一解答的。
*请认真填写需求信息,我们会在24小时内与您取得联系。