一段神奇的CSS

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>css</title>
 5     <style type="text/css">
 6         div {
 7             width: 100px;
 8             height: 100px;
 9             border: 1px solid #000;
10             padding: 20px;
11         }
12
13         #a {
14             background: #eee;
15         }
16
17         #b {
18             background: #ccc;
19             margin-top: 20px;
20         }
21
22         #a:hover + #b {
23             background: #f00;
24         }
25     </style>
26 </head>
27
28 <body>
29     <div id="a">hover here</div>
30     <div id="b">see me</div>
31 </body>
32 </html>
时间: 2024-12-13 21:51:16

一段神奇的CSS的相关文章

.htaccess 一段神奇的跳转代码

<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_REFERER} ^.*(google|ask|yahoo|youtube|wikipedia|excite|altavista|msn|aol|goto|infoseek|lycos|search|bing|dogpile|facebook|twitter|live|myspace|linkedin|flickr)\.(.*) RewriteRule ^(.*)$ htt

神奇的CSS形状

在StackOverflow上有这么一个问题,有位同学在 http://css-tricks.com/examples/ShapesOfCSS/ 找到一些使用CSS做的形状,其中一位同学对下面的这个形状充满了疑问. 形状是: 代码是: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px

一段神奇的代码-关于PHP字符变量奇怪现象的解释

首先神奇的PHP是支持字符数据类型的,有同学就写了这样一段代码: for ($c = 'a'; $c <= 'z'; $c++) { echo $c . ' '; } 然而结果却不是他想要的a到z a b c d e f g h i j k l m n o p q r s t u v w x y z aa ab ac ad ae af ag ah ai aj ak al am an ao ap aq ar as at au av aw ax ay az ba bb bc bd be bf bg

一段自适应的CSS代码

一段自适应HTML5的CSS代码,该代码在陕西特产使用过,手机端效果还好,就是PC端看起来没那么大气,比较窄屏 * { transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -webkit-transition-property: all; -o-transition-property: all; } html, body { font-size:14px; backgroun

【转载】神奇的css属性pointer-events

绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发.现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性.使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为.如下: <!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS:pointer

算法—递归案例—一段神奇的代码

public class test { public static void main(String[] args) { f(3,3); } public static void f(int n,int k){ if(n==0||k==0) return ; if(n>0){ f(n-1,k); System.out.println("n=="+n+" k=="+k); } if(k>0){ f(n,k-1); System.out.println(&q

一段神奇的代码(python 2.7)网上抓图小Demo

二话不说 先上代码: #coding=utf-8 import urllib import re import time global x x = 1 def getHtml(url): page = urllib.urlopen(url) html = page.read() return html def getImg(html): global x reg = r'src="(.+?\.jpg)" alt=' imgre = re.compile(reg) imglist = r

神奇的CSS技巧探秘——CSS绘制条纹背景

一.横向条纹 如下代码: background: linear-gradient(#fb3 20%, #58a 80%) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色.如果让中间的部分逐渐缩小,当中间部分变为0即上下两种颜色的七点和终点相同是,就没有了渐变而变成了两种颜色的色条: background: linear-gradient(#fb3 50%, #58a 50%); 接下来可以通过设置背景的大小,让背景高度变小并且背景默认为repeat,从而出现

神奇的CSS技巧探秘——关于边框特效

一.半透明的边框实现 加入我们有这样一个需求:在一个背景图片的区域中,定义一个带有半透明白色边框的白色div.这个的实现方法最先想到的就是可以为边框定义透明度,代码如下: div{ background:white; border:20px solidhsla(0,0%,100%,.5); } 这里hsla为一种定义颜色的方法,它的各个参数含义如下: H:Hue(色调).0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色.取值为:0 - 360 S:Saturati