随笔分类 -  css

1 2 下一页
最简单的滑动条导航栏
摘要：css: ul li{ display: inline; margin-right: 3em; } ul{ margin:8em auto; margin-left: 20%; } ul li:hover{ border-bottom: 2px solid #000; } html: <ul> <l 阅读全文
posted @ 2019-10-06 12:02 VielenDank 阅读(246) 评论(0) 推荐(0)
页面坍塌
摘要：1，自己写swiper轮播时，一定要为每个轮播加个ID,尤其是一个页面有多个swiper轮播时！！！（因为重设css插件里的某个内置参数时前面要带ID,不然影响到后面的轮播参数设置时就晚了。 2，当position为absolue时候，其中的相对宽高是相对它参考的元素来进行计算并进行位置渲染的，并不 阅读全文
posted @ 2019-09-26 21:04 VielenDank 阅读(162) 评论(0) 推荐(0)
transform:translate(-50%,-50%)实现水平垂直居中
摘要：.content { padding:10px; background:green; color:#fff; position:absolute; top:50%; left:50%; border-radius: 5px; -webkit-transform: translate(-50%,-50 阅读全文
posted @ 2019-04-25 16:51 VielenDank 阅读(393) 评论(0) 推荐(0)
box-sizing (摘录)
摘要：//http://www.jianshu.com/p/e2eb0d8c9de6 box-sizing其它的值 content-box 描述：在宽度和高度之外绘制元素的内边距和边框。 描述：在宽度和高度之外绘制元素的内边距和边框。 border-box 描述：为元素指定的任何内边距和边框都将在已设定的 阅读全文
posted @ 2017-11-10 14:56 VielenDank 阅读(135) 评论(0) 推荐(0)
-ms、-moz、-webkit -o
摘要：-ms-transform:rotate(7deg); //-ms代表ie内核 识别码-moz-transform:rotate(7deg); //-moz代表火狐内核识别码 -webkit-transform:rotate(7deg); //-webkit代表谷歌内核识别码 -o-transfor 阅读全文
posted @ 2017-08-23 13:51 VielenDank 阅读(160) 评论(0) 推荐(0)
css动画-animation各个属性详解（转）
摘要：CSS3的animation很容易就能实现各种酷炫的动画，虽然看到别人的成果图会觉得很难，但是如果掌握好各种动画属性，做好酷炫吊炸天的动画都不在话下，好，切入正题。 一、动画属性： 动画属性包括：①animation-name，②animation-duration，③animation-timin 阅读全文
posted @ 2017-08-21 22:32 VielenDank 阅读(626) 评论(0) 推荐(0)
:before和::before的区别
摘要：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题 阅读全文
posted @ 2017-08-19 23:22 VielenDank 阅读(1149) 评论(0) 推荐(0)
direction: rtl;
摘要：这个属性，有点无语，费了点时间。 <style type="text/css"> .hao {direction: rtl;}</style> <section class="hao"> <span>你好</span><span>再见</span> </section> 只是把section设为rt 阅读全文
posted @ 2017-08-17 15:19 VielenDank 阅读(307) 评论(0) 推荐(0)
transition:all .2s
摘要：all属性实际上是所有CSS属性的缩写，表示，所有的CSS属性都怎样怎样。 阅读全文
posted @ 2017-08-07 09:16 VielenDank 阅读(479) 评论(0) 推荐(0)
透明背景上的字体也跟着颜色变浅
摘要：不要使用opacity来设置，因为这样会减低div标签整体的透明度，包括里面的内容，用rgba。还不行就试试用z-index。 阅读全文
posted @ 2017-06-30 22:17 VielenDank 阅读(463) 评论(0) 推荐(0)
RGBA与Opacity
摘要：rgba(r,g,b,a) 都与透明度有关，rgba不会影响文字，opacity则会。 阅读全文
posted @ 2017-05-26 17:46 VielenDank 阅读(120) 评论(0) 推荐(0)
关于FlexSlider插件
摘要：Flexslider选项设置 阅读全文
posted @ 2017-05-26 16:37 VielenDank 阅读(210) 评论(0) 推荐(0)
CSS3 ::selection 选择器
摘要：::selection { color:#ff0000; } ::-moz-selection { color:#ff0000; }详见 http://www.css88.com/archives/5169这个属性很酷哎，用鼠标选中的那部分就能出现自己设置的样式。 阅读全文
posted @ 2017-05-25 16:28 VielenDank 阅读(112) 评论(0) 推荐(0)
css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别
摘要：很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素 浮动和边距。今天看到这篇文章不错 就COPY 过来 希望大家做个参考： display:inlin 阅读全文
posted @ 2017-05-25 11:21 VielenDank 阅读(270) 评论(0) 推荐(0)
关于z-index
摘要：1，所有定位了的元素在没有被定位的元素前面。（一个元素被定位的意思这里指的是它有一个position属性，但是不是static，而是relative,absolute，fixed） 2, Z-index属性只作用在被定位了的元素上。z-index会创建一个堆叠的上下文（Stacking Contex 阅读全文
posted @ 2017-05-22 16:41 VielenDank 阅读(133) 评论(0) 推荐(0)
块级元素和内联元素的区别与转换
摘要：块级元素(block)： address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscrip 阅读全文
posted @ 2017-05-18 16:03 VielenDank 阅读(436) 评论(0) 推荐(0)
background属性解释
摘要：如background: url(images/img1.jpg) no-repeat 0 0; 其中的 0 0，前一个是横坐标上的数，后一个表示纵坐标上的数，而很神奇的是，作为参考的坐标原点不是永远都是唯一的body左上角，而是最近的左上角。由此能做成图片上下左右都无间距的效果。 阅读全文
posted @ 2017-05-18 10:47 VielenDank 阅读(161) 评论(0) 推荐(0)
关于页面缩进
摘要：按F12去呈现源码的时候，有的页面的排版会乱掉，有的却能往一边缩进，排版仍然整齐。 做了几个试验，得出的结果是，无论是用left还是margin-left,absolute还是relative,关键是用百分数（%）设间距，而不是具体的px。还有一种就是设为页面居中，则F12出现时，排版不会乱掉。 设 阅读全文
posted @ 2017-05-16 17:32 VielenDank 阅读(225) 评论(0) 推荐(0)
为什么css定位雪碧图（合成图）都要以负号开头？
摘要：(1)正常来说 定位坐标是以 合成图片 左上角这个点作为原点（0px，0px）开始读取的， 而你的图片全都在坐标系的 第四象限 background-position： x y；（x，y为数值或百分比）第一个值是水平位置，第二个值是垂直位置。来定位图片的 那么x是正的，y 是负值。 (2)至于以负值 阅读全文
posted @ 2017-05-13 09:58 VielenDank 阅读(391) 评论(0) 推荐(0)
用em包图片记
摘要：像这种很常见的字体旁边带图标的,很多都是用em的background去实现。 <li><em class="wx"></em><a href="">微信登陆</a></li> .nav-top .wx{background: url(images/wx.png) no-repeat;padding: 阅读全文
posted @ 2017-05-12 19:08 VielenDank 阅读(179) 评论(0) 推荐(0)

1 2 下一页