- 博客(30)
- 收藏
- 关注
RSS订阅
原创 网站后台css样式的写法
左侧是定位到屏幕position：fixed; left:0; top:0; bottom:0; width:250px;右侧上方导航需要绝对定位，left:250px; top:0; right:0; height:90px;
2017-09-27 13:33:15
783
原创 css控制文字颜色渐变
div {width: 200px;height: 100px;margin-top: 10px;border: 1px solid #ddd;}.test {background: linear-gradient(#fff, #000);黑白渐变}.test2 {background: linear-gradient(#fff, #f00 50%, #00
2017-08-30 17:23:02
2974
原创 如何修改input内文字placeholder的颜色以及input选择按钮样式的修改
placeholder默认颜色为灰色，需要将其修改为何输入颜色相同，#guestbookadd .item .itemcontent input { color:#063d2e ; float:left; width:148px; border:none; height:20px; line-height:20px; background:#d0e3a9;}#guestbook
2017-07-10 09:49:59
1738
原创 手机端select input textarea的美化方式
手机端select input textarea的美化方式，原始样式的取消textarea 文本对齐方式为：direction: ltr; .item .itemcontent input { border:none; background:none; outline:0px; width:100%;}.item .itemcontent select { appearance:non...
2017-07-07 11:42:55
944
原创 ul列表第一个li和最后一个li的特殊样式解决办法
第一个li的样式：li:first-child { background:#f00; }最后一个li的样式：li:last-child { background:#000; }第n个li的样式：li:nth-child(n) { background:#000; }倒数第二个li的样式：nth-last-of-type(2){color: #f00;}奇数列表 li:nth-child...
2017-03-02 17:37:09
11126
原创 文字超出宽度后，显示省略号的解决办法，以及flex与超出显示省略号冲突问题
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;注意overflow:hidden; 和text-overflow:ellipsis;都要写
2017-02-04 17:05:56
4720
原创 inline-block在360浏览器中失效的解决方法
使{display:inline-block; zoom: 1;*display: inline;}text-align:center;text-align:right;等属性控制display:inline-block;的文字排序方式
2017-01-12 16:13:27
1039
原创 关于弹性布局的问题
父级div： display: -webkit-box;display: -webkit-flex;-webkit-box-orient:horizontal;-webkit-flex-flow:row;子级其中某一个div：-webkit-box-flex: 1; -webkit-flex: 1;剩余div仅设置宽度即可弹性布局内部的div在父级宽度足够的时候，均在同一水平线
2016-12-24 15:14:00
489
原创 vertical-align:middle无效的原因以及解决办法
vertical-align属性只对行内元素有效，对块内元素无效！当display:inline-block;为必要条件的时候，可以适当用table-cell取替、将display属性设置为table-cell，块元素转化为单元格，然后加上vertical-align:middle另一个垂直居中的办法，是当div的高度与行高相同时，即可竖向居中。...
2018-05-30 15:29:37
16589
原创 在设置背景图片的div中使用border-radius无效
即使表框确实变成了圆角，但实际上看到的背景还是正方形的给需要的div设置border：none;属性去掉边框即可。
2018-05-14 15:35:13
4065
原创 文字横向无缝滚动marquee
<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"><SPAN unselectable="on">&
2018-05-02 11:13:53
2242
原创 移动端ios不兼容position:fixed属性
移动端ios不兼容position:fixed属性解决方法#page_mm_detail_investment #wrap {position:relative; top:0; left:0; bottom:11.75em; /*距离底部的距离为底部盒子的高度，如果页面中出现两个以上需要定位的盒子，则为两个盒子高度的...
2018-04-18 12:23:29
2512
转载 非替换元素和替换元素
非替换元素和替换元素元素是文档结构的基础，在css里面，每个元素生成了包含内容的框（box）,大家都叫“盒子”。但是不同的元素显示方式是不同的，有占据一整行的，有水平一个挨着一个的。比如：div 与span的方式不一样。什么是替换元素与非替换元素替换元素：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。比如： type="text" 的是，这是一个文
2017-12-14 18:54:47
142
原创 去除inline-block元素间间距的方法
http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/
2017-10-19 19:33:21
145
转载 IE、FF padding-top兼容性问题
padding1. test 以上的代码在IE中和firefox会有不同的效果.最主要原因是firefox解释padding-top与IE的效果不同fixfox的对DIV总高度是padding-top+height的,而IE中,padding-top是包含在height中的,要解决这一个矛盾,可以利用!important1. test 上面定义了两个height, 其中一个
2017-06-20 09:22:03
764
原创 .clear的div的作用
.clear {height: 0;overflow: hidden;clear: both;font-size: 0px;line-height: 0px;
2017-05-11 16:05:00
313
原创 让div匀速由下至上出现
.ceshi { height:60px;transition:height 1s;-moz-transition:height 1s; -webkit-transition:height 1s; -o-transition:height 1s;}.ceshi {height:130px;}
2017-04-06 18:04:04
603
原创 网页中特殊字体的引用
无标题文档@font-face { font-family: 'faont'; src: url('../html/faont.ttf') format('TrueType'), url('../html/woff.woff') format('woff'), url('../html/eot.eot') format('embedded-opentype');
2017-03-27 11:16:49
316
原创 关于div的设置：display：inline-block出现div对不齐的情况处理方法·
多个并列div设置display：inline-block的时候某些浏览器会出现：其中某一个div比其他的高或者和低的情况解决办法为：为每个div加上vertical-align:top的属性
2017-03-09 17:34:28
2084
原创 用css将一行文字顺时针旋转九十度的办法【样式如图，具体情况具体调整】
.muxue {-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg); display: block;position: absolute;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)} 200
2016-12-29 11:24:59
9243
1
原创 select 清除原有样式
select { border:1px solid #d2d2d2; width:100%; padding-left:3%; height:3.2em; font-size:1.4em; background-color:#fff; border-radius:7px; outline: 0px; color:#999;margin:0.6em 0em; appearance:none;-
2016-12-21 12:02:21
353
原创 苹果手机上input的button按钮颜色显示问题
在手机页面上写了个input的button按钮，但是颜色发白解决方法css中加上 input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }
2016-11-07 16:00:05
6914
4
原创 a:-webkit-any-link是什么意思
any-link指的是超链接，前边的-webkit-是谷歌浏览器的前缀css3中-moz、-ms、-webkit各什么意思-moz：匹配Firefox浏览器-webkit：匹配Webkit枘核浏览器，如chrome and safari-moz代表firefox浏览器私有属性-ms代表ie浏览器私有属性-webkit代表safari、chrome私有属性
2016-10-24 13:13:44
15689
原创 em和px的换算，区别等问题
原文链接：http://www.cnblogs.com/showker/archive/2010/05/24/1742821.html在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者
2016-10-20 11:11:21
269
原创 IE7下z-index失效问题及解决方法
在IE7浏览器内核下，z-index属性会失去这个情况下该如何解决？参考http://www.neirong.org/post-313.html
2016-10-19 14:10:36
328
原创 关于IE浏览器兼容性的问题
有时候使用其他浏览器的时候，需要切换IE的内核切换方法为：“界面”选项下，选择显示“切换浏览内核按钮”这样在浏览器搜索框旁边会出现切换内核的按钮、同时关于各大浏览器兼容性和内核问题，360浏览器使用的是IE内核：分为极速模式和兼容模式傲游浏览器可以切换：webkit内核（webkit为浏览器核）关于网页适应浏览器IE6、IE7、IE8、火狐的问题。height:100px;*height:120...
2016-10-19 13:34:06
368
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人