html5&&css3
文章平均质量分 67
u011263845
一个热爱前端但不愤怒的前端工程师。
展开
-
canvas标签结合javascript做出动态时钟效果
代码如下:body{background: purple;}var clock=document.getElementById("liuzhe");var cxt=clock.getContext("2d"); function drawclock(){ //清除画布 cxt.clearRect(0,0,500,原创 2015-04-10 16:34:57 · 445 阅读 · 0 评论 -
CSS vertical-align属性的用法
这两天写个页面css的时候用到了vertical-align属性,使用过程中踩到了坑,所以总结如下: vertical-align的定义 W3C上对vertical-align的定义:vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单原创 2015-07-12 16:26:47 · 2022 阅读 · 0 评论 -
使用伪元素before和after写出来的神奇效果
大家都知道before和after能写出很多很好的效果,今天偶然看到一个觉得挺好的,就顺便写了一下,复习了一下伪元素以及和伪类的区别,domo地址:http://codepen.io/tianzi77/pen/KpeKXz伪类和伪元素看似简单,很多开发者并没有引起注意,先看看伪元素和伪类的区别吧。标准的定义: CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。 伪类有::原创 2015-07-13 15:51:22 · 3084 阅读 · 0 评论 -
也玩before 和after伪元素玩五颜六色的导航
demo地址:http://codepen.io/tianzi77/pen/gpEMxb伪元素能做什么呢? “伪元素”,顾名思义。它创建了一个虚假的元素,并插入到目标元素内容之前或之后。单词“pseudo”是希腊语的英译,它的基本意思是“说谎的,不诚实的,错误的。”因此叫伪元素是适合的。因为在文档中它不实际改变什么。相反的,它们是像幽灵一般的元素插入在css中,他们对用户是可见的,可以通过css控原创 2015-08-09 01:22:45 · 1609 阅读 · 2 评论 -
innerHTML,innerText,outHTML的用法及区别详解
innerHTML,innerText,outHTML的用法及区别,今天就详细的解说并且带有实例说明。大家一看就明白,进入正题,接下来我们用下面的这段代码做测试<div id="tianzi"> <span style="color:red">www.seostudying.com</span> </div>1.tianzi.innerText 它得到的是<div></div>标签中的文本节点的内原创 2015-07-28 20:49:36 · 1318 阅读 · 0 评论 -
pptv首页导航效果
周末闲时打开pptv看直播,然后发现它的导航改版了,还是比较酷的。出于对同行对热爱,自己也试着实现了一下:demo:http://output.jsbin.com/pomimajidu pptv效果:www.pptv.comhtml: <ul class="nav"> <li><a href="" id="pagenav_tv" channel="2" target="_pa原创 2015-08-23 17:23:23 · 882 阅读 · 0 评论 -
css3中webkit内核的滚动条样式
项目当中用到的滚动条样式,在别人的基础上调成适合自己的样式。(IE可以调试滚动条样式,firefox目前不能调试)::-webkit-scrollbar { width: 14px; }/* Track & scroll thickness */ ::-webkit-scrollbar-track { background-color:#ddd; }/* Track color */ ::-we原创 2015-08-24 11:46:49 · 1435 阅读 · 0 评论 -
被这个样式惊醒
http://codepen.io/tianzi77/pen/ZGPmgR在codepen上面看到的一个效果,我承认我是一个偏向审美的页面仔。如此效果却被同事说她并不喜欢玩样式。。。看看简介的html结构: <h1 class="gradient1">知不知对你倾上万缕爱意</h1> <p class="gradient2">Love is there in side,Make life原创 2015-08-11 17:10:11 · 664 阅读 · 0 评论 -
改变网页背景色的一种思路
随便写写啦,其实太简单啦,就当玩玩配色: http://codepen.io/tianzi77/pen/GJPRYE结构html <div class="bg"> <div id="yellow"></div> <div id="red"></div> <div id="green"></div> <div id="blue"></div> <div i原创 2015-07-31 11:45:04 · 730 阅读 · 0 评论 -
流式布局之等比列缩放的盒子。
说到等比列布局,很多开发者便想到js,在响应式设计逐渐成为主流的今天,流式布局这个词即使放在一两年前也绝算不得是个新鲜词汇。下面是一个布局实例: <div class="item">here is somediv</div> <div class="item">here is somediv</div> <div class="item">here is somediv</di原创 2015-08-27 09:42:45 · 1330 阅读 · 0 评论 -
纯css玩转三角形
如今css3盛行的时代,用canvas,svg以及linear-gradient,radio-gradient都能画出各种各样的图形。但是早在css2时代,画三角形就不是什么新鲜事。这里简单总结一下,也方便自己查阅。<div class="triangle-up"></div>写出通用结构, .triangle-up { width: 0;原创 2015-08-27 18:57:33 · 758 阅读 · 0 评论 -
css大会网站顶部的一个特效
看到http://css.w3ctech.com/ 上一个效果觉得挺赞的。然后学些了一下。demo地址:http://codepen.io/tianzi77/pen/mJaLWq html结构很简单,就是一个p,2个span标签嵌套在a标签里面。 <a href="/" class="link-mallki"> 思君子兮未敢言 zhuangjia原创 2015-08-03 10:38:39 · 809 阅读 · 0 评论 -
css中的bfc怎么玩?
首先弄明白一个概念,上面是bfc? w3c是这样解释 BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。说通俗一点就是: float的值不为none position的值不为static或者relative display的值为 table-cell, table-caption, inline-block,原创 2015-08-02 19:17:40 · 649 阅读 · 0 评论 -
css3围绕圆形旋转思路
http://codepen.io/tianzi77/pen/yNWYMO http://codepen.io/tianzi77/pen/bdydwK供参考原创 2015-08-16 22:35:49 · 7517 阅读 · 0 评论 -
网站右侧导航条的玩法
最近心情很不好,各种工作生活上面的事情,让我很是受伤,刚出来工作感觉程序员确实是个神奇的行业,一个个都觉得自己的智商挺高的,哎,每天起早贪黑的上下班,还天天受气,真是日了够了,一个人一座城,一行代码到天明。或许真的老了,我居然前所未有的想拥有一个属于自己的家,渴望能吃到几口热喷喷的饭菜,能和最爱的人说上几句掏心掏肺的话,能一起见证风风雨雨。然而并没有什么用,就像js设计模式里面说的一个例子一样,追一原创 2015-08-08 14:34:42 · 3205 阅读 · 0 评论 -
玩玩斜线导航
很多网站采用怪异的导航,看起来很酷,斜线导航就是一种。 demo见:http://codepen.io/tianzi77/pen/bVNvpq <ul id="nav"> <li id="nav-1"><a href="#">I love you</a></li> <li id="nav-2"><a href="#">Test nav</a></li>原创 2015-09-04 22:36:27 · 509 阅读 · 0 评论 -
bfc的一些应用
好久在这里写文章了, 谈谈bfc吧。概念什么的就不说了。 很简单的一个东西,在布局的时候确实真的很有用处的。 写了个列子http://codepen.io/tianzi77/pen/MKwLpr <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>BFC应用之目录线</title></head><body> <原创 2015-12-11 10:22:47 · 405 阅读 · 0 评论 -
完整的日历表格
平时写表格都直接table然后tr td就完事了,其中还是有很多不完善的,今天按照标准写了个日历,带样式。供日后写表格提供一个参考,搞前端规范还是挺重要的 效果地址:http://codepen.io/tianzi77/pen/JdGpwjcss部分:body { font-family: "myriad pro", arial, helvetica, sans-serif; font原创 2015-05-11 11:11:48 · 3128 阅读 · 0 评论 -
利用display属性写出表格的布局样式
demo地址:http://codepen.io/tianzi77/pen/gpBzjy 元素结构: <h1>display构造的table小例子,IE8及以下浏览器不支持本示例</h1> <div class="table"> <h2 class="table-caption">大神榜:</h2> <div class="table-column-group原创 2015-07-26 11:28:04 · 1504 阅读 · 0 评论 -
高亮显示当前导航条的javascript
首先写一下html结构:<div id="nav"> <ul> <li><a href="#1">首页</a></li> <li><a href="#2">产品</a></li> <li><a href="#3">地址</a></li> <li><a href="#4">关于</a></li> <li><a hr原创 2015-05-25 20:55:35 · 3414 阅读 · 3 评论 -
Front end foundation course 4(css2)
CSS 基础 Part 2盒模型什么是盒模型CSS的盒模型就是用来描述CSS中元素平面空间构成状态的一个模型。如下图:paddingpadding-leftpadding-rightpadding-toppadding-bottomborderborder-widthborder-colorborder-stylee.t.cmarginmar原创 2015-04-10 16:37:32 · 475 阅读 · 0 评论 -
关于html音频以及视频标签video audio标签的实例
html的video标签功能很强大,增加了许多属性,比如autoplay controls loop poster等还可以用js直接调用paly() pause()等方法这里只联系一下audio的使用:小哲是笨蛋body,audio{padding: 0;margin: 0;}body{background: ur原创 2015-04-06 18:32:51 · 1323 阅读 · 0 评论 -
html5中canvas标签画图方法。
注意:写脚本js时必须放在canvas标签后面,不然浏览器无法识别的canvas标签 var xcanvas=document.getElementById("xian"); var cxt=xcanvas.getContext("2d"); cxt.moveTo(10,原创 2015-04-07 16:58:38 · 551 阅读 · 0 评论 -
css3经典动画与旋转样式
**demo演示效果:http://codepen.io/tianzi77/pen/LVPzqB** 代码如下:主要用到css3的animation和transform transition keyframe 以及text-shadow属性。 Examples surprised:target span{font-size:50%;line-height:0;}原创 2015-04-19 11:47:49 · 501 阅读 · 0 评论 -
细说css3中的animation和keyframe
总结用法如下: transform-style: preserve-3d; //设置3d效果。 animation-name:xiaozhe; //设置动画名为xiaozhe。 animation-duration:7s;//设置动画持续时间为7s。 animation-iteration-count: infinite;//指定动画无限循环,也可以设置具体的循环次数number。 a原创 2015-04-19 12:09:11 · 1740 阅读 · 0 评论 -
用css3拼凑出来的桃心
demo地址:http://codepen.io/tianzi77/pen/qdWjdJ 先定义图片旋转起点transform-origin, 然后改变旋转角度transform:rotate(xdeg) 最后实现2个图片拼成好看的桃心,用:before和:after进行连接。 content设置为空。 样式代码:<style type="text/css"> #heart原创 2015-04-19 14:22:52 · 1277 阅读 · 0 评论 -
纯css实现网站导航条下拉效果
不用javascript效果实现导航条的下拉效果。纯css属性实现,主要应用到绝对定位中的left:auto和left:-9999px;来隐藏或者鼠标经过的时候显示下拉菜单。下面是代码:css导航下拉效果body { font-family: "微软雅黑"; font-size: 1.4em; margin-top: 4em;原创 2015-04-13 16:59:32 · 686 阅读 · 0 评论 -
form表单练习代码
代码如下: 年龄 1991 1992 1993 1994 邮箱 url: DATE: 搜索: liuzhe原创 2015-04-08 15:50:19 · 858 阅读 · 0 评论 -
总结清除浮动方法大全(7种)
1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,其他标签br等亦可。 再如:<div class="warp" id="float1"> <h2>1)添加额外标签</h2> <div class="main left">.main{float:left;}</div> <div原创 2015-04-24 16:14:35 · 1766 阅读 · 0 评论 -
css3.0中transition属性设置过度的动态效果
小例子:Examples.liuzhe {position:relative !important;font: 30px "微软雅黑";background: #ff9e04;-webkit-transition-property: background; -moz-transition-property原创 2015-04-16 17:12:34 · 848 阅读 · 0 评论 -
css3新增选择器的一些练习。
css3非常强大,可以实现很多以前只能通过js实现的功能。也简化了许多不必要的复杂代码。简单练下一下css3的选择器:li{list-style: none;}input:disabled{background: yellow;color: green;}input:enabled{background: #f90;color: blue;}原创 2015-04-09 16:33:34 · 543 阅读 · 0 评论 -
阿里巴巴前端面试题:三列布局知多少?
前几天收到阿里前端的面试通知,整体面试比较顺利,但是还是有个问题回答的不令面试官满意。 本来面试都快结束了,该涉及的都涉及了,而且交谈过程中比较轻松,面试官突然来了句你不是精通布局吗,给你3个DIV,你让他们一行单列布局,中间宽度自适应。我脑门一转心想这还不简单吗,于是在他的imac上从容的敲出如下代码:<style type="text/css"> body,div{margin:0;原创 2015-04-25 16:52:16 · 1604 阅读 · 0 评论 -
用css3或者jquery实现切换按钮效果
switch demo地址:http://codepen.io/tianzi77/pen/VLLBmQ整理思路:这个 DEMO 的功能大致就是模拟开关效果,用于增强原生的 checkbox。视觉效果大致是一个白色的方块左右移动,这里我们最直接的可以想到这种实现:左边一个蓝色方块,中间一个白色方块,右边一个灰色方块,三者宽度调整宽度和位置来完成动画这么来看,我们需要控制的元素有3个,并且我们仔细观察原创 2015-05-02 12:42:57 · 2609 阅读 · 0 评论 -
CSS雪碧图的一个小案列
以前只是听说过雪碧图没用过,然后来了这里做的第一个活儿就涉及到他。因为怕不会用,就用他们原来切的,那个调的费事啊,算那个background-position困难的啊。原因是他们的雪碧图切放在了一起,没有留有空隙,所以,只能用一个废标签去专门放一个图标。现在发现雪碧图还是很有用的,把所有要用的图片放在一起,然后根据定位来调出要用的图片很方便。 随便写了个小demo:http://codepen.i原创 2015-05-03 21:32:55 · 2629 阅读 · 0 评论 -
关于CSS[几乎]没人知道的3件事
你了解 CSS 吗?在六个月前,我提供了一个在线免费 CSS 测试系统。测试结果表明很多一线开发者并没有如他们所想的那样了解 CSS。目前有超过 3,000 人参加了该项测试,平均成绩只有 55 分。但是,嘿,平均分本身并没有什么意思。我更加关心大家都栽到了哪些问题上。这篇文章中,按照出错的程度将其中三个问题列出来。我会和你讨论每个问题,告诉你哪个答案被选择的最多,然后解释正确答案。可以肯定地说,如转载 2015-05-16 16:17:34 · 426 阅读 · 0 评论 -
图片折叠效果CSS实现
觉得这个效果不错,就随便写了一下。 效果:http://output.jsbin.com/gerogawiqi/1 思路很简单,添加一个空伪元素,然后进行边框设置,实现折叠的效果。不过看起来还是很好看的。css部分:.tianzi{ width:300px; height: 300px; background: orange; po原创 2015-05-10 17:45:09 · 3458 阅读 · 0 评论 -
纯CSS下拉导航和jquery下拉导航对比
纯css实现的下拉导航demo:http://codepen.io/tianzi77/pen/xGOyxp 不用javascript以及jquery动态效果实现导航条的下拉效果。纯css属性实现,主要应用到绝对定位中的left:auto和left:-9999px;来隐藏或者鼠标经过的时候显示下拉菜单。 htm结构:<ul class="nav"> <li><a href="/">小哲</原创 2015-05-19 16:15:03 · 672 阅读 · 0 评论 -
white-space: nowrap解决滑动的应用
.case-box-wrap { overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none;原创 2017-03-27 11:07:58 · 1603 阅读 · 0 评论