CSS
关注
分享
扫一扫
EffIdong
计划！效率！
展开
-
如何消除margin-top对父元素的影响
有时我们会在css中遇到这种情况： 当我们给子元素设置了margin-top值之后，不仅子元素没有发生变化，父元素却发生了变化（外边距合并） 解决方案一： 给子元素加上float：left 解决方案二： 为父元素添加border属性(值不能为0) 解决方案三： 为父元素添加padding（值不能为0）原创 2017-05-23 16:49:53 · 1630 阅读 · 0 评论 -
翻书效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } body{ tex原创 2017-07-09 11:14:49 · 475 阅读 · 0 评论 -
文字如何与单选框垂直对齐
今天写代码，写到单选框部分，发现更改完字体和单选框大小之后，两者就不对齐了。代码如下.type-1{ font-size: 20px; } input{ width: 20px; height: 20px; }<div class="choosetype"> <s原创 2017-06-28 11:09:41 · 1263 阅读 · 0 评论 -
css3-Media Query实现最简单的响应式布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--外嵌方式--> <!--当屏幕分辨率小于480px时，背景色为max.css的背景色--> <link rel="stylesheet" href="max.css" media="on原创 2017-06-15 19:21:11 · 428 阅读 · 0 评论 -
利用伪元素制作盒子阴影
本文参考https://paulund.co.uk/learn-css-box-shadow 因为box-shadow和:before以及:after没有什么值得深度剖析的方式，在去解释也不会让自己学到太多东西，如果对伪元素不太熟悉可以参考这个地址（http://blog.jobbole.com/49173/），以下代码也没有什么很绕的逻辑<!DOCTYPE html><html lang="e原创 2017-07-14 21:04:35 · 876 阅读 · 0 评论 -
z-index的负值使用
有时候遇到这种情况，一个页面中我们设置了header和背景图， 这个时候我们不想把背景图的图片放到header标签前，应该怎么办代码实例 html<div class="d1"></div><div class="d2"></div>css.d1{ width: 100px; height: 100px; background-原创 2017-06-26 15:40:52 · 2076 阅读 · 0 评论 -
css动画之transition
用途 用于控制页面中元素的变化速度特点 需要用户触发（和animate最大的的区别）解决问题 .change{ width:100px; height:100px; } .change:hover{ width:200px; height；100px; }如以上代码所示，我们把鼠标hover在元素上时，元素宽度瞬间变成200px，减少了用户体原创 2017-07-04 16:45:30 · 444 阅读 · 0 评论 -
box-shadow
定义：向框添加一个或者多个阴影 语法：box-shadow: h-shadow v-shadow blur spread color inset;原创 2017-06-23 14:17:48 · 436 阅读 · 0 评论 -
vertical-align: middle的用法
在开发前端网页的过程中，水平居中有text-align:center和margin：0 auto。但是垂直居中始终没有一个比较好的解决方案，css中的vertical-align是垂直居中的意思，但是使用起来让人很难以理解 。vertical-align在css中有着丰富的属性，是我见过为数不多的，今天着重研究vertical-align: middle的用法，其他属性基本与此同理。首先从定义上原创 2017-06-20 12:06:31 · 4612 阅读 · 0 评论 -
css编写
css编写简单，但是初期的结构设计，以及后期的代码维护，是一件很麻烦的事情。 css的两种类名方式语义化类名 根据模块给html起名字，比如ueser-info，menu-wrap视觉类名 根据视觉风格呈现的代码，比如red、big-OOCSS（Object Oriented CSS）面向对象的css是什么：是一种容易重新使用的css规则，简单来说，就是定义一个css样式，我们可以再h原创 2017-06-29 15:42:49 · 566 阅读 · 0 评论 -
如何让文字在表格中垂直居中与水平居中
th{ text-align: center; vertical-align: middle !important; }原创 2017-06-20 10:07:45 · 1704 阅读 · 0 评论 -
子元素absolute定位时父元素有无relative的区别
Html<div id="father"> <div class="son"></div></div>2.Css–父元素没有relative.son{ width: 50px; height: 50px; background-color: yellow; position: absolute原创 2017-05-22 21:29:03 · 1435 阅读 · 1 评论 -
<a>标签的不同状态
1.a:link (没有访问的链接，也就是网页下链接的正常状态) 2.a:visted (已经访问过的链接) 3.a:hover (鼠标悬浮在链接上的状态) 4.a:active (鼠标点击时 的状态)a:link { color:red; text-decoration:underline;}a:visited { color:yellow; text原创 2017-05-21 14:04:27 · 1020 阅读 · 0 评论 -
css3中的gradient渐变
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性，目前火狐3.6以上版本和google浏览器支持这个属性。 1.FF3.6+background: -moz-linear-gradient( top,#2b496b 0%,#abccf2 100%)2.Chorme Safari++background: -webkit-gradient(linear原创 2017-05-20 18:11:34 · 697 阅读 · 0 评论 -
css动画之animation
相对于脚本驱动动画的优势更加快捷方便在中等系统中加载性能比js好将动画序列交给浏览器控制，让浏览器对性能优化animation的配置 我们使用animation属性及其子属性对需要应用动画的元素进行设定，但是实际的展现形式将在@keyframe中定义子属性 animation-name：动画名称（在@keyframes时使用） animation-duration:完整动画的周期 a原创 2017-07-09 15:15:05 · 504 阅读 · 0 评论