手机页面操作栏的创建及WebFont的使用
2024-09-06 13:26:54
一、手机界面底部操作栏的创建。
<style>
.opers{
position:absolute;
bottom:0px;
left:0px;
right:0px;
height:3rem;
background-color:#fbfbfb;
display:flex;
display:-webkit-box;
}
.opers a:BEFORE{
font-size:1.25rem;
display:block;
}
.opers a{
flex:1;
text-align:center;
-webkit-box-flex:1;
font-size:0.75rem;
}
.list{
position:absolute;
top:1.5rem;
left:0;
right:0;
bottom:3rem;
background-color:#fefefe;
overflow:hidden;
} </style> <div class="opers">
<a>新建文件夹</a>
<a>复制</a>
<a>删除</a>
</div>
css flexbox(可伸缩盒模型):面向的场景,容器的大小是可变的,在容器内部的子节点,也要随着容器的变动,进行大小的调整和次序的变更,并且能够自动填满容器,
伸缩容器,伸缩项目,主轴和方向
二、使用WebFont实现操作栏图标
图片矢量化,可以无限的伸缩,通过修改font-size的大小,可以修改图片的大小,修改font-color的颜色,就可以修改图片的颜色。
通过WebFont定制图标的网站:http://fontello.com
下载选中的图标,引入fontello.css文件,
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?83914508');
src: url('../font/fontello.eot?83914508#iefix') format('embedded-opentype'),
url('../font/fontello.woff?83914508') format('woff'),
url('../font/fontello.ttf?83914508') format('truetype'),
url('../font/fontello.svg?83914508#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?83914508#fontello') format('svg');
}
}
*/ [class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
} .icon-plus:before { content: '\e800'; } /* '' */
.icon-attention-circled:before { content: '\e801'; } /* '' */
.icon-trash-empty:before { content: '\e802'; } /* '' */
打开,demo.html文件,找到类名。
最新文章
- ASP.NET MVC学习之母版页和自定义控件的使用
- 一般处理程序获取WEB窗体创建的验证码需要实现session相关接口
- C语言strdup函数
- iOS开发者必备的10款工具
- (一)SecureCRT连接虚拟机linux
- Python:数字
- Tested work with China Digiprog 3 4.94 mileage programmer
- 【HDOJ】【4336】Card Collector
- Windows Phone 为指定容器内的元素设置样式
- Apache-Tika解析XML文档
- 多线程Two-Phase Termination Pattern两阶段终止模式
- ABAP文件上传下载 用SMW0
- 音乐TV2015校园招聘A第二大发行量(对中国科学院大学站)
- ServletRequest的一些知识点
- Bounding-box 回归
- 使用Filter跟踪Asp.net MVC页面加载(转)
- BZOJ2243 洛谷2486 [SDOI2011]染色 树链剖分
- linux系统添加指定uid和gid的用户和组
- TCP Nagle算法&;&;延迟确认机制
- 采用RedisLive监控Redis服务——安装手册
热门文章
- php-fpm回顾和总结
- select语句中会影响查询效率的因素
- sonar做代码检测时如何忽略一些代码文件
- 如何快速掌握plc或工控机与其他设备的modbus通讯协议?包括格式与实际过程 RT,本人从事工控行业多年,对于PLC与触摸屏也算比较熟悉,唯独对这个通讯协议比较难理解,请教高人指导,从什么地方开始下手,或者是说如何正确理解报文格式或正确写入
- 任务调度(三)——Timer的替代品ScheduledExecutorService简单介绍
- vuex资料
- Codeforces Beta Round #2 B. The least round way
- JavaScriptSerializer 序列号datatime时少了8小时
- 2016/1/18 Java开发中的23种设计模式详解(转)
- SVN 打补丁 Apply Patch ***