乐少007

摘要： 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">&#xe60a;</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 阅读全文