css常见小问题(自己遇到的)
2019-08-14 09:59:10来源:博客园 阅读 ()
- 禁止div点击
//css属性: pointer-events: none; //或者定义属性,在js中添加: $(".原类名").addClass("新类名"); //js: //禁用 $.fn.disable = function () { $(this).addClass("disable"); }; //启用 $.fn.enable = function () { $(this).removeClass("disable"); }; //或者 $("#@id").disable(); $("#@id").enable();
- 鼠标放置显示“小手”手势,并显示提示文字
<div style="cursor:pointer;" title="提示的信息">这里是文字内容</div>
- 超出区域的文字显示省略号
//1.普通情况 display:inline-block; //这个看情况加 overflow:hidden; /*超出部分隐藏*/ white-space:nowrap; /*让文本强制在一行不换行*/ text-overflow:ellipsis;/*显示省略号来代表被修剪的文本*/ /*2.长的英文单词换行*/ word-break:break-all; /*支持IE,chrome,FF不支持*/ word-wrap:break-word;/*支持IE,chrome,FF*/ /*3.两行截取 2行超出显示...*/ .mui-ellipsis-2 { display: -webkit-box; overflow: hidden; white-space: normal!important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /*4.select的情况下*/ <select onmouseover="selbox($(this))" ></select> <script> function selbox(a){ var val = a.val(); a.attr("title",val); }
- div+css控制图片等比例缩放:
/*外侧div设置宽、高,内侧图片设置宽、高为auto;并且设置max-width和max-height为同等比例*/ .imgbox50{ width:200px; height:50px; border-radius:50%; text-align: center; margin:0 auto; } .Img50{ max-width:85%; max-height:85%; border-radius:5px; width:auto; height:auto; } <div class="imgbox50 mt5"> <img class="Img50" src=""> </div>
- ui样式
第一个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){ background:#000; } 奇数列表:li:nth-child(odd) { background:#f00; } 偶数列表:li:nth-child(even) { background:#f00; }
- 设置元素在另一个元素的最底部
//设置父div的
position:relative;
//子div
position: absolute;
bottom:0;
- 设置背景颜色,不透明度
background-color:#6d7a83;
opacity:0.75;
- select文字对齐方式
//右对齐 select { direction: rtl; } //左对齐 select option { direction: ltr; } //居中对齐设置padding
- input设置提示文字的颜色
/* WebKit browsers */ input::-webkit-input-placeholder {color: red; } /* Mozilla Firefox 4 to 18 */ input:-moz-placeholder { color: red; } /* Mozilla Firefox 19+ */ input::-moz-placeholder { color: red; } /* Internet Explorer 10+ */ input:-ms-input-placeholder {color: red; }
- 修改select下拉按钮的样式是自定义的:
select::-ms-expand { display:none; }//隐藏自带的样式 select{ height:30px; line-height:28px; padding:0 16px 0 5px; border:1px solid #e4e4e4; background: url("/zbw/img/mobile/public/icon/sjxdown.png") right center no-repeat #fff; background-size:16px; text-align:left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; appearance:none; -moz-appearance:none; -webkit-appearance:none; cursor:pointer; }
- table中多个tr之间的间距
<tr style="display:block;margin-top:10px;"></tr>
- 两个div之间加个竖线样式
<div style="margin-top: 20px;width:1px;height:80px;float:left;background:#e4e4e4;"></div>
- textarea禁止拉伸
style="resize:none"
原文链接:https://www.cnblogs.com/M-miao/p/11314908.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:博客园代码定制
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash