html+css/html5
文章平均质量分 74
timelessmemoryli
多思考,思想很重要。
做到最后其实会感受到技术没那么重要,只是工具。
思维和方法才是根本。博客应该不会再更新,只是以前过程的记录。
展开
-
纯CSS气泡效果
转自:http://www.liaoxuefeng.com/article/0013738937970388b6b6e5e5e2f4e21b65b01807c84ddf6000用小图片实现气泡效果不难,但图片一费流量,二难修改,改边框颜色、大小均要重新生成图片,一个普通的前端设计师和一个优秀的前端设计师的差距就在这里:前者完成任务,后者追求极致。当然,我作为一个非专业的前端设计师,转载 2015-11-29 16:36:29 · 905 阅读 · 0 评论 -
Canvas + jqueryRotate实现抽奖大转盘
canvas + jqueeryRotate .gameContainer .turn-plate { background-color: #FF9807; border-radius: 20rem; width: 40rem; height: 40rem; position:relative; margin: 0 auto; } .gameCo原创 2017-05-12 10:49:33 · 766 阅读 · 0 评论 -
使用@media媒体查询实现多设备字体图片自适应
@media only screen and (min-width: 374px) { html { font-size: 60.5% !important; } } @media only screen and (min-width: 414px) {原创 2017-04-05 13:08:10 · 5319 阅读 · 0 评论 -
html+css3实现自定义radio
radio .radio-group { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-原创 2017-04-05 10:22:00 · 2737 阅读 · 0 评论 -
html5搜索框
实现一个文字搜索的功能,要求输入时,键盘回车按钮提示显示为“搜索”。html5 增加的type=search可以做到(但需要input type=search外面包上一层带action属性的form)。转载 2017-02-13 09:19:51 · 21332 阅读 · 0 评论 -
轮播图
switch content .container { width: 700px; height: 300px; border: 1px solid #ccc; margin: 20px auto; position: relative;原创 2016-11-10 15:16:55 · 307 阅读 · 0 评论 -
WebSocket介绍
简介谈到Web实时推送,就不得不说WebSocket。在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询(Polling)和Comet技术,Comet又可细分为两种实现方式,一种是长轮询机制,一种称为流技术,这两种方式实际上是对轮询技术的改进,这些方案带来很明显的缺点,需要由浏览器对服务器发出HTTP request,大量消耗服务器带宽和资源。转载 2016-09-21 16:20:43 · 1008 阅读 · 1 评论 -
css进度条
进度条 $(function() { function longer() { var time = new Date(); var cur = time.getSeconds() == 0 ? 60 : time.getSeconds(); var val = parseInt(cur / 60 * 100); $('.progress').css('width'原创 2016-08-16 15:24:44 · 867 阅读 · 0 评论 -
css+jquery步骤进度条
progressbar.progress-wrap { margin-top: 200px; padding: 0px; width: 100%; height: 100px;}.progress-wrap li { margin-top: 30px; list-style: none; float: left; width: 300px; height: 30px;原创 2016-08-16 12:28:46 · 4645 阅读 · 0 评论 -
css清除浮动
一个div铺满页面的例子,使用float,不清除浮动。CSS.box { border: 1px solid blue; float: left; width: 200px; height: 100px; margin: 1em;}.after-box { border: 1px solid green; width: 500px; height: 100原创 2016-07-20 14:13:02 · 295 阅读 · 0 评论 -
毕设-婚恋网站-永恒网的设计与实现
最近就一直在忙着毕业设计,花了半个月写完了,大概介绍下:本系统名为永恒网,是基于Java和Angularjs的婚恋网站。项目由Maven构建,在技术上主要使用了Angularjs和SpringMVC技术。系统整体开发主要包括前台页面的Web设计与后台管理。开发工具包括Eclipse、Sublime、Google浏览器、Postman等。系统主要包括前台Web以及后台管理,前台实现的功能包括登录原创 2016-06-15 11:15:17 · 3783 阅读 · 12 评论 -
css美化scrollbar
ul.list{ margin: 10px; padding-left:10px; list-style:none; max-height:86px; width:250px; overflow-y:auto; overflow-x:hidden; b原创 2016-03-02 14:26:09 · 919 阅读 · 0 评论 -
如何实现“返回顶部”的页面效果
转自:http://www.liaoxuefeng.com/article/0013738939371174a66d9fcf5094b1dbf28e9e9ccbf9d61000在很多网站中,如果滚动到页面下方,会在右下角一个固定位置出现“返回顶部”的按钮,点一下浏览器滚动条就自动回到顶部了,今天研究了一下,实现的效果如图:首先必须感谢知乎,因为这个按钮的样式就是照抄他们转载 2015-11-29 16:38:06 · 898 阅读 · 0 评论 -
hover显示与隐藏气泡状二维码
Qrcode $(function() { $(".module span.flag").hover(function() { $("#qrcode").show(50); }, function() { $("#qrcode").hide(); }); }); /*突出显示气泡二维码*/ body {原创 2016-08-11 15:39:30 · 2385 阅读 · 0 评论