摘要:
file上传图片获取路径地址 类似:点击button,选择图片,在对应的输入框input里面显示图片路径地址 类似这样 原理:通过opacity来隐藏原生的input file 然后用.file-btn来模拟input file的位置 再进行美化 file-btn 设置overflow: hidde 阅读全文
摘要:
要实现类似QQ空间那样时光轴 时间轴效果 如图 分析:左边 ul的border-left实现,这样会出现底部的 余出的线条,不美观, 所以考虑li的border-left实现。 li的padding-bottom撑开上下间距 h4标题的:before实现圆圈,定位到左边。 圆圈的实现使用绝对定位实现 阅读全文
摘要:
纯css实现下拉菜单 <ul class="menu"> <li><a href="#">关于我们</a> <ul> <li><a href="#">关于我们1</a></li> <li><a href="#">关于我们1</a></li> <li><a href="#">关于我们1</a></li 阅读全文
摘要:
看到支付宝官网,使用很多iconfont-字体图标。素色,纯色,体积小,尝试使用做个demo,以便日后参考使用 <h1>第一个结构插入实现图标</h1> <i class="icon iconfont"></i> <h1>第三个css class实现图标</h1> <i class= 阅读全文
摘要:
图标和文字居中 一般按照标准如下写法 <div class="box"> <p><i class="icon4"></i><span class="text">无论怎么看,我都是水平线居中的。</span></p> </div> .box p { width: 80%; height: 40px; 阅读全文
摘要:
客户端页面 实现 下拉菜单 跳转链接 如图 遂使用 select option来展现.开始想到添加 a标签,结果,不行.渲染不出来 搜索查询得知 如下方法实现 <select name="pageselect" onchange="window.location.href=options[selec 阅读全文
摘要:
近期做客户端页面,很是迷茫,过程中,学习了不少知识,仅作总结,以备参考。一般我们拿到设计稿是640px宽度的 这个时候,把图片按照640px原大小切下,另存为png使用ps把设计稿缩放一半50%按照这个缩放之后的320px宽度,切页面里面的图片background-size:50 % 50%图片 ... 阅读全文
摘要:
实现后台管理系统的消息提醒,做了一个头部效果。 <div class="header"> <ul class="header-nav"> <li class="message"> <span>18</span> <a href="https://www.baidu.com/"> 消息中心 </a> 阅读全文
摘要:
css3实现图片旋转效果 近期实现一个消息提醒(醒目)的需求页面.想到了css3的旋转动画,故使用。 鼠标悬浮时候,图片可以旋转,放大 rotate(360deg) scale(1.3);如需翻转,添加 translate(50%, 50%)即可。 为了减少html结构,使用了:before伪类元素 阅读全文
摘要:
做了一个手机客户端页面,未登录的状态页面 类似 如上图所示 这样 上面列表采取80%宽度,右侧浮动。ul li设置绝对定位。左边icon图标采取决定定位。 为了防止小屏幕手机左边空白缝隙过小,事先给外面层设置一个padding-left;留出空白间隙 因为上面ul列表使用了浮动,所以下面的butto 阅读全文