仿Windows风格的选项卡和按钮

<html>

<head>

<style type="text/css">

<!--

body{font-family: ‘MS Shell Dlg‘, 宋体, Tahoma;font-size: 12px;background-color: #336699;color:#000000;}

td, div, input, textarea{font-family: ‘MS Shell Dlg‘, 宋体, Tahoma;font-size: 12px;cursor: default;}

.title{background-color: #000080;color:#fdf7d3;padding: 1;font-family:宋体;font-size:12px;}

.up{background-color: #cccccc;color:#000000;border: 2px outset #ffffff}

.down{background-color: #cccccc;border:2px inset #ffffff}

.up1{background-color: #cccccc;color: #000000;border: 1px outset #ffffff}

.down1{background-color:#cccccc;border:1px inset #ffffff}

.l { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff;

border-right: 2px outset #ffffff; color:#000000;

border-top: 2px outset #ffffff; padding-top: 2;height:18}

.lc { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff;

border-right: 2px outset #ffffff; color:#000000;

border-top: 2px outset #ffffff; padding-top: 2;height:20}

.l-h{ background-color: #cccccc; border-left: 2px outset #ffffff ; border-top: 2px outset #ffffff;color:#000000; }

.l-c{ background-color: #cccccc; border-top: 2px outset #ffffff }

.l-r { background-color: #cccccc; border-right: 2px outset #ffffff; border-top: 2px outset #ffffff;color:#000000;}

.l-hc{ background-color: #cccccc; border-left: 2px outset #ffffff;color:#000000;}

.l-cc{ background-color: #cccccc;color:#000000; }

.l-rc { background-color: #cccccc; border-right: 2px outset #ffffff;color:#000000;}

td{color:#000000;}

-->

</style>

<title>显示属性</title>

</head>

<body style="border:outset 1 #ffffff;margin: 0;background-color: #cccccc;padding:3px" scroll=no>

<SCRIPT LANGUAGE="JavaScript">

<!--

function restore()

{

td1.className="l";td2.className="l";td3.className="l";td4.className="l";td5.className="l";td6.className="l";

td_1.className="l-h";td_2.className="l-c";td_3.className="l-c";td_4.className="l-c";td_5.className="l-c";td_6.className="l-c";

w1.style.display="none";w2.style.display="none";w3.style.display="none";w4.style.display="none";w5.style.display="none";w6.style.display="none";

}

function c1()

{

td1.className="lc";

td_1.className="l-hc";

w1.style.display="block";

}

function c2()

{

td2.className="lc";

td_2.className="l-cc";

w2.style.display="block";

}

function c3()

{

td3.className="lc";

td_3.className="l-cc";

w3.style.display="block";

}

function c4()

{

td4.className="lc";

td_4.className="l-cc";

w4.style.display="block";

}

function c5()

{

td5.className="lc";

td_5.className="l-cc";

w5.style.display="block";

}

function c6()

{

td6.className="lc";

td_6.className="l-cc";

w6.style.display="block";

}

//-->

</SCRIPT>

<form name="free" method="post" target="_target">

<div align="center">

<center>

<table border="0" cellpadding="0" cellspacing="0" width="400" height="61">

<tr>

<td width="50" height="20" align="center" valign="bottom" onclick=restore();c1();><div id="td1" class="lc">背景</div></td>

<td width="50" height="20" align="center" valign="bottom" onclick=restore();c2();><div id="td2" class="l">屏保</div></td>

<td width="50" height="20" align="center" valign="bottom" onclick=restore();c3();><div id="td3" class="l">外观</div></td>

<td width="50" height="20" align="center" valign="bottom" onclick=restore();c4();><div id="td4" class="l">Web</div></td>

<td width="50" height="20" align="center" valign="bottom" onclick=restore();c5();><div id="td5" class="l">效果</div></td>

<td width="50" height="20" align="center" valign="bottom" onclick=restore();c6();><div id="td6" class="l">设置</div></td>

<td width="50" height="20" align="center" valign="bottom" ></td>

<td width="50" height="20" align="center" valign="bottom"></td>

</tr>

<tr  style="">

<td width="50" height="1" align="center" class="l-hc" id="td_1" > </td>

<td width="50" height="1" align="center" class="l-c" id="td_2"> </td>

<td width="50" height="1" align="center" class="l-c" id="td_3"> </td>

<td width="50" height="1" align="center" class="l-c" id="td_4"> </td>

<td width="50" height="1" align="center" class="l-c" id="td_5"> </td>

<td width="50" height="1" align="center" class="l-c" id="td_6"> </td>

<td width="50" height="1" align="center" class="l-c" id="td_"> </td>

<td width="50" height="1" align="center" class="l-r" id="td_"> </td>

</tr>

<tr>

<td width="398" height="360" class="up" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5">

<p align="center">

<div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="325">

<tr>

<td width="100%" height="280">

<div align="center">

<center>

<div style="display:" id=w1><h1>1</h1></div>

<div style="display:none" id=w2><h1>2</h1></div>

<div style="display:none" id=w3><h1>3</h1></div>

<div style="display:none" id=w4><h1>4</h1></div>

<div style="display:none" id=w5><h1>5</h1></div>

<div style="display:none" id=w6><h1>6</h1></div>

</center>

</div>

</td>

</tr>

</table>

</div>

</td>

</tr>

</center>

<tr>

<td width="398" height="37" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5">

<p align="right"><input type="button" value="确定" name="_ok" style="width: 60;height:22" class=up>

<input type="button" value="取消" name="_cancel" style="width: 60;height:22" class=up onclick="window.close();">

<input type="button" value="应用(A)" name="_apply" style="width: 60;height:22" disabled class=up>

</td>

</tr>

</table>

</div>

</form>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

时间： 2024-09-30 13:53:19

仿Windows风格的选项卡和按钮的相关文章

Android UI组件进阶(2)——仿Windows对话框

Android UI组件进阶(2)--仿Windows对话框 在开始本章前先祝大家中秋节快乐哈,相信很多上班的朋友都是放三天假的哈! 有时间的话回家陪陪父母吧!树欲静而风不止,子欲养而亲不待!岁月不饶人! 好了,道理和祝福语就说到这里了,今天给大家准备的是模仿Windows风格对话框! 效果图: 相信大部分的AlertDialog都是下面这个样子的: 今天给大家讲解的对话框是下面这样的: 对比两种对话框,站在用户的角度,相信你更加钟情于第二种颜色鲜明的对话框 好了下面就开始讲解如何制作模仿win

【J2SE】java仿windows记事本

基于J2SE实现的一个记事本程序. 运行程序截图: 工程目录结构: 程序代码: package com.hblg; import java.awt.BorderLayout; import java.awt.FileDialog; import java.awt.Font; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.aw

基于jquery仿360网站图片选项卡切换代码

今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slides"> <div class="in widget-slide" data-jss="tabSelector : '.slide-nav li', viewSe

仿windows的java计算器

import java.awt.*; import javax.swing.*; import java.awt.event.*; public class Calculator extends JFrame implements ActionListener{ private static final long serialVersionUID = 1L; private JButton[] btn; private String[] labels = {"MC","MR&

为Windows窗口标题栏添加新按钮

为Windows窗口标题栏添加新按钮 对于我们熟悉的标准windows窗口来讲,标题栏上一般包含有3个按钮,即最大化按钮,最小化按钮和关闭按钮.你想不想在Windows的窗口标题栏上添加一个新的自定义按钮,满足你的个性化需求,从而也使自己的窗口更具特色呢? 下面我们就讨论一下在delphi中如何给窗口的标题栏上添加新的按钮. 一.实现起来要定义以下过程: 1. 定义DrawCaptButton过程,这个过程的功能是在指定的位置画出按钮. 在过程中要使用win32函数GetSystemMetric

精仿win8风格简约迷你风格扁平化html5网站模版

这是缩略图 模版采用html5设计,仿win8菜单特效,扁平化处理 下载地址:精仿win8风格网站模版 精仿win8风格简约迷你风格扁平化html5网站模版,布布扣,bubuko.com

用Qt写的一个仿Windows记事本程序

闲得无聊加上自己喜欢Qt所以就写了这样一个仿windows记事本的程序,全部功能经测试可用.Qt版本5.5+win7x64 其中有部分逻辑比较乱,大家多多交流 备用链接:https://github.com/piaodonkey/notepad .pro部分: #------------------------------------------------- # # Project created by QtCreator 2015-09-12T21:33:50 # #------------

jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. html代码: <div class="main-page"> <div class="left"> <div class="nav-back"> </div> <div class="

Android实现Windows 8磁贴(Tile)样式按钮

<Android实现Windows 8磁贴(Tile)样式按钮> 效果图如下: 我在网上流传的代码基础上精简.整理出一个简单的类,我暂时把它命名为:Windows8TileImageView,即Windows 8磁贴(Tile)样式按钮,Windows8TileImageView其实就是继承于标准Android ImageView,单击该Windows8TileImageView有收缩.侧边收缩等比较有趣的效果.现在把Windows8TileImageView这个类的全部代码贴出来: pack