![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html+css
文章平均质量分 54
水中熊
让人迷茫的原因只有一个,那就是本该拼搏的年纪,想得太多,却做的太少。
展开
-
语义化命名
规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个id命名为“div1”,另外一个命名为“News”,肯定第二个比较易读,而且搜索引擎抓取率要高,在团队合作中还可以大大提高工作效率。为了达到这种效果我们就要规范化命名! .navMenuRedButton 骆驼命名发法 .NavMenuRedButton 帕斯卡命名法原创 2015-05-29 20:51:21 · 479 阅读 · 0 评论 -
css清除浮动
以下是比较稳妥的清除浮动的样式,只要在浮动的父元素的class加上clearfloat,即可实现。不过个人还是喜欢直接加上overflow:hidden;或是直接使用flex布局,简单,方便!/* * 清除浮动代码 * 其中clear:both;指清除所有浮动; * content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少,其中content原创 2017-02-16 11:56:02 · 259 阅读 · 0 评论 -
CSS 3D
CSS 3D++原理++ CSS 3D并非真的3D,只是利用计算的方法,借由浏览器的高效能,在2D的空间绘制一个3D的图形,就像我们拿张纸,用铅笔在上头画个正立方体之类的。 3d场景的每一个面就是一个div。首先确立好中心点,然后通过设置每个div的css属性(即旋转+位移),将其设置到指定的位置,这样,就能画出各种立方体。 ++属性++transform 该属性能让你修改 C原创 2017-02-16 11:56:57 · 878 阅读 · 0 评论 -
css毛玻璃效果
以下是毛玻璃效果.blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px);原创 2017-02-16 11:55:43 · 417 阅读 · 0 评论 -
3px留白
3px留白说明:块级元素包含换行显示或空格分隔的情况下的行内块级元素(inline-block)会有间距,右边会有3px的留白,如果是空行内元素或是图片,右部和底部会同时有3px的留白。解决方案:推荐:父元素加个 ==font-size:0==,子元素在单独定义字体大小,这样就可以同时把下、右间隙都干掉。其他的例如 将行内块级元素写成一行、闭合标签换行、magin负边距、letter-spaci原创 2017-02-16 12:04:52 · 469 阅读 · 0 评论 -
在不同浏览器中,input里面的输入光标大小表现形式却大不相同
问题:在不同浏览器中,input里面的输入光标大小表现形式却大不相同,具体的如下:IE:不管该行有没有文字,光标高度与font-size一致。FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。* 该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-heig原创 2017-02-16 12:05:08 · 1653 阅读 · 0 评论 -
盒子模型与定位
盒子模型(margin&padding)margin是外边距,padding是内边距。margin变了,border和里面的content还有padding作为一个整体一起都动了。padding变了,border和外面的margin不动,就content动了。margin是块与块之间的距离,padding是单个块内内容与边框的距离。只是padding,border的默认值是0。浮动原创 2015-05-29 21:08:09 · 516 阅读 · 0 评论 -
img div之间差3px
今天有人问我一个奇葩的问题,从来没遇到过,搞了半天才知道原因。事件起因:在一个div里放一个img,但下方会出现一小块空白,他想去掉。事件经过:当时是以为是边距的简单问题,就过去通过chrom调试,调试了半天发现,当内外边距都为0时,下方还是会有3px的空白,搞不清楚只好上网搜索一下,奥!!!!!原来是浏览器解析问题。事件结果:因为img是内联元素,div是块元素,浏览器解析时会在im原创 2015-11-13 20:34:06 · 1639 阅读 · 0 评论 -
css 完全居中
css完全居中一width: 50px;height: 50px;background-color: #000;position: absolute;margin:auto;left:0; top:0; bottom:0; right:0;css完全居中二width: 50px;height: 50px;background-color: #000; positio原创 2015-08-11 17:41:44 · 360 阅读 · 0 评论 -
css 面包屑
今天为了写一个简单的样式,研究了半天,图如下:方法其实很简单,但中间尝试了很多,特记录下来重要的东西。首先单看图片,发现中间这块使用了两个css的三角形,一块在左边为灰色,一块在右边为白色,写下了如下代码:无标题文档.div0 { width: 600px; height: 34px;}.div1 { width: 250px; height: 34px;原创 2015-08-19 17:41:54 · 848 阅读 · 0 评论 -
html+css注意事项
1.、、短引用、长引用、2.先计划好网页结构,、、、、、...3.css最开始要重置标签 body,div,p,ul,li,dl,dt,dd,h1,a,img{margin:0; padding:0;} img{border:none;}4.为了提升网页的用户体验,页面背景先加载小图片,这样背景加载速原创 2015-05-29 21:13:32 · 735 阅读 · 0 评论 -
css伪类 附加一般导航栏代码
伪类:CSS伪类是用来添加一些选择器的特殊效果。 (1)a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active原创 2015-05-29 22:03:42 · 1528 阅读 · 0 评论 -
opacity、rgb、rgba透明背景
opacity 属性是css3的属性,是指颜色的不透明度,也可以实现透明效果,1为完全不透明,0为完全透明 例子:opacity: .5; rgb() 定义了颜色的红绿蓝值 例子:rgb(0,0,0); //表示黑色rgba() 表示 红 绿 蓝 alpha ,W3C指在原有的rgb颜色模型之后增加了 “alpha”参数,可以让指定的颜色透明化。例子:rgb原创 2015-11-02 12:17:26 · 8693 阅读 · 0 评论