css
文章平均质量分 58
廿四桥明月夜
前端
展开
-
css居中思路
使用 CSS 实现居中效果困难吗?显然不是。实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法判断哪种方法最合适。所以让我们来创建一个层次结构的方法集,帮助你解决选择困难症~水平居中行内或类行内元素(比如文本和链接)在块级父容器中让行内元素居中,只需使用 text-align: center;:这种方法可以让 inline/inline-转载 2017-12-11 19:00:24 · 161 阅读 · 0 评论 -
CSS实现自适应下保持宽高比
在项目中,我们可能经常使得自己设计的网页能自适应。特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比)。为了不变形,常用的方法就是设置width值,然后高度height设置auto。如果是div,我们该如何处理呢。背景图片宽高比固定下面,我仿照了移动端的聚划算网站中(https://ju.m.taobao.com/)中间一部分的布局。...转载 2018-08-18 22:18:47 · 1836 阅读 · 0 评论 -
通过hover来控制一个div的展示和隐藏
通过hover来控制一个div的展示和隐藏css 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .float_tips_area { position:absolute;...转载 2018-08-10 10:44:34 · 9586 阅读 · 0 评论 -
纯CSS实现滑动效果(Slide Up & Slide Down)
只需要一个DIV元素便可实现滑动效果,避免了使用JavaScript为元素的动画(IE浏览器下仅支持IE9以上)HTML代码 <div style="height: 200px; width: 200px; border: 1px solid #ccc;"> <div class="slider" id="slider">这里是内容</di...转载 2018-08-09 16:34:21 · 6806 阅读 · 0 评论 -
css画基本图形
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如...转载 2018-08-09 14:56:36 · 383 阅读 · 0 评论 -
Sticky Footer 绝对底部的两种套路
最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果:当content高度小于屏幕高度,页脚被固定在屏幕底部;当content高度大于屏幕高度,页脚被content推出屏幕。 一、经典套路这种套路的思转载 2018-01-09 16:26:31 · 216 阅读 · 0 评论 -
60个css代码段
1、垂直对齐如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50转载 2018-01-08 16:43:16 · 639 阅读 · 0 评论 -
利用HTML和CSS实现常见的布局
利用HTML和CSS实现常见的布局页面布局 css3 css html5 html mrshi 2015年10月30日发布赞 | 22收藏 | 35922.3k 次浏览单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区转载 2018-01-17 13:50:13 · 194 阅读 · 0 评论 -
前端布局方式汇总及概念浅析
前端布局方式汇总及概念浅析Jan 12 2018更多文章参见: https://github.com/elevenbeans/elevenbeans.github.io前言又一个月没更博了,为了自己的第一个小窝连续奔波于苏沪两地。恰逢最近团队有个关于前端布局的分享的作业,于是赶紧抓住机会认领,并总结成文。关于布局基础布局方式0. 普通/文档流 布转载 2018-01-16 14:14:04 · 646 阅读 · 0 评论 -
你以为 CSS3 只是个简单的布局?
CSS3 奇思妙想前几天看了一篇文章 , 颠覆了我对 CSS 认识,心中无数次蹦出一个念头:'卧槽,卧槽,还能特么这么用,这特么太叼了' ...于是我迫不及待想跟你们一起分享分享,以后你也可以在别人面前炫(装)耀(逼)了~装逼指南本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before 、::after伪元素,transparent 、bo转载 2017-12-29 15:26:36 · 199 阅读 · 0 评论 -
css3和html5网站模板
过去的几年,网页设计和制作人员就已开始关注和使用 HTML5 了,如今 HTML5 得到了更加广泛的应用,国外已有很多基于 HTML5 制作的网站。所以,今天这篇文章给大家带来的是35款基于 HTML5 和 CSS3 的非常精致的网站模板,大家可以借助这些优秀网站模板制作出自己的 HTML5 网站。这些网站模板大部分都是免费的,虽然有些要付费,但是都提供了在线演示,所以……你懂的:)转载 2017-12-28 11:00:21 · 1828 阅读 · 1 评论 -
理解css负外边距对排版的影响
在利用css布局时,理解浏览器如何根据css属性进行渲染我觉得对于控制排版是非常重要的,一般我在脑中会把元素设想为一个个盒子,盒子有内部,有外部,浏览器就是按顺序根据样式把一个个盒子排列起来,而盒子之间边界是包含外边距的边界,起点是左上角。 图取自w3school 通过设置width,padding,margin等属性可以调节整个盒子的大小,而对于浮动元素,个人理解就像是设置对块级元素不可转载 2017-12-27 21:05:04 · 434 阅读 · 0 评论 -
CSS3——过渡(transition)
一、概述CSS属性的值从一个值变成另一个值的过程叫做渐变,重点突出变化的过程。CSS3 transition系列属性可控制这个变化过程,使得属性值变化过程更加平滑。一个过渡应包含这几个属性:A:哪些属性需要过渡?需要过度的CSS属性(也就指定旧值和新值)B:过渡多久完成?持续时间,即从旧值变成新值的过程持续的时间。这个时间不包含延迟时间。C:过渡中间值如何计算?随着时间转载 2017-12-14 11:12:31 · 1414 阅读 · 0 评论 -
如丝般顺滑:使用 CSS3 实现 60 帧的动画
在移动端上实现动画很简单。在移动端上正确地实现动画也比较简单...如果你采纳我们的建议的话。虽然现在每个人都会使用 CSS3 实现动画,但许多人用的都不够恰当。很多应加以考虑的最佳实践常常被忽略,因为仍然有人不明白这些最佳实践的真正意义。如今有这么多的设备规范,如果还不有针对性地优化你的代码,糟糕的用户体验将让你死无葬身之地。记住:虽然市场上始终有一些高端的旗舰机在转载 2017-12-12 15:28:48 · 406 阅读 · 0 评论 -
CSS实现移动端侧滑
[html] view plain copy> html> head> title>app-menutitle> style type="text/css"> .menu { position: fixed; left: 0;转载 2017-12-12 15:27:55 · 1061 阅读 · 0 评论 -
CSS布局总结
CSS布局布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单列布局、多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小伙伴带来一些帮助。目录常用居中方法水平居中垂直居中单列布局二列&三列布局float+marginpos转载 2017-12-12 09:32:20 · 286 阅读 · 0 评论 -
css居中思路整理
1、水平居中 text-align:若子元素不受float影响,将块级父元素设为text-align:center可使子元素水平居中 width:xx;margin:0 auto。 若子元素不受float影响,如此设置子元素可使子元素水平居中2、垂直居中设置到父元素上,line-height=height可使内部文字垂直居中3、通用方法首先给父元原创 2017-12-11 19:07:10 · 136 阅读 · 0 评论 -
深入理解 CSS 属性 z-index
前言最近在使用 CSS3 动画的时候遇到一个 DOM 层叠的问题,故此重新学习了一下 z-index,感觉这个 CSS 属性还是挺复杂的,希望本文可以帮助你重新认识 z-index 的魅力。事情的经过是这样的(背景有点长),最近在写下面这样的列表页:然后给每个产品项添加一个 CSS3 动画,动画效果大概像这样:demo 地址实现后的效果大概是这样的(截图有点糊,建议点 demo...转载 2018-09-17 16:17:35 · 11308 阅读 · 3 评论