css
我家小宝_朱朱
这个作者很懒,什么都没留下…
展开
-
css限制输入长度
input 中通过 maxlength="" 这种限制字符串字数css 通过限定宽度 width 设置超出隐藏 overflow 来控制字符显示原创 2016-01-28 15:43:58 · 3140 阅读 · 0 评论 -
返回顶部-右侧fixed+内容宽度自适应
来自: http://www.zhangxinxu.com/wordpress/2011/12/position-absolute-text-align-center/固定在右边,且内容宽度变化不影响。使用了1. position: fixed; 固定在屏幕2. text-align: right; 挂在右侧3. margin-left:10px; 与内容区域有一定的距离转载 2016-07-15 09:24:04 · 2518 阅读 · 0 评论 -
CSS元素隐藏“失效”以其妙用
转自: http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/一、CSS元素隐藏在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击{ display:转载 2016-07-15 10:07:19 · 1201 阅读 · 0 评论 -
弹出的css实现
实现点击弹出,展现弹出层,点击关闭,关闭弹出层。弹出层的fixed,里面的内容absoute。注意弹出层overflow哦.body-wrap{ width: 100%; height: 2000px; } .button-small{ display: block; width: 100px;原创 2016-07-06 15:06:45 · 410 阅读 · 0 评论 -
CSS3自定义滚动条样式 -webkit-scrollbar
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢?前言webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。滚动条转载 2016-01-28 11:27:17 · 367 阅读 · 0 评论 -
css3 box-sizing属性
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。content-box,border和padding不计算入width之内padding-box,padding计算入width内border-box,border和padding计算入width之内,其实就是怪异模式了~ ie8转载 2016-08-09 16:19:11 · 168 阅读 · 0 评论 -
有关首行的那些事儿
css代码:[css] view plain copy print?.menglong,.menglong2,.menglong3 { width:300px; border:1px solid #ddd; padding:5px; font-size:12px; marg转载 2016-09-07 16:50:47 · 246 阅读 · 0 评论 -
CSS3之过渡Transition
http://blog.csdn.net/lee_magnum/article/details/11990933CSS3也有着非常强大的属性,那就是过渡——Transition。过渡——Transition在W3C的描述:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变C转载 2016-09-08 16:45:41 · 311 阅读 · 0 评论 -
CSS3之变换Transform
http://blog.csdn.net/lee_magnum/article/details/11900171转载 2016-09-09 11:34:09 · 223 阅读 · 0 评论 -
CSS 巧用 :before和:after
什么是:before和:after? 该如何使用他们?:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。下面我们先跑个简单的代码测试下效果: style> p:before{ content: "H" /*:before和:after必带技能,重要性为满5转载 2016-12-22 17:21:32 · 541 阅读 · 0 评论 -
CSS控制图片和文字在同一行显示且对齐的3种方法
1、在css中给div添加上“vertical-align:middle”属性 找回密码 css代码: 复制代码代码如下:#denglu *{ vertical-align:middle; /* 居中对齐, */ font-size:14px; } 2、把图片设置为背景图片如果我们的图片转载 2016-03-21 14:06:07 · 53090 阅读 · 3 评论 -
CSS教程之div垂直居中的多种方法
一、单行垂直居中如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。div { height:25px; line-height:25px; overflow:hidden; }二、多行未转载 2016-05-20 16:43:34 · 464 阅读 · 0 评论 -
CSS3之元素阴影box-shadow
转自: http://blog.csdn.net/lee_magnum/article/details/11725155转载 2016-12-20 15:58:54 · 315 阅读 · 0 评论 -
CSS3新增样式-borderRadius的使用
来自百度,截图转载 2016-07-14 10:45:21 · 290 阅读 · 0 评论 -
margin 负值 实践_2
1. 制作包含3列的单个ul> li class="col1">Eggsli> li class="col1">Hamli> li class="col2 top">Breadli> li class="col2">Butterli> li class="col3 top">Flourli> li class="col3">Creamli> u转载 2016-07-11 14:09:55 · 295 阅读 · 0 评论 -
margin 负值 实践
一、左右列固定,中间列自适应布局此例适用于左右栏宽度固定,中间栏宽度自适应的布局。由于网页的主体部分一般在中间,很多网页都需要中间列优先加载,而这种布局刚好满足此需求。 HTML: div class="main"> div class="main_body">Maindiv> div> div class="left">Left转载 2016-07-11 10:32:56 · 326 阅读 · 0 评论 -
css实现自适应屏幕高度
body,html{margin:0px;height:100%;}.autoHeight{width:100%;height:100%;background:red;}转载 2016-03-31 18:11:38 · 1047 阅读 · 0 评论 -
css判断不同分辨率显示不同宽度布局实现自适应宽度
CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化(网页宽度自动随浏览器显示宽度而变宽变窄)。随着发展,越来越多的电脑用户显示屏分辨率越来越高,但有的用户还是使用1024px的分辨率的显示屏(根据几个浏览器分辨率统计平台得到转载 2016-03-28 00:27:08 · 6823 阅读 · 0 评论 -
word-wrap和word-break的区别
这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是太拗口了,长得又差不多,导致连背都很难背下来。那它们到底是什么呢?我在mozilla的官网上找到如下的解释:word-wrap:css的 word-wrap 属转载 2016-04-27 15:32:25 · 244 阅读 · 0 评论 -
CSS3 选择器——伪类选择器
CSS的伪类语法和别的语法有点不一样,其主要有两种语法表达方式E:pseudo-class {property:value}/*其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值*/示例: a:link {color:red;} 第二种写法 E.class:pseudo-class{prope转载 2016-03-31 14:43:53 · 363 阅读 · 0 评论 -
行内元素水平间隔有关问题
换行符产生间距 换行符产生间距 换行符产生间距 换行符产生间距 换行符产生间距 换行符产生间距1.行内元素之间的“换行符”产生间距2.行内元素之间使用“tab(制表符)”产生间距3.行内元素之间使用“空格”产生间距行内元素之间产生的间距,是由于换行符、tab(制表符)、空格等字符引起,而字符的大小是定义字转载 2016-05-16 11:36:51 · 838 阅读 · 0 评论 -
rem和em和px vh vw和% 移动端长度单位
1.rem和em、px首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px;这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了,转载 2016-05-19 19:53:13 · 1586 阅读 · 0 评论 -
DIV+CSS 清除浮动
DIV+CSS 浮动效果是指,父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(PS:正常情况下,父元素的高是由子元素撑起来);或者因为部分子元素的而浮动,脱离文本流而造成其他元素的布局错乱的情况。1、给未加浮动的子元素的CSS添加 clear: both;若子元素都有浮动时,可以新增加一个空的子元素,并且给其的CSS添加 clear: both;这样可转载 2016-05-20 17:17:52 · 276 阅读 · 0 评论 -
使用CSS3美化复选框checkbox
方法一 :使用图片.checkbox { display: none;}.checkbox-i{ margin-right: 20px; background-image: url("../img/icon.png"); background-repeat: no-repeat; background-position: -324px -40px转载 2016-06-02 18:30:43 · 3204 阅读 · 0 评论 -
textarea 使用
1. resize:是否允许拖拽textarea右下角调整大小 resize: vertical; 只允许垂直方向拖拽resize:horizontal; 只允许水平方向拖拽resize: none; 不允许拖拽resize: both; 允许垂直 水平 拖拽2. 滚动条scrollbar属性、样式详解overflow内容溢出时的设置(设定被设定对象是否显示滚动条) o转载 2016-05-13 11:50:43 · 1675 阅读 · 0 评论 -
textarea:contenteditable模拟文本域-纯文本-chrome浏览器,其余不兼容
1. 与contenteditable属性无关的CSS控制法 只有webkit内核浏览器才支持read-write-plaintext-only一个div元素,要让其可编辑,也就是可读写,contenteditable属性是最常用方法,做前端的基本上都知道。但是,知道CSS中有属性可以让普通元素可读写的的同学怕是就少多了。主角亮相:user-modify.支持转载 2016-06-06 14:21:57 · 3252 阅读 · 0 评论 -
style标签下的CSS代码的显示与实时编辑
http://www.zhangxinxu.com/wordpress/2011/03/style%E6%A0%87%E7%AD%BE%E4%B8%8B%E7%9A%84css%E4%BB%A3%E7%A0%81%E7%9A%84%E6%98%BE%E7%A4%BA%E4%B8%8E%E5%AE%9E%E6%97%B6%E7%BC%96%E8%BE%91/CSS代码的实时编辑与效果呈现转载 2016-06-06 14:58:21 · 756 阅读 · 0 评论 -
margin 负值 理论
当给一个元素设置margin 负值(top/left),该元素将在该方向上产生位移当给一个元素设置margin负值(bottom/right),这个元素并不会像你所预想的产生位移,而是将任何紧随其后的元素“拉”过来,覆盖在自己的上边。转载 2016-07-08 16:46:59 · 2586 阅读 · 0 评论 -
css的div垂直居中的方法,百分比div垂直居中(推荐translate)
1. 固定高宽div垂直居中.outer{position: relative;width:100%;height:100%;}.inner{position: absolute;left: 50%;top: 50%;width:200px;height:100px;margin-left:-100px;margin-top:原创 2017-01-23 11:09:06 · 2965 阅读 · 0 评论