永不满足的求知者
永不满足的求知者

一个好看的底部导航栏效果

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部导航栏title>
head>
<style>
    /* 清除一些默认样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }

    a {
        text-decoration: none;
        /*确保在浏览器中显示链接时，没有任何文本装饰，如下划线。 */
    }

    /* 对整体进行设置，并且都设置为弹性盒，方便进行操作 */
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #222327;
    }

    /* 设置导航栏样式 */
    .nav {
        /* 对导航栏位置进行定位处理，方便后续的图标位置的设置 */
        position: relative;
        width: 400px;
        height: 60px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }

    .nav ul {
        display: flex;
        width: 350px;
    }

    .nav ul li {
        height: 60px;
        /* flex:1是让所有的li平均分nav这个容器 */
        flex: 1;
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
    }

    .nav ul li span {
        /* 进行定位，使之通过span元素带动矢量图标进行水平垂直到中心位置 */
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
       flex-direction: column;
       font-size: 9px;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        /* 设置鼠标移入的样式 */
        cursor: pointer;
        /* 设置动画过度事件以及延迟 */
        transition: 0.5s;
        transition-delay: 0s;
    }

    .nav ul li span i {
        /* 针对图标大小进行设置 */
        display: flex;
        color: #222327;
        font-size: 2em;
    }
/* 下面是针对选中效果做的样式处理 */
    .nav ul li.active span {
        /* 设置了一开始的背景颜色，后面会被取代，设置了点击的时候会向上移动 */
        background: orange;
        transform: translateY(-27px);
        transition-delay: 0.25s;
    }

    .nav ul li.active span i {
        /* 设置了点击时候矢量图标的文字颜色 */
        color: #fff;
    }
    .nav ul li span::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        height: 100%;
        background: orange;
        border-radius: 50%;
        filter: blur(40px);
        opacity: 0;
        transition: 0.5s;
        transition-delay: 0s;
    }
    .nav ul li span::before {
        opacity: 0.5;
        transition-delay: 0.25s;
    }
    /* 这里将i元素设置的颜色显示出来 这两个样式块中都使用了 background: var(--clr); 属性，可以将背景颜色设置为
     --clr 变量所表示的值。这种使用自定义变量的方式，可以在代码中统一定义颜色值，以便在需要时进行统一更改。*/
    .nav ul li.active span {
        background: var(--clr);
    }

    .nav ul li span::before {
        background: var(--clr);
    }
    /* 背景园设置 */
    .indicator {
        /* 这里进行了定位，并且设置了背景园的位置，同时将圆的背景颜色与背景颜色设为一致，会形成那种向下突兀的圆形，并且加入了动画 */
        position: absolute;
        top: -35px;
        width: 70.5px;
        height: 70px;
        background: #222327;
        border-radius: 50%;
        z-index: 1;
        transition: 0.5s;
    }
    /* 设置左边半弧 */
    .indicator::before {
        content: '';
        position: absolute;
        top: 16px;
        left: -34px;
        width: 10px;
        height: 5px;
        background: transparent;
        border-radius: 50%;
        box-shadow: 20.5px 19px 0 4px #fff;
    }
 /* 设置右边半弧 */
    .indicator::after {
        content: '';
        position: absolute;
        top: 16px;
        left: 54px;
        width: 10px;
        height: 5px;
        background: transparent;
        border-radius: 50%;
        box-shadow: 20px 19px 0 4px #fff;
    }
/* 设置平移 */
    /* nth-child()选中低某个i元素，然后配合js完成背景圆的移动 
    在CSS中，calc() 是一个用于执行计算的函数。它允许在CSS属性值中使用数学表达式。
    这种计算函数通常用于允许动态计算和调整元素的尺寸、间距或位置。在 calc() 函数中，可以使用不同的运算符（如加号 +、减号 -、乘号 *、除号 /）来结合数值和单位进行计算。
    它可以包含其他长度单位（如像素 px、百分比 % 等），并且可以与其他CSS属性值和变量一起使用。*/
    /* 这里呢使用了nth-child选择器选中对应的i元素，注意，这里设置的平移效果是由clac函数计算而来，选中其中一个i元素，
    并且当且仅当具有active类之后的所有兄弟中的.indicator类元素，有一个指示器元素（`.indicator`）。
    指示器的位置会根据活动项目（具有`active`类的`
  • `元素）的位置进行调整根据活动项目的位置设置指示器的水平平移距离，
    实现一个在导航菜单中显示当前选中项目的效果。指示器的位置和平移距离是根据活动项目的索引和固定的长度单位（70px）进行计算的。 */
    .nav li:nth-child(1).active~.indicator{
        transform: translateX(calc(70px*0));
    }

    .nav li:nth-child(2).active~.indicator {
        transform: translateX(calc(70px*1));
    }

    .nav li:nth-child(3).active~.indicator {
        transform: translateX(calc(70px*2));
    }

    .nav li:nth-child(4).active~.indicator {
        transform: translateX(calc(70px*3));
    }

    .nav li:nth-child(5).active~.indicator {
        transform: translateX(calc(70px*4));
    }
    

    

style>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4173165_2g4t5a6pg9v.css">

<body>
    
    <div class="nav">
        <ul>
            
            <li class="active" style="--clr:#f44336"><span><i class="iconfont icon-shouye">i>首页span>li>
            <li style="--clr:#0fc70f"> <span><i class="iconfont icon-liuyan">i>留言span>li>
            <li style="--clr:#2196f3"> <span><i class="iconfont icon-code">i>代码span>li>
            <li style="--clr:#b145e9"> <span><i class="iconfont icon-box-empty">i>盒子span>li>
            <li style="--clr:#ffa111"> <span><i class="iconfont icon-gitee-fill-round">i>giteespan>li>
            <div class="indicator">div>
        ul>
    div>
body>
<script>
    //通过 `lis.forEach(li => li.addEventListener('click', function () {...}))` 遍历 `lis` 数组中的每个元素，并为每个元素都添加一个 ‘click’ 事件监听器。
//在每次点击事件中，使用 `lis.forEach(item => {...})` 遍历 `lis` 数组中的每个元素，将它们的 `active` 类都移除，然后在当前被点击的元素上添加 `active` 类，
    const lis = document.querySelectorAll('.nav li')
    lis.forEach(li => li.addEventListener('click', function () {
        lis.forEach(item => {
            item.classList.remove('active');
            this.classList.add('active');
        })
    }))
script>

html>

    • 你可能感兴趣的:(css,前端)

    • 探索现代全栈开发新境界：AppFullStackDemo，一个基于.NET Core和微前端的综合实践 颜殉瑶Nydia
      探索现代全栈开发新境界：AppFullStackDemo，一个基于.NETCore和微前端的综合实践app_fullstackdemoAppFullStackDemo:DDD/SOLID/CleanCodeApp.NetCore3.1(BackEnd)AngularMaterialPanel(FrontEnd)ReactNative(Mobile)项目地址:https://gitcode.com/
    • 曲线救国——uniapp封装toast消息提示组件(js) AGMTI javascriptuni-app开发语言
      说明：本组件借用到uv-ui前端框架的作为消息提示，有条件的可以自己设计。另外主要用到@uni-ku/[email protected]。目录结构（主要文件）：安装@uni-ku/[email protected]@uni-ku/rootvite.config.js:import{defineConfig}from'vite'importunifrom'@dcloudio/vite-plugin-un
    • 从零开始部署Dify：后端与前端服务完整指南 engchina LINUXDify部署
      从零开始部署Dify：后端与前端服务完整指南一、环境准备1.系统要求2.项目结构二、后端服务部署1.中间件启动（DockerCompose）2.后端环境配置3.依赖安装与数据库迁移4.服务启动三、前端界面搭建1.环境配置2.服务启动四、常见问题排查五、总结在AI应用开发中，Dify作为一款功能强大的工具，其部署过程涉及多个技术栈的整合。本文将详细讲解如何从零开始搭建Dify的完整环境，包括后端服务
    • Java程序设计（三十九）：基于SSM框架的每日健康管理系统的实现与数据分析 人工智能_SYBH 2025年java程序设计java数据分析开发语言微信小程序notepad++程序设计数据挖掘
      目录引言系统需求分析2.1功能需求2.2非功能需求系统架构设计3.1技术栈3.2系统架构图数据库设计系统实现5.1后端实现5.1.1Spring配置5.1.2控制器实现5.1.3服务层与DAO层实现5.2前端实现5.2.1页面设计5.2.2AJAX请求实现数据分析与可视化创新点与未来展望总结引言随着社会的进步与人们健康意识的提升，健康管理成为了越来越重要的主题。本文介绍了一种基于SSM框架的每日健
    • 如何通过 CSS 实现响应式布局？ 破碎的天堂鸟 学习教程css前端
      通过CSS实现响应式布局是现代网页设计中的一项重要技术，它能够使网页在不同设备和屏幕尺寸下保持良好的用户体验。以下是关于如何通过CSS实现响应式布局的详细说明：1.使用媒体查询（MediaQueries）媒体查询是实现响应式布局的核心技术，它允许根据设备的特性（如屏幕宽度、高度、方向等）动态调整CSS样式。例如：@mediascreenand(max-width:768px){.example{f
    • React Compiler核心原理：新一代响应式引擎如何实现毫秒级热更新 威哥说编程 react.jsjavascript前端
      React在前端开发中已经成为构建用户界面的标准库，它的声明式编程模型和组件化设计为开发者提供了极大的灵活性和便利性。然而，随着React应用变得越来越复杂，性能成为了一个不可忽视的问题。特别是在大型应用中，如何实现快速的组件更新和响应式渲染，成为了提高开发体验和用户体验的关键。在过去几年中，React团队致力于改进React的更新机制，以解决性能瓶颈和提升开发体验。ReactCompiler（或
    • JavaWeb——CSS的使用 糖JL是我儿 JavaWebcss前端javascript
      CSS层叠样式表(英文全称:(cascadingstlesheets)能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力,简单来说,CSS用来美化页面一、CSS的引入方式:1.行内式：通过元素开始标签的style属性引入语法:style="样式名:样式值;样式名:样式值;......"缺点:代码复用度低，不利于维护CSS样式和HTML结构代
    • Spring Boot 2 快速教程：WebFlux处理流程（五） 星如雨ｸﾞｯ!(๑•̀ㅂ•́)و✧ javaspringboot后端java
      WebFlux请求处理流程下面是springmvc的请求处理流程具体步骤：第一步：发起请求到前端控制器(DispatcherServlet)第二步：前端控制器请求HandlerMapping查找Handler（可以根据xml配置、注解进行查找）匹配条件包括：请求路径、请求方法、header信息等第三步：处理器映射器HandlerMapping向前端控制器返回Handler，HandlerMappi
    • 七天速记前端八股文（重点） 秋の本名 前端前端笔记javascript
      forin和正常for循环的区别在遍历数组时，正常的for循环通常比for...in循环更适合。虽然for...in循环可以用于遍历数组，但它有一些潜在的问题和限制。下面是一些使用for循环相对于for...in循环的优势：顺序遍历：for循环可以按照数组元素的顺序进行迭代。而for...in循环在遍历数组时，并不能保证按照特定顺序遍历，因为它遍历的是对象的属性。不包含原型链上的属性：for循环仅
    • HTML+CSS面试题 KangJinXuan htmlcsschrome
      1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言最主要的不同XHTML元素必须被正确地嵌套。XHTML元素必须被关闭标签名必须用小写字母XHTMl文档必须拥有根元素2.什么是语义化的HTML？直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！HTML语义化就是让页面的内容结构化，便于对浏览器，搜索引擎解析；在没有样式cs
    • 前端知识速记--CSS篇：display 无限大. 前端知识速记前端css
      前端知识速记–CSS篇：display一、什么是display属性？display属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式，还对元素的布局、结构以及与其他元素之间的关系产生重要影响。二、常用display属性值1.blockblock级元素独占一行，宽度默认占满父容器。常见的block元素有、至、等。其特点是可以设置宽高，并且可以在上、下方添加外边距。实例：这是一个块级元素
    • 【前端】HTML 鸽鸽程序猿 前端前端html
      目录一、HTML结构1.1HTML标签1.2HTML文件基本结构1.3快速生成框架二、HTML常见标签2.1注释标签!----2.2标题标签h1到h62.3段落标签p2.4换行标签br2.5格式化标签2.6图片标签img2.7超链接标签a三、表格标签3.1常用标签3.2合并单元格四、列表标签五、表单标签5.1表单域:form标签5.2表单控件:input标签5.3label标签5.4select标
    • 前端导出Excel实践：探索xlsl的实现方式 linwu-hi 前端excel状态模式javascriptecmascripttypescript
      点击在线阅读，体验更好链接现代JavaScript高级小册链接深入浅出Dart链接现代TypeScript高级小册链接linwu的算法笔记链接前言最近写管理端的需求，发现有一个excel导出的需求，本来是后端同学负责，但是因为他们太忙了，把这块任务交给前端了，起初产品觉得前端实现不了，一听这话，这我哪里受得了，赶紧写了个demo给她看，前端是可以实现的。enen,产品看了直夸牛逼接下来，我来分享导
    • Vue前端 向 后端Flask 传文件数据并保存 battlestar Python学习vue.jsflask文件上传
      简介采用vue编写前端，上传图像文件，发送到后端flask，由后端保存前端代码exportdefault{methods:
    • Nginx作为前端web服务器和后端负载均衡器,两者在配置与调优方向有哪些不一样,请写出不一样地方和需要优化的内容 h韩 nginx前端服务器负载均衡架构运维
      在使用**Nginx**作为前端Web服务器和后端负载均衡器时，虽然它们都利用Nginx的强大功能，但配置和调优的方向有所不同。具体的优化内容也会根据其不同的用途而有所侧重。下面我将从配置和调优的不同之处，以及需要优化的具体内容进行分析。###一、Nginx作为前端Web服务器的配置与优化####配置方向1.**静态资源处理**：-**目的**：前端Web服务器主要处理静态资源请求，比如HTML、
    • Web3 黑客松组队报名 — 10000 美金奖池，新手友好，需要前后端，设计，产品，合约工程师 前端智能合约区块链以太坊
      Linea黑客松基本信息ℹ️报名截止6月30日10,000美金奖池在HackQuest平台举办，新手友好，适合Web2转型Web3的开发者参与需要前端，后端，设计，产品，合约工程师关于HackQuestHackQuest是一个充满活力的Web3开发者教育社区，我们的目标是培养下一代Web3开发者。黑客松要求✍️本次黑客松由HackQuest和Linea合作推，仅在HackQuest平台组织和举办不
    • 响应式web开发二之CSS相关 mist1star 前端css
      一.CSS背景设置表1-1属性名属性描述background-color设置元素的背景颜色。可以使用颜色名称、十六进制值、RGB、RGBA或HSL值。background-image设置元素的背景图像。可以指定一张图像的URL。使用url()函数。background-repeat定义背景图像是否重复。background-attachment控制图片的滚动行为background-positio
    • 玩转Gin框架：Golang使用Gin完成登录流程 至尊丨楷君 gingolang开发语言
      文章目录背景基于Token认证机制简介常见的Token类型Token的生成和验证在项目工程里创建jwt.go文件根目录新建.env文件创建登录接口/loginToken认证机制的优点背景登录流程，相信大家都很熟悉的。传统网站采用session后端验证登录状态，大致流程如下：用户输入用户名和密码/手机号和验证码点击登录按钮提交表单。后端校验前端传递过来的信息，验证通过在缓存中存储用户信息。后续每次请
    • html标题行距怎么设,html怎么设置行距 weixin_39762666 html标题行距怎么设
      html中，可以通过style属性，给段落元素添加“line-height:间距值;”样式来设置行距，例“本教程操作环境：windows7系统、CSS3&&HTML5版、DellG3电脑。html设置行距这是一个标准行高的段落。这是一个标准行高的段落。大多数浏览器的默认行高约为110%至120%。这是一个更小行高的段落。这是一个更小行高的段落。这是一个更小行高的段落。这是一个更小行高的段落。这是一
    • html标题位置怎么设置,在html中的位置固定标题 weixin_39942995 html标题位置怎么设置
      我有一个固定位置的标题(动态高度)。在html中的位置固定标题我需要将容器div放在标题下方。由于标题高度是动态的，因此我无法使用顶部边距的固定值。这怎么办？这里是我的CSS：#header-wrap{position:fixed;height:auto;width:100%;z-index:100}#container{/*Needtowritecsstostartthisdivbelowthe
    • html语言标题怎么居中,html标题栏代码 HTML中怎么设置标题居中 云崧 html语言标题怎么居中
      html中如何设置浏览器中标题前的logo?如题，CSS布局HTML小编今天和大家分享详解。在标签之间输入或者用favicon表示：规格有32×3128×128，直接用PS做一个图片，命名为favicon.ico，然后用FTP软件上传到网站根目录替换原来的文件即可，如果不想用FTP软件，也可以在网站的后台进行更换。HTML中怎么设置标题居中本人刚学Dw，希望热心的网友帮助，。HTML中设置标题居中
    • Nginx 运维开发高频面试题详解 千夜啊 nginx运维开发运维
      一、基础核心问题原文链接：https://blog.csdn.net/weixin_51146329/article/details/1429638531、什么是Nginx？Nginx是一个高性能的HTTP和反向代理服务器，它以轻量级和高并发处理能力而闻名。Nginx的反向代理功能允许它作为前端服务器，接收客户端的请求并将它们转发到后端服务器，这样可以隐藏后端服务器的细节，提高安全性Nginx也能
    • 鸿蒙开发在onPageShow中数据加载不完整的问题分析与解决 taopi2024 Harmonyharmonyos
      APIVersion121、onPageShow()作什么的首先说明下几个前端接口的区别：ArkUI-X的aboutToAppear()接口是一个生命周期接口，用于在页面即将显示之前调用。在ArkUI-X中，aboutToAppear()接口是一个重要的生命周期接口，它会在页面即将显示之前被调用。这个接口通常用于在页面显示之前进行一些准备工作，比如加载数据、初始化状态等。通过在aboutToApp
    • Web3 黑客松组队报名 — 30000 美金奖池，需要前后端，设计，产品，合约工程师 web3
      MantleAPACHackathon基本信息ℹ️项目提交截至12月15日30,000美金奖池三大赛道：DeFi、Infra&AI、Gaming&Meme需要前端，后端，设计，产品，合约工程师黑客松要求✍️本次黑客松由MantleFoundation联合Hackguest和OpenBuild共同打造，面向亚太地区开发者和区块链爱好者的线上黑客马拉松不限制主题部署在Mantle测试网上谁适合参加UI
    • NPDP第三章 新产品流程 钱包不紧张女士 产品运营
      什么是流程？流程描述多个人或团体经过一段时间的协作执行工作，流程所涉及的一些活动是由一连串的序列所连接，它具有可重复和可多个路径来完成。成功的新产品决策（决策的基本框架）（决策来源：知识、信息、数据具体来源：内部、外部）1.识别问题和机会2.收集信息3.分析情况4.提出备选解决方案5.评估备选解决方案6.优选解决方案7.基于决策而行动新产品开发成功的关键1.重视前端2.正确决策信息来源：内部、外部
    • Vue和Vue-Element-Admin（十）：HTML和CSS快速学习笔记 A叶子叶 #Vue与Web开发vue.jshtmlcss
      目录html标签分类网页布局盒子模型浮动定位css标签选择flex布局transform转换Vue开发tipsless和scssVScode常用插件后端语言框架很多，Java适合企业级应用（规范且稳定），Go适合高并发场景（比如云上产品），Python框架（bottle，tornado，django）简单且快速，也天然适合数据分析场景，PHP适合快速建站，前端变化小，所见即所得，因此抽空记录下学习
    • Vue.js组件开发-实现全屏手风琴幻灯片切换特效 LCG元 前端vue.js前端javascript
      使用Vue实现全屏手风琴幻灯片切换特效步骤概述创建Vue项目：使用VueCLI创建一个新的Vue项目。设计组件结构：创建一个手风琴幻灯片组件，包含幻灯片项和切换逻辑。实现样式：使用CSS实现全屏和手风琴效果。添加交互逻辑：通过Vue的事件处理实现幻灯片的切换。详细代码1.创建Vue项目安装VueCLI，使用以下命令进行安装：npminstall-g@vue/cli然后创建一个新的Vue项目：vue
    • Vue.js组件开发-实现图片浮动效果 LCG元 前端vue.js前端javascript
      使用Vue实现图片浮动效果实现思路将使用Vue的单文件组件（.vue）来实现图片浮动效果。主要思路是通过CSS的transform属性结合JavaScript的定时器来改变图片的位置，从而实现浮动效果。代码实现exportdefault{data(){return{//初始化图片在x轴上的偏移量xOffset:0,//初始化图片在y轴上的偏移量yOffset:0,//定时器ID，用于后续清除定时器
    • nodejs 安装node-sass kino的编程笔记 vuenodejsnpmnode-sassvue
      installnode-sass作用检验node-sass是否安装以及是否安装成功安装node-sass配置淘宝镜像安装node-sass的命令作用Sass是一种预处理器脚本语言，可以解释或编译成层叠样式表(CSS)检验node-sass是否安装以及是否安装成功node-sass-v表示已经安装或安装成功表示没有安装或者安装失败安装node-sass配置淘宝镜像设置淘宝镜像的二进制站点setSAS
    • 敲黑板！如果使用lighthouse 遇到NO_FCP错误可能是前端安全策略导致的！ 测试开发Kevin 性能测试接口测试测试工具性能优化前端
      lighthouseNO_FCP使用lighthouse进行前端性能测试时发现一个问题：Thepagedidnotpaintanycontent.Pleaseensureyoukeepthebrowserwindowintheforegroundduringtheloadandtryagain.(NO_FCP)页面截图如下：刚开始以为是自己的lighthouse出了问题，然后找一个其他网页进行性能
    • ASM系列六 利用TreeApi 添加和移除类成员 lijingyao8206 jvm动态代理ASM字节码技术TreeAPI
          同生成的做法一样，添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子，下面这个Task类，我们来移除isNeedRemove方法，并且添加一个int 类型的addedField属性。   package asm.core; /** * Created by yunshen.ljy on 2015/6/
    • Springmvc-权限设计 bee1314 springWebjsp
      万丈高楼平地起。 权限管理对于管理系统而言已经是标配中的标配了吧，对于我等俗人更是不能免俗。同时就目前的项目状况而言，我们还不需要那么高大上的开源的解决方案，如Spring Security，Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 目标： 1.实现权限的管理（CRUD） 2.实现部门管理 （CRUD) 3.实现人员的管理 （CRUD） 4.实现部门和权限
    • 算法竞赛入门经典（第二版）第2章习题 CrazyMizzz c算法
      2.4.1 输出技巧 #include <stdio.h> int main() { int i, n; scanf("%d", &n); for (i = 1; i <= n; i++) printf("%d\n", i); return 0; } 习题2-2 水仙花数(daffodil
    • struts2中jsp自动跳转到Action 麦田的设计者 jspwebxmlstruts2自动跳转
      1、在struts2的开发中，经常需要用户点击网页后就直接跳转到一个Action，执行Action里面的方法，利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action（不是专业人士）   2、＜jsp:forward page="xxx.action" /＞ ，这个标签可以实现跳转，page的路径是相对地址,不同与jsp和j
    • php 操作webservice实例 IT独行者 PHPwebservice
      首先大家要简单了解了何谓webservice，接下来就做两个非常简单的例子，webservice还是逃不开server端与client端。我测试的环境为：apache2.2.11 php5.2.10做这个测试之前，要确认你的php配置文件中已经将soap扩展打开，即extension=php_soap.dll; OK 现在我们来体验webservice //server端 serve
    • Windows下使用Vagrant安装linux系统 _wy_ windowsvagrant
      准备工作： 下载安装 VirtualBox ：https://www.virtualbox.org/ 下载安装 Vagrant ：http://www.vagrantup.com/ 下载需要使用的 box ： 官方提供的范例：http://files.vagrantup.com/precise32.box 还可以在 http://www.vagrantbox.es/ 
    • 更改linux的文件拥有者及用户组(chown和chgrp) 无量 clinuxchgrpchown
      本文（转） http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.com/blog/1435157 一、基本使用： 使用chown命令可以修改文件或目录所属的用户：        命令
    • linux下抓包工具 矮蛋蛋 linux
      原文地址： http://blog.chinaunix.net/uid-23670869-id-2610683.html tcpdump -nn -vv -X udp port 8888 上面命令是抓取udp包、端口为8888 netstat -tln 命令是用来查看linux的端口使用情况 13 . 列出所有的网络连接 lsof -i 14. 列出所有tcp 网络连接信息 l
    • 我觉得mybatis是垃圾！：“每一个用mybatis的男纸，你伤不起” alafqq mybatis
      最近看了  每一个用mybatis的男纸，你伤不起 原文地址 ：http://www.iteye.com/topic/1073938 发表一下个人看法。欢迎大神拍砖； 个人一直使用的是Ibatis框架，公司对其进行过小小的改良； 最近换了公司，要使用新的框架。听说mybatis不错；就对其进行了部分的研究； 发现多了一个mapper层；个人感觉就是个dao；
    • 解决java数据交换之谜 百合不是茶 数据交换
      交换两个数字的方法有以下三种 ，其中第一种最常用   /* 输出最小的一个数 */ public class jiaohuan1 { public static void main(String[] args) { int a =4; int b = 3; if(a<b){ // 第一种交换方式 int tmep =
    • 渐变显示 bijian1013 JavaScript
      <style type="text/css"> #wxf { FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98); height: 25px; } </style>
    • 探索JUnit4扩展：断言语法assertThat bijian1013 java单元测试assertThat
      一.概述         JUnit 设计的目的就是有效地抓住编程人员写代码的意图，然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今，版本不停的翻新，但是所有版本都一致致力于解决一个问题，那就是如何发现编程人员的代码意图，并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够
    • 【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}} bit1129 gson
        如何把如下简单的JSON字符串反序列化为Java的POJO对象? {"data":{"IM":["MSN","QQ","Gtalk"]}}   下面的POJO类Model无法完成正确的解析：   import com.google.gson.Gson;
    • 【Kafka九】Kafka High Level API vs. Low Level API bit1129 kafka
      1. Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API，实际上非常复杂) 在选用哪种Consumer API时，首先要弄清楚这两种API的工作原理，能做什么不能做什么，能做的话怎么做的以及用的时候，有哪些可能的问题  
    • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua
      Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
    • java-归并排序 bylijinnan java
      import java.util.Arrays; public class MergeSort { public static void main(String[] args) { int[] a={20,1,3,8,5,9,4,25}; mergeSort(a,0,a.length-1); System.out.println(Arrays.to
    • Netty源码学习-CompositeChannelBuffer bylijinnan javanetty
      CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 查看API（ http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description） 可以看到，所谓“Transparent Zero Copy”是通
    • Android中给Activity添加返回键 hotsunshine Activity
      // this need android:minSdkVersion="11" getActionBar().setDisplayHomeAsUpEnabled(true); @Override public boolean onOptionsItemSelected(MenuItem item) {
    • 静态页面传参 ctrain 静态
      $(document).ready(function () { var request = { QueryString : function (val) { var uri = window.location.search; var re = new RegExp("" + val + "=([^&?]*)", &
    • Windows中查找某个目录下的所有文件中包含某个字符串的命令 daizj windows查找某个目录下的所有文件包含某个字符串
      findstr可以完成这个工作。   [html]  view plain copy   >findstr /s /i "string" *.*   上面的命令表示，当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu
    • 改善程序代码质量的一些技巧 dcj3sjt126com 编程PHP重构
      有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：    尽量保持方法简短    尽管很多人都遵
    • SharedPreferences对数据的存储 dcj3sjt126com
      SharedPreferences简介：                                                   &nbs
    • linux复习笔记之bash shell (2) bash基础 eksliang bashbash shell
      转载请出自出处： http://eksliang.iteye.com/blog/2104329 1.影响显示结果的语系变量（locale）  1.1locale这个命令就是查看当前系统支持多少种语系，命令使用如下： [root@localhost shell]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8"
    • Android零碎知识总结 gqdy365 android
      1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 所以最后得出结论：CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里，比如缓存。发生修改时候做copy，新老版本分离，保证读的高
    • HoverTree.Model.ArticleSelect类的作用 hvt Web.netC#hovertreeasp.net
      ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类，用于存放查询文章时的条件，例如HvtId就是文章的id。HvtIsShow就是文章的显示属性，当为-1是，该条件不产生作用，当为0时，查询不公开显示的文章，当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放，开发环境为Visual Studio 2013
    • PHP 判断是否使用代理 PHP Proxy Detector 天梯梦 proxy
      1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to
    • apache的math库中的回归——regression（翻译） lvdccyb Mathapache
      这个Math库，虽然不向weka那样专业的ML库，但是用户友好，易用。 多元线性回归，协方差和相关性（皮尔逊和斯皮尔曼），分布测试（假设检验，t，卡方，G），统计。   数学库中还包含，Cholesky，LU，SVD，QR，特征根分解，真不错。   基本覆盖了：线代，统计，矩阵， 最优化理论 曲线拟合 常微分方程 遗传算法（GA）， 还有3维的运算。。。
    • 基础数据结构和算法十三：Undirected Graphs (2) sunwinner Algorithm
        Design pattern for graph processing. Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation
    • 云计算平台最重要的五项技术 sumapp 云计算云平台智城云
      云计算平台最重要的五项技术 1、云服务器 云服务器提供简单高效，处理能力可弹性伸缩的计算服务，支持国内领先的云计算技术和大规模分布存储技术，使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 特性 机型丰富 通过高性能服务器虚拟化为云服务器，提供丰富配置类型虚拟机，极大简化数据存储、数据库搭建、web服务器搭建等工作； 仅需要几分钟，根据CP
    • 《京东技术解密》有奖试读获奖名单公布 ITeye管理员 活动
      ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。  12月试读活动回顾： http://webmaster.iteye.com/blog/2164754 本次技术图书试读活动获奖名单及相应作品如下： 一等奖（两名） Microhardest：http://microhardest.ite
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他