前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

刚上道的你,别再走弯路了,千万别错过这么好的代码

先配图,以表感谢!!!

平时经常使用的一些实用的前台样式代码和一些自己总结的代码,用起来特别方便。(一个有小小理想的Programmer),废话到此为止,直接代码:

  1. 设置图片居中,去掉高可以自适应【<center>图片</center>】

  2. 正则表达式 【href 查找\href="[^"]*" 替换href=""】

  3. 定位层级 【position: fixed;】

  4. 定义鼠标 【cursor cursor:pointer 定义光标在链接上为手指,url 自定义】

  5. 背景图自适应【background-size:100% 100%; 】

  6. li元素超出显示范围会加“...”【li{white-space:nowrap; text-overflow:ellipsis; white-space:Nowrap\9; overflow:hidden;}

  7. 在源码里实现加粗【<strong>上一篇</strong>

  8. 圆角【border-radius】

  9. 定位:父元素【position:relative;】子元素【position:absolute;

  10. 增加鼠标路过变色 【:hover{ background:#颜色;} 在冒号前加a文字增加鼠标路过变色 在hover的样式里设置宽,会出现动态】

  11. 图片增加鼠标路过变色 80%的效果【a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}】

  12. 背景透明【background-color:rgba(21, 0, 8, 0.3);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#50150008', EndColorStr='#50150008');

  13. 背景图拉伸铺满【filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%; background-size:100% 100%;

  14. CSS背景图透明度 【background-color:#000; opacity:0.5;filter:alpha(opacity=50)】

  15. 边框阴影 box-shadow【用法box-shadow: 10px 10px 5px #888888; 从左到右依次是:右 下 羽化 阴影颜色】

==============================================================

好东西不在多,而在精,不在你看多少,而在你理解多少!

很高兴能和大家分享知识,享受知识带来的快感!

(如有错误,欢迎在评论处指出,感激不尽!)

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言