
CSS
文章平均质量分 64
cithegod
噜啦啦
展开
-
Web页面中在窗口顶部出现白色横条
在刚开始编辑窗口的时候,使用body { height:100%}div { height:100%}希望可以保证div中的背景图片填满整个窗口,在未设置HTML5严格模式的时候,图片可以占满整个窗口,但是后来再加上标签的时候,发现页面上出现了这样的白条,也就是背景并未占满窗口。就像左边和上边这样的空白,后来通过firebug查看元素后发现,这个空白是原创 2015-12-17 15:00:46 · 7662 阅读 · 0 评论 -
TypeScript + React环境构建和demo
下面的示例项目可以从我的github上获取为什么用TypeScriptTypeScript为JavaScript这个弱类型语言添加了基本的类型检测以及对于ES6甚至ES7的一些高级语法的转移,在一定程度上相当于增强功能版的babel,现在的很多开源项目为了得到更好的项目管理和维护性能,使用了TypeScript或者Flow来为JavaScript添加强类型。 TypeScript添加了很多强类型语原创 2017-07-27 10:17:15 · 6331 阅读 · 0 评论 -
使用less的loop(循环)方法根据类名生成元素
less是一个功能强大的css超集,可以方便我们进行css代码的书写,less具有很多现代语言的特性,而不是简单的标记语言,包括分支和循环,这里我们使用循环来进行元素的自动化生成。下面的代码需要一些less知识:less中文网有时我们需要生成这样一个元素: <div class="item introduction"> <div class="s原创 2016-11-25 21:06:30 · 14984 阅读 · 0 评论 -
HTML、CSS产品主页注意事项
构建项目第一件事–设计页面架构在使用HTML&CSS在构建现在很流行的扁平化风格的页面的时候(或者其它所有的静态页面的时候),第一件事就是需要进行页面结构的设计,不要一上来就手撸代码,有时候重新架构一个项目的难度远远大于从头开始写这个项目。 需要语义化的使用各种HTML标签,不要将所有的标签都用<div>来设置,这样会使后面的维护变得越来越困难。 下面是简书的一个页面的部分HTML标签:可以看到原创 2016-11-25 20:52:22 · 842 阅读 · 0 评论 -
CSS transform的rotate,内部元素旋转到背后仍会显示。
在写代码的时候出现了一个问题,当使用了CSS3的transform的时候,对下面这个元素进行旋转://DOM元素的结构<figure class="img-figure"> <img src="/assets/97aa04cee801bdd3b8762057267d0767.jpg" alt="This is a beauty"> <figcaption> <h2原创 2016-11-09 16:50:05 · 7082 阅读 · 0 评论 -
几种相册图片布局方式
先上github地址:插件源码百度前端在几个月前发布了一个针对前端技术培训的任务:IFE(百度前端技术学院)。和几个小伙伴一起完成了部分任务,第四阶段是三个综合性的任务,博主先完成了其中的相册布局任务。写的并不是很完善,博主技术有限,大家就随便看看吧。瀑布流布局布局方式顾名思义,瀑布流布局就是相册中图片像瀑布一样,从高到低按顺序插入到相册中。如下图,一直保证下一张图片会被插入到当前最短的一道图片流原创 2016-06-02 13:30:08 · 25831 阅读 · 0 评论 -
CSS过渡 && bootstrap transition
bootstrap插件自带的动画都是用CSS3的过渡实现的,transition动画相比jQuery自带的动画有许多优点,这些动画比较平滑,使用起来比较方便和灵活,并且对资源的消耗比较少,但是也有缺点,比如动画完成时间等等。既然bootstrap插件采用了transition来进行动画效果修改,那么这样的方法还是很值得去学习一下的。CSS transitionCSS transition是CSS样式原创 2016-01-12 16:49:44 · 2866 阅读 · 0 评论 -
CSS中的几种图片覆盖文本的方法
CSS CookBook中有几种图片覆盖文本的方法,整理出来备用:Gilder/Levin image replacement technique:<h1> <span></span> Replacement Text Is Here.</h1>h1 { width:200px; height:100px; position:relative;}h1 span {原创 2015-12-25 11:01:31 · 5956 阅读 · 0 评论 -
DOM元素点击失效问题
在为DOM添加事件处理函数的时候,出现了一个DOM元素无法点击的问题, 虽然class=”share”的元素的img类型的子孙元素中的第一个元素已经设置了鼠标点击的事件处理函数,但是这个事件处理函数并不能被触发,也就是点击这个图片的时候没有反应。 第一个原因:由于需要注册事件处理函数的img元素是放在header标签里面的,但是header标签如果不进行手动设置height,那么head原创 2015-12-22 16:30:15 · 3769 阅读 · 0 评论 -
CSS3 伪元素和伪类
CSS3 伪元素 伪类 应用 聊天气泡原创 2017-07-27 16:27:18 · 795 阅读 · 0 评论