01 2016 档案

时光轴 时间轴 效果
摘要：要实现类似QQ空间那样时光轴 时间轴效果 如图 分析：左边 ul的border-left实现，这样会出现底部的 余出的线条，不美观， 所以考虑li的border-left实现。 li的padding-bottom撑开上下间距 h4标题的:before实现圆圈，定位到左边。 圆圈的实现使用绝对定位实现 阅读全文
posted @ 2016-01-25 20:29 乐少007 阅读(333) 评论(0) 推荐(0)
纯css实现下拉菜单
摘要：纯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 阅读全文
posted @ 2016-01-21 11:12 乐少007 阅读(219) 评论(0) 推荐(0)
iconfont-字体图标
摘要：看到支付宝官网，使用很多iconfont-字体图标。素色，纯色，体积小，尝试使用做个demo，以便日后参考使用 <h1>第一个结构插入实现图标</h1> <i class="icon iconfont">&#xe60a;</i> <h1>第三个css class实现图标</h1> <i class= 阅读全文
posted @ 2016-01-20 10:25 乐少007 阅读(1828) 评论(0) 推荐(0)
图标和文字居中
摘要：图标和文字居中 一般按照标准如下写法 <div class="box"> <p><i class="icon4"></i><span class="text">无论怎么看，我都是水平线居中的。</span></p> </div> .box p { width: 80%; height: 40px; 阅读全文
posted @ 2016-01-13 17:16 乐少007 阅读(649) 评论(0) 推荐(0)
select超链接跳转A
摘要：客户端页面 实现 下拉菜单 跳转链接 如图 遂使用 select option来展现.开始想到添加 a标签,结果,不行.渲染不出来 搜索查询得知 如下方法实现 <select name="pageselect" onchange="window.location.href=options[selec 阅读全文
posted @ 2016-01-12 20:56 乐少007 阅读(1041) 评论(0) 推荐(0)
客户端页面粗略见解
摘要：近期做客户端页面，很是迷茫，过程中，学习了不少知识，仅作总结，以备参考。一般我们拿到设计稿是640px宽度的 这个时候，把图片按照640px原大小切下，另存为png使用ps把设计稿缩放一半50%按照这个缩放之后的320px宽度,切页面里面的图片background-size:50 % 50%图片 ... 阅读全文
posted @ 2016-01-12 20:38 乐少007 阅读(222) 评论(0) 推荐(0)
消息提醒
摘要：实现后台管理系统的消息提醒，做了一个头部效果。 <div class="header"> <ul class="header-nav"> <li class="message"> <span>18</span> <a href="https://www.baidu.com/"> 消息中心 </a> 阅读全文
posted @ 2016-01-10 13:36 乐少007 阅读(208) 评论(0) 推荐(0)
css3实现图片旋转效果
摘要：css3实现图片旋转效果 近期实现一个消息提醒(醒目)的需求页面.想到了css3的旋转动画,故使用。 鼠标悬浮时候，图片可以旋转，放大 rotate(360deg) scale(1.3);如需翻转，添加 translate(50%, 50%)即可。 为了减少html结构，使用了:before伪类元素 阅读全文
posted @ 2016-01-10 13:26 乐少007 阅读(2347) 评论(0) 推荐(0)