JavaScript+Css打造三种简洁的Tab网页选项卡

<!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>
<title>JavaScript+Css打造三种简洁的Tab网页选项卡_网页代码站(www.webdm.cn)</title>
<style type="text/css"> 
<!--
body,div,ul,li{
 margin:0 auto;
 padding:0;
}
body{
 font:12px "宋体";
 text-align:center;
}
a:link{
 color:#00F;
 text-decoration:none;
}
a:visited {
 color: #00F;
 text-decoration:none;
}
a:hover {
 color: #c00;
 text-decoration:underline;
}
ul{
 list-style:none;
}
.main{
 clear:both;
 padding:8px;
 text-align:center;
}
/*第一种形式*/
#tabs0 {
 height: 200px;
 width: 400px;
 border: 1px solid #cbcbcb;
 background-color: #f2f6fb;
}
.menu0{
 width: 400px;
}
.menu0 li{
 display:block;
 float: left;
 padding: 4px 0;
 width:100px;
 text-align: center;
 cursor:pointer;
 background: #FFFFff;
}
.menu0 li.hover{
 background: #f2f6fb;
}
#main0 ul{
 display: none;
}
#main0 ul.block{
 display: block;
}
/*第二种形式*/
#tabs1{
 text-align:left;
 width:400px;
}
.menu1box{
 position:relative;
 overflow:hidden;
 height:22px;
 width:400px;
 text-align:left;
}
#menu1{
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}
#menu1 li{
 float:left;
 display:block;
 cursor:pointer;
 width:72px;
 text-align:center;
 line-height:21px;
 height:21px;
}
#menu1 li.hover{
 background:#fff;
 border-left:1px solid #333;
 border-top:1px solid #333;
 border-right:1px solid #333;
}
.main1box{
 clear:both;
 margin-top:-1px;
 border:1px solid #333;
 height:181px;
 width:400px;
}
#main1 ul{
 display: none;
}
#main1 ul.block{
 display: block;
}
/*第三种形式*/
.menu2box{
 position:relative;
 overflow:hidden;
 height:22px;
 width:400px;
 text-align:left;
 background: #FFFFff;
}
#tabs2 {
 height: 200px;
 width: 400px;
 border: 1px solid #cbcbcb;
 background-color: #f2f6fb;
}
#tip2{
 position:absolute;
 top:0;
 left:0;
 height:22px;
 line-height:22px;
 z-index:0;
 width:100px;
 background: #f2f6fb;
}
#menu2{
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}
#menu2 li{
 display:block;
 float: left;
 padding: 4px 0;
 width:100px;
 text-align: center;
 cursor:pointer;
}
-->
</style>
<script> 
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
 var tli=document.getElementById("menu"+m).getElementsByTagName("li");
 var mli=document.getElementById("main"+m).getElementsByTagName("ul");
 for(i=0;i<tli.length;i++){
  tli[i].className=i==n?"hover":"";
  mli[i].style.display=i==n?"block":"none";
 }
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
 if(n!=0 && m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
 document.getElementById("tip"+m).style.left=n*100+'px';
 document.getElementById("main2").innerHTML=m3[n];
}
//-->
</script>
</head>
<body>
<br />
<br />
<!--第一种形式-->
<div id="tabs0">
 <ul class="menu0" id="menu0">
  <li onclick="setTab(0,0)" class="hover">新闻</li>
  <li onclick="setTab(0,1)">评论</li>
  <li onclick="setTab(0,2)">技术</li>
  <li onclick="setTab(0,3)">点评</li>
 </ul>
 <div class="main" id="main0">
  <ul class="block"><li>新闻列表</li></ul>
  <ul><li>评论列表</li></ul>
  <ul><li>技术列表</li></ul>
  <ul><li>点评列表</li></ul>
 </div>
</div>
<br />
<br />
<!--第二种形式-->
<div id="tabs1">
 <div class="menu1box">
  <ul id="menu1">
   <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
   <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
   <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
   <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
  </ul>
 </div>
 <div class="main1box">
  <div class="main" id="main1">
   <ul class="block"><li>新闻列表</li></ul>
   <ul><li>评论列表</li></ul>
   <ul><li>技术列表</li></ul>
   <ul><li>点评列表</li></ul>
  </div>
 </div>
</div>
<br />
<br />
<!--第三种形式-->
<div id="tabs2">
 <div class="menu2box">
  <div id="tip2"></div>
  <ul id="menu2">
   <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
   <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
   <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
   <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
  </ul>
 </div>
  <div class="main" id="main2">
网页代码站
 </div>
</div>
</body>
</html>
  
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

你可能感兴趣的:(JavaScript)

  • 第2章-01-网站中的资源介绍 黑夜开发者 Web爬虫入门与实战精讲网络爬虫pythonselenium网站资源
    作者简介，黑夜开发者，CSDN领军人物，全栈领域优质创作者✌，CSDN博客专家，阿里云社区专家博主，2023年CSDN全站百大博主。数年电商行业从业经验，历任核心研发工程师，项目技术负责人。本文已收录于专栏：Web爬虫入门与实战精讲，后续完整更新内容如下。文章目录网站资源概览1.HTML文档2.CSS样式表3.JavaScript脚本4.图片5.字体6.视频与音频文件总结网站资源概览一个现代网站，
  • 11-数据传输与加密解密技术详解：格式、算法与安全实践 只不过是胆小鬼罢了 网络安全基础入门安全密码学
    在现代Web开发与网络安全领域，数据传输与加密解密技术是保障数据安全和隐私的关键。本文将深入探讨数据传输格式、加密算法、密码存储、代码混淆等关键技术，结合实际案例与最佳实践，为开发者和安全从业者提供全面的指导。一、数据传输格式1.常见数据传输格式1.1JSONJSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成。JSON支
  • 12_JavaScript_实现日期 东东__net javascript开发语言
    目录newDate()常用方法getFullYear获取年getMonth获取月getDate获取日期getDay获取周几getHours获取小时getMinutes获取分钟getSeconds获取秒getTime获取到某个时间的毫秒数/时间戳每个获取的方法都有一个对应的设置方法获取时间差定时器作业js提供的内置的构造函数,专门用来获取时间的newDate()//在不传参数的情况下,默认返回当前时
  • 「React源码分析」一. React开源项目概览 英国大爷扫广场 2021SC@SDUSCnode.jshtml5react.js源码
    2021SC@SDUSCReact简介正如React项目官网所说，React是一个「用于构建用户界面的JavaScript库」。人们往往也会将React与Vue、Angular作为前端三大框架进行对比（但如今Angular的热度也越来越小了，而前两者的社区规模和热度仍在不断发展壮大）。React相对其他前端框架（说前端框架其实并不准确，因为React早已不再单纯地面向“前端”，本身也并不是所谓的“
  • 深入理解 React 架构从概览到核心机制 贵州数擎科技有限公司 react.js架构前端
    开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：github晓智元宇宙、数字孪生引擎、前端面试题大家好！我是[晓智]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！
  • html5炫酷3D数字时钟项目开发实践 木木黄木木 html5前端html53d前端
    炫酷3D数字时钟项目开发实践这里写目录标题炫酷3D数字时钟项目开发实践项目概述技术栈核心技术实现1.3D翻转效果实现2.数字显示与翻转动画3.霓虹灯发光效果4.时间更新逻辑技术难点与解决方案1.3D翻转动画的流畅性2.数字更新的同步性3.发光效果的性能优化项目总结项目改进方向项目概述这是一个基于HTML5、CSS3和JavaScript实现的3D数字时钟项目。项目的主要特点是通过3D翻转动画来展示
  • 红宝书第九讲：JavaScript对象创建与属性描述符详解 前端javascript
    红宝书第九讲：JavaScript对象创建与属性描述符详解资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、对象创建的三种方式JavaScript中创建对象主要有以下方式：1.对象字面量（直接创建）直接在代码中写键值对：letperson={name:"Alice",age:25};2.构造函数（new关键字）1通过构造函数创建对象实例：functionPers
  • HTML网页设计制作大作业 基于HTML+CSS+JavaScript实现炫丽口红网化妆品网站(10页) html网页制作 网页设计htmlcssjavascript美食前端课程设计HTML网页制作
    文章目录一、‍网站题目二、✍️网站描述三、网站介绍四、网站演示五、⚙️网站代码HTML结构代码CSS样式代码六、如何让学习不再盲目七、更多干货一、‍网站题目美妆介绍、美妆分享、品牌化妆品官网网站、等网站的设计与制作。❤【作者主页——获取更多优质源码】❤【学习资料/简历模板/面试资料/网站设计与制作】❤【web前端期末大作业——毕设项目精品实战案例】二、✍️网站描述️网页中包含：Div+CSS、鼠标
  • 有哪些使用 DHTMLX 小部件创建 JavaScript 数据透视网格的关键点？ CodeCraft Studio UI控件javascript数据分析ui
    Capterra最新的技术趋势调查将数据管理列为金融企业在采用新软件解决方案时面临的主要挑战之一。现成的工具可能不够灵活，无法满足特定要求。因此，组织考虑投资定制解决方案（如数据透视表）来满足其数据管理和分析需求是合理的。DHTMLX专注于JavaScript和HTML5UI小部件和库，以帮助开发人员更快地构建功能丰富的、交互式的Web界面。遵循现代网络开发的标准和做法，DHTMLX提供针对桌面和
  • 红宝书第七讲：this绑定与强制类型转换详解（小白指南） 前端javascript
    红宝书第七讲：this绑定与强制类型转换详解（小白指南）资料取自《JavaScript高级程序设计（第5版）》。查看所有教程：红宝书学习大纲一、this绑定：对话中的主角是谁？简单比喻假设你在餐厅点菜，this相当于当前服务的服务员：不同场景服务员会变：包厢用餐→专属服务员（对象方法）/大堂吧台→公共服务员（全局对象）四大绑定规则默认绑定→指向全局（餐厅大厅服务员）function找服务员(){c
  • HandyJSON原理 Unlimitedz app开发swift开发语言ios
    HandyJSON的优势JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,应用广泛.在App的使用过程中,服务端给移动端发送的大部分都是JSON数据,移动端需要解析数据才能做进一步的处理.在解析JSON数据这一块,目前Swift中流行的框架基本上是SwiftyJSON,ObjectMapper,JSONNeverDie,HandyJSON这么几种.我们应该如何
  • 红宝书第十五讲：详解JavaScript迭代器与生成器：Symbol.iterator与yield 前端javascript
    红宝书第十五讲：详解JavaScript迭代器与生成器：Symbol.iterator与yield资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、迭代器（Iterator）的“传送带”模式迭代器像一个可暂停的传送带，逐项提供数据。任何对象实现Symbol.iterator方法即可成为可迭代对象，供for...of等遍历1。示例：手动控制数组迭代器constco
  • 红宝书第十四讲：详解JavaScript集合类型：Map、Set、WeakMap 前端javascript
    红宝书第十四讲：详解JavaScript集合类型：Map、Set、WeakMap资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、Map：钥匙任选的“保险箱”Map的键可以是任意数据类型（如对象、函数），不像普通Object只能用字符串/符号作为键。适合需要复杂键的场景1。示例：员工信息管理//创建Map（支持链式操作）constemployeeMap=newM
  • 红宝书第十五讲：详解JavaScript迭代器与生成器：Symbol.iterator与yield 前端javascript
    红宝书第十五讲：详解JavaScript迭代器与生成器：Symbol.iterator与yield资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、迭代器（Iterator）的“传送带”模式迭代器像一个可暂停的传送带，逐项提供数据。任何对象实现Symbol.iterator方法即可成为可迭代对象，供for...of等遍历1。示例：手动控制数组迭代器constco
  • 红宝书第十二讲：详解JavaScript中的工厂模式与原型模式等各种设计模式 前端javascript
    红宝书第十二讲：详解JavaScript中的工厂模式与原型模式等各种设计模式资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲工厂模式和原型模式解析一、工厂模式：像订外卖一样创建对象工厂模式就像一个“对象生成器”，只需要告诉它“我要什么”，它就会自动生成并返回对应的对象。适合需要批量创建复杂对象的场景1。案例：点餐系统假设你经营奶茶店，需要根据订单类型生成不同配置的
  • CSS3的弹性布局 人生的方向随自己而走 2023年前端项目空间2022年Java空间HTML5+CSScss3css前端
    CSS3弹性盒子(FlexBox)弹性盒子是CSS3的一种新的布局模式。CSS3弹性盒（FlexibleBox或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。官网地址学习路径:CSS3弹性盒子-JavaScript中文网-JavaScript教程
  • 红宝书第六讲：作用域链与闭包：厨房里的调味料架原理 前端javascript
    红宝书第六讲：作用域链与闭包：厨房里的调味料架原理资料取自《JavaScript高级程序设计（第5版）》。查看所有教程：红宝书学习大纲一、什么是作用域链？（洋葱层级结构）想象你在厨房做菜，每个调料瓶按使用频率由近到远摆放：当前厨房台面：手边的盐、酱油→相当于函数内部变量（局部作用域）冰箱里的辣椒酱：常用但稍远→外层函数的变量（父级作用域）储藏室的大米：最远的储备→全局变量（全局作用域）作用域链的查
  • 红宝书第五讲：函数声明与表达式小白详解 前端javascript
    红宝书第五讲：函数声明与表达式小白详解资料取自《JavaScript高级程序设计（第5版）》。查看所有教程：红宝书学习大纲一、函数声明：先上车后买票1.基本语法用function关键字直接定义函数：function打招呼(){console.log("你好！");}2.核心特点提前可用（提升）：函数声明会被自动提升到作用域顶部，可以先调用后定义1：打个招呼();//✅正常执行function打个招
  • 红宝书第四讲：JavaScript原始值与引用值行为差异详解 前端javascript
    红宝书第四讲：JavaScript原始值与引用值行为差异详解资料取自《JavaScript高级程序设计（第5版）》。查看所有教程：红宝书学习大纲一、基本定义与存储方式原始值（PrimitiveValues）类型：包括字符串（String）、数字（Number）、布尔值（Boolean）、null、undefined、Symbol、BigInt1。存储方式：直接存储在栈内存中，占用固定大小空间。例如
  • 红宝书第一讲：JavaScript 语法与数据类型详解 前端javascript
    红宝书第一讲：JavaScript语法与数据类型详解资料取自《JavaScript高级程序设计（第5版）》。查看所有教程：红宝书学习大纲一、基本数据类型（原始类型）JavaScript的原始类型是最基础的数据单元，不可再拆分：数字（Number）包含整数、小数、特殊值NaN（非数字）、Infinity（无穷大）例子：constage=25;//整数constprice=9.99;//小数const
  • 红宝书《JavaScript高级程序设计（第5版）》学习大纲 前端javascript
    红宝书《JavaScript高级程序设计（第5版）》学习大纲《JavaScript高级程序设计（第5版）》是JavaScript领域的经典“红宝书”，它从基础语法讲到高级特性，还包含浏览器环境和前端工程化等内容。本书2024年12月出版，接下来数篇文章，我将用通俗易懂的方式，把书中的知识点一一详细介绍。搭配书本一起看，效果会更好。本书链接一、JavaScript基础核心1）.语言基础语法与数据类型
  • 前端面试题100题：问答精选与简明解析 薛飞之 前端react.jsjavascript前端框架
    HTML5有哪些新特性？语义标签（如，），多媒体标签（如，），离线存储（localStorage，sessionStorage），新的表单控件（如，）。CSS3有哪些新特性？边框圆角（border-radius），阴影（box-shadow，text-shadow），渐变（linear-gradient，radial-gradient），弹性盒模型（flexbox），媒体查询。JavaScript
  • 如何优化Flutter和React Native与原生平台交互的性能，同时保证数据类型安全和线程隔离？ JafarOne reactnativeflutter安全
    在开发跨平台移动应用时，优化与原生平台的交互性能至关重要。Flutter和ReactNative分别提供了不同的机制进行数据交换和操作，但在性能优化、数据类型安全以及线程隔离方面都有需要提升的地方。本文将从这三方面展开探讨，同时提供实用示例帮助理解。一、优化通信机制1.减少桥接调用频率ReactNative:利用批量处理请求，减少JavaScript与原生之间的桥接次数。示例：使用原生端定时任务聚
  • JavaScript性能优化实战手册：从V8引擎到React的毫秒级性能革命 一个天蝎座 白勺 程序猿 JavaScriptjavascript性能优化react.js
    目录一、性能优化的本质挑战1.1浏览器渲染管线的性能瓶颈2.1内存管理优化2.2执行效率优化2.3网络传输优化三、React框架深度调优3.1渲染性能优化3.2性能监控体系四、企业级优化案例4.1电商平台首页优化4.2数据可视化大屏优化五、新一代性能优化技术5.1WASM性能突破5.2浏览器新特性六、性能工程体系构建6.1持续性能监控6.2性能优化一、性能优化的本质挑战1.1浏览器渲染管线的性能瓶
  • WebGPU实战：Three.js性能优化新纪元 AWS官方合作商 javascript服务器开发语言
    一、WebGPU技术突破解析1.1传统WebGL的架构瓶颈graphLRA[JavaScript]-->B[WebGLBinding]B-->C[OpenGLES]C-->D[GPUDriver]D-->E[GPUHardware]1.2WebGPU的现代架构优势graphLRA[WGSLShader]-->B[ComputePipeline]A-->C[RenderPipeline]B-->D[
  • 红宝书第十五讲：详解JavaScript迭代器与生成器：Symbol.iterator与yield 前端javascript
    红宝书第十五讲：详解JavaScript迭代器与生成器：Symbol.iterator与yield资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、迭代器（Iterator）的“传送带”模式迭代器像一个可暂停的传送带，逐项提供数据。任何对象实现Symbol.iterator方法即可成为可迭代对象，供for...of等遍历1。示例：手动控制数组迭代器constco
  • 红宝书第十二讲：详解JavaScript中的工厂模式与原型模式等各种设计模式 前端javascript
    红宝书第十二讲：详解JavaScript中的工厂模式与原型模式等各种设计模式资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲工厂模式和原型模式解析一、工厂模式：像订外卖一样创建对象工厂模式就像一个“对象生成器”，只需要告诉它“我要什么”，它就会自动生成并返回对应的对象。适合需要批量创建复杂对象的场景1。案例：点餐系统假设你经营奶茶店，需要根据订单类型生成不同配置的
  • 红宝书第十一讲：超易懂版「ES6类与继承」零基础教程：用现实例子+图解实现 前端javascript
    红宝书第十一讲：超易懂版「ES6类与继承」零基础教程：用现实例子+图解实现资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、ES6类的核心语法：把事物抽象成“模板”想象你要设计一款「动物养成游戏」，需要创建多种动物对象。ES6的class就是一个代码模板：//基础类（Animal是模板，有名称和吃东西方法）classAnimal{constructor(name
  • 探索HTML5 Canvas：创造动态与交互性网页内容的强大工具 易xingxing html5前端html
    探索HTML5Canvas：创造动态与交互性网页内容的强大工具引言在HTML5的众多新特性中，Canvas无疑是最引人注目的元素之一。它为网页设计师和开发者提供了一个通过JavaScript和HTML直接在网页上绘制图形、图像以及进行动画处理的画布。Canvas的灵活性和强大功能，使得它成为创造动态、交互性网页内容的首选工具。本文将深入探讨HTML5Canvas的基本用法、应用场景以及如何利用它来
  • JavaScript 判断对象是否为空对象的技术讲解 易xingxing javascript前端开发语言
    JavaScript判断对象是否为空对象的技术讲解1.为什么需要判断空对象？2.什么是空对象？3.常见的判断方法3.1使用`Object.keys()`3.2使用`for...in`循环3.3使用`JSON.stringify()`4.注意事项5.总结在日常开发中，我们常常需要判断一个对象是否为空对象。所谓空对象，通常指该对象没有任何可枚举的属性。本文将详细介绍几种常见的判断方法，包括它们的原理、
  • ios内付费 374016526 ios内付费
    近年来写了很多IOS的程序，内付费也用到不少，使用IOS的内付费实现起来比较麻烦，这里我写了一个简单的内付费包，希望对大家有帮助。   具体使用如下: 这里的sender其实就是调用者，这里主要是为了回调使用。 [KuroStoreApi kuroStoreProductId:@"产品ID" storeSender:self storeFinishCallBa
  • 20 款优秀的 Linux 终端仿真器 brotherlamp linuxlinux视频linux资料linux自学linux教程
      终端仿真器是一款用其它显示架构重现可视终端的计算机程序。换句话说就是终端仿真器能使哑终端看似像一台连接上了服务器的客户机。终端仿真器允许最终用户用文本用户界面和命令行来访问控制台和应用程序。（LCTT 译注：终端仿真器原意指对大型机-哑终端方式的模拟，不过在当今的 Linux 环境中，常指通过远程或本地方式连接的伪终端，俗称“终端”。） 你能从开源世界中找到大量的终端仿真器，它们
  • Solr Deep Paging(solr 深分页) eksliang solr深分页solr分页性能问题
    转载请出自出处：http://eksliang.iteye.com/blog/2148370 作者：eksliang(ickes) blg:http://eksliang.iteye.com/ 概述 长期以来，我们一直有一个深分页问题。如果直接跳到很靠后的页数，查询速度会比较慢。这是因为Solr的需要为查询从开始遍历所有数据。直到Solr的4.7这个问题一直没有一个很好的解决方案。直到solr
  • 数据库面试题 18289753290 面试题 数据库
    1.union ,union all 网络搜索出的最佳答案： union和union all的区别是,union会自动压缩多个结果集合中的重复结果，而union all则将所有的结果全部显示出来，不管是不是重复。 Union：对两个结果集进行并集操作，不包括重复行，同时进行默认规则的排序； Union All：对两个结果集进行并集操作，包括重复行，不进行排序； 2.索引有哪些分类？作用是
  • Android TV屏幕适配 酷的飞上天空 android
    先说下现在市面上TV分辨率的大概情况 两种分辨率为主 1.720标清，分辨率为1280x720. 屏幕尺寸以32寸为主，部分电视为42寸 2.1080p全高清，分辨率为1920x1080 屏幕尺寸以42寸为主，此分辨率电视屏幕从32寸到50寸都有   适配遇到问题，已1080p尺寸为例： 分辨率固定不变，屏幕尺寸变化较大。 如：效果图尺寸为1920x1080，如果使用d
  • Timer定时器与ActionListener联合应用 永夜-极光 java
    功能:在控制台每秒输出一次   代码: package Main; import javax.swing.Timer; import java.awt.event.*; public class T { private static int count = 0; public static void main(String[] args){
  • Ubuntu14.04系统Tab键不能自动补全问题解决 随便小屋 Ubuntu 14.04
    Unbuntu 14.4安装之后就在终端中使用Tab键不能自动补全，解决办法如下：   1、利用vi编辑器打开/etc/bash.bashrc文件（需要root权限） sudo vi /etc/bash.bashrc  接下来会提示输入密码 2、找到文件中的下列代码 #enable bash completion in interactive shells #if
  • 学会人际关系三招 轻松走职场 aijuans 职场
    要想成功，仅有专业能力是不够的，处理好与老板、同事及下属的人际关系也是门大学问。如何才能在职场如鱼得水、游刃有余呢？在此，教您简单实用的三个窍门。 　　第一，多汇报 最近，管理学又提出了一个新名词“追随力”。它告诉我们，做下属最关键的就是要多请示汇报，让上司随时了解你的工作进度，有了新想法也要及时建议。不知不觉，你就有了“追随力”，上司会越来越了解和信任你。 　　第二，勤沟通 团队的力
  • 《O2O：移动互联网时代的商业革命》读书笔记 aoyouzi 读书笔记
    移动互联网的未来：碎片化内容+碎片化渠道=各式精准、互动的新型社会化营销。   O2O：Online to OffLine 线上线下活动 O2O就是在移动互联网时代，生活消费领域通过线上和线下互动的一种新型商业模式。   手机二维码本质：O2O商务行为从线下现实世界到线上虚拟世界的入口。   线上虚拟世界创造的本意是打破信息鸿沟，让不同地域、不同需求的人
  • js实现图片随鼠标滚动的效果 百合不是茶 JavaScript滚动属性的获取图片滚动属性获取页面加载
    1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次     例子:获取左边的宽度,当css写在body标签中时 <div id="adver" style="position:absolute;top:50px;left:1000p
  • ajax同步异步参数async bijian1013 jqueryAjaxasync
            开发项目开发过程中，需要将ajax的返回值赋到全局变量中，然后在该页面其他地方引用，因为ajax异步的原因一直无法成功，需将async:false，使其变成同步的。         格式： $.ajax({ type: 'POST', ur
  • Webx3框架（1） Bill_chen eclipsespringmaven框架ibatis
    Webx是淘宝开发的一套Web开发框架，Webx3是其第三个升级版本；采用Eclipse的开发环境，现在支持java开发； 采用turbine原型的MVC框架，扩展了Spring容器，利用Maven进行项目的构建管理，灵活的ibatis持久层支持，总的来说，还是一套很不错的Web框架。 Webx3遵循turbine风格，velocity的模板被分为layout/screen/control三部
  • 【MongoDB学习笔记五】MongoDB概述 bit1129 mongodb
    MongoDB是面向文档的NoSQL数据库，尽量业界还对MongoDB存在一些质疑的声音，比如性能尤其是查询性能、数据一致性的支持没有想象的那么好，但是MongoDB用户群确实已经够多。MongoDB的亮点不在于它的性能，而是它处理非结构化数据的能力以及内置对分布式的支持(复制、分片达到的高可用、高可伸缩)，同时它提供的近似于SQL的查询能力，也是在做NoSQL技术选型时，考虑的一个重要因素。Mo
  • spring/hibernate/struts2常见异常总结 白糖_ Hibernate
    Spring ①ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException 缺少aspectjweaver.jar，该jar包常用于spring aop中   ②java.lang.ClassNotFoundException: org.sprin
  • jquery easyui表单重置(reset)扩展思路 bozch formjquery easyuireset
    在jquery easyui表单中 尚未提供表单重置的功能，这就需要自己对其进行扩展。 扩展的时候要考虑的控件有： combo,combobox,combogrid,combotree,datebox,datetimebox 需要对其添加reset方法，reset方法就是把初始化的值赋值给当前的组件，这就需要在组件的初始化时将值保存下来。 在所有的reset方法添加完毕之后，就需要对fo
  • 编程之美-烙饼排序 bylijinnan 编程之美
    package beautyOfCoding; import java.util.Arrays; /* *《编程之美》的思路是：搜索+剪枝。有点像是写下棋程序：当前情况下，把所有可能的下一步都做一遍；在这每一遍操作里面，计算出如果按这一步走的话，能不能赢（得出最优结果）。 *《编程之美》上代码有很多错误，且每个变量的含义令人费解。因此我按我的理解写了以下代码： */
  • Struts1.X 源码分析之ActionForm赋值原理 chenbowen00 struts
    struts1在处理请求参数之前，首先会根据配置文件action节点的name属性创建对应的ActionForm。如果配置了name属性，却找不到对应的ActionForm类也不会报错，只是不会处理本次请求的请求参数。 如果找到了对应的ActionForm类，则先判断是否已经存在ActionForm的实例，如果不存在则创建实例，并将其存放在对应的作用域中。作用域由配置文件action节点的s
  • [空天防御与经济]在获得充足的外部资源之前,太空投资需有限度 comsci 资源
          这里有一个常识性的问题:       地球的资源,人类的资金是有限的,而太空是无限的.....       就算全人类联合起来,要在太空中修建大型空间站,也不一定能够成功,因为资源和资金,技术有客观的限制.... &
  • ORACLE临时表—ON COMMIT PRESERVE ROWS daizj oracle临时表
    ORACLE临时表 转 临时表：像普通表一样，有结构，但是对数据的管理上不一样，临时表存储事务或会话的中间结果集，临时表中保存的数据只对当前 会话可见，所有会话都看不到其他会话的数据，即使其他会话提交了，也看不到。临时表不存在并发行为，因为他们对于当前会话都是独立的。 创建临时表时，ORACLE只创建了表的结构（在数据字典中定义），并没有初始化内存空间，当某一会话使用临时表时，ORALCE会
  • 基于Nginx XSendfile+SpringMVC进行文件下载 denger 应用服务器Webnginx网络应用lighttpd
        在平常我们实现文件下载通常是通过普通 read-write方式，如下代码所示。 @RequestMapping("/courseware/{id}") public void download(@PathVariable("id") String courseID, HttpServletResp
  • scanf接受char类型的字符 dcj3sjt126com c
    /* 2013年3月11日22:35:54 目的：学习char只接受一个字符 */ # include <stdio.h> int main(void) { int i; char ch; scanf("%d", &i); printf("i = %d\n", i); scanf("%
  • 学编程的价值 dcj3sjt126com 编程
    发一个人会编程, 想想以后可以教儿女, 是多么美好的事啊, 不管儿女将来从事什么样的职业, 教一教, 对他思维的开拓大有帮助   像这位朋友学习:   http://blog.sina.com.cn/s/articlelist_2584320772_0_1.html   VirtualGS教程 (By @林泰前): 几十年的老程序员，资深的
  • 二维数组（矩阵）对角线输出 飞天奔月 二维数组
    今天在BBS里面看到这样的面试题目,   1，二维数组（N*N），沿对角线方向，从右上角打印到左下角如N=4： 4*4二维数组  { 1 2 3 4 } { 5 6 7 8 } { 9 10 11 12 } {13 14 15 16 } 打印顺序  4 3 8 2 7 12 1 6 11 16 5 10 15 9 14 13 要
  • Ehcache（08）——可阻塞的Cache——BlockingCache 234390216 并发ehcacheBlockingCache阻塞
    可阻塞的Cache—BlockingCache          在上一节我们提到了显示使用Ehcache锁的问题，其实我们还可以隐式的来使用Ehcache的锁，那就是通过BlockingCache。BlockingCache是Ehcache的一个封装类，可以让我们对Ehcache进行并发操作。其内部的锁机制是使用的net.
  • mysqldiff对数据库间进行差异比较 jackyrong mysqld
      mysqldiff该工具是官方mysql-utilities工具集的一个脚本，可以用来对比不同数据库之间的表结构，或者同个数据库间的表结构    如果在windows下，直接下载mysql-utilities安装就可以了，然后运行后，会跑到命令行下： 1） 基本用法    mysqldiff --server1=admin:12345
  • spring data jpa 方法中可用的关键字 lawrence.li javaspring
    spring data jpa 支持以方法名进行查询/删除/统计。 查询的关键字为find 删除的关键字为delete/remove (>=1.7.x) 统计的关键字为count (>=1.7.x)   修改需要使用@Modifying注解 @Modifying @Query("update User u set u.firstna
  • Spring的ModelAndView类 nicegege spring
    项目中controller的方法跳转的到ModelAndView类，一直很好奇spring怎么实现的？ /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * yo
  • 搭建 CentOS 6 服务器(13) - rsync、Amanda rensanning centos
    （一）rsync Server端 # yum install rsync # vi /etc/xinetd.d/rsync service rsync { disable = no flags = IPv6 socket_type = stream wait
  • Learn Nodejs 02 toknowme nodejs
    （1）npm是什么 npm is the package manager for node 官方网站：https://www.npmjs.com/ npm上有很多优秀的nodejs包，来解决常见的一些问题，比如用node-mysql，就可以方便通过nodejs链接到mysql，进行数据库的操作 在开发过程往往会需要用到其他的包，使用npm就可以下载这些包来供程序调用 &nb
  • Spring MVC 拦截器 xp9802 spring mvc
    Controller层的拦截器继承于HandlerInterceptorAdapter HandlerInterceptorAdapter.java  1  public   abstract   class  HandlerInterceptorAdapter  implements  HandlerIntercep
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他