选项卡14

最新推荐文章于 2021-12-21 16:18:21 发布
最新推荐文章于 2021-12-21 16:18:21 发布
阅读量308 收藏
点赞数
分类专栏： DHTML类 文章标签： filter table html css 微软 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuxuan0476/article/details/4188752
版权

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0059)http://image.hnol.net/200504/dysr/html/microsoft_css_02.htm -->
<HTML><HEAD><TITLE>图片样式</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
 SCROLLBAR-ARROW-COLOR: #f598a9; SCROLLBAR-BASE-COLOR: #b51829
}
</STYLE>

<META content="MSHTML 6.00.3790.4426" name=GENERATOR></HEAD>
<BODY style="OVERFLOW: auto">
<CENTER>
<TABLE style="LEFT: 0px; POSITION: relative; TOP: 0px" cellSpacing=0
cellPadding=0 width=1000 bgColor=#b51829>
  <TBODY>
  <TR>
    <TD height=50>
      <CENTER></CENTER></TD></TR>
  <TR>
    <TD height=100>
      <CENTER>
      <DIV
      style="FONT-SIZE: 35pt; FILTER: shadow(add=1,color:#00ef00, direction=135, strength=3); WIDTH: 464px; COLOR: #00ff00; LINE-HEIGHT: 120%; FONT-FAMILY: 楷体_GB2312; HEIGHT: 56px"
      align=center>微软图片样式实例</DIV></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=333>
            <P align=center><IMG height=333 src="图片样式.files/8405.jpg"
            width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500"
      height="333"&gt;______原图<BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=333>
            <P align=center><IMG
            style="FILTER: progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
            height=333 src="图片样式.files/8405.jpg" width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            style="filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500" height="333"&gt;</FONT><FONT style="FONT-SIZE: 14px"
            face=Arial color=#ffffff>______Mirror
      对称<BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=333>
            <P align=center><IMG
            style="FILTER: progid:DXImageTransform.Microsoft.BasicImage(invert=1)"
            height=333 src="图片样式.files/8405.jpg" width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            style="filter:progid:DXImageTransform.Microsoft.BasicImage(invert=1)"
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500" height="333"&gt;</FONT><FONT style="FONT-SIZE: 14px"
            face=Arial color=#ffffff>______Invert
      反向<BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=333>
            <P align=center><IMG
            style="FILTER: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)"
            height=333 src="图片样式.files/8405.jpg" width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)"
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500" height="333"&gt;</FONT><FONT style="FONT-SIZE: 14px"
            face=Arial color=#ffffff>______GrayScale
        灰度比例<BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=333>
            <P align=center><IMG
            style="FILTER: progid:DXImageTransform.Microsoft.BasicImage(xray=1)"
            height=333 src="图片样式.files/8405.jpg" width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            style="filter:progid:DXImageTransform.Microsoft.BasicImage(xray=1)"
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500" height="333"&gt;</FONT><FONT style="FONT-SIZE: 14px"
            face=Arial color=#ffffff>______X-Ray
      X光栅<BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=333>
            <P align=center><IMG
            style="FILTER: progid:DXImageTransform.Microsoft.Pixelate(maxsquare=5)"
            height=333 src="图片样式.files/8405.jpg" width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=5)"
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500" height="333"&gt;</FONT><FONT style="FONT-SIZE: 14px"
            face=Arial color=#ffffff>______Pixelate
        玛赛克（5）<BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=500>
            <P align=center><IMG
            style="FILTER: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
            height=333 src="图片样式.files/8405.jpg" width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            style="filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500" height="333"&gt;</FONT><FONT style="FONT-SIZE: 14px"
            face=Arial color=#ffffff>______Rotate 90 degrees 旋转(90°)
          <BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=333>
            <P align=center><IMG
            style="FILTER: progid:DXImageTransform.Microsoft.BasicImage(opacity=0.6)"
            height=333 src="图片样式.files/8405.jpg" width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            style="filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0.6)"
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500" height="333"&gt;</FONT><FONT style="FONT-SIZE: 14px"
            face=Arial color=#ffffff>______Opaque
        不透明（0.6）<BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=333>
            <P align=center><IMG
            style="FILTER: progid:DXImageTransform.Microsoft.Emboss" height=333
            src="图片样式.files/8405.jpg" width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            style="filter:progid:DXImageTransform.Microsoft.Emboss"
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500" height="333"&gt;</FONT><FONT style="FONT-SIZE: 14px"
            face=Arial color=#ffffff>______emboss
      雕刻纹理<BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=333>
            <P align=center><IMG
            style="FILTER: progid:DXImageTransform.Microsoft.Engrave" height=333
            src="图片样式.files/8405.jpg" width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            style="filter:progid:DXImageTransform.Microsoft.Engrave"
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500" height="333"&gt;</FONT><FONT style="FONT-SIZE: 14px"
            face=Arial color=#ffffff>______Engrave
      浮雕纹理<BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=333>
            <P align=center><IMG
            style="FILTER: progid:DXImageTransform.Microsoft.MotionBlur(strength=8, direction=135)"
            height=333 src="图片样式.files/8405.jpg" width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=8,
            direction=135)"
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500" height="333"&gt;</FONT><FONT style="FONT-SIZE: 14px"
            face=Arial color=#ffffff>______MotionBlur
        动态模糊<BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD>
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=500>
        <TBODY>
        <TR>
          <TD height=333>
            <P align=center><IMG
            style="FILTER: progid:DXImageTransform.Microsoft.shadow(add=1,color:#aaaaaa,strength=6, direction=135)"
            height=333 src="图片样式.files/8405.jpg" width=500></P></TD></TR>
        <TR>
          <TD height=80><FONT style="FONT-SIZE: 14px" face=Arial
            color=#ffffff>&lt;img
            style="filter:progid:DXImageTransform.Microsoft.shadow(add=1,color:#888888,strength=5,
            direction=135)"
            src="http://img1.video.cctv.com/4/2/5/1/91524/pic/8405.jpg"
            width="500" height="333"&gt;</FONT><FONT style="FONT-SIZE: 14px"
            face=Arial color=#ffffff>______shadow
      边框阴影<BR>　</FONT></TD></TR></TBODY></TABLE></CENTER></TD></TR>
  <TR>
    <TD height=80>
      <CENTER></CENTER></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>

yuxuan0476
关注
专栏目录
Python数据可视化 Pyecharts 制作 Tab 选项卡多图控制
Mr数据杨
06-15 4万+
大家好，我是Mr数据杨。想象一下，Tab就像三国的战场，各个州郡是不同的选项卡，其中隐藏着无尽的可能。就像那些被划分为蜀、魏、吴的三个国家，每个国家都有自己的特色，自己的英雄和战略。基本设置就像是郭嘉、诸葛亮、周瑜这些军师们制定的战略。每个军师都有自己的智谋和策略，就像Python中各种设置让程序更加完善，从而实现各种功能。而Demo，就好比是三国里的那些决定胜负的关键战役。那些战役，就如同程序中的示例，直观地展现出策略是否有效，程序是否运行成功。
6.6 创建选项卡窗体（上）
复行数十步
12-16 2333
目录 1．选项卡窗体的类型 2．创建独立型选项卡窗体 在通常情况下，计算机中管理的信息非常多，应用选项卡控件可以在窗口的有限空间中，高效地管理更多的信息。选项卡不仅广泛地应用在Windows操作系统本身，而且还普遍应用在Office中。在Access系统同样也应用广泛，例如窗体的属性表就是一个典型的应用。 除了选项卡控件之外，Access还提供了分页控件，两者都是对窗体界面进行分页。分页控件实现竖直方向的分页，与Word中的分页符相似，而选项卡控件则实现在水平方向的分页...
Tab选项卡
weixin_44543252的博客
06-09 1013
Tab选项卡 开发工具与关键技术：Visual Studio 2015 作者：徐晶旗 撰写时间：2019年 6月 8日 选项卡是什么呢？选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。下面是我在layui文档中找的一些写tab选项卡的方法实例。 代码的实现： 1. <div class="layui-tab layui-t...
html 纵向选项卡,简单竖向Tab选项卡
weixin_33817338的博客
05-31 1099
*{ padding:0;margin: 0;}.example{ width: 500px;height: 400px; margin: 50px auto 0 auto; }#mytab{ width: 100px; float: left; border-left: 1px solid lightgray; border-bottom:1px solid lightgray;}#mytab ...
6.6 创建选项卡窗体（下）
复行数十步
12-21 1309
3．增加选项卡页 创建选项卡时，默认是两个页，允许设计者添加页，或者把添加的页删除掉。 例 修改教师统计窗体，添加两个页。操作步骤如下： (1)打开“教学管理”数据库，打开教师统计窗体，并切换到设计视图。 (2)用鼠标右击选项卡，在打开的快捷菜单中，单击“插入页”命令。然后再重复操作一遍，在选项卡中插入了两个页。 4．创建相关型选项卡窗体 相关型选项卡窗体是一种主子窗体。主窗体是有数据源的，子窗体放在页上。子窗体和主窗体的数据源之间存在链接关系。有...
CSS实现选项卡切换
This is HuangWenJun' CSDN.
07-22 1990
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>&...
java swing选项卡面板_选项卡面板（JTabbedPane）(示例代码)
weixin_36244383的博客
02-24 986
今天学习了一下Java中的选项卡面板(JTabbedPane)的相关知识，有许多的好玩之处，也有许多不太懂的地方就去问了问度娘。一起看看JTabbedPane的有趣故事：还和以前一样，从代码说起。代码比较长我就直接用图片展示给大家。(1)导入相关的包。这一部分我就不做过多的解释以及说明，就是Java源代码中所用到的一些的包。(2)主函数部分这一部分主要就是定义了一些私有的按钮，以及主函数。主类直接...
JS——选项卡
sunshine_0880的博客
07-14 8843
轮番图也是用类似的效果和方法。效果展示：要做到此效果要想到几点：① 当选择当前项的时候，选择项要具备被选择的样式，同时显示当前内容。② 当选择该项的时候，要把其他项的样式去掉，即样式置为空，其他内容隐藏。代码展示：HTML代码&lt;div class="ele"&gt; &lt;ul&gt; &lt;li class="active"&gt;&lt;a href="#"&gt
在html中选项卡怎么做,基于JS实现网页中的选项卡（两种方法）
weixin_30546201的博客
06-03 1221
基于JS实现网页中的选项卡(两种方法)2019-01-07编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了基于JS实现网页中的选项卡(两种方法)，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。网页中经常会用到选项卡这种东东，说白了就是点击一个选项，下面会弹出这个选项里的内容。方法一：方法一利用简单的代码即可实现，以下是全部的代码；选项卡Box"&gt...
利用jQuery方法实现选项卡的功能
执笔写流年殇的博客
09-19 8173
效果如下： html> charset="UTF-8"> *{ margin: 0; padding: 0; } ul li{ list-style: none; } #box{ w
vue中tab选项卡的实现思路
12-11
在Vue中实现选项卡（Tab）功能是一项常见的任务，尤其在创建复杂Web应用时。本文将详细介绍如何在Vue中实现一个基本的选项卡组件，以及涉及的主要知识点。 首先，选项卡在各种场景下都非常实用，例如在注册和登录...
轻松实现js选项卡切换效果
10-21
为了实现一个简单的JavaScript选项卡切换效果，需要掌握HTML、CSS和JavaScript的基础知识，下面将详细解释如何通过这三种技术结合来制作一个功能完整的选项卡界面。 ### HTML页面布局 在HTML中，页面布局主要由两...
Jquery组件easyUi实现选项卡切换示例
10-21
<p style="font-size:14px">jQuery EasyUI framework 选项卡 小兔子 小狗狗 小猫咪 小萌宠 <li>XXXXXXXXXXXXX <li>YYYYYYYYYYYYY ,method:'get',animate:true"> , closable:true" style="padding...
一个时间字体显示样式
人生何适不艰难 赖是胸中万斛宽
05-15 705
 2008年12月05日 星期五 下午 02:292008年12月05日 星期五 下午 02:29
html特效代码大全
人生何适不艰难 赖是胸中万斛宽
05-15 637
 HTML特效代码1。忽视右键 　 　 或 　 2。加入背景音乐 　 IE: 　 NS: 　 　 *.mid你的背景音乐的midi格式文件 3。简单的window.open方法 　 　 onclick="javascript :window.open(文件路径/文件名,newwindow, 　 toolbar=no,scrollbars=yes,resizable=no,top=0,left
选项卡8
人生何适不艰难 赖是胸中万斛宽
05-15 472
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">雅虎body { margin:0; text-align:center;font-size:12px;}.papanel,#pabd,.paft,#patop{width:348px;}.papanel{backgroun
选项卡1
人生何适不艰难 赖是胸中万斛宽
05-15 418
 // // "filter:progid:DXImageTransform.Microsoft.Fade(Overlap=1.00,Duration=0.4);"function iboxActive(id, key, num, max) {    var menu = document.getElementById(id + "menu");    (menu.getElementsByT
触发事件大全
人生何适不艰难 赖是胸中万斛宽
05-15 354
一般事件 onclick IE3、N2 鼠标点击时触发此事件 ondblclick IE4、N4 鼠标双击时触发此事件 onmousedown IE4、N4 按下鼠标时触发此事件 onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4、N4 鼠标移动时触发此事件 onmouse
选项卡11
人生何适不艰难 赖是胸中万斛宽
05-15 337
 function picsize(obj,MaxWidth){  img=new Image();//新建一个Image对象，用这个对象的width就不会出现width为0的现象  img.src="/fk/blog/obj.src";  if (img.width>MaxWidth)  {    return MaxWidth;  }  else  {    return img.width;
JS实现选项卡
最新发布
05-25
选项卡可以使用 JavaScript 实现，下面是一个简单的示例： HTML 代码： ```html <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">选项卡1</button> <button class="tablinks" onclick="openTab(event, 'tab2')">选项卡2</button> <button class="tablinks" onclick="openTab(event, 'tab3')">选项卡3</button> </div> <div id="tab1" class="tabcontent"> <h3>选项卡1</h3> <p>这是选项卡1的内容。</p> </div> <div id="tab2" class="tabcontent"> <h3>选项卡2</h3> <p>这是选项卡2的内容。</p> </div> <div id="tab3" class="tabcontent"> <h3>选项卡3</h3> <p>这是选项卡3的内容。</p> </div> ``` CSS 代码： ```css .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } ``` JavaScript 代码： ```javascript function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } ``` 在 JavaScript 代码中，`openTab()` 函数接受两个参数。第一个参数是点击事件对象，第二个参数是选项卡的名称。该函数首先隐藏所有选项卡的内容（通过将它们的 `display` 样式属性设置为 `none`），然后将所选选项卡的内容显示出来（通过将其 `display` 样式属性设置为 `block`）。此外，该函数还将所选选项卡的按钮标记为活动状态（通过将其 `className` 属性设置为包含“active”类名的字符串）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值