过客尘烟
过客尘烟

响应式布局媒体查询

css中媒体查询是什么？怎么使用？

媒体查询限制CSS样式的范围，以便仅在满足某些媒体条件时才适用。

简单来说：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。

媒体查询可用于检测的媒体特性，比如： width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

媒体查询具体使用

@media [not | only] [and] ();
@media screen {
	body{ color: #f00; }
}

@media screen and (min-width: 960px) {//这里指的是最小宽度为960px
	body{ background: #999; }
}
@media screen and(min-width:100px) and (max:960px){
	body{ background: #999; }
}

媒体类型

all：匹配所有设备。

print：匹配打印机和用于再现打印显示的设备，例如在“预览”中显示文档的Web浏览器。

screen：匹配所有与打印或语音不匹配的设备。

speech：匹配屏幕阅读器和“读出”页面的类似设备。

媒体查询的例子–仿美图导航栏

响应式布局媒体查询_第1张图片
在这里插入图片描述
响应式布局媒体查询_第2张图片
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./fa/css/all.min.css">
    <link rel="stylesheet" href="./meitu/style.css">
</head>
<body>
    <!-- 
        响应式设计的网页：
            ① 移动端优先
            ② 渐进增强
     -->

     <!-- 外部容器 -->
<div class="top-bar-wrapper">
    <div class="top-bar">
        <!-- 左侧菜单 -->
        <div class="left-menu">
            <!-- 创建菜单图标 -->
            <ul class="menu-icon">
                <li></li>
                <li></li>
                <li></li>
            </ul>

            <!-- 创建菜单 -->
            <ul class="nav">
                <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>
                <li>
                    <a href="#"><i class="fas fa-search"></i></a>
                    <span>搜索 Meitu.com</span>
                </li>
            </ul>
        </div>

        <!-- logo -->
        <h1 class="logo">
            <a href="/">美图手机</a>
        </h1>

        <!-- 用户信息 -->
        <div class="user-info">
            <a href="#">
                <i class="fas fa-user"></i>
            </a>
        </div>
    </div>
</div>
    
</body>
</html>

style.less

a{
     
    text-decoration: none;
    color: #fff;

    &:hover{
     
        color: rgb(197, 196, 196);
    }
}

// 导航条的外部容器

.top-bar-wrapper{
     
    background-color: #000;
}
.top-bar{
     
    max-width: 1200px;
    margin: 0 auto;
    height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

// 设置左侧的导航
.left-menu{
     
    &:active{
     
        //显示隐藏的菜单
        .nav{
     
            display: block;
        }
    }
    // position: relative;
    // 设置菜单
    .nav{
     
        display: none;
        position: absolute;
        top:48px;
        left: 0;
        bottom: 0;
        right: 0;
        // 设置背景颜色
        background-color: #000;
        padding-top: 60px;

        li{
     
            width: 80%;
            margin: 0 auto;
            border-bottom: 1px solid #757474;

            a{
     
                display: block;
                line-height: 44px;
                font-size: 14px;
                
            }

            &:last-child a{
     
                display: inline-block;
                margin-right: 6px;
            }

            span{
     
                color: #fff;
                font-size: 14px;
            }
        }

    }

    // 图标
    .menu-icon{
     
        width: 18px;
        height: 48px;
        position: relative;

        // 导航的线
        li{
     
            width: 18px;
            height: 1px;
            background-color: #fff;
            position: absolute;

            // 修改变形的原点
            transform-origin:left center; 

            transition: 0.5s
        }

        li:nth-child(1){
     
            top:18px;
        }

        li:nth-child(2){
     
            top:24px;
        }

        li:nth-child(3){
     
            top:30px;
           
        }

        // 鼠标移入以后的效果，正常项目时，效果需要通过js来实现
        &:active{
     
            

            li:nth-child(1){
     
                // 向下旋转
                transform: rotateZ(40deg);
            }
    
            li:nth-child(2){
     
                // 隐藏
                opacity: 0;
            }
    
            li:nth-child(3){
     
                transform: rotateZ(-40deg);
            }
        }
    }
}

//设置logo
.logo{
     
    a{
     
        text-indent: -9999px;
        display: block;
        width: 122px;
        height: 32px;
        background-image: url('../img/18/[email protected]');
        background-size: 400px 400px;
    }
}

//设置媒体查询
@media only screen{
     
    // 断点 768px
    @media (min-width: 768px){
     
       .left-menu{
     
           order: 2;
           flex: auto;
           //显示菜单
           .nav{
     
               display: flex;
               position: static;
               padding: 0;
               justify-content: space-around;
               li{
     
                   width: auto;
                   border-bottom: none;
                   margin: 0;
                   a{
     
                       line-height: 48px;
                   }

                   span{
     
                       display: none;
                   }
               }
           }
           //隐藏菜单图标
           .menu-icon{
     
               display: none;
           }

       }
       .logo{
     
           order: 1;
       }
       .user-info{
     
           order: 3;
       }
    }
}

总结一下吧，这设置了一个断点，当min-width: 768px页面小于768像素时，会变成移动端的界面，这个案例总体来说比较简单，可以练练手！！

你可能感兴趣的:(html+css,css,html,css3,web)

  • 深入解析HTTP与HTTPS：定义、架构、原理、应用场景及实战指南 CloudJourney httphttps架构
    前言在互联网技术飞速发展的今天，HTTP（HypertextTransferProtocol）和HTTPS（HypertextTransferProtocolSecure）已经成为Web通信的基础协议。无论是浏览网页、提交表单，还是进行数据交互，HTTP和HTTPS都扮演着至关重要的角色。本篇博文将深入解析HTTP和HTTPS的定义、架构、原理、应用场景、常见命令体系及实战场景，帮助读者全面了解并
  • C#、ASP、ASP.NET、.NET、ASP.NET CORE区别、ASP.NET Core其概念和特点、ASP.NET Core个人心得体会 手中的风筝664 c#asp.net.net
    C#是一种面向对象的编程语言，主要用于开发跨平台的应用程序。它是.NET框架的一部分，并且可以在.NET平台上运行。ASP（ActiveServerPages）是一种用于构建动态Web页面的技术，使用VBScript或JScript作为服务器端脚本语言。它是早期的Microsoft技术，现已逐渐过时。ASP.NET是微软推出的下一代Web应用程序开发技术，它提供了更强大、更高效的功能和工具。ASP
  • 空间数据存储格式GeoJSON guokanglun WebGIS开发前端
    GeoJSON是一种用于表示地理信息的开放标准格式，广泛用于存储和交换地理空间数据。它基于JSON格式，因此易于理解和处理，尤其适用于Web和JavaScript环境中的地图应用。GeoJSON支持多种地理信息类型，如点、线、面、坐标系统等。GeoJSON基本结构GeoJSON文件本质上是一个JSON对象，通常包含以下几个主要部分：type：指定GeoJSON数据的类型。features：一个包含
  • C#面：.Net、ASP.Net、C#、VisualStudio之间的关系是什么 那个那个鱼 c#C#面试题c#.net开发语言
    C#是一种编程语言，它是由微软开发的，用于开发各种类型的应用程序，包括桌面应用程序、Web应用程序和移动应用程序等。C#是一种面向对象的语言，它具有强大的类型安全性和丰富的库支持。.NET是一个软件开发框架，它由微软开发和维护。.NET框架提供了一个运行时环境和一系列的类库，用于简化和加速应用程序的开发过程。C#是.NET框架的一种主要编程语言，但.NET框架也支持其他编程语言，如VB.NET和F
  • 使用 Shiro 和 JPA 结合 MySQL 实现一个简易权限管理系统 Java猿_ mysql数据库
    1.项目设置首先，确保你的项目已经配置好Maven或Gradle依赖管理工具，并添加以下依赖：Maven依赖org.apache.shiroshiro-core1.9.0org.apache.shiroshiro-web1.9.0org.springframework.bootspring-boot-starter-data-jpamysqlmysql-connector-java8.0.26or
  • spring boot的约定大于配置 猿二哈 springbootjavaspring
    约定大于配置是一种系统设计思想（软件设计的范式），它能够帮助我们免去许多在写程序时需要配置且只需要配置一次的操作（减少对配置项的维护，）springboot就是基于这种思想下的产物，（类似spring框架下的脚手架，能够快速开发基于spring下的应用程序）（免去了在开发应用程序时只需配置一次的操作，比如维护web.xml文件，dispatchservelet（springMVC中的文件）文件，应
  • 爬虫实践——selenium、bs4 lucky_chaichai Python爬虫seleniumrequests爬虫seleniumpython
    目录一、浏览器的一般设置二、打开网页并获取网页源码的方式1、基于requests库2、基于urlib库3、基于selenium三、HTML解析1、BeautifulSoup2、Selenium动态渲染爬虫：模拟动态操作网页，加载JS(webdriver)3、scrapy框架四、反爬虫操作五、一些常见的异常处理六、url接口调用问题——get、post操作1、get请求2、post请求fromsel
  • selenium驱动Edge报错解决办法 Dream D seleniumpythonedge
    selenium驱动Edge报错解决办法selenium使用Edge运行时报错Message:‘MicrosoftWebDriver.exe’executableneedstobeinPATH//Anhighlightedblockselenium.common.exceptions.WebDriverException:Message:'MicrosoftWebDriver.exe'execut
  • Java8适配的markdown转换html工具（FlexMark） 星极天下第一 前端Javahtml前端java
    坐标地址：com.vladsch.flexmarkflexmark-all0.60.0工具类代码：importcom.vladsch.flexmark.ext.tables.TablesExtension;importcom.vladsch.flexmark.ext.toc.TocExtension;importcom.vladsch.flexmark.html.HtmlRenderer;impo
  • 网络安全-攻击流程-应用层 星河776(重名区分) 网络安全web安全安全
    应用层攻击针对OSI模型的第七层（应用层），主要利用协议漏洞、业务逻辑缺陷或用户交互弱点，直接威胁Web应用、API、数据库等服务。以下是常见应用层攻击类型及其流程，以及防御措施：1.SQL注入（SQLInjection）攻击流程：漏洞探测：攻击者向输入字段（如登录框、搜索栏）提交试探性SQL语句（如'OR1=1--）。语句构造：若应用未过滤输入，恶意SQL语句被拼接至数据库查询中。数据窃取/篡改
  • uniapp uni-icons组件自定义图标 xcLeigh uniapp技术点解析uni-app前端java
    文章目录1️⃣uni-icons组件1.1引用位置1.2FontEditor简介1.2FontEditor使用结束语优质源码分享uni-app是一个使用Vue.js(opensnewwindow)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。1️⃣uni-icons组件1.1引用位置1.2FontEditor简介Fo
  • uniapp 可视化开发_dragUI 基于uni的可拖拽可视化编程web模板 weixin_39644021 uniapp可视化开发
    更新记录1.0.1(2019-12-02)忘了搞colorUI的模板，会导致下载项目后找不到样式的问题。更新了README添加了演示视频1.0.0(2019-12-01)2019/12/1更新代码注释，说明查看更多dragUI文档目录hope用于UNI可拖拽可视化编程在线演示demo地址一个简单创建helloworld界面的视频,github不会放视频，放在bilibli了dragUI演示视频效果
  • uni-app下表格纯CSS方案的固定首行首列，最简单的实现方式 taihom css前端javascript
    网上找了很多在uni-app下的表格组件，实现起来都太复杂了，我只是想要一个表格单纯的可以实现首行首列可以固定，没办法看了资料后，只能自己写。下面是一个最简单的实现方式。可以自己进行后续封装来使用，自己亲自编写实测没问题，纯CSS方案。时间AABBCCDDEE10:17:25{{index}}1020.5616.table-container{width:100%;height:100%;posi
  • leaflet手绘地图实现原理-可视化工具设计手绘地图 diygwcom leaflet手绘地图自定义地图瓦片
    在Leaflet中实现手绘地图并添加自定义标注是一个有趣且实用的功能。Leaflet是一个开源的JavaScript库，用于在网页上创建交互式地图。下面是一个基本的实现步骤，包括如何加载手绘地图和添加自定义标注。步骤1：设置HTML页面首先，创建一个基本的HTML页面，并引入Leaflet库。Leaflet手绘地图与自定义标注#map{height:100vh;}//JavaScript代码将在这
  • 表格首列，首行固定，并且能随意滚动 一麻袋小猫 笔记css3
    css3新增了粘性定位，利用粘性定位即可做到，但要注意的是：如果想要粘性定位相对于父元素定位，需要给其增加relative定位。逻辑是：滚动盒子滚动的是页面，滚动盒子内部放一个大盒子（1），此盒子宽度为内容的总宽度，在盒子内部给想要固定的盒子增加粘性定位，让其top值||left值为0，这里的0是相对于盒子1的。
  • 使用v-html时 防止xss注入攻击 i'm wxm xss前端javascriptvue
    方法一使用vue-dompurify-html插件安装npminstallvue-dompurify-html在mian.js中配置import{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)//防止v-html进行xss注入importVueDOMPurifyHTMLfrom'vue-dompurify-htm
  • MySQL、MariaDB 和 TDSQL 的区别 sumatch mysql数据库
    MySQL、MariaDB和TDSQL是三种不同的数据库管理系统，它们在设计理念、功能、性能和使用场景上有一些显著的区别。以下是对这三者的详细比较和介绍。1.MySQL概述类型：关系型数据库管理系统（RDBMS）。开发者：最初由MySQLAB开发，后被SunMicrosystems收购，最终被OracleCorporation收购。开源：提供社区版和商业版。使用场景：广泛用于Web应用、内容管理系
  • vba对应CAD版本下载网址 山水CAD筑梦人 CADVBA开发语言
    下载对应vba版本网址如下：DownloadtheMicrosoftVBAModuleforAutoCADhttps://www.autodesk.com/support/technical/article/caas/tsarticles/ts/3kxk0RyvfWTfSfAIrcmsLQ.html以下是DwgVersion枚举值与AutoCAD版本的对应关系：枚举值数值对应的AutoCAD版本A
  • 【html】简单网页模板源码 天若有情673 html【html5+css】前端知识htmltensorflow前端
    大家每一次在写网页的时候会不会因为布局而困扰今天就给大家带来一个我自己亲自编写的网页的基本的模板大家可以直接去利用，大家也可以利用自己的想法去做空间的美化和完善。源码：html:DocumentXXX官网导航项导航项
  • 【花雕学编程】ESP32 DeepSeek 之带样式的Web聊天机器人 驴友花雕 开源硬件机器人嵌入式硬件单片机c++带样式的Web聊天机器人ESP32DeepSeek
    Arduino是一个开放源码的电子原型平台，它可以让你用简单的硬件和软件来创建各种互动的项目。Arduino的核心是一个微控制器板，它可以通过一系列的引脚来连接各种传感器、执行器、显示器等外部设备。Arduino的编程是基于C/C++语言的，你可以使用ArduinoIDE（集成开发环境）来编写、编译和上传代码到Arduino板上。Arduino还有一个丰富的库和社区，你可以利用它们来扩展Ardui
  • html 输入框标签讲解,input标签详解 金鉴LED实验室 html输入框标签讲解
    一，标签定义及使用说明1.标签规定了用户可以在其中输入数据的输入字段。2.元素在元素中使用，用来声明允许用户输入数据的input控件。输入字段可通过多种方式改变，取决于type属性。二，HTML与XHTML的区别1.在HTML中，标签没有结束标签。2.在XHTML中，标签必须被正确地关闭。三，注示1.注意:元素是空的,它只包含标签属性。2.提示:你可以使用元素来定义元素的标注。四，属性1.type
  • asp.net core系统记录当前在线人数 王焜棟琦 asp.netcore后端asp.netcore
    实时记录当前在线人数，登录后保持120秒在线状态，在线状态保存在缓存中，采用滑动过期，在120秒内请求了系统，自动续活120秒；超过时间则移除用户在线状态；需要在登录过滤器标记用户在线状态需要排除循环请求的url，比如定时请求的待办数量登录成功后标记用户在线web记录当前在线人数状态usingSystem;usingSystem.Collections.Generic;usingSystem.Li
  • h5 uniapp html2canvas生成海报,保存到本地功能实现； js小白羊 uni-appjavascript前端
    html2canvas生成海报,保存到本地功能实现1.在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数2.组件的使用，伪代码不要直接复制uniapp语法3.h5保存生成后的图片到本地方法;1.在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数在组件中，通过prop接收ID的，ID的变化来触发render.js里面的函数。html2can
  • html+css网页设计，我的网站 软件技术NINI html/css笔记javascripthtmlcss
    一、技术简介HTML：超文本标记语言（HyperTextMarkupLanguage），用于创建网页的基本结构和内容。CSS：层叠样式表（CascadingStyleSheets），用于设置网页的样式和布局，包括字体、颜色、边距、对齐方式等。JavaScript：一种用于创建动态和交互式网页的脚本语言。通过JavaScript，可以实现网页的动画效果、表单验证、数据交互等功能。二、创建多页网站的基
  • ABB机器人的二次开发 Mountain and sea 机器人算法c语言学习自动化
    ABB机器人的二次开发可以通过多种方式实现，主要涉及编程接口、通信协议和开发工具。以下是详细的步骤和方法：1.基础准备确认RobotWare选项：确保机器人控制器安装了必要的选项，如：PCInterface（用于PCSDK通信）RobotWebServices（RESTAPI支持）Fieldbus选项（如Profinet、EtherNet/IP）权限设置：在示教器上将用户权限设置为“专家模式”或更
  • html 字体图标不显示不出来了,h5页面字体图标显示不正常 微基因WeGene html字体图标不显示不出来了
    问题描述开发的是微信公众号的纯静态H5页面，测试发现在iOS上面首次打开会出现字体图标无法显示的问题，并且切换到其它页面，字体图标也是一样无法显示：只能使用微信的右上角内的刷新选项，所有页面的图标就可正常显示，浏览其它页也正常：P.S.所有页面在iOS自带的safari或者chrome浏览器均可正常显示，在android也是正常显示。相关代码HTML:CSS:@charset"UTF-8";@fo
  • html页面跳转先显示底部,H5页面在IOS微信中跳转时，会出现底部工具栏，遮挡页面底部内容... 一一MIO一一 html页面跳转先显示底部
    问题描述：在IOS微信中打开H5页面，当浏览器内出现跳转产生url历史记录时，页面底部会出现一个带有前进和后退按钮的工具栏，会遮挡页面底部的内容。css分析缘由：页面跳转时，微信浏览器经过window.history读取到浏览的历史记录，此时便会在页面底部显示出前进后退按钮的工具栏，形成页面底部内容遮挡。但刷新一下该页面，就不会遮挡了。底部的工具栏是在页面完成渲染以后才渲染的。html解决方案：i
  • SpringSecurity+JWT实现认证及授权详细步骤 小孙的Blog springbootjavaspring后端
    表单认证流程想要实现SpringSecurity的认证授权，首先需要理解大致流程。准备工作导入maven依赖org.springframework.bootspring-boot-starter-securityio.jsonwebtokenjjwt0.9.0创建数据库表表数据如下：创建生成jwtToken的工具类importio.jsonwebtoken.Claims;importio.json
  • PHP语法入门完全指南（2024新版） 生信天地 php开发语言
    一、开发环境搭建1.1快速启动方案本地环境：安装XAMPP（含Apache+PHP+MySQL）在线沙盒：使用PHPSandboxDocker方案（推荐）：dockerrun-it-p80:80-v$(pwd):/var/www/htmlphp:8.2-apache1.2第一个PHP程序▶️运行方式：浏览器访问http://localhost/01_hello.php二、基础语法核心2.1变量与常
  • HTML、Vue和PHP文件的区别与联系 生信天地 htmlvue.jsphp
    一、核心区别类型性质执行环境功能特点.html静态标记语言浏览器直接解析定义页面结构和内容，无逻辑处理能力.vue前端框架组件文件浏览器/构建工具整合HTML模板+JS逻辑+CSS样式，支持动态数据绑定和组件化开发.php服务器端脚本语言文件Web服务器执行动态生成HTML内容，支持数据库操作和业务逻辑处理二、联系与协作PHP与HTMLPHP文件通过标签嵌入HTML，服务器执行PHP代码后输出纯H
  • ASM系列五 利用TreeApi 解析生成Class lijingyao8206 ASM字节码动态生成ClassNodeTreeAPI
       前面CoreApi的介绍部分基本涵盖了ASMCore包下面的主要API及功能，其中还有一部分关于MetaData的解析和生成就不再赘述。这篇开始介绍ASM另一部分主要的Api。TreeApi。这一部分源码是关联的asm-tree-5.0.4的版本。          在介绍前，先要知道一点， Tree工程的接口基本可以完
  • 链表树——复合数据结构应用实例 bardo 数据结构树型结构表结构设计链表菜单排序
    我们清楚：数据库设计中，表结构设计的好坏，直接影响程序的复杂度。所以，本文就无限级分类（目录）树与链表的复合在表设计中的应用进行探讨。当然，什么是树，什么是链表，这里不作介绍。有兴趣可以去看相关的教材。 需求简介： 经常遇到这样的需求，我们希望能将保存在数据库中的树结构能够按确定的顺序读出来。比如，多级菜单、组织结构、商品分类。更具体的，我们希望某个二级菜单在这一级别中就是第一个。虽然它是最后
  • 为啥要用位运算代替取模呢 chenchao051 位运算哈希汇编
        在hash中查找key的时候，经常会发现用&取代%，先看两段代码吧，     JDK6中的HashMap中的indexFor方法： /** * Returns index for hash code h. */ static int indexFor(int h, int length) {
  • 最近的情况 麦田的设计者 生活感悟计划软考想
          今天是2015年4月27号      整理一下最近的思绪以及要完成的任务             1、最近在驾校科目二练车，每周四天，练三周。其实做什么都要用心，追求合理的途径解决。为
  • PHP去掉字符串中最后一个字符的方法 IT独行者 PHP字符串
    今天在PHP项目开发中遇到一个需求，去掉字符串中的最后一个字符 原字符串1,2,3,4,5,6, 去掉最后一个字符","，最终结果为1,2,3,4,5,6 代码如下： $str = "1,2,3,4,5,6,"; $newstr = substr($str,0,strlen($str)-1); echo $newstr;
  • hadoop在linux上单机安装过程 _wy_ linuxhadoop
    1、安装JDK     jdk版本最好是1.6以上，可以使用执行命令java -version查看当前JAVA版本号，如果报命令不存在或版本比较低，则需要安装一个高版本的JDK，并在/etc/profile的文件末尾，根据本机JDK实际的安装位置加上以下几行：    export JAVA_HOME=/usr/java/jdk1.7.0_25  
  • JAVA进阶----分布式事务的一种简单处理方法 无量 多系统交互分布式事务
    每个方法都是原子操作： 提供第三方服务的系统，要同时提供执行方法和对应的回滚方法 A系统调用B,C,D系统完成分布式事务 =========执行开始======== A.aa(); try { B.bb(); } catch(Exception e) { A.rollbackAa(); } try { C.cc(); } catch(Excep
  • 安墨移动广 告：移动DSP厚积薄发 引领未来广 告业发展命脉 矮蛋蛋 hadoop互联网
    　　“谁掌握了强大的DSP技术，谁将引领未来的广 告行业发展命脉。”2014年，移动广 告行业的热点非移动DSP莫属。各个圈子都在纷纷谈论，认为移动DSP是行业突破点，一时间许多移动广 告联盟风起云涌，竞相推出专属移动DSP产品。 　　到底什么是移动DSP呢? 　　DSP(Demand-SidePlatform)，就是需求方平台，为解决广 告主投放的各种需求，真正实现人群定位的精准广
  • myelipse设置 alafqq IP
      在一个项目的完整的生命周期中，其维护费用，往往是其开发费用的数倍。因此项目的可维护性、可复用性是衡量一个项目好坏的关键。而注释则是可维护性中必不可少的一环。 注释模板导入步骤  安装方法： 打开eclipse/myeclipse 选择 window-->Preferences-->JAVA-->Code-->Code
  • java数组 百合不是茶 java数组
    java数组的   声明  创建  初始化；   java支持C语言      数组中的每个数都有唯一的一个下标 一维数组的定义 声明： int[] a = new int[3];声明数组中有三个数int[3] int[] a 中有三个数，下标从0开始，可以同过for来遍历数组中的数
  • javascript读取表单数据 bijian1013 JavaScript
    利用javascript读取表单数据，可以利用以下三种方法获取： 1、通过表单ID属性：var a = document.getElementByIdx_x_x("id"); 2、通过表单名称属性：var b = document.getElementsByName("name"); 3、直接通过表单名字获取：var c = form.content.
  • 探索JUnit4扩展：使用Theory bijian1013 javaJUnitTheory
    理论机制（Theory） 一.为什么要引用理论机制（Theory）         当今软件开发中，测试驱动开发（TDD — Test-driven development）越发流行。为什么 TDD 会如此流行呢？因为它确实拥有很多优点，它允许开发人员通过简单的例子来指定和表明他们代码的行为意图。 TDD 的优点：     &nb
  • [Spring Data Mongo一]Spring Mongo Template操作MongoDB bit1129 template
    什么是Spring Data Mongo Spring Data MongoDB项目对访问MongoDB的Java客户端API进行了封装，这种封装类似于Spring封装Hibernate和JDBC而提供的HibernateTemplate和JDBCTemplate，主要能力包括 1. 封装客户端跟MongoDB的链接管理 2. 文档-对象映射，通过注解:@Document(collectio
  • 【Kafka八】Zookeeper上关于Kafka的配置信息 bit1129 zookeeper
    问题： 1. Kafka的哪些信息记录在Zookeeper中 2. Consumer Group消费的每个Partition的Offset信息存放在什么位置 3. Topic的每个Partition存放在哪个Broker上的信息存放在哪里 4. Producer跟Zookeeper究竟有没有关系？没有关系！！！   //consumers、config、brokers、cont
  • java OOM内存异常的四种类型及异常与解决方案 ronin47 java OOM 内存异常
          　OOM异常的四种类型： 　　　 　　一：　StackOverflowError ：通常因为递归函数引起（死递归，递归太深）。-Xss 128k 一般够用。     　  二：　out Of memory: PermGen Space：通常是动态类大多，比如web 服务器自动更新部署时引起。-Xmx
  • java-实现链表反转-递归和非递归实现 bylijinnan java
    20120422更新： 对链表中部分节点进行反转操作，这些节点相隔k个： 0->1->2->3->4->5->6->7->8->9 k=2 8->1->6->3->4->5->2->7->0->9 注意1 3 5 7 9 位置是不变的。 解法： 将链表拆成两部分： a.0-&
  • Netty源码学习-DelimiterBasedFrameDecoder bylijinnan javanetty
    看DelimiterBasedFrameDecoder的API，有举例： 接收到的ChannelBuffer如下： +--------------+ | ABC\nDEF\r\n | +--------------+ 经过DelimiterBasedFrameDecoder(Delimiters.lineDelimiter())之后，得到： +-----+----
  • linux的一些命令 -查看cc攻击-网口ip统计等 hotsunshine linux
    Linux判断CC攻击命令详解 2011年12月23日 ⁄ 安全 ⁄ 暂无评论 查看所有80端口的连接数 netstat -nat|grep -i '80'|wc -l 对连接的IP按连接数量进行排序 netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n 查看TCP连接状态 n
  • Spring获取SessionFactory ctrain sessionFactory
    String sql = "select sysdate from dual"; WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext(); String[] names = wac.getBeanDefinitionNames(); for(int i=0; i&
  • Hive几种导出数据方式 daizj hive数据导出
    Hive几种导出数据方式   1.拷贝文件   如果数据文件恰好是用户需要的格式，那么只需要拷贝文件或文件夹就可以。 hadoop fs –cp source_path target_path   2.导出到本地文件系统   --不能使用insert into local directory来导出数据，会报错 --只能使用
  • 编程之美 dcj3sjt126com 编程PHP重构
    我个人的 PHP 编程经验中，递归调用常常与静态变量使用。静态变量的含义可以参考 PHP 手册。希望下面的代码，会更有利于对递归以及静态变量的理解   header("Content-type: text/plain"); function static_function () { static $i = 0; if ($i++ < 1
  • Android保存用户名和密码 dcj3sjt126com android
    转自：http://www.2cto.com/kf/201401/272336.html 我们不管在开发一个项目或者使用别人的项目，都有用户登录功能，为了让用户的体验效果更好，我们通常会做一个功能，叫做保存用户，这样做的目地就是为了让用户下一次再使用该程序不会重新输入用户名和密码，这里我使用3种方式来存储用户名和密码 1、通过普通 的txt文本存储 2、通过properties属性文件进行存
  • Oracle 复习笔记之同义词 eksliang Oracle 同义词Oracle synonym
    转载请出自出处：http://eksliang.iteye.com/blog/2098861 1.什么是同义词       同义词是现有模式对象的一个别名。       概念性的东西，什么是模式呢？创建一个用户，就相应的创建了 一个模式。模式是指数据库对象，是对用户所创建的数据对象的总称。模式对象包括表、视图、索引、同义词、序列、过
  • Ajax案例 gongmeitao Ajaxjsp
    数据库采用Sql Server2005 项目名称为:Ajax_Demo 1.com.demo.conn包 package com.demo.conn; import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException; //获取数据库连接的类public class DBConnec
  • ASP.NET中Request.RawUrl、Request.Url的区别 hvt .netWebC#asp.nethovertree
      如果访问的地址是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu那么Request.Url.ToString() 的值是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree<&
  • SVG 教程 （七）SVG 实例，SVG 参考手册 天梯梦 svg
    SVG 实例 在线实例 下面的例子是把SVG代码直接嵌入到HTML代码中。 谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。 注意：下面的例子将不会在Opera运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。   SVG 实例 SVG基本形状 一个圆 矩形 不透明矩形 一个矩形不透明2 一个带圆角矩
  • 事务管理 luyulong javaspring编程事务
    事物管理 spring事物的好处 为不同的事物API提供了一致的编程模型 支持声明式事务管理 提供比大多数事务API更简单更易于使用的编程式事务管理API 整合spring的各种数据访问抽象 TransactionDefinition 定义了事务策略 int getIsolationLevel()得到当前事务的隔离级别 READ_COMMITTED 
  • 基础数据结构和算法十一：Red-black binary search tree sunwinner AlgorithmRed-black
      The insertion algorithm for 2-3 trees just described is not difficult to understand; now, we will see that it is also not difficult to implement. We will consider a simple representation known
  • centos同步时间 stunizhengjia linux集群同步时间
    做了集群，时间的同步就显得非常必要了。 以下是查到的如何做时间同步。 在CentOS 5不再区分客户端和服务器，只要配置了NTP，它就会提供NTP服务。 1)确认已经ntp程序包： # yum install ntp 2)配置时间源（默认就行，不需要修改） # vi /etc/ntp.conf server pool.ntp.o
  • ITeye 9月技术图书有奖试读获奖名单公布 ITeye管理员 ITeye
    ITeye携手博文视点举办的9月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 9月试读活动回顾：http://webmaster.iteye.com/blog/2118112本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）：      《NFC：Arduino、Andro
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他