CSS学习指南
涉及CSS2.0、CSS3.0以及一些代码demo
十三浪
你的闲暇决定你的人生!
展开
-
移动前端webapp(html5页面)
CSS3+HTML5几乎可以毫无顾忌的使用,然后浏览器端考虑webkit内核的就差不多了。 1 2 3 4 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabl.原创 2020-08-05 15:47:12 · 5113 阅读 · 0 评论 -
2020前端新手常用的CSS命名规则
(一)常用的CSS命名规则头:header内容:content/container尾:footer导航:navnav -> navigation->navigation menu -〉导航菜单侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:l...原创 2020-02-15 21:27:33 · 425 阅读 · 0 评论 -
CSS实现背景不随浏览器滚动的方法
记忆中,我们看过很多博客、微博和QQ空间里面,很多人都给自己的小窝设置了固定背景,不随浏览器滚动,实现的方法除了javascript,CSS也可以轻松实现。background不随浏览器滚动的代码如下:CSS代码body{background:url(背景图片地址)no-repeatfixedcentertop;margin:0;padding:0;}只需要一个...原创 2020-02-15 21:23:33 · 417 阅读 · 0 评论 -
CSS 实现箭头
相对来说CSS 实现箭头产生的效果简单一点,根据需要来安排。毕竟有些效果是CSS 无法实现的 那就直接切图吧!三角形叠加.pos_rel { position:relative; _line-height:0; width:40px; height:23px;}.pos_rel .icon1 {原创 2013-11-13 12:14:32 · 662 阅读 · 0 评论 -
css固定宽度超出文字自动省略号显示
方案一:代码如下:text-overflow : ellipsis; white-space : nowrap; overflow : hidden;除了固定div或者其他容器宽度以外要显示为点点,以上3个缺一不可;还有,除了firefox,opera其他浏览器都支持,包括可恶的ie6方案二:下文为转摘原创 2013-11-20 10:55:43 · 1376 阅读 · 0 评论 -
常用的按钮文字旁边带icon的CSS
text-transform: uppercase;font-size: 10px;padding: 7px 28px 6px 0px;background: url("../media/wm3/wm2-learnmorearrow.png") no-repeat scroll right center transparent;原创 2013-11-27 16:17:39 · 1735 阅读 · 0 评论 -
DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)
导读:有些相对可以学习,有些已经不是最好的解决方法了,看大家喜欢!CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明。 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中转载 2013-11-28 11:07:39 · 916 阅读 · 0 评论 -
CSS实现圆角、透明在IE、火狐中的代码兼容解决办法
用CSS实现圆角和div透明效果时会遇到一些浏览器兼容性问题,比如下面列举的这些代码,在IE和火狐中对应有不同的代码,对于一个优秀的前端设计师,考虑到兼容性这是必需的。//CSS:透明 IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF:opacity:0.6。 //CSS:圆角 IE:不转载 2014-04-22 16:34:29 · 721 阅读 · 0 评论 -
透明css详
.MyElement{filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}具体参数含义如下:opacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。转载 2014-04-23 13:18:39 · 491 阅读 · 0 评论 -
CSS实现背景图片居中
<!doctype html><html><head><meta charset="utf-8"><title>标题</title></head><body style=" background:url(psb.jpg) top center no-repeat #000原创 2014-05-12 15:34:01 · 1038 阅读 · 0 评论 -
css3中webkit-box
1、之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性,浏览器会帮我们做额外的计算。提供的关于盒模型的几个属性:box-orient 子元素排列 vertical or horizon转载 2014-06-25 11:07:19 · 746 阅读 · 0 评论 -
用CSS3实现对图片的放大效果
用CSS3实现对图片的放大效果用CSS3对图片放大效果.right_div .topicons li a:hover img{ -webkit-transform:scale(1.5,1.5); -moz-transform:scale(1.5,1.5); -transform:scale(1.5,1.5); }转载 2014-06-27 13:13:21 · 865 阅读 · 0 评论 -
css3图片过滤效果
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">css3图片过滤效果 body{ background: #eee; }img{ width:200px; height:150px;} .g转载 2014-06-27 13:14:55 · 567 阅读 · 0 评论