CSS+JS下拉菜单和纯CSS下拉菜单

下拉菜单

（思路：先把二级定位到屏幕外，鼠标悬停重新定位回来；另一个就是ul浮动，li也浮动）

下拉菜单的一般思路就是把子导航嵌套在无序列表中，把列表定位到屏幕之外，当鼠标悬停在其父列表项上时，重新定位它。

有两个问题需要注意，

第一个问题，列表项设置了float浮动，因此列表也要浮动已防止列表收缩：

ul.nav,ul.nav ul{float:left}

ul.nav li{float:left}

第二个问题，子导航的定位

ul.nav li ul{position:absolute;left:-999em}

ul.nav li:hover ul{left:auto}

 

CSS+JS下拉菜单和纯CSS下拉菜单_第1张图片

一、CSS+JS下拉菜单

原理：一级菜单的li中包含二级菜单ul。在鼠标没有移上去时，二级菜单的ul是display：none的状态，鼠标一移上去变成display：block。改变这个display属性值是通过JS来实现。鼠标hover时，把整个二级菜单的ul给display出来，用到的事件onmouseonver。鼠标移出又把整个二级菜单的ul 给隐藏掉。

nav-js.html文件

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<link href="nav-js.css" rel="stylesheet">
<script type="text/javascript">
    //显示子菜单
    function showSubMenu(li){
        var subMenu = li.getElementsByTagName("ul")[0];
        subMenu.style.display = "block";
    }

    //隐藏子菜单
    function hideSubMenu(li){
        var subMenu = li.getElementsByTagName("ul")[0];
        subMenu.style.display = "none";
    }
</script>
</head>
<body>
    <ul id="navigation">
        <li><a href="#">首页</a></li>
        <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">我们的服务</a>
            <ul>
                <li><a href="#">服务一</a></li>
                <li><a href="#">服务二</a></li>
                <li><a href="#">服务三</a></li>
                <li><a href="#">服务四</a></li>
                <li><a href="#">服务五</a></li>
            </ul>
        </li>
        <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">我们的团队</a>
            <ul>
                <li><a href="#">服务一</a></li>
                <li><a href="#">服务二</a></li>
                <li><a href="#">服务三</a></li>
                <li><a href="#">服务四</a></li>
                <li><a href="#">服务五</a></li>
            </ul>
        </li>
        <li><a href="#">我们的方向</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</body>
</html>
View Code

 

nav-css.css文件

 1 @charset "UTF-8";
 9  *{
10      margin: 0;
11      padding: 0;
12  }
13 
14 body{
15     font-size: 14px;
16     font-family: sans-serif;
17 }
18 #navigation,#navigation li ul{
19     list-style-type: none;
20 }
21 #navigation li{
22     float: left;
23     text-align: center;
24  position: relative;
25 }
26 #navigation li a:link,#navigation li a:visited{
27     display: block;
28     text-decoration: none;
29     color: #000;
30     width: 120px;
31     height: 40px;
32     line-height: 40px;
33     border: 1px solid #fff;
34     background: #c5dbf2;
35     border-width: 1px 1px 0 0; 
36 }
37 #navigation li a:hover{
38     color: #fff;
39     background: #2687eb;
40 }
41 #navigation li ul li{
42     float: none;    
43 }
44 #navigation li ul{ 45  display: none; 46  position: absolute; /*二级ul使用绝对定位，宽度大于一级菜单时，才不会撑大一级*/ 47 
48 }
49 #navigation li ul li a:link,#navigation li ul li a:visited{
50     display: block;
51     width: 160px;
52 }

 

 在46行，如果一级li的宽度小于二级li的宽度，那么就会撑大一级li的宽度，如图：

CSS+JS下拉菜单和纯CSS下拉菜单_第2张图片

 显示和隐藏二级UL的JS函数：

//显示子菜单
    function showSubMenu(li){
        var subMenu = li.getElementsByTagName("ul")[0];                  /*传了一个参数li进来，表示当前鼠标经过的li，
                                                                         再通过查找当前li下面的第一个ul，注意数组从0开始*/
        subMenu.style.display = "block";
    }

    //隐藏子菜单
    function hideSubMenu(li){
        var subMenu = li.getElementsByTagName("ul")[0];
        subMenu.style.display = "none";
    }

 

做到了兼容所有的主流浏览器。

二、纯CSS实现的下拉菜单

纯CSS写的下拉菜单，其他浏览器都可以兼容，唯独IE6这家伙不怎么听话不兼容，所以当时IE6时，采用table布局，来达到IE6兼容的目的。

HTML文件

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>纯css下拉菜单，兼容IE6</title>
        <link rel="stylesheet" type="text/css" href="nav-css3.css">
<!--[if lte IE 6]>
<style tpye="text/css">
table{
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}
.menu ul li a.hide,.menu ul li a:visited.hide{
    display: none;
}
.menu ul li a:hover{
    color:#fff;
    background: #b3ab79;
}
.menu ul li a:hover ul{
    display: block;
    position: absolute;
    top: 32px;
    left: 0;
    width: 105px;
}
.menu ul li a:hover ul li a{
    background: #faeec7;
    color: #000;
    width:160px;
}
.menu ul li a:hover ul li a:hover{
    background: #dfc184;
    color: #000;
}
</style>
<![endif]-->
    </head>
    <body>
        <div class="menu">
            <ul>
                <li><a class="hide" href="#">我们的服务</a>
                    <!--[if lte IE 6]>
                    <a href="#">我们的服务
                    <table><tr><td>
                    <![endif]-->
                    <ul>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                    </ul>
                    <!--[if lte IE 6]>
                    </td></tr></table>
                    </a>
                    <![endif]-->
                </li>
                <li><a class="hide" href="#">我们的服务</a>
                    <!--[if lte IE 6]>
                    <a href="#">我们的服务
                    <table><tr><td>
                    <![endif]-->
                    <ul>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                    </ul>
                    <!--[if lte IE 6]>
                    </td></tr></table>
                    </a>
                    <![endif]-->
                </li>
                <li><a class="hide" href="#">我们的服务</a>
                    <!--[if lte IE 6]>
                    <a href="#">我们的服务
                    <table><tr><td>
                    <![endif]-->
                    <ul>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                        <li><a href="#">服务一</a></li>
                    </ul>
                    <!--[if lte IE 6]>
                    </td></tr></table>
                    </a>
                    <![endif]-->
                </li>
            </ul>
        </div>
    </body>
</html>

 

 

 

 

CSS文件 

*{
    margin: 0;
    padding: 0;
}
.menu{
    font-family: arial,sans-serif;
    font-size: 14px;
    width: 750px;
}
.menu ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.menu ul li{
    float: left;
    position: relative;
}

.menu ul li a, .menu ul li a:visited{
    display: block;
    text-align: center;
    text-decoration: none;
    width: 104px;
    height: 30px;
    color: #000;
    border: 1px solid #fff;
    border-width: 1px 1px 0 0;
    background: #c9c9a7;
    line-height: 30px;
    font-size: 11px;
}
/*隐藏二级菜单ul*/
.menu ul li ul{
    display: none;
}/*隐藏结束*/

.menu ul li:hover a{                  /*????????????尝试修改此处*/
    color: #fff;
    background: #b3ab79;
}
/*显示二级菜单*/
.menu ul li:hover ul{
    display: block;
    position: absolute;
    top: 31px;
    left: 0px;
    width: 105px;
}/*结束*/

/*添加二级菜单鼠标移过的样式*/
.menu ul li:hover ul li a{
    display: block;
    background: #faeec7;
    color: #000;
    width: 160px;
}
.menu ul li:hover ul li a:hover{
    background: #dfc184;
    color: #000;
}

 

ok，这样IE6也达到兼容。

 

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

  • 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来创建各种桌面应用程序，如文本编辑器、计算器、图片查看器、游戏等。这些应用程序可以具有复杂的用户界面，包括窗口、按钮、文本框、下拉菜单、滚动条等。数据可视化
  • 白嫖Gitee实现远程公告功能和小型文件上传下载 xu-jssy Python自动化脚本gitee
    备注：20240527更新：新增私人令牌下载模式一、准备工作1、打开Gitee网站：Gitee.comhttps://gitee.com/2、获取access_token，用于身份验证登录后点击右上角头像，在下拉菜单中进入个人主页点击左边的个人设置点击左边菜单中的安全设置->私人令牌点击右上角生成新令牌根据提示填写信息，点击提交在弹出的页面复制令牌，注意备份保存3、创建一个仓库用来存放文件可以把远
  • win10配置python_Win 10安装Python及环境变量配置 weixin_39663933 win10配置python
    一、Windows系统很多童鞋问之前的教程怎么没有介绍安装python3.5的，现予以补充更新一下。（一）安装python3.51、下载进入Python官网www.python.org，在“Downloads”下拉菜单中的右半部分直接点击python3.5.2版本即可下载，它会自动下载32位的。如果需要64位，点击左半部分“Windows”，选择第二项“LatestPython3Release-P
  • 如何搭建FTP服务器？ 朝畫夕拾
    FTP服务器可以方便的供用户上传，下载文件，对于我们日常的教学，工作都有着很大的帮助，今天小编就为大家讲解下如何在搭建FTP服务器希望对大家有所帮助。工具/原料电脑一台方法/步骤1首先我们创建一个用户账户用于登录FTP进行操作。右键点击桌面的我的电脑点击选择管理选项，进入管理界面打开本地用户和组选项，我们可以看到列表中的用户选项2然后右键用户选项，在下拉菜单中选择新用户，开始建立我们的用户，填写用
  • 2019-11-17第二个复盘日 孙美丽儿锦华装饰
    今天为第二个复盘日，回听了条件格式、下拉菜单两节课件。函数由于用的比较多，就没有回听，对着课件看了一遍。一、条件格式条件格式的运用，就是当数据达到某一条件时，设置格式。实际运用中，标记身份证号码的重复值。由于身份证号码超过15位，如果前15位号码一致，即使后3位不一致。直接用标记重复值时，也会标记为重复值。在设置公式条件格式时，单元格值用&"*"连接，使其转化为文本就可以了。但是很奇怪，我在文本格
  • 神奇酷炫的下拉菜单 紫藤11
    下拉菜单目前公司的销售报表上，用有这个功能，真心方便，感谢小哈录制的抖音视频，但操作更简单。一、基本用法直接按住Alt+↓即可快速生成,注意：想要实现这样的功能前提是已经输入部分内容二、进阶用法1.提示信息2.出错警告3.圈释无效信息第一次作用圈释无效信息的功能三、动态下拉列表选取数据→定义名称→数据验证→序列→输入=名称四、快速录入当前时间=now（）数据验证设置单元格格式五、借贷只能一方输入选
  • JavaScript基础 不蒸馒头曾口气 Vuejavascript开发语言前端学习笔记
    1JavaScript介绍1.1JS简介1.JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2.作用——网页特效（监听用户的一些行为，让网页作出对应的反馈，如轮播图、下拉菜单等）——表单验证（针对表单数据的合法性进行判断，如输入邮箱的判断）——数据交互（后台的数据，渲染到前端）——服务端编程（node.js）3.JavaScript的组成ECMAScript:(js的
  • latex学习笔记（三）——中文处理办法 richybai
    1.准备工作①，在选项->设置->构建->默认编辑器的下拉菜单中选择XeLaTeX②，在选项->设置->编辑器->默认字体编码的下拉菜单中选择UTF-8③，在软件右下角确定字符编码为UTF-8，如下图所示设置为UTF-82.开始编写中文①，首先导入ctex宏包:\usepackage{ctex}②，将title改为中文内容\title{\heiti学习笔记}%\heiti使中文显示为黑体\auth
  • 【免越狱】iOS任意版本号APP下载 火星技术 ios
    下载地址https://pan.quark.cn/s/570e928ee2c4软件介绍下载iOS旧版应用，简化繁琐的抓包流程。一键生成去更新IPA（手机安装后，去除AppStore的更新检测）。软件界面使用方法一、直接搜索方式搜索APP，双击选择。双击选择要下载的版本。在iTunes中下载即可。二、复制APP链接方式在iTunes下载按钮右侧下拉菜单中，选择【复制链接】。双击选择要下载的版本。在i
  • 使用vue3+ts封装一个自动补全输入框Autocomplete组件 温暖前端 javascript前端vue.js
    创建一个名为Autocomplete.vue的文件，在这个组件中，使用了Vue3的CompositionAPI，包括ref、watch、onMounted等。组件接收placeholder、debounce和clearable作为props，并根据这些props来渲染输入框和下拉菜单{{item}}import{defineComponent,ref,watch,onMounted}from'vu
  • qt自定义下拉菜单框 二氧化矽 qt
    Qt自带的QCombBox下拉能够显示的东西有限，想添加其他的控件不太方便，所以就想自己定义一个，基本思路是，一个QLineEdit，一个QPushButton,一个QListWidget组成一个组合控件。过程：1、将QPushButton嵌入进QLineEdit中。_button->setText("...");_lineEdit->setReadOnly(true);_lineEdit->se
  • MFC工控项目实例之八选择下拉菜单添加打钩图标 兵哥工控 MFC工控项目实例mfcc++
    承接专栏《MFC工控项目实例之七点击下拉菜单弹出对话框》具体添加菜单栏参考我的博客文章《MFC工控项目实例之七点击下拉菜单弹出对话框》这里只给出相关代码1、在SEAL_PRESSUREDlg.h文件中添加代码classCSEAL_PRESSUREDlg:publicCDialog{//Constructionpublic:...CBitmapm_bmSel,m_bmList;voidOnTypeC
  • MFC工控项目实例之六CFile添加菜单栏 兵哥工控 MFC工控项目实例mfcc++
    本程序基于前期我的博客文章《MFC工控项目实例之五CFile类读写系统参数》添加两个对话框如下具体添加菜单栏参考我的博客文章《MFC_CFile类实现下拉菜单读写实例（源码下载）》这里给出相关代码在SEAL_PRESSURE.h文件中添加#include...classCProductPara{public:union{struct{charm_strTypeName[24];charm_strB
  • Vue使用el-cascader 实现多级下拉菜单 孟宪磊mxl vue.jsjavascript前端
    代码：默认click触发子菜单hover触发子菜单exportdefault{data(){return{options:[],father:[{id:1,pid:'0',name:'安徽省',code:'340000',level:1},{id:13,pid:'0',name:'河北省',code:'350000',level:1}],children:[{code:"340800",id:13
  • uniapp 下拉菜单地区和筛选（使用直接改源代码适配） 鹤鸣的日常 uni-app前端java
    地区筛选{{item.name}}0">{{item.name}}0">{{item.name}}重置查看品种{{item.name}}价格区间（元）handleChangePriceMin(e)":value="paramsData.priceMin"class="fillIn-input"placeholder="最低价"/>一handleChangePriceMax(e)":value="p
  • Element-PLUS下拉框、日期组件、下拉菜单定位问题 element-plus下拉框组件定位问题 element-plus日期组件定位问题 头上一片天空 vue.jselement-uielement-plusvuevue.js
    Element-PLUS下拉框、日期组件定位问题element-plus下拉框组件定位问题element-plus日期组件定位问题1、增加全局样式2、使用2.1、下拉框使用2.2、日期组件使用1、增加全局样式.el-popper.is-pure{inset:36pxautoauto0px!important;}2、使用Element-PLUS下拉框、日期、下拉菜单等组件使用的都是Popover，在
  • MAC系统如何设置SOCKS5代理 KookeeyLena7 macos
    在Mac系统上设置SOCKS5代理可以帮助用户提高在线隐私和安全性，或者突破某些网络限制。以下是详细步骤，指导您如何在Mac系统上配置SOCKS5代理。一、打开系统偏好设置在Mac桌面的左上角，点击苹果图标。在下拉菜单中选择“系统偏好设置”。二、进入网络设置在系统偏好设置窗口中，找到并点击“网络”图标。三、选择网络连接方式在网络设置窗口中，您会看到所有的网络连接方式。选择您当前正在使用的网络连接，
  • 【Qt笔记】QToolButton控件详解 冷眼看人间恩怨 Qtqt笔记开发语言QToolButton
    目录一、前言二、QToolButton的基本特性2.1图标和文本2.2自动提升2.3下拉菜单2.4工具提示2.5弹出模式三、高级功能3.1自定义大小与形状3.2检查框与单选按钮3.3动画效果四、常用方法与信号槽常用方法信号槽五、实际应用示例说明六、总结一、前言在Qt框架中，QToolButton是一个非常重要的控件，它提供了快速访问命令或选项的方式。QToolButton通常显示一个图标或文本，当
  • WPS将文字文档朗读 cuisidong1997 wps
    WPS提供了将文字文档转化成语音的功能，还可一键导出音频文件，此功支持手机端和电脑端。分界线.png电脑端的操作如下：▪第一步：用WPS打开文字文档，点击「审阅」选项卡下的「朗读」下拉菜单，可选择「全文朗读」，也可框选文字「选中朗读」。录制_2021_03_24_14_40_06_490.gif▪第二步：点击「朗读」的下拉菜单，选择显示工具栏，此时可以在右侧的朗读工具栏里调整音量、语速、语调等设置
  • Combobox控件 我不是立达刘宁宇 python
    #Combobox控件#通过前面内容的介绍我们知道#Listbox是一个供用户从列表项中选择相应条目的控件#。#但在有些情况下，比如列表的项目过多时，若使用列表控件，列出所有选项就会显得界面格外臃肿，这时就需要用到##Combobox控件，也就是下拉菜单控件（或称复合框），#该控件是列表控件的改进版，具有更加灵活的界面，因此其应用场景相比于前者要更加广泛#不过需要注意的是Combobox并不包含在
  • html按钮的下拉菜单,按钮下拉菜单 weixin_39980929 html按钮的下拉菜单
    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。按钮下拉菜单其实就是普通的下拉菜单，只不过把“”标签元素换成了“”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。如下所示：按钮下拉菜单按钮下拉菜单项按钮下拉菜单项按钮下拉菜
  • vue项目下拉菜单点击选项弹出弹框的实现 奋斗者格洛古 vue.jsjavascript前端
    项目需求，点击下拉菜单的b选项，弹出编辑输入框：请选择选项A选项B弹窗内容这是一个弹窗。exportdefault{data(){return{selectedOption:"",showPopup:false};},methods:{handleOptionChange(){if(this.selectedOption==="B"){this.showPopup=true;}else{this.
  • SOLIDWORKS Visualize 界面介绍 solidworks_A 数码相机solidworks
    现在有越来越多的朋友在工作中选择使用SOLIDWORKSVisualize正版软件，这真是太棒了!这次的主题是小索带大家了解SOLIDWORKSVisualize界面，让更多的朋友快速的熟悉SOLIDWORKSVisualize界面。【菜单栏】位于界面的顶端，菜单栏包含多个下拉菜单。【3D视窗】位于界面的左侧，用于展示模型，3D视窗显示打开的项目与当前选定的相机，当进行移动相机、添加外观等操作时，
  • Shader Weaver使用教程9 - 使用模糊 OneMore2018
    我们将在本教程中做什么准备节点在项目视图中，打开“ShaderWeaver/Textures”文件夹并将“火焰”纹理设置为ROOT节点添加模糊节点连接blur1和ROOT节点将模糊1节点的“X”和“Y”的值更改为“1”按下“+”按钮在“[自定义参数]”栏中在输入栏中输入“blurX”，然后按下“新范围”按钮在输入栏中输入“blurY”并按下“新范围”按钮选择blur1节点下拉菜单并分别变为“blu
  • html表格标签(下)：lable标签，select标签和textara标签 fly in the sky ! 前端学习html程序人生
    html表格标签(下)：lable标签，select标签和textarea标签lable标签搭配input使用,点击label标签就能选中对应的单选/复选框,能够提升用户体验。for属性:指定当前label和哪个相同id的input标签对应(此时点击才是有用的)运行效果：select标签下拉菜单注：option中定义selected="selected"表示默认选中。示例代码：运行效果：默认选择年
  • uni-app引入Vant 下拉菜单dropdown选择过后边的之后再选择前边的选项出现点击无效 Florenza 问题解决uni-app
    解决办法：打开vant源码找到对应字段进行修改，这里以dropdown为例：找到wxcomponents/vant-weapp/dropdown-item/index.wxml打开后找到after-enter和after-leave这两个事件，并改为驼峰命名：afterEnter和afterLeave即可！有遇到问题的小伙伴可以去试一试，看下是否能够解决！
  • HTML和CSS 蘑菇plus
    表单标签男女篮球乒乓球足球游泳表单标签(下拉菜单和多行文本域)下拉菜单和多行文本域账号信息反馈信息成都重庆北京大连青岛上次没有发送信息空白标签认识cssdiv{background-color:deepskyblue;width:40%;}我是divcss选择器*{font-size:20px;}#a1{color:#00BFFF}div{color:yellow;}.c1{color:red;}
  • 二。CST 电路 微带低通滤波器设计练习 II 转换为3D模型 麦克斯韦信徒 CST电路仿真射频工程硬件工程
    上篇以电路的形式计算了微带低通滤波器的参数，那这一篇我们一起来看看怎么快速地转换并建立3D模型，然后计算参数，并和电路计算的参数进行比较。另外，本文中教会读者排除仿真中遇到的常见的一个错误问题，使仿真结果符合预期。1.各个微带模组组成的微带电路是什么样子？在CST电路中有一个功能是可以观察微带模组组合后的微带电路的，这个就是Assembly，装配功能。点击下图箭头指示的Edit下拉菜单，选择点击A
  • HttpClient 4.3与4.3版本以下版本比较 spjich javahttpclient
    网上利用java发送http请求的代码很多，一搜一大把，有的利用的是java.net.*下的HttpURLConnection，有的用httpclient，而且发送的代码也分门别类。今天我们主要来说的是利用httpclient发送请求。 httpclient又可分为 httpclient3.x httpclient4.x到httpclient4.3以下 httpclient4.3
  • Essential Studio Enterprise Edition 2015 v1新功能体验 Axiba .net
    概述：Essential Studio已全线升级至2015 v1版本了！新版本为JavaScript和ASP.NET MVC添加了新的文件资源管理器控件，还有其他一些控件功能升级，精彩不容错过，让我们一起来看看吧！ syncfusion公司是世界领先的Windows开发组件提供商，该公司正式对外发布Essential Studio Enterprise Edition 2015 v1版本。新版本
  • [宇宙与天文]微波背景辐射值与地球温度 comsci 背景
            宇宙这个庞大,无边无际的空间是否存在某种确定的,变化的温度呢?      如果宇宙微波背景辐射值是表示宇宙空间温度的参数之一,那么测量这些数值,并观测周围的恒星能量输出值,我们是否获得地球的长期气候变化的情况呢?   &nbs
  • lvs-server 男人50 server
    #!/bin/bash # # LVS script for VS/DR # #./etc/rc.d/init.d/functions # VIP=10.10.6.252 RIP1=10.10.6.101 RIP2=10.10.6.13 PORT=80 case $1 in start)   /sbin/ifconfig eth2:0 $VIP broadca
  • java的WebCollector爬虫框架 oloz 爬虫
    WebCollector主页： https://github.com/CrawlScript/WebCollector 下载：webcollector-版本号-bin.zip将解压后文件夹中的所有jar包添加到工程既可。 接下来看demo package org.spider.myspider; import cn.edu.hfut.dmic.webcollector.cra
  • jQuery append 与 after 的区别 小猪猪08
    1、after函数 定义和用法： after() 方法在被选元素后插入指定的内容。 语法： $(selector).after(content) 实例： <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></scr
  • mysql知识充电 香水浓 mysql
    索引 索引是在存储引擎中实现的，因此每种存储引擎的索引都不一定完全相同，并且每种存储引擎也不一定支持所有索引类型。 根据存储引擎定义每个表的最大索引数和最大索引长度。所有存储引擎支持每个表至少16个索引，总索引长度至少为256字节。 大多数存储引擎有更高的限制。MYSQL中索引的存储类型有两种：BTREE和HASH，具体和表的存储引擎相关； MYISAM和InnoDB存储引擎
  • 我的架构经验系列文章索引 agevs 架构
    下面是一些个人架构上的总结，本来想只在公司内部进行共享的，因此内容写的口语化一点，也没什么图示，所有内容没有查任何资料是脑子里面的东西吐出来的因此可能会不准确不全，希望抛砖引玉，大家互相讨论。 要注意，我这些文章是一个总体的架构经验不针对具体的语言和平台，因此也不一定是适用所有的语言和平台的。 （内容是前几天写的，现附上索引）   前端架构 http://www.
  • Android so lib库远程http下载和动态注册 aijuans andorid
    一、背景      在开发Android应用程序的实现，有时候需要引入第三方so lib库，但第三方so库比较大，例如开源第三方播放组件ffmpeg库, 如果直接打包的apk包里面, 整个应用程序会大很多.经过查阅资料和实验，发现通过远程下载so文件，然后再动态注册so文件时可行的。主要需要解决下载so文件存放位置以及文件读写权限问题。   二、主要
  • linux中svn配置出错 conf/svnserve.conf:12: Option expected 解决方法 baalwolf option
    在客户端访问subversion版本库时出现这个错误： svnserve.conf:12: Option expected 为什么会出现这个错误呢，就是因为subversion读取配置文件svnserve.conf时，无法识别有前置空格的配置文件，如### This file controls the configuration of the svnserve daemon, if you##
  • MongoDB的连接池和连接管理 BigCat2013 mongodb
    在关系型数据库中，我们总是需要关闭使用的数据库连接，不然大量的创建连接会导致资源的浪费甚至于数据库宕机。这篇文章主要想解释一下mongoDB的连接池以及连接管理机制，如果正对此有疑惑的朋友可以看一下。 通常我们习惯于new 一个connection并且通常在finally语句中调用connection的close()方法将其关闭。正巧，mongoDB中当我们new一个Mongo的时候，会发现它也
  • AngularJS使用Socket.IO bijian1013 JavaScriptAngularJSSocket.IO
            目前，web应用普遍被要求是实时web应用，即服务端的数据更新之后，应用能立即更新。以前使用的技术（例如polling）存在一些局限性，而且有时我们需要在客户端打开一个socket，然后进行通信。         Socket.IO(http://socket.io/)是一个非常优秀的库，它可以帮你实
  • [Maven学习笔记四]Maven依赖特性 bit1129 maven
    三个模块 为了说明问题，以用户登陆小web应用为例。通常一个web应用分为三个模块，模型和数据持久化层user-core, 业务逻辑层user-service以及web展现层user-web， user-service依赖于user-core user-web依赖于user-core和user-service   依赖作用范围  Maven的dependency定义
  • 【Akka一】Akka入门 bit1129 akka
    什么是Akka Message-Driven Runtime is the Foundation to Reactive Applications In Akka, your business logic is driven through message-based communication patterns that are independent of physical locatio
  • zabbix_api之perl语言写法 ronin47 zabbix_api之perl
    zabbix_api网上比较多的写法是python或curl。上次我用java－－http://bossr.iteye.com/blog/2195679，这次用perl。for example: #!/usr/bin/perl use 5.010 ; use strict ; use warnings ; use JSON :: RPC :: Client ; use
  • 比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！ brotherlamp linux运维工程师linux运维工程师教程linux运维工程师视频linux运维工程师资料linux运维工程师自学
    比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！   ----------------------------------------------------- 兄弟连Linux运维工程师课堂实录-计算机基础-1-课程体系介绍1 链接：http://pan.baidu.com/s/1i3GQtGL 密码：bl65   兄弟连Lin
  • bitmap求哈密顿距离-给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y( bylijinnan java
    import java.util.Random; /** * 题目： * 给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y(y1,y2,y3,y4,y5)， * 使得他们的哈密顿距离（d=|x1-y1| + |x2-y2| + |x3-y3| + |x4-y4| + |x5-y5|）最大
  • map的三种遍历方法 chicony map
    package com.test; import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; public class TestMap { public static v
  • Linux安装mysql的一些坑 chenchao051 linux
    1、mysql不建议在root用户下运行   2、出现服务启动不了，111错误，注意要用chown来赋予权限， 我在root用户下装的mysql，我就把usr/share/mysql/mysql.server复制到/etc/init.d/mysqld, (同时把my-huge.cnf复制/etc/my.cnf)  chown -R cc /etc/init.d/mysql
  • Sublime Text 3 配置 daizj 配置Sublime Text
    Sublime Text 3 配置解释(默认){// 设置主题文件“color_scheme”: “Packages/Color Scheme – Default/Monokai.tmTheme”,// 设置字体和大小“font_face”: “Consolas”,“font_size”: 12,// 字体选项：no_bold不显示粗体字，no_italic不显示斜体字，no_antialias和
  • MySQL server has gone away 问题的解决方法 dcj3sjt126com SQL Server
    MySQL server has gone away 问题解决方法，需要的朋友可以参考下。 应用程序（比如PHP）长时间的执行批量的MYSQL语句。执行一个SQL，但SQL语句过大或者语句中含有BLOB或者longblob字段。比如，图片数据的处理。都容易引起MySQL server has gone away。 今天遇到类似的情景，MySQL只是冷冷的说：MySQL server h
  • javascript/dom:固定居中效果 dcj3sjt126com JavaScript
    <!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&
  • 使用 Spring 2.5 注释驱动的 IoC 功能 e200702084 springbean配置管理IOCOffice
    使用 Spring 2.5 注释驱动的 IoC 功能 developerWorks 文档选项 将打印机的版面设置成横向打印模式 打印本页 将此页作为电子邮件发送 将此页作为电子邮件发送 级别： 初级 陈 雄华 ([email protected]), 技术总监, 宝宝淘网络科技有限公司 2008 年 2 月 28 日  &nb
  • MongoDB常用操作命令 geeksun mongodb
    1.   基本操作 db.AddUser(username,password)               添加用户 db.auth(usrename,password)      设置数据库连接验证 db.cloneDataBase(fromhost)    
  • php写守护进程（Daemon） hongtoushizi PHP
    转载自： http://blog.csdn.net/tengzhaorong/article/details/9764655   守护进程（Daemon）是运行在后台的一种特殊进程。它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件。守护进程是一种很有用的进程。php也可以实现守护进程的功能。   1、基本概念   &nbs
  • spring整合mybatis,关于注入Dao对象出错问题 jonsvien DAOspringbeanmybatisprototype
    今天在公司测试功能时发现一问题： 先进行代码说明： 1，controller配置了Scope="prototype"（表明每一次请求都是原子型）    @resource/@autowired service对象都可以（两种注解都可以）。 2，service 配置了Scope="prototype"（表明每一次请求都是原子型）
  • 对象关系行为模式之标识映射 home198979 PHP架构企业应用对象关系标识映射
    HELLO!架构   一、概念 identity Map:通过在映射中保存每个已经加载的对象，确保每个对象只加载一次，当要访问对象的时候，通过映射来查找它们。其实在数据源架构模式之数据映射器代码中有提及到标识映射，Mapper类的getFromMap方法就是实现标识映射的实现。     二、为什么要使用标识映射？ 在数据源架构模式之数据映射器中 //c
  • Linux下hosts文件详解 pda158 linux
    　1、主机名： 　　无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。 　　公网：IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。 　　局域网：每台机器都有一个主机名，用于主机与主机之间的便于区分，就可以为每台机器设置主机
  • nginx配置文件粗解 spjich javanginx
    #运行用户#user  nobody;#启动进程,通常设置成和cpu的数量相等worker_processes  2;#全局错误日志及PID文件#error_log  logs/error.log;#error_log  logs/error.log  notice;#error_log  logs/error.log  inf
  • 数学函数 w54653520 java
    public  class  S {        // 传入两个整数，进行比较，返回两个数中的最大值的方法。      public  int  get( int  num1, int  nu
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他