html底部线条,这种APP底部横线+文字该怎么布局?css

JS Bin

.divider {

color: #999;

text-align: center;

}

.divider::before,

.divider::after {

content: '';

display: inline-block;

margin: 0 10px;

width: 100px;

height: 1px;

background: currentColor;

vertical-align: middle;

}

这是一个分割线

上面这个如果考虑移动端宽度问题单位应该用rem，移动端这个应该是共识了。使用flex则可以不考虑宽度问题了，如下面这个：

JS Bin

.divider {

display: flex;

align-items: center;

color: #999;

text-align: center;

white-space: nowrap;

}

.divider::before,

.divider::after {

content: '';

width: 50%;

height: 1px;

background: currentColor;

}

.text {

padding: 0 1em;

background: #fff;

}

这是一个分割线sdfdsfssdfs

html底部线条,这种APP底部横线+文字该怎么布局?css相关推荐

css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
UI设计师素材干货|APP底部导航模板
APP导航,就是把所有的功能整合贯穿在一起,让用户能够顺利的在产品中畅行,让他们自己时刻清楚自己在应用中所处的位置,以及如何前往目的页面.在移动端产品导航的设计中没有最好之说,只有最合适,根据你的产品 ...
hbuilderx 底部_如何在Hbuilder中制作app底部导航栏
. 1 问题描述最近在使用Hbuilder进行移动app前端开发中,我通常搭建首页框架的常规方法是在index.html主文件中使用多种框架组件模块,再通过css叠层样式表对相应模块加以修饰.但在分 ...
android app底部菜单栏,材料设计指南·组件篇（一）：AppBars: Bottom 底部栏
写在前面的话:内容来自 Material IO ,目前不是从头到尾一一翻译,我自己用到哪部分内容就翻译哪部分.之后会逐步完善,当然你要想先看哪部分也可以留言提要求.不是直译,但不会影响原文内容. 材料 ...
css+html模仿京东app底部导航栏
css+html模仿京东app底部导航栏完成效果如下: 上下滑动页面,底部导航栏一直存在,位置不变底部导航栏实现代码如下: 只需css写超简单代码重点是footer标签,其余标签是为和京东导航栏 ...
高仿自如APP 底部导航切换动画效果
code小生一个专注大前端领域的技术平台公众号回复Android加入安卓技术群作者:孔鹏飞链接:https://www.jianshu.com/p/7a544cf34bcf 声明:本文已获孔鹏飞 ...
火鸟门户底部提示下载APP修改方法_火鸟修改底部提示APP的教程
///火鸟门户修改底部APP提示的方法 ///零起步创业工作室旗下海码站提供撰写修改 ///如有转发的请备注,来源海码站谢谢修改方法一 ****找到目录 /static/js/core/touch ...
Flutter 中的常见的按钮组件以及自定义按钮组件、FloatingActionButton 实现类似闲鱼 App 底部导航凸起按钮
文章目录一. Flutter 中的按钮组件介绍二. Flutter 按钮组件中的一些属性三. Flutter FloatingActionButton 介绍四. FloatingActionB ...
css动画效果：鼠标移上去底部线条从中间往四周动画延伸
css动画效果:鼠标移上去底部线条从中间往四周动画延伸如图: .top-nav a:after {content: ' ';position: absolute;z-index: 2;bottom: ...

html底部线条,这种APP底部横线+文字该怎么布局?css

html底部线条,这种APP底部横线+文字该怎么布局?css相关推荐

最新文章

热门文章