ini
ini

用CSS3制作很特别的波浪形菜单

点击这里查看效果
http://keleyi.com/a/bjad/8tl5of2u.htm
完整HTML文件代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3波浪菜单-柯乐义</title>
<style>
body {
background: 
#66cc66;
}
.b-nav {
overflow: hidden;
position: relative;
margin: 3em auto 0;
width: 28em; height: 10em;
}
.b-menu {
width: 0; height: 0;
list-style: none;
}
.b-menu li {
overflow: hidden;
position: absolute;
width: 12em; height: 12em;
}
.b-menu li:nth-child(-n+3) {
top: 0.66em; left: -5.68em;
transform-origin: 100% 100%;
}
.b-menu li:nth-child(n+4) {
right: -5.69em; bottom: 0.66em;
transform-origin: 0 0;
}
.b-menu li:first-child {
transform: skewY(67.5deg);
}
.b-menu li:nth-child(2) {
transform: rotate(22.5deg) skewY(67.5deg);
}
.b-menu li:nth-child(3) {
transform: rotate(45deg) skewY(67.5deg);
}
.b-menu li:nth-child(4) {
transform: skewY(67.5deg);
}
.b-menu li:nth-child(5) {
transform: rotate(22.5deg) skewY(67.5deg);
}
.b-menu li:last-child {
transform: rotate(45deg) skewY(67.5deg);
}
.b-menu a, .b-menu li:after {
position: absolute;
border-radius: 50%;
box-shadow: 0 0 .2em black, inset 0 0 .2em black;
transform: skewY(-67.5deg) rotate(-11.25deg);
}
.b-menu a {
width: 200%; height: 200%;
opacity: .7;
background: radial-gradient(transparent 57.3%, 
#c9c9c9 57.7%);
color: #7a8092;
font: 900 1em/2.5 sans-serif;
text-align: center;
text-decoration: none;
transition: .5s;
}
.b-menu li:nth-child(n+4) a {
top: -100%; left: -100%;
line-height: 45.5;
}
.b-menu a:hover { opacity: 1; }
.b-menu li:after {
top: 19%; left: 19%;
width: 162%; height: 162%;
content: '';
}
.b-menu li:nth-child(n+4):after {
top: auto; right: 19%; bottom: 19%; left: auto;
}
.b-menu:before, .b-menu:after {
position: absolute;
width: 1em; height: 2.1em;
opacity: .7;
background: #c9c9c9;
content: '';
}
.b-menu:before {
top: 1.75em; left: 1.21em;
border-radius: 100% 0 0 100%/ 50% 0 0 50%;
transform: rotate(-22.5deg);
}
.b-menu:after {
bottom: 1.75em; right: 1.21em;
border-radius: 0 100% 100% 0/ 0 50% 50% 0;
transform: rotate(-22.5deg);
}
</style>
<script src="http://keleyi.com/keleyi/phtml/css3/10/prefixfree.min.js"></script>
</head>

<body>
<div style="width:500px;margin:0px auto;"><h1>CSS3波浪菜单</h1>请使用支持CSS3的浏览器查看本页</div>
<nav class='b-nav'>
<ul class='b-menu'>
<li><a href='http://keleyi.com'>首页</a></li>
<li><a href='http://keleyi.com/menu/jquery/'>jQuery</a></li>
<li><a href='http://keleyi.com/menu/html5/'>HTML5</a></li>
<li><a href='http://keleyi.com/menu/webqd/'>WEB前端</a></li>
<li><a href='http://keleyi.com/menu/javascript/'>JS</a></li>
<li><a href='http://keleyi.com/a/bjad/8tl5of2u.htm'>本文</a></li>
</ul>
</nav>
</body>
</html>

 

其中：

.b-menu li {
overflow: hidden;
position: absolute;
width: 12em; height: 12em;
}

 
对菜单项进行绝对定位

接着就是重点的波浪形效果的CSS代码了，这里主要利用了CSS3的transform动画属性，利用rotate进行旋转，skewY进行y轴倾斜。代码如下：

.b-menu li:nth-child(-n+3) {
top: 0.66em; left: -5.68em;
transform-origin: 100% 100%;
}
.b-menu li:nth-child(n+4) {
right: -5.69em; bottom: 0.66em;
transform-origin: 0 0;
}
.b-menu li:first-child {
transform: skewY(67.5deg);
}
.b-menu li:nth-child(2) {
transform: rotate(22.5deg) skewY(67.5deg);
}
.b-menu li:nth-child(3) {
transform: rotate(45deg) skewY(67.5deg);
}
.b-menu li:nth-child(4) {
transform: skewY(67.5deg);
}
.b-menu li:nth-child(5) {
transform: rotate(22.5deg) skewY(67.5deg);
}
.b-menu li:last-child {
transform: rotate(45deg) skewY(67.5deg);
}
.b-menu a, .b-menu li:after {
position: absolute;
border-radius: 50%;
box-shadow: 0 0 .2em black, inset 0 0 .2em black;
transform: skewY(-67.5deg) rotate(-11.25deg);
}

 

这里说明一下nth-child(n)，它表示该父元素的第n个子元素。

你可能感兴趣的:(html5,css,web前端,ini,css3)

  • ssm基于HTML5的红酒信息分享系统 Q_2743785109 计算机毕业设计html5前端html
    SSM基于HTML5的红酒信息分享系统是一个专注于红酒领域的综合性信息平台，旨在为红酒爱好者、从业者以及普通消费者提供一个便捷的交流与获取红酒相关信息的空间。一、系统背景与意义随着人们生活水平的提高和消费观念的转变，红酒作为一种高雅的饮品，越来越受到消费者的青睐。然而，红酒市场的信息不对称和消费者缺乏专业知识等问题限制了红酒文化的传播和消费者的购买决策。因此，开发一个基于SSM框架和HTML5技术
  • Minio容器启动配置https 非ban必选 docker大数据
    不建议这样使用，建议使用nginx做反向代理，建议使用内网url作为上传文件api的endpoint1、公钥和私钥配置根据官网描述（HowtosecureaccesstoMinIOserverwithTLS），将TLS的公私钥放到：{{HOME}}/.minio/certs里私钥需要命名为：private.key公钥需要命名为：public.crt(如果公钥是以pem格式结尾，可直接改为crt格式
  • Linux系统下minio设置SSL证书进行HTTPS远程连接访问 薄荷街的兔比先生 linuxsslhttps
    文章目录1.配置SSL证书使用HTTPS访问2.MINIOSDK忽略证书验证3.使用受信任的证书1.配置SSL证书使用HTTPS访问生成域名对应的SSL证书，下载Apache版本，我目前只发现Apache这个里面有对应的私钥和证书私钥重命名为private.key证书重命名为public.crt，不更改为指定格式则会无法被识别。将公钥和证书放入root/.minio/certs文件夹中，此文件夹安
  • 计算机组成原理(计算机系统3)--实验七：新增指令实验 起床悠悠 计算机系统单片机嵌入式硬件
    一、实验目标了解RISC-Vmini处理器架构，在其基础之上新增一个指令，完成设计并观察指令执⾏。二、实验内容1)修改数据通路，新增指令combrs1,rs2,rd采用R型指令格式，实现将rs1高16位和rs2低16位拼接成32位整数，并且保存到rd寄存器。2)在处理器上执行该指令，观察仿真波形，验证功能是否正确。3）自行设计其他功能指令，并验证设计是否正确三、实验环境硬件：桌面PC软件：Chis
  • CSS选择器 梧桐WuTong2024 css前端
    目录文章目录目录选择器的优先级通配选择器元素选择器类选择器ID选择器交集选择器（复合选择器）并集选择器（复合选择器）后代选择器子代选择器兄弟选择器通用兄弟选择器属性选择器伪类选择器结构伪类选择器first-child寻找第一个儿子last-child寻找最后一个儿子nth-child(n)nth-last-child(n)first-of-typelast-of-typenth-of-child(
  • 大文件分块上传.断点续传.秒传 我是奶龙！我是奶龙！我是奶龙！ html5cssjavascriptspringboot
    大文件分块上传分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（我们称之为Part）来进行分别上传，上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件。分片上传适用场景1.大文件上传2.网络环境环境不好，存在需要重传风险的场景分片上传的基本流程图1.将待上传文件按照一定大小进行分片。2.使用InitiateMultipartUpload接口初始化一个分片上传任务
  • Spring-boot定时任务，注解@Scheduled的参数说明 旷野孤星 个人笔记学习记录后端框架JAVASpring-BootSpring@ScheduledJava
    关于Scheduled的参数1.corn2.fixedDelay3.fixedDelayString4.fixedRate5.fixedRateString6.initialDelay7.initialDelayString8.zone总共有八种参数类型，对于第一种类型一般使用就最熟悉了，是可以控制方法在任意的年月日时分秒上执行，同时不断循环。比较简单，网上的说明也比较多，就不做解释。fixedR
  • 【Web前端】JWT（JSON Web Tokens）概述 泡芙冰淇淋ya Web前端json
    1、简介JWT（JSONWebTokens）是一种用于双方之间安全传输信息的简洁的、URL安全的令牌标准。它基于JSON对象，并通过数字签名确保其完整性和真实性。JWT因其小巧、自包含以及易于在客户端和服务器之间传输的特性而被广泛使用于身份验证和信息交换的场景中。2、组成部分JWT由三个部分组成，这三部分通过点（.）分隔：Header（头部）：头部通常包含了两部分信息：例如：typ：表示令牌的类型
  • Java与AWS S3的文件操作 老友@ 后端javaaws开发语言s3服务器
    从零开始：Java与AWSS3的文件操作一、什么是AWSS3？AWSS3的特点AWSS3的应用场景二、Java整合S3方法使用MinIO客户端操作S3使用AWSSDK操作S3（推荐使用）三、总结一、什么是AWSS3？AmazonSimpleStorageService（简称AmazonS3）是由亚马逊网络服务（AWS）提供的一种对象存储服务。它提供了一个高度可扩展、持久、安全且低成本的存储解决方案
  • Trae：新一代 AI 智能 IDE，颠覆你的开发体验 that's boy 人工智能idechatgptopenaiAI编程AI写作Claude
    想体验各种AI模型的强大功能吗？chatTools平台汇集了o1、GPT4o、Claude和Gemini等多种AI选择，无论您有何种AI需求，都能在这里找到合适的解决方案。现在就来chatTools，开启您的AI之旅吧！作为一名开发者，你是否厌倦了繁琐的重复劳动？是否渴望一个能够真正理解你意图的编程助手？如果你的答案是肯定的，那么你一定要了解一下Trae——一款带有AI功能的智能IDE，它将彻底改
  • 学习笔记一：oracle体系结构组件 coxddta29006 数据库操作系统java
    首先声明一下，我的学习笔记参考书主要是官方教材，oracle9idatabaseadministrationfundamentsed2.0我觉得学习是一个循序渐进的过程,从面到点,从宏观到微观,逐步渗透,各个击破,对于oracle,怎么样从宏观上来理解呢?先来看一个图,这个图取自于上面提到的教材,这个图对于从整体上理解ORACLE的体系结构组件，非常关键.下面来解释下这个图.对于一个数据库系统来说
  • CSS语言的数据结构 Code侠客行 包罗万象golang开发语言后端
    CSS数据结构与实践CSS（层叠样式表）是网页设计中不可或缺的一部分，它不仅负责网页的外观和布局，还影响用户的体验。在现代网页设计中，理清和理解CSS的内部结构和数据组织至关重要。本文将深入探讨CSS的基本概念、常用的样式规则、选择器、盒模型、布局方式及其在实际开发中的应用。一、CSS的基本概念CSS的全称是层叠样式表，它是用来描述如何呈现HTML文档的样式语言。CSS可以控制文档的结构、颜色、字
  • 小白WEB前端学习（七） Sun ᥫᩣ涵 WEB前端前端学习
    续：小白WEB前端学习（六）继续学习CSS（五）8.响应式布局：响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式1.响应式布局介绍：优点:面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点:兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长手机:76899212482.media媒体查询HTML标签字号手机屏幕大小不同，分辨率不同如何设置不同的htm
  • 2025年01月18日Github流行趋势 油泼辣子多加 GitHub每日趋势github
    项目名称：MiniCPM-o项目地址url：https://github.com/OpenBMB/MiniCPM-o项目语言：Python历史star数：15141今日star数：736项目维护者：yiranyyu,iceflame89,yaoyuanTHU,LDLINGLINGLING,tc-mb项目简介：MiniCPM-o2.6：适用于手机上视觉、语音和多模式直播的GPT-4o级多模态大规模语
  • SpringBoot+Minio实现多文件下载和批量下载 北执南念 实战总结springboot后端java
    文章目录SpringBoot+minio实现多文件下载1、SpringBoot+minio实现多文件打成一个压缩包下载1.添加依赖2.配置MinIO客户端3.创建下载和压缩逻辑4.创建控制器方法来触发下载5.测试下载功能注意事项2、在minio指定的桶名下面生产一个文件夹1.MinIO配置2.编写业务逻辑文件夹操作和压缩下载3.创建控制器4.测试注意事项3、在minio指定的桶名下面生产一个临时文
  • DeepSpeed 常见问题解决方案 申晓容Lucille
    DeepSpeed常见问题解决方案DeepSpeedDeepSpeedisadeeplearningoptimizationlibrarythatmakesdistributedtrainingandinferenceeasy,efficient,andeffective.项目地址:https://gitcode.com/gh_mirrors/de/DeepSpeed1.项目基础介绍和主要编程语言
  • OpenCV相机标定与3D重建(65)对图像点进行去畸变处理函数undistortPoints()的使用 jndingxin OpenCVopencv
    操作系统：ubuntu22.04OpenCV版本：OpenCV4.9IDE:VisualStudioCode编程语言：C++11算法描述从观测到的点坐标计算理想点坐标。该函数类似于undistort和initUndistortRectifyMap，但它操作的是稀疏点集而不是光栅图像。此外，该函数执行与projectPoints相反的变换。对于3D对象，它不会重建其3D坐标；但对于平面对象，如果指定
  • 微软 azure_Microsoft Azure管理员方案相关的面试问题与解答 culuo4781 java大数据python人工智能面试
    微软azureInthisarticle,wewilldiscussseveralscenario-relatedinterviewquestionsthatyoumaybeaskedwhenapplyingtoanAzureAdministratorposition.在本文中，我们将讨论与多个方案相关的面试问题，当您申请Azure管理员职位时可能会被问到。Q1:Assumethatyourman
  • OpenCV相机标定与3D重建(63)校正图像的畸变函数undistort()的使用 jndingxin OpenCVopencv3d
    操作系统：ubuntu22.04OpenCV版本：OpenCV4.9IDE:VisualStudioCode编程语言：C++11算法描述转换图像以补偿镜头畸变。该函数通过变换图像来补偿径向和切向镜头畸变。此函数仅仅是initUndistortRectifyMap（使用单位矩阵R）和remap（使用双线性插值）的组合。有关执行的具体变换详情，请参阅前者函数。对于在源图像中没有对应像素的目的图像中的像
  • python--对象存储服务器 赵钱孙李的赵 python学习记录者python服务器开发语言
    目录对象存储服务器定义概念普及对象（Object）桶（Bucket）终端节点（Endpoint）访问域名知名的对象存储服务器提供商微软云Azure：MicrosoftAzureBlobStorage华为云OBS:阿里云OSS:腾讯云COSMinIO:AmazonS3(SimpleStorageService)GoogleCloudStorageIBMCloudObjectStorage具体代码使用
  • 使用 Babylon.js 开发时如何通过 CSS 实现 UI 自适应 ttod_qzstudio BabylonJavaScriptBabylon.js
    本文将介绍如何在Babylon.js开发中，通过预先定义的CSS文件实现UI的自适应布局，确保UI能够根据Canvas元素的尺寸动态调整。场景描述假设我们已经使用HTML和CSS构建了Babylon.js的UI界面，并且所有样式都定义在CSS文件中。现在，我们需要让这些UI元素能够根据Canvas的尺寸动态调整，以实现自适应的效果。解决方案1.使用CSS变量（推荐）CSS变量（CustomProp
  • 【leetcode100】二叉搜索树中第k小的元素 SsummerC leetcode100算法数据结构leetcodepython
    1、题目描述给定一个二叉搜索树的根节点root，和一个整数k，请你设计一个算法查找其中第k小的元素（从1开始计数）。示例1：输入：root=[3,1,4,null,2],k=1输出：12、初始思路2.1思路使用中序遍历（左根右）进行遍历，遍历结果为从小到大的排序，进而可以输出第k小的元素。#Definitionforabinarytreenode.#classTreeNode:#def__init
  • python里的初始化使用 将将_毛团尾巴 python开发语言pytest
    比如我们在函数B想要调用函数A，可以使用调用函数A的函数名，然后得到函数A的return值但是如果调用函数A需要传入参数才能运行，或者不想再去调用整个函数A获取值，此时可以将需要调用的参数初始化，变成全局参数，这样就不需要再次运行函数A，并且不仅仅只能调用得到一个return值（一个函数只能有一个return，且只能return一个变量值）1、普通类里面的初始化使用_init_def__init_
  • vue项目中导入视频 涔溪 vuevue
    vue项目中引入视频插件一、安装插件vue-video-playernpminstallvue-video-player-s二、在main.js里倒入并使用importVideoPlayerfrom'vue-video-player'import'vue-video-player/src/custom-theme.css'import'video.js/dist/video-js.css'Vue.
  • vue3 + [email protected]带箭头的轨迹线 小汪同学→_→ webGis-leafletvue.jsleaflet.js
    import'leaflet-polylinedecorator'//箭头线（引入第三方插件）onMounted(()=>{window.customMap=mapInit.initMap({target:'map-container',coordinate:[36.09,120.35]})constdrawnItems=newL.FeatureGroup()window.customMap.ad
  • 2024最新Web前端经典面试试题及答案-史上最全前端面试题(含答案) 2401_89693619 前端面试职场和发展
    3.阐述清楚浮动的几种方式（常见问题）1.父级div定义height原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题2.父级div定义overflow:hidden原理：必须定义width或zoom:1，同时不能定义height，使用overflow:
  • 2024Web前端人事面试题总结精选_前端面试项目相关提问 2401_86638424 面试职场和发展
    api然后我们前端直接调用，当然如果后台还没写好就先自己造假数据来完成。平常都是用webpack来构建项目等等。2、你觉得你个性上最大的优点是什么？回答提示：沉着冷静、条理清楚、立场坚定、顽强向上、乐于助人和关心他人、适应能力和幽默感、乐观和友爱。3、说你最大的缺点？回答提示：这个问题企业问的概率很大，通常不希望听到直接回答的缺点是什么等，如果求职者说自己小心眼、爱忌妒人、非常懒、脾气大、工作效率
  • 企业里Win10 开启BitLocker锁定磁盘，如何备份系统，当系统出现问题又如何恢复，快速恢复又兼顾系统安全 玩人工智能的辣条哥 企业信息数据安全保护bitlocker磁盘加密数据安全
    环境：Win10专业版SGIMINI4.8.126.0联想E14Gen2问题描述：Win10开启BitLocker锁定磁盘，如何备份系统，当系统出现问题又如何恢复解决方案：一、bitlocker加密加锁后备份系统1.C盘开启bitlockermanage-bde-onc:将C盘密钥密码存在E盘manage-bde-protectors-addc:-rp-rke:\2.D盘开启bitlockerma
  • 考Oracle ocp认证还有没有用？ YUNBEE_chen oracle开闭原则数据库
    OCP，Oracle数据库认证专家（OracleCertifiedProfessional）是Oracle公司的Oracle数据库DBA（DatabaseAdministrator数据库管理员)认证课程。通过这个考试，说明此人可以管理大型数据库；或者能够开发可以部署到整个企业的强大应用。目前主要是Oracle19c版本认证。Oracle认证有几个等级证书？OCA认证>>OCP认证>>OCM认证Or
  • 从 PyQt5 窗口闪退问题看 Python 垃圾回收与消息机制 python
    前言此篇文章源于知乎上的一个问题，使用PyQt5编写GUI程序时，新创建的界面会闪退，本篇文章仅作记录以防以后忘记。问题代码importsysfromPyQt5.QtWidgetsimportQApplication,QMainWindow,QPushButtonclassMain(QMainWindow):def__init__(self):super(Main,self).__init__()
  • 怎么样才能成为专业的程序员？ cocos2d-x小菜 编程PHP
      如何要想成为一名专业的程序员？仅仅会写代码是不够的。从团队合作去解决问题到版本控制，你还得具备其他关键技能的工具包。当我们询问相关的专业开发人员，那些必备的关键技能都是什么的时候，下面是我们了解到的情况。   关于如何学习代码，各种声音很多，然后很多人就被误导为成为专业开发人员懂得一门编程语言就够了？！呵呵，就像其他工作一样，光会一个技能那是远远不够的。如果你想要成为
  • java web开发 高并发处理 BreakingBad javaWeb并发开发处理高
    java处理高并发高负载类网站中数据库的设计方法（java教程,java处理大量数据，java高负载数据） 一：高并发高负载类网站关注点之数据库 没错,首先是数据库,这是大多数应用所面临的首个SPOF。尤其是Web2.0的应用，数据库的响应是首先要解决的。 一般来说MySQL是最常用的，可能最初是一个mysql主机，当数据增加到100万以上，那么，MySQL的效能急剧下降。常用的优化措施是M-S（
  • mysql批量更新 ekian mysql
    mysql更新优化： 一版的更新的话都是采用update set的方式，但是如果需要批量更新的话，只能for循环的执行更新。或者采用executeBatch的方式，执行更新。无论哪种方式，性能都不见得多好。 三千多条的更新，需要3分多钟。 查询了批量更新的优化，有说replace into的方式，即： replace into tableName(id,status) values
  • 微软BI（3） 18289753290 微软BI SSIS
    1) Q：该列违反了完整性约束错误；已获得 OLE DB 记录。源:“Microsoft SQL Server Native Client 11.0” Hresult: 0x80004005 说明:“不能将值 NULL 插入列 'FZCHID'，表 'JRB_EnterpriseCredit.dbo.QYFZCH'；列不允许有 Null 值。INSERT 失败。”。 A：一般这类问题的存在是
  • Java中的List g21121 java
            List是一个有序的 collection（也称为序列）。此接口的用户可以对列表中每个元素的插入位置进行精确地控制。用户可以根据元素的整数索引（在列表中的位置）访问元素，并搜索列表中的元素。         与 set 不同，列表通常允许重复
  • 读书笔记 永夜-极光 读书笔记
       1.  K是一家加工厂,需要采购原材料,有A,B,C,D 4家供应商,其中A给出的价格最低,性价比最高,那么假如你是这家企业的采购经理,你会如何决策?          传统决策: A:100%订单  B,C,D:0%     &nbs
  • centos 安装 Codeblocks 随便小屋 codeblocks
    1.安装gcc,需要c和c++两部分,默认安装下,CentOS不安装编译器的,在终端输入以下命令即可yum install gccyum install gcc-c++   2.安装gtk2-devel,因为默认已经安装了正式产品需要的支持库,但是没有安装开发所需要的文档.yum install gtk2* 3. 安装wxGTK    yum search w
  • 23种设计模式的形象比喻 aijuans 设计模式
    1、ABSTRACT FACTORY—追MM少不了请吃饭了，麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西，虽然口味有所不同，但不管你带MM去麦当劳或肯德基，只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory 　　工厂模式：客户类和工厂类分开。消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：
  • 开发管理 CheckLists aoyouzi 开发管理 CheckLists
    开发管理 CheckLists(23) -使项目组度过完整的生命周期 开发管理 CheckLists(22) -组织项目资源 开发管理 CheckLists(21) -控制项目的范围开发管理 CheckLists(20) -项目利益相关者责任开发管理 CheckLists(19) -选择合适的团队成员开发管理 CheckLists(18) -敏捷开发 Scrum Master 工作开发管理 C
  • js实现切换 百合不是茶 JavaScript栏目切换
    js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用思路: 1,先将要显示的设置为display:bisible 否则设为none 2,设置栏目的id ,js获取栏目的id,如果id为Null就设置为显示 3,判断js获取的id名字;再设置是否显示   代码实现:   html代码: <di
  • 周鸿祎在360新员工入职培训上的讲话 bijian1013 感悟项目管理人生职场
            这篇文章也是最近偶尔看到的，考虑到原博客发布者可能将其删除等原因，也更方便个人查找，特将原文拷贝再发布的。“学东西是为自己的，不要整天以混的姿态来跟公司博弈，就算是混，我觉得你要是能在混的时间里，收获一些别的有利于人生发展的东西，也是不错的，看你怎么把握了”，看了之后，对这句话记忆犹新。  &
  • 前端Web开发的页面效果 Bill_chen htmlWebMicrosoft
    1.IE6下png图片的透明显示： <img src="图片地址" border="0" style="Filter.Alpha(Opacity)=数值(100),style=数值(3)"/> 或在<head></head>间加一段JS代码让透明png图片正常显示。 2.<li>标
  • 【JVM五】老年代垃圾回收：并发标记清理GC(CMS GC) bit1129 垃圾回收
      CMS概述 并发标记清理垃圾回收(Concurrent Mark and Sweep GC）算法的主要目标是在GC过程中，减少暂停用户线程的次数以及在不得不暂停用户线程的请夸功能，尽可能短的暂停用户线程的时间。这对于交互式应用，比如web应用来说，是非常重要的。   CMS垃圾回收针对新生代和老年代采用不同的策略。相比同吞吐量垃圾回收，它要复杂的多。吞吐量垃圾回收在执
  • Struts2技术总结 白糖_ struts2
      必备jar文件 早在struts2.0.*的时候，struts2的必备jar包需要如下几个： commons-logging-*.jar   Apache旗下commons项目的log日志包 freemarker-*.jar          
  • Jquery easyui layout应用注意事项 bozch jquery浏览器easyuilayout
    在jquery easyui中提供了easyui-layout布局，他的布局比较局限，类似java中GUI的border布局。下面对其使用注意事项作简要介绍：      如果在现有的工程中前台界面均应用了jquery easyui，那么在布局的时候最好应用jquery eaysui的layout布局，否则在表单页面（编辑、查看、添加等等）在不同的浏览器会出
  • java-拷贝特殊链表：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？ bylijinnan java
    public class CopySpecialLinkedList { /** * 题目：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？ 拷贝pNext指针非常容易，所以题目的难点是如何拷贝pRand指针。 假设原来链表为A1 -> A2 ->... -> An，新拷贝
  • color Chen.H JavaScripthtmlcss
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">    <HTML>    <HEAD>&nbs
  • [信息与战争]移动通讯与网络 comsci 网络
          两个坚持:手机的电池必须可以取下来                光纤不能够入户,只能够到楼宇       建议大家找这本书看看:<&
  • oracle flashback query(闪回查询) daizj oracleflashback queryflashback table
    在Oracle 10g中，Flash back家族分为以下成员： Flashback Database Flashback Drop Flashback Table Flashback Query(分Flashback Query,Flashback Version Query，Flashback Transaction Query) 下面介绍一下Flashback Drop 和Flas
  • zeus持久层DAO单元测试 deng520159 单元测试
    zeus代码测试正紧张进行中,但由于工作比较忙,但速度比较慢.现在已经完成读写分离单元测试了,现在把几种情况单元测试的例子发出来,希望有人能进出意见,让它走下去. 本文是zeus的dao单元测试: 1.单元测试直接上代码   package com.dengliang.zeus.webdemo.test; import org.junit.Test; import o
  • C语言学习三printf函数和scanf函数学习 dcj3sjt126com cprintfscanflanguage
    printf函数 /* 2013年3月10日20:42:32 地点：北京潘家园 功能： 目的： 测试%x %X %#x %#X的用法 */ # include <stdio.h> int main(void) { printf("哈哈！\n"); // \n表示换行 int i = 10; printf
  • 那你为什么小时候不好好读书? dcj3sjt126com life
    dady, 我今天捡到了十块钱, 不过我还给那个人了 good girl! 那个人有没有和你讲thank you啊 没有啦....他拉我的耳朵我才把钱还给他的, 他哪里会和我讲thank you   爸爸, 如果地上有一张5块一张10块你拿哪一张呢.... 当然是拿十块的咯... 爸爸你很笨的, 你不会两张都拿   爸爸为什么上个月那个人来跟你讨钱, 你告诉他没
  • iptables开放端口 Fanyucai linuxiptables端口
    1，找到配置文件 vi /etc/sysconfig/iptables   2，添加端口开放，增加一行，开放18081端口 -A INPUT -m state --state NEW -m tcp -p tcp --dport 18081 -j ACCEPT   3，保存 ESC :wq!   4，重启服务 service iptables
  • Ehcache（05）——缓存的查询 234390216 排序ehcache统计query
    缓存的查询 目录 1.    使Cache可查询 1.1     基于Xml配置 1.2     基于代码的配置 2     指定可搜索的属性 2.1     可查询属性类型 2.2 &
  • 通过hashset找到数组中重复的元素 jackyrong hashset
      如何在hashset中快速找到重复的元素呢?方法很多，下面是其中一个办法： int[] array = {1,1,2,3,4,5,6,7,8,8}; Set<Integer> set = new HashSet<Integer>(); for(int i = 0
  • 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL lanrikey history
    后退时关闭当前页面 <script type="text/javascript"> jQuery(document).ready(function ($) {         if (window.history && window.history.pushState) {
  • 应用程序的通信成本 netkiller.github.com 虚拟机应用服务器陈景峰netkillerneo
    应用程序的通信成本 什么是通信 一个程序中两个以上功能相互传递信号或数据叫做通信。 什么是成本 这是是指时间成本与空间成本。 时间就是传递数据所花费的时间。空间是指传递过程耗费容量大小。 都有哪些通信方式 全局变量 线程间通信 共享内存 共享文件 管道 Socket 硬件（串口，USB） 等等 全局变量 全局变量是成本最低通信方法，通过设置
  • 一维数组与二维数组的声明与定义 恋洁e生 二维数组一维数组定义声明初始化
    /**  *  */ package test20111005; /**  * @author FlyingFire  * @date:2011-11-18 上午04:33:36  * @author ：代码整理  * @introduce :一维数组与二维数组的初始化  *summary：  */ public c
  • Spring Mybatis独立事务配置 toknowme mybatis
    在项目中有很多地方会使用到独立事务，下面以获取主键为例   （1）修改配置文件spring-mybatis.xml  <!-- 开启事务支持 -->  <tx:annotation-driven transaction-manager="transactionManager" />   &n
  • 更新Anadroid SDK Tooks之后，Eclipse提示No update were found xp9802 eclipse
    使用Android SDK Manager 更新了Anadroid SDK Tooks 之后， 打开eclipse提示 This Android SDK requires Android Developer Toolkit version 23.0.0 or above, 点击Check for Updates  检测一会后提示 No update were found 
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他