css
文章平均质量分 62
大狗派克
这个作者很懒,什么都没留下…
展开
-
CSS垂直居中的几种方法
单行内容居中单行文字居中,只需要设置文字的line-height属性和父容器等高即可。 <div class="box"> <p>我是一行测试文字</p> </div> div.box{width: 200px;height: 100px;background-color: #999;margin: 20px;} .box p{line-height:原创 2016-03-30 17:59:38 · 812 阅读 · 0 评论 -
前端工作总结
今天我的导师突然要求我写下这进一年来的工作总结,作为一名毕业不到一年的前端,写总结让我觉得有些头疼,文采这东西不是与生俱来的,而是需要不断的磨练,想想自己毕业后还真的从来没有写过总结,面对这项巨大的任务,也只能硬着头皮往上顶。写完后我的导师评价说文采写的还是可以的,内心一阵窃喜。既然写了那就把把它记录起来,说不定哪天回头看这份总结时会有另一番滋味。以下就是总结的内容 工作总结 从原创 2016-03-30 18:23:40 · 18245 阅读 · 0 评论 -
相邻兄弟选择器(+)
今天在做导航栏的时候,需求里面需要实现一个小的动画效果,需求:导航栏中,鼠标移入每个链接,链接字体颜色发生改变,同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容IE8的缘故,动画使用JQuery的animation函数来实现的。当完成导航栏的制作后,我突发奇想如果不需要用到任何JS是否可以实现该动画。 先看下测试中导航栏的代码 HTML<div class="nav"> <u原创 2016-03-31 17:12:26 · 7744 阅读 · 0 评论 -
浮动float和清楚浮动clearfix
浮动,在HTML排版常常被使用的一个CSS属性,很多网页设计都会用到浮动,但并不是说浮动是网页排版的必需品。由于浮动具有破坏性,很多时候采用浮动反而会造成适得其反的效果。在张大神的CSS三无准则中就有一条准则是“无浮动”,提倡整个网页排版最好不需要用到浮动元素。每个人并非张大神,对于网页的排版设计有自己的想法和方式,需不需要用到浮动都取决自己,不需要太过刻意去追求完全无浮动的布局。 float的原创 2016-03-31 23:38:41 · 2657 阅读 · 1 评论 -
浮动布局的方法(总结)
HTML布局中浮动布局非常常见,很多网站普遍都会使用到浮动布局,博客网站使用最多。做过很多网站,却没有总结过,今天就来分享下自己在浮动布局的总结(本文以微博为例) 微博排版先上图片: 盒子中包含左右两个子盒子(用黑边框将其分开),就以这种左右两栏为布局的模型,来总结浮动布局的方法。 浮动布局HTML排版 <div class="container">原创 2016-04-01 11:48:03 · 12669 阅读 · 3 评论 -
background-position和雪碧图(CSS Sprites)用法
background-position属性使用频率非常高,大量的网站为了减少http请求数,会将大量的图片图片合成一张雪碧图(Sprite)来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置,不得不说它的作用非常重要,当然除了在使用雪碧图的场景外,别的某些场景也常常会使用到这个属性,这次就总结下它的用法。 还是那句话,工欲善其事必先利其器,只原创 2016-04-04 22:39:03 · 52254 阅读 · 5 评论 -
项目问题反思——CSS优先级
前言对于前端而言,了解css样式的优先级,对开发或处理bug有着事半功倍的效果,今天在做项目的时候,突然碰到一个优先级的小问题,刚开始不知道所因,后来才发现这个问题是由优先级造成的。先描述下问题,鼠标悬停在父容器时,子容器显示,移开消失。看到这个问题,可能有些人要喷了,这和优先级有毛线关系,看起来的确没关系,其实还是存在一定关系的。假如你在书写子容器样式时,采用的是内联式写法,那么这个悬停是否还有原创 2016-03-15 01:11:46 · 620 阅读 · 0 评论 -
针对IE的条件注释
<p class="accent"> <!--[if IE]> 根据注释条件,版本是IE<br /> <![endif]--> <!--[if IE 6]> 根据注释条件,版本是 IE 6<br /> <![endif]--> <!--[if IE 7]> 根据注释条件,版本是 IE 7<br /> <!原创 2016-03-25 17:51:38 · 732 阅读 · 0 评论 -
HTML与CSS布局技巧总结
很多人对CSS的布局有困惑,实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些地方总结的不好,欢迎大家指正。言归正传,现在就来揭开各种布局的面纱。 单列布局<div class="parent"> <div class="child"></div></div>水平原创 2016-04-11 00:29:02 · 31538 阅读 · 3 评论