css折叠菜单

2007/07/25 Posted in 互联网产品设计

效果见图,IE7、FF下测试通过。有朋友说IE6下不显示。。 [sweat] 回家再看看好了。http://www.5key.net/showpic.asp?url=http://img744.photo.163.com/5dvivi/58210648/2535639278.jpg
演示地址：http://www.5key.net/ex/12_7

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>css菜单-5key.net</title>
<style>
/*
Power by：http://www.5key.net
*/
body{font-size:12px; font:Arial, Helvetica, sans-serif; background:white; padding:0px; margin:0px;}
ul,li{margin:0px; padding:0px; clear:both; list-style:none;}
.fb{font-weight:bold;}
.nav{background:#000; height:20px; color:white; font-size:14px; font-weight:bold; padding:5px;}
.menu{ display:block;}
.menu a{width:300px; border:1px solid #000; color:white; border-top:0px; padding:4px; background:#F00; margin:0 0 0 20px; text-decoration:none; float:left; cursor:hand; }
.menu a:hover{width:300px; border:1px solid #000; color:white; border-top:0px; padding:4px; background:#F00; margin:0 0 0 20px; text-decoration:none; float:left; cursor:hand;}
.menu span{display:none; clear:both;}
.menu:hover span{display:block; width:300px; color:#666; border-top:0px;  background:#FFFddd; margin:0 0 0 22px;}
a.test{ background:#f5f5f5; text-decoration:none; color:#666; margin:0 0 0 -2px;}
a.test:hover{ background:#FFFddd; text-decoration:none; color:#F00; margin:0 0 0 -2px;}
</style>
</head>

<body>
<div class=”nav”>其实，我是一个菜单</div>
<div>
<ul class=”menu”>
<a href=”#” mce_href=”#” class=”fb”>数码产品</a><span>
<li><a href=”#” mce_href=”#” class=”test”>数码相机</a></li>
<li><a href=”#” mce_href=”#” class=”test”>数码摄像机</a></li>
<li><a href=”#” mce_href=”#” class=”test”>MP3&MP4</a></li>
<li><a href=”#” mce_href=”#” class=”test”>数码存储卡</a></li>
</span>
</ul>
<ul class=”menu”>
<a href=”#” mce_href=”#” class=”fb”>电脑硬件</a><span>
<li><a href=”#” mce_href=”#” class=”test”>主板&CPU</a></li>
<li><a href=”#” mce_href=”#” class=”test”>内存</a></li>
<li><a href=”#” mce_href=”#” class=”test”>硬盘</a></li>
<li><a href=”#” mce_href=”#” class=”test”>显示器</a></li>
<li><a href=”#” mce_href=”#” class=”test”>键盘</a></li>
<li><a href=”#” mce_href=”#” class=”test”>鼠标</a></li>
<li><a href=”#” mce_href=”#” class=”test”>显卡</a></li>
<li><a href=”#” mce_href=”#” class=”test”>声卡</a></li>
</span>
</ul>
<ul class=”menu”>
<a href=”#” mce_href=”#” class=”fb”>报刊杂志</a><span>
<li><a href=”#” mce_href=”#” class=”test”>微型计算机</a></li>
<li><a href=”#” mce_href=”#” class=”test”>新潮电子</a></li>
<li><a href=”#” mce_href=”#” class=”test”>电脑报</a></li>
<li><a href=”#” mce_href=”#” class=”test”>电脑商情报</a></li>
</span>
</ul>
<ul class=”menu”>
<a href=”#” mce_href=”#” class=”fb”>音象制品</a><span>
<li><a href=”#” mce_href=”#” class=”test”>CD</a></li>
<li><a href=”#” mce_href=”#” class=”test”>DVD</a></li>
<li><a href=”#” mce_href=”#” class=”test”>电影</a></li>
<li><a href=”#” mce_href=”#” class=”test”>音乐</a></li>
</span>
</ul>
</div>
</body>
</html>

Leave a comment - 2,245 views

css实现鼠标触发图片提示信息

2007/07/25 Posted in 互联网产品设计

先看例子http://www.5key.net/ex/12_6
IE7.0，FF下通过，只是有点小问题，IE7下无法实现alhpa透明。

初试样式：
uploads/200708/06_104527_2532661166.jpg

触发样式：
uploads/200708/06_104649_2532662898.jpg

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>图片提示信息</title>
<style>
body{ font:14px Arial, Helvetica, sans-serif;}
img{border:0px;}
.pic{}
.pic a{ text-decoration:none;border:1px solid #ccc; float:left;}
.pic a:hover{text-decoration:none; border:1px solid black; float:left;}
.pic span{display:none;}
.pic:hover span{display:block; clear:both; padding:5px; margin-top:-27px; background:black; color:white; font-weight:bold;
filter:Alpha(opacity=90);-moz-opacity: 0.9;}
</style>
</head>

<body>
<div class=”pic”>
<a href=”#” mce_href=”#”><img  src=”cat.jpg” mce_src=”cat.jpg” width=”298″ height=”422″ /><span>加菲猫2《双猫记》</span></a></div>
</body>
</html>

Leave a comment - 1,428 views

强！119.9S曝光强图～

2007/07/25 Posted in 互联网产品设计

看图吧。不说了。
http://static.flickr.com/110/304800714_bd9ba01535.jpg?v=0

http://static.flickr.com/118/304800715_bb4dcf2acb_o.jpg

作者链接：http://www.flickr.com/photos/stevacek/302579586/

2 Comments - 1,695 views

标准布局应用：对联与旗帜[转]

2007/07/25 Posted in 互联网产品设计

原文地址：http://blog.pr1984.com/article.asp?id=34



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="description" content="http://blog.pr1984.com - 代码剪辑库 ( PR 50198763 )" />
<title>符合标准的正常工作的对联广告</title>
<script type="text/javascript">
<!– 
lastScrollY = 0;
function heartBeat(){ 
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
 diffY = document.documentElement.scrollTop;
else if (document.body)
 diffY = document.body.scrollTop
else
    {/*Netscape stuff*/}
 
//alert(diffY);
percent=.1*(diffY-lastScrollY); 
if(percent>0)percent=Math.ceil(percent); 
else percent=Math.floor(percent); 
document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px";
document.getElementById("rightDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px";

lastScrollY=lastScrollY+percent; 
//alert(lastScrollY);
}

//下面这段删除后，对联将不跟随屏幕而移动。
window.setInterval("heartBeat()",1);
//–>
</script>

<style type="text/css">
<!–
/* 这里定义滴是页面高度，用来测试对联跟随效果滴，跟广告无关 */
html,body{height:1000px;}
#mm{height:1000px;}

/* 这里是设置对联样式滴 */
#leftDiv,#rightDiv{
   width:120px; /* 宽度 */
   height:250px; /* 高度 */
   background-color:#e5e5e5; /* 背景颜色 */
   border:1px solid #ddd; /* 边框样式 */
   position:absolute; /* 绝对定位激活 */
}
–>
</style>
</head>

<body>

<div id="leftDiv" style="top:120px; /* 距离顶部120px */ left:2px; /* 距离左侧2px */ ">左侧广告内容</div>
<div id="rightDiv" style="top:120px; /* 距离顶部120px */ right:2px; /* 距离右侧2px */ ">右侧广告内容</div>

<div id="mm">
</div>
</body>
</html>

Leave a comment - 646 views

杭州小吃－葱包桧

2007/07/25 Posted in 美食与生活

这次在杭州吃的东西中，这个东西有点意思。味道不错，而且特便宜。回来后search了一下。原来还有典故。
http://paowang.com/blog/peanuts/upload/hz06.jpg


“葱包桧儿”选用精白面粉先制成圆饼，裹上油条和葱，卷成筒状，再在平底锅中揿烤，等饼的两面呈金黄色后，涂上甜酱或辣酱即成。这种饼吃起来松软可口，很适合杭州人的饮食习惯，因此也是很是流行的早餐。现在的“葱包桧儿”还有用鸡蛋来做的。 “葱包桧儿”和秦桧的关联是这样的：传说岳飞被秦桧害死风波亭后，杭州有人将面粉揉和做成秦桧夫妻模样，再拿刀横向一切，扔入油锅中煎炸，卖时吆喊：“大家来吃油炸桧。” 我闭上眼睛，想象着当时杭州百姓争食“葱包桧儿”的情景。老百姓是在吃“葱包桧儿”吗？不！他们是在吃痛恨，吃仇视，他们用自己的方式和方法，表达了爱与憎。 　　　　　　　　　　　

2 秦桧本是历史长河中一个匆匆的过客，无论他是怎样的奸诈，时间本可以洗涤一切；可由于有了岳王庙和“葱包桧儿”这样的传说，确无论怎样也无法消除人们对他的痛恨了。因此一切的卖国求荣者，只要被老百姓所仇视，则他必定是要遗臭万年的。与此相反，他的正义面则会永远为大家所传颂。 

Leave a comment - 522 views
1...2728