css

小白上学のcanvas零基础

元素看起来和 元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上, 标签只有两个属性—— width和height。当没有设置宽度和高度的时候,canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲。元素有一个做 getConte

一个前端写的php博客系统2--前台展示+后台登录

部署的演示地址我的博客地址: http://www.weber.pub 可以查看到具体的站点展示github 地址:https://github.com/baiyuming/byblog前台首页展示首页的侧边预留的位置是给后面的统计,热门之类的版块预留位置。。。控制器文章列表展示要考虑到文章数量增多后分页展示,那么我们要统计文章数量,使用 count() 计算文章总数,然后

你所不知道的 CSS - 居中

你所不知道的 CSS - 居中这次翻译一篇来自 Chris Coyier 的 《Centering in CSS: A Complete Guide》前言居中是在CSS中经常被抱怨的问题之一。这个问题真的有这么难吗?事实上这个问题并没有那么复杂,它困难在于对于不同的情景,解决居中问题需要用到不一样的方法。在这里,我们会一起建立思维导图来帮助大家来解决这个问题。github

和BEM的战斗:10个常见问题及如何避免

无论你是刚刚发现BEM或者已经是个中熟手(作为web术语来说),你可能已经意识到它是一种有用的方法。如果你还不知道BEM是什么,我建议你在继续阅读这篇文章之前去BEM website了解一下它,因为我会假设你对这种CSS的方法有一个基础的理解。本文旨在对那些已经是BEM的爱好者或是想要去更有效率的使用它或是非常好奇并且想去学习它的人有所帮助。现在,我对BEM是一个优雅的命名

基于float的几种布局

在这里介绍基于float的几种布局.1.浮动与两侧自适应的布局如图所示,左边没有限定宽度,右边宽度自适应。使用table-cell实现的布局,可以适用于两栏的布局。HTML代码与浮动与两侧自适应的布局改变DOM树先后顺序的方法HTML代码浮动与右侧尺寸固定的流体布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定

前端开发者应该知道的 CSS 小技巧

一些小技巧让你的CSS技术更专业1,使用:not()去除导航上不需要的边框2,为body添加行高3,垂直居中任何元素4,逗号分离的列表5,使用负nth-child选择元素6,使用SVG图标7,文本显示优化8,在纯CSS幻灯片上使用max-height9,继承box-sizing10,表格单元格等宽11,使用Flexbox摆脱边界Hack12,使用属性选择器选择空链接使用:n

JS实现时钟效果

闲来无事,用JS写了个时钟,只要思路理清了,做起来其实还挺简单的。先发个效果链接 点击查看Demo代码实现HTML 9 10 11 12 1 2 3

巧用CSS遮罩

1. 用法-webkit-mask样式是利用该属性指定的图片作为遮罩,利用这张图像的透明度来显示位于该遮罩图下方的图像。如果遮罩图某个像素点透明度为1则显示下方的图像,透明度为0则不显示,介于0-1之间则呈现相应的透明度。详情参考 mask - CSS | MDN可以看到,mask的语法基本上拷贝自background,可以设置遮罩的url, position, repea

position:absolute的容器居中

web页面开发中,最经常是使用的当然要属于容器居中啦,“居中”有时候是一个很简单的问题,但是!有时候也让人苦恼的“牙痒痒”!HTML代码如下: child containerCSS代码(不占据文档流,水平居中)如下:# parents { width: 100%; position: relative; background-color: pink;

带你玩转css3的3D!

话不多说,先上demo酷炫css3走马灯/正方体动画: https://segmentfault.com/a/https://bupt-hjm.github.io/cs...github源码地址:https://segmentfault.com/a/https://github.com/BUPT-HJM/c...酷炫css3翻页动画: https://segmentfaul