css教程

折腾 WordPress 的小朋友，有的会喜欢修改页面布局，那么这个小技巧就很有必要知道了，在大前端那里看到的，分享给大家： function $(id){ return document.getElementById(id) } function getHeight() { if ($("left").offsetHeight>=$("right").offsetHeight){ $("right").style.height=$("left").offsetHeight + "px"; } else{ $("left&quo...

css sprites 直译过来就是 CSS 精灵。通常被解释为“CSS 图像拼合”或“CSS 贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过 CSS background 背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加 http 的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用 css sprites 降低图片数量，带来的将是速度的提升。 css sprites 是什么通俗解释：CSS Sprites 其实就是把网...

我晕，怎么调取不出来？(本文图片已丢失，待补） 陌小雨看到一篇讲浮动讲的比较透彻的文章分享给大家： 教程开始前我们首先要知道，div 是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图： 可以看出，即使 div1 的宽度很小，页面中一行可以容下 div1 和 div2，div2 也不会排在 div1 后边，因为 div 元素是独占一行的。 注意，以上这些理论，是指标准流中的 div。小菜认为，无论多么复杂的布局，其基本出...

wpsite 主题制作过程中，发现不同浏览器打开效果是不一样的，以 IE 为例： 难看死了 01   还错位：   用了下面 css 之后，不管你是 IE，还是火狐还是 360 浏览器，都变的美美的啦！ /*———-通用———-*/ a,dd,div,dl,dt,form,h1,h2,h3,h4,h5,img,li,ol,p,table,td,ul{margin:0;padding:0;border:0} body,input,select{margin:0;padding:0;text-align:left;font-size:12px;font-family:”宋体”,”Arial”} body{color:#...

定位标签：position 包含属性：relative（相对） absolute（绝对） 1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框） 2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文...

首先感谢博友梦想网络，让陌小雨的网站在整个春节喜气洋洋的。下面就轮到陌小雨来做做笔记啦，以后的春节陌小雨的网站都是喜气洋洋的，哈哈！ body { background-image: url(https://dy.dedewp.com/wp-content/uploads/new-year.png); background-repeat: no-repeat; background-position: center 70px; background-attachment: fixed; background-size: 1865px 500px; ｝ 代码解释： background-image: 是指背景图片地址 ba...

如何让 wordpress 文章中图片看起来协调一致呢，陌小雨之前想了很多办法，最后发现原来用简单的 css 就可以搞定了，下面这串代码可能不兼容一些主题，但是 xiu 主题的话，你就放心大胆的 copy 吧。（这也是我选择 xiu 主题的原因啦，很多代码都是没有问题的。） .article-content img {max-width: 400px} .article-content img { 　　zoom:expression( function(elm) { 　　if (elm.width>400) { 　　var oldVW = elm.wi...

看到很多博客中都有陌小雨右侧的这个： 陌小雨觉得很酷呢。也只需要简单的 css 就可以实现。 首先需要在 style.css 中加入下面代码： .textwidget a{display: block;padding: 0 15px 15px;border: 1px solid #fff;} .textwidget a h2{font-size: 20px;font-weight: normal;} .textwidget a p{color: #999;margin-bottom: 0;} .textwidget a strong{margin:-1px 0 0 -16px;display: inline-block;padding: 3px 15px 4px;colo...

天下兴亡，匹夫有责。有时候我们可能需要将网站整体变灰，实现方法也很简单。将下面代码加入到 wordpress 主题目录下的 style.css 文件中即可： /* 网站变灰代码 */ html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'...

D8 主题的彩色云标签是这样子的，颜色多样，高度一致。很美观， 只需要三步就可以轻松实现 第 1 步：在 css 中加入如下代码：（已经加过了就不用重复添加了，推荐用上面的） .tagcloud{padding: 12px 13px 10px 15px;} .tagcloud a:nth-child(9n){background-color: #4A4A4A;} .tagcloud a:nth-child(9n+1){background-color: #428BCA;} .tagcloud a:nth-child(9n+2){background-color: #5CB85C;} .tagcloud a:nth-child(9...