CSS实现下拉菜单和 Tab切换

纯CSS下拉菜单也有好处，执行效率高，无需考虑客户端是否禁用了JS，定制样式也方便。问题是纯CSS的下拉菜单要支持各种浏览器，得写得好才行。

IE6只支持a标签的hover伪类，并不支持li:hover这种，所以用条件注释把下拉菜单写进<a></a>标签中。
就成这样了：

XHTML代码改写成:

<!--[if lte IE 6]><a href="#"><![endif]-->
<dl>
<dt>一级菜单</dt>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
</dl>
<!--[if lte IE 6]></a><![endif]-->

CSS代码改写成：
dd{
display:none;
}

dl:hover dd,a:hover dd{
display:block;
}

但IE6有:hover伪类在IE6中的BUG。可以给a:hover 加 border:0来解决，所以你代码里有a:hover{border:0;}这一句，再次改写成：

dd{
display:none;
}

dl:hover dd,a:hover dd{
display:block;
}

a:hover{
border:0;
}

此时在IE6中鼠标移动到上面下拉菜单OK了。但给每个菜单加上连接的时候，IE6里又不行了，为什么？不知道。会不会是如果不放在table中的话，浏览器在解析html代码的时候，会提前解析a标签呢？不确定。可能因为table的解析方式是里面内容解析完成后再显示的，反正不管什么原因，

再给IE条件注释里的 a 标签里再套上一个表格，即XHTML代码改写成如下就OK了：

<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
<dl>
<dt><a href="#">一级菜单</a></dt>
<dd><a href="#">二级菜单</a></dd>
<dd><a href="#">二级菜单</a></dd>
<dd><a href="#">二级菜单</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

这就是为什么最后弄了个这么一句话：<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->的原因。

tab 切换

<style type="text/css">
dl {
position:relative;
width:240px;
height:200px;
}
dt {
position:absolute;
left:-2px;
top:-1.5em;
}
dt a {
display:block;
float:left;
margin:1px;
width:78px;
text-align:center;
font:bold 12px/1.8em "宋体", sans-serif;
color:#fff;
text-decoration:none;
background:#666;
}
dt a:hover {
background:orange;
}
dd {
margin:0;
width:240px;
height:200px;
overflow:hidden;
border:1px solid #999;
}
ul {
margin:0;
padding:6px 0;
width:240px;
height:200px;
list-style:none;
}
li {
width:230px;
font:12px/1.8em "宋体", sans-serif;
white-space:nowrap;
overflow:hidden;
}
</style>
</head>
<body>
<br />
<br />
<dl>
<dt><a href="#a" title="">电影</a><a href="#b" title="">电视</a><a href="#c" title="">动漫</a></dt>
<dd>
    <ul id="a">
      <li>·<a href="" title="">电影</a></li>
      <li>·<a href="" title="">电影</a></li>
      <li>·<a href="" title="">电影</a></li>
      <li>·<a href="" title="">电影</a></li>
      <li>·<a href="" title="">电影</a></li>
    </ul>
    <ul id="b">
      <li>·<a href="" title="">电视</a></li>
      <li>·<a href="" title="">电视</a></li>
      <li>·<a href="" title="">电视</a></li>
      <li>·<a href="" title="">电视</a></li>
      <li>·<a href="" title="">电视</a></li>
    </ul>
    <ul id="c">
      <li>·<a href="" title="">动漫</a></li>
      <li>·<a href="" title="">动漫</a></li>
      <li>·<a href="" title="">动漫</a></li>
      <li>·<a href="" title="">动漫</a></li>
      <li>·<a href="" title="">动漫</a></li>
    </ul>
</dd>
</dl>

第二种实现

<style>
* {margin:0; padding:0;}
ul {list-style:none;margin:100px; }
li { float:left; width:80px;   font-size:12px; border:#CCC solid 1px; padding:3px;}
li a {display:block; position:relative; text-decoration:none; text-align:center;}
li span {display:none; }
li a:hover span {display:block; margin:0px; width:320px; height:200px; position:absolute; top:18px; color:#fff; }
#s1 {left:-28px; background:#c00;   }
#s2 {left:-102px; background:#00F   }
#s3 {left:-188px; background:#3F3;   }
#s4 {left:-256px; background:#000;   }
</style>
<ul>
<li><a href="#" title="">电影<span id="s1">电影.....</span></a></li>
<li><a href="#" title="">电视剧<span id="s2">电视剧.....</span></a></li>
<li><a href="#" title="">动漫<span id="s3">动漫.....</span></a></li>
<li><a href="#" title="">全部排行<span id="s4">全部排行....</span></a></li>
</ul>

你可能感兴趣的:(下拉菜单)

  • （十）Ubuntu 20.04+akiaaa大神 Stable Diffusion整合包 AI绘画教程-外挂VAE模型等快捷设置教程 浪淘沙jkp stablediffusionAI作画
    一、说明我们在运行Stable-Diffusion-webuiclip时初始快捷设置为如图所示我们需要显示“外挂VAE模型”以及“clip终止层数”的快捷设置，我们需要在设置中设置参数二、参数设置依次点击设置---》用户界面---》快捷设置列表然后再下拉菜单中选择这两部居然不行，没有出现想要的效果，后来我后天bashwebui.sh-f了一下下，就可以了看下图
  • vue左侧导航栏动态绑定路由，换成横向动态导航栏，并改布局 Spring（小雨点） vue以及前端javascripthtml前端
    1.官网静态导航栏分析处理中心无下拉的菜单下拉菜单我的工作台选项1选项2选项3选项4选项1选项2选项3消息中心订单管理2.router数据格式{path:'/model&
  • Select 下拉菜单选项分组 呆萌很 网页设计html5
    使用元素创建下拉菜单，并使用元素对选项进行分组。元素允许你将相关的元素分组在一起，并为每个分组添加一个标签。城区：东城区西城区朝阳区海淀区浦东新区徐汇区虹口区
  • 一文掌握Selenium的详细使用 数据知道 2025年爬虫和逆向教程selenium测试工具爬虫数据采集
    文章目录1.安装Selenium1.1安装Selenium库1.2下载浏览器驱动2.基础用法2.1启动浏览器2.2查找元素2.3操作元素3.高级功能3.1等待机制3.2处理弹窗3.3执行JavaScript3.4切换窗口或iframe3.5处理Cookies3.6截图3.7处理下拉菜单4.浏览器选项4.1无头模式（Headless）4.2禁用图片加载4.3设置代理5.常见应用场景5.1自动化登录5
  • Idea debug进阶技巧速览（一） OldGod_X debugintellijideajava多线程
    Ideadebug进阶技巧速览（一）本文适合掌握基本debug方法，需要进阶debug技巧的开发人员速览。1.方法调用栈在debug窗口Frames子窗口下拉菜单选择ShowAllFrames，只展示业务自定义方法。2.计算表达式Alt+F8。也可以修改已经存在的值，使其生效之后继续往下运行（将传入的值改成我们期望的值继续后面的测试）3.智能步入Shift+F7。手动选择debug步入路径。4.断
  • 关于Bootstrap的前端面试题及其通俗易懂的答案解析 HappyAcmen 前端技术面试前端bootstraphtml
    文章目录1.什么是Bootstrap？2.Bootstrap的主要特点有哪些？3.Bootstrap中的栅格系统是如何工作的？4.如何在Bootstrap中创建一个按钮？5.如何使一个元素在Bootstrap中可见或隐藏？6.Bootstrap中的导航栏是如何工作的？7.如何在Bootstrap中创建一个下拉菜单？8.Bootstrap中的模态框是如何使用的？9.如何在Bootstrap中实现图片
  • vue登陆下拉菜单 胡桃不是夹子 vue.jsjavascript前端
    vue登陆下拉菜单用户个人信息修改密码退出登录
  • Matplotlib 高级图表绘制与交互式可视化（ipywidgets） eqwaak0 matplotlibmatplotlibpython开发语言人工智能
    目录：ipywidgets介绍1.什么是ipywidgets直接开始：动态调整正弦波频率随机散点图启用交互式模式使用滑块和下拉菜单调整图表样式使用布局管理器创建复杂界面使用动画创建动态图表最后：综合示例：动态仪表盘ipywidgets介绍1.什么是ipywidgetsipywidgets是一个用于JupyterNotebook和JupyterLab的交互式HTML小部件库，允许用户在Jupyter
  • vscode默认终端怎么设置成git bash 一个前端人 前端vscodegitbash
    要将VSCode的默认终端设置为GitBash，可以按照以下步骤操作：打开VSCode并点击左侧菜单栏中的“视图”（View）选项。在下拉菜单中选择“命令面板”（CommandPalette）。在命令面板中输入“Terminal:SelectDefaultProfile”并选择该选项。在弹出的下拉菜单中选择“GitBash”作为默认终端。或者，你也可以通过以下方式进行设置：打开VSCode并点击左
  • 省市区三级联动 The_era_achievs_hero javalinux数据库
    题十一：省市区三级联动要求：通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。当点击第一级下拉菜单，第二级菜单的内容会自动匹配；选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。原理：架构出三个选择的框架，用change分别监听provice和city表单元素值的变化。通过获取实时的值来改变下一级里面的内容，新增
  • vue3.x的Teleport详细解读 黑码小帅 vue知识点vue.jsjavascript前端vuetypescript前端框架bootstrap
    Teleport是Vue3.x中引入的一个新特性，用于将组件的内容渲染到DOM树中的任意位置，而不受组件自身DOM结构的限制。这在处理模态框、通知、下拉菜单等需要脱离当前组件层级的情况下非常有用。1.基本用法Teleport的基本语法如下：这是一个模态框在这个例子中，组件会将内部的渲染到标签中，而不是在当前组件的DOM结构中。2.to属性to属性指定了Teleport内容的目标位置。它可以是一个C
  • flutter 专题 五十三 Flutter 底部向上动画弹出菜单 leluckys Flutter面试与实战flutter前端javascript
    在移动应用开发中，我们经常会遇到弹出菜单的开发需求，对于下拉菜单可以参考Flutter自定义下拉菜单，而如果是向上的弹出菜单或者更加负责的扇形菜单，则需要开发者进行自定义开发。上面是自定义向上弹出菜单的示例，如果要实现上面的效果，需要开发者对动画（AnimationController、Animation）和Flow组件能够很熟练的进行使用。，为了方便大家快速的进行开发，现在我们将它封装城一个组件
  • WPS OFFICE制作多级下拉菜单 Yvonne978 EXCELwpsexcel
    1.名称管理器—新建名称【公式】选项卡下的【名称管理器】，点击【新建】为省份、市、县这三个级别的下拉框数据新建名称，如图：一组对应关系，如下例：2.数据—数据有效性联动关系设置完成之后，选中要设置下拉框的单元格1）一级下拉框首先选中省份下的单元格，找到【数据】-【数据有效性】选项卡，允许：选择“序列”，然后在来源：快捷键F3，可以弹出设置的名称，可以选择，这里选择“省份”2）二级下拉框选中市下的单
  • Chrome 130 版本开发者工具（DevTools）更新内容
    Chrome130版本开发者工具（DevTools）更新内容一、网络（Network）面板更新1.重新定义网络过滤器网络面板获新增了一些过滤条件，这些过滤条件是根据反馈重新设计的，特定于类型的过滤条件保持不变，即在简洁的多选栏中显示一组标记。可以通过Cmd/Ctrl键+点击来多选类型过滤条件。为了简化界面，我们将与隐藏、屏蔽和第三方相关的复选框移到了下拉列表下方。该列表包含一个数字，表示下拉菜单下
  • 用CSS实现下拉菜单的多种方法 yezi1305 html(div+css)
    本文转自：http://www.51xuediannao.com/js/nav/ullidaohang.html用CSS实现下拉菜单的多种方法详细出处参考：http://www.jb51.net/article/5959.htmULLI结构实现二级导航菜单(HTML+CSS+JS)_懒人建站http://www.51xuediannao.com0?"":"")+"sfhover";}sfEls[i
  • CSS 实践：两种实现下拉菜单的方法 iteye_6481 xhtmljavascriptViewUI
    CSS伪类的一个非常重要的应用就是下拉菜单。最近在学习中发现网上纯粹用CSS实现的下拉菜单主要有两种思路：一种是通过visibility属性的切换，另一种是基于display属性的切换。二者在大体的结构上是一致的，只是对于二级子菜单的隐藏和显示的实现策略上有所不同。下拉菜单的HTML代码如下：CSS下拉菜单-->-->menu_0item_0item_1item_2item_3item_4menu
  • Vue - elementUI 下拉菜单dropdown组件中command方法添加额外参数 A-sleep Vueelementuivue.jsjavascript
    在使用dropdown组件的时候，需要的参数可能很多，不仅仅是command一个参数。这就需要通过composeValue构造一个结构了。//方法部分的处理handleCommand(command){console.log(command)},composeValue(item,id){return{button:item,id:id}}打印结果table中编辑投放列表handleCommand
  • Android从入门到精通——学习笔记：Chapter05-高级UI组件 Ly.-. android学习笔记
    Chapter05高级UI组件本章介绍Android开发常用的一些高级UI组件，主要包括列表类组件、切换类组件以及通用组件。本章主要学习一些可以滑动的列表或是切换类的组件，通过此类组件可以实现动态UI界面的效果。5.1列表类组件在Android中提供了两种列表类组件：一种是下拉列表框，通常用于弹出一个下拉菜单供用户选择，用Spinner表示；另一种是列表视图，通常用于实现在一个窗口中只显示一个列表
  • 1、工具准备：pycharm 和通义灵码 PyAIGCMaster pycharmidepython
    在PyCharm中安装通义灵码及其他AI辅助代码工具的方法主要包括以下步骤：1.**打开PyCharm**：首先确保你已经安装了PyCharm，如果没有安装，可以从PyCharm的官方网站下载并安装。2.**打开设置**：在PyCharm中，通过点击菜单栏中的“File”，然后在下拉菜单中选择“Settings”（或使用快捷键`Ctrl+Alt+S`）打开设置对话框。3.**安装插件**：在设置对
  • 【免越狱】iOS任意版本号APP下载 火星技术 智能手机
    下载地址https://pan.quark.cn/s/570e928ee2c4软件介绍下载iOS旧版应用，简化繁琐的抓包流程。一键生成去更新IPA（手机安装后，去除AppStore的更新检测）。软件界面使用方法一、直接搜索方式搜索APP，双击选择。双击选择要下载的版本。在iTunes中下载即可。二、复制APP链接方式在iTunes下载按钮右侧下拉菜单中，选择【复制链接】。双击选择要下载的版本。在i
  • 实例研究：设计一个文档编辑器（1） workflower UML建模编辑器设计模式需求分析软件工程软件构建
    通过设计一个称为Lexi的“所见即所得”（或“WYSIWYG”）的文档编辑器，来介绍设计模式的实际应用。我们将会看到在Lexi和类似应用中，设计模式是怎样解决设计问题的。在本章最后，通过这个例子的学习你将获得8个模式的实用经验。图2-1是Lexi的用户界面。文档的所见即所得的表示占据了中间的大矩形区域。文档能够以不同的格式风格自由混合文本和图形。文档的周围是通常的下拉菜单和滚动条，以及一些用来跳到
  • Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件 王二红 +Vue3elementplusel-dropdownvue3把command加上.stop下拉菜单组件如何点击不冒泡stop事件修饰符阻止点击冒泡click.stop无法使用
    前言平常只需要给@click事件加入即可，但现在使用stop修饰符无法支持和识别语法。本文实现了在vue3+elementplus项目开发中，解决el-dropdown下拉菜单组件时点击事件冒泡问题（激活触发外层嵌套元素的点击事件，从而同时触发），使用.stop修饰符又没有地方可以加入的问题。本文提供完美解决方案，保证100%解决。如下图所示，常见于这种需求页面，点击“···”图标时就会引发点击事
  • uniapp下拉菜单 h_6543210 uni-app前端
    一、示例图1.状态为多选，选中后显示已选择的数量，如下图：2.排序为单选，显示当前选中的名称，如下图：二、状态、排序相关代码部分代码使用了的uView组件Icon图标|uView2.0-全面兼容nvue的uni-app生态框架-uni-appUI框架0)?'yes-title':'no-title'">状态0"class="sumStyle">{{this.selectStateArr.lengt
  • 如何在WordPress中轻松创建Mega菜单 Web极客码 javascript前端htmlWordPress
    在建立一个内容丰富的网站时，传统的下拉菜单往往难以满足复杂网站的需求。Mega菜单，一种能够显示多列或大块内容的菜单，可以有效提升用户体验，让网站导航更直观，内容更有条理，特别适合那些产品繁多的电商网站或内容丰富的博客。本文将向你介绍如何通过插件和手动代码两种方式在WordPress中创建Mega菜单，并为你推荐一些优秀的插件，如MaxMegaMenu、QuadMenu和JetMenu。为什么要使
  • excel如何筛选重复项 牛马baby excel
    在Excel中筛选重复项有几种方法，下面列举其中两种常见的方法：方法一：使用“条件格式”功能选中需要筛选的数据列。在“开始”选项卡中，找到“条件格式”功能，点击下拉菜单选择“突出显示单元格规则”。选择“重复值”，这时重复的值将会被高亮显示出来。方法二：使用“删除重复项”功能选中需要筛选的数据列。在“数据”选项卡中，点击“删除重复项”。在弹出的对话框中，确保只选中了需要检查的列，然后点击“确定”。这
  • mathtype如何嵌入到word中 weixin_42408281 word经验分享笔记
    1.点击文件进入word文档文件后点击左上角的文件，点击进入选项菜单。2.点击加载项在左侧的菜单中点击加载项，在右侧窗口找到底部的管理选项。3.选择模板下拉菜单选择模板后点击后面的转到，浏览新窗口中的模板列表，点击“转到”4.勾选mathtype加载项找到并勾选mathtype加载项后点击添加，确定，点击菜单栏中出现的mathtype选项就能使用对应功能了。
  • Playwright 精通系列第五篇：表单处理与文件上传/下载 weixin_44872675 Playwright深入学习python
    在自动化测试中，表单操作和文件上传/下载是两大常见需求。表单操作不仅包括输入框和按钮的交互，还涉及到单选框、多选框、下拉菜单等复杂组件。而文件上传和下载更是许多用户测试流程中的难点，尤其是在处理非标准化的文件组件时。本篇文章将深入探讨表单处理和文件上传/下载的核心功能，结合实战案例，列举常见问题和解决思路，帮助你更高效地完成自动化测试。1.Playwright表单处理的优势链式操作简洁高效：Pla
  • mac 备份android 手机通讯录导入iphone,iphone如何导出通讯录（轻松教你iPhone备份通讯录的方法）... weixin_39762838 mac备份android手机通讯录导入iphone
    在日新月异的手机更替中，换手机已经成为一个非常稀松平常的事情，但将旧手机上面的通讯录导入到新手机还是让不少小伙伴为难，本篇将给大家详细讲解这方面的知识：“苹果手机通讯录怎么导入到新手机”及“安卓手机通讯录导入到新手机”的方法。一、苹果手机通讯录导入到新手机常用方法(SIM卡导入)在苹果手机主频幕上找到“设置”，单击进入设置菜单，下拉菜单列表，点击“邮件、通讯录、日历”，然后找到“导入SIM卡通讯录
  • 关闭Windows自动更新的6种方法 Gemini1995 windows
    在Windows操作系统中，可以使用多种方法来关闭自动更新。以下是其中一些常用的方法：使用设置应用：打开“设置”应用（Win+I），选择“更新和安全”。在左侧菜单中选择“Windows更新”。点击“更改活动时间”或“高级选项”。在“更新选项”下拉菜单中选择“通知我但不自动下载或安装”或“从不检查更新”。通过服务管理器：打开“服务”管理器，可以通过在运行对话框中输入services.msc来打开。找
  • 【Python】tkinter及组件如何使用 小九不懂SAP 我的Python日记python开发语言tkinter
    一、tkinter的应用场景tkinter是Python的标准GUI（图形用户界面）库，它提供了丰富的控件和工具，使得开发者能够轻松创建跨平台的桌面应用程序。以下是一些tkinter的常见应用场景：桌面应用程序开发：开发者可以使用tkinter来创建各种桌面应用程序，如文本编辑器、计算器、图片查看器、游戏等。这些应用程序可以具有复杂的用户界面，包括窗口、按钮、文本框、下拉菜单、滚动条等。数据可视化
  • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
     这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
  • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
      1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
  • [航天与宇宙]为什么发射和回收航天器有档期 comsci
           地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
  • linux下批量替换文件内容 商人shang linux替换
    1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
  • 网页在线天气预报 oloz 天气预报
    网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
  • SpringMVC和Struts2比较 杨白白 springMVC
    1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
  • refuse copy, lazy girl! 小桔子 copy
           妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
  • apache与php整合 aichenglong php apache web
    一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
  • Maven常用内置变量 AILIKES maven
    Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
  • java的类和对象 百合不是茶 JAVA面向对象 类 对象
    java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
  • JS控制页面输入框为只读 bijian1013 JavaScript
    在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
  • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
            对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
  • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
    常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
  • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
    1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
  • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
    nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
  • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
  • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
    参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
  • 数据库连接池的工作原理 chicony 数据库连接池
           随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
  • java 关键字 CrazyMizzz java
    关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
  • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
    Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
  • 单态设计模式 dcj3sjt126com 设计模式
      单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
  • svn locked dcj3sjt126com Lock
    post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
  • ARM寄存器学习 e200702084 数据结构C++cC#F#
    无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
  • 常用编码资料 gengzg 编码
    List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
  • 进程 vs. 线程 hongtoushizi 线程linux进程
    我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
  • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
    一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
  • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
         字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
  • 枚举类型的单例模式 zhb8015 单例模式
    E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
  • Kafka+Storm+HDFS ssydxa219 storm
    cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
  • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
    System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他