Naisu Xu
Naisu Xu

前端笔记：媒体查询和响应式布局

文章目录

  • 目的
  • 媒体查询
  • 响应式布局
  • 总结

目的

CSS中有一个叫做媒体查询（Media queries）的功能，这个功能可以让你查询当前运行网页的设备的一些信息，让你可以通过这些信息来调整网页的布局和样式等。常见的响应式布局通常就是利用这个功能来实现的。这篇文章将对相关的功能做个说明。

媒体查询

媒体查询的语法非常简单，大概就是下面的样子：

@media 查询条件 {
    CSS-Code;
}
/* 查询条件可以是媒体类型或是媒体特性 */
/* 也可以是由and、not、only、or修饰组合而成的短语 */
/* 多个条件也可以用 ，（逗号）连接，相当于 or */
/* 媒体特性需要用圆括号包围 */

先看个简单的例子：

DOCTYPE html>
<html>
<head>
    <style>
        html,body {
            height: 100%;
        }
        /* 页面可见区域宽高比大于等于2/1 */
        @media (min-aspect-ratio: 2/1) {
            body {
                background-color: red;
            }
        }
        /* 页面可见区域宽高比大于等于1/1 小于2/1 */
        @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) {
            body {
                background-color: yellow;
            }
        }
        /* 页面可见区域宽高比小于等于1/1 */
        @media (max-aspect-ratio: 1/1) {
            body {
                background-color: blue;
            }
        }
    style>
head>
<body>
body>
html>

前端笔记：媒体查询和响应式布局_第1张图片
媒体查询中的媒体类型主要是下面一些：

值 描述
all 适用于所有设备，默认值
print 适用于在打印预览模式下在屏幕上查看的分页材料和文档
screen 主要用于电脑屏幕，平板电脑，智能手机等
speech 主要用于屏幕阅读器等发声设备

媒体查询中的媒体特性非常多，这里列出一些常用的：

值 描述
orientation portrait：网页可见区域高度大于等于宽度
landscape：网页可见区域宽度大于高度
aspect-ratio 网页可见区域宽高比
min-aspect-ratio 网页可见区域最小宽高比
max-aspect-ratio 网页可见区域最大宽高比
width 网页可见区域宽度值
min-width 网页可见区域最小宽度值
max-width 网页可见区域最大宽度值

媒体查询使用时需要注意的是它是CSS的内容，后面的规则会覆盖前面的规则，所以书写的顺序还是需要注意的，不然有可能会出现问题，比如下面例子：

媒体查询语法上来说使用比较简单，更多内容可以参考下面链接：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

响应式布局

响应式布局主要是为了让网页在不同显示设备上以合适的方式显示而出现的一种设计思路。通常来说电脑的显示屏较大，大多都是横屏显示的；手机的显示屏比较小，通常都是竖屏使用的。如果只有一套UI显示的话体验上往往难以兼顾两者，这时候就可以使用响应式布局了。对于小型的网页项目来说目前常见的响应式布局通常就是利用 媒体查询 结合 meta标签的viewport属性 来实现的，下面是个简单的例子：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        html,
        body {
            height: 100%;
        }
        body {
            display: flex;
            flex-wrap: wrap;
        }

        .header {
            width: 100%;
            height: 10%;
            background-color: salmon;
        }
        .nav {
            background-color: lightgreen;
        }
        .main {
            background-color: mediumturquoise;
        }
        .footer {
            width: 100%;
            height: 10%;
            background-color: orchid;
        }

        /* 在页面较宽时 */
        @media (min-width: 576px) {
            .nav {
                width: 20%;
                height: 80%;
            }
            .main {
                width: 80%;
                height: 80%;
            }
        }

        /* 在页面较窄时 */
        /* 手机竖着拿的时候页面的CSS像素宽度大多小于576px */
        @media (max-width: 575px) {
            .nav {
                width: 100%;
                height: 10%;
            }
            .main {
                width: 100%;
                height: 70%;
            }
        }
    style>
head>
<body>
    <div class="header"> 标题栏 div>
    <div class="nav"> 导航栏 div>
    <div class="main"> 正文 div>
    <div class="footer"> 页脚 div>
body>
html>

总结

媒体查询和响应式布局总体来说是比较简单的，基本上就上面这些内容了，更多的还是要结合实际业务来应用。

你可能感兴趣的:(Web与JS相关,css,前端,布局,ui,设计)

  • 2025年电力新政对储能行业的影响 能源革命 能源电力交易
    对储能行业的影响政策导向：从“强制配储”转向市场化驱动市场机遇：需求场景多样化与全球扩张行业格局：技术竞争与产业链优化配套政策与协同效应储能行业商业模式创新独立储能市场化交易模式用户侧储能与能源服务创新技术驱动的服务升级产业链协同与跨界融合政策配套与金融工具创新未来关注重点对储能行业的影响2025年电力新政对储能行业的影响主要体现在政策导向转变、市场化机制深化和行业格局重构三个方面。政策导向：从“
  • 数据库的 DDL、DML、DQL、DCL 分别是什么？下面谈谈这四者的概念。 雪碧聊技术 MySQL数据库四种操作语句MySQLSQL
    欢迎来到“雪碧聊技术”CSDN博客！在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与
  • nodejs 的 npm install ， npm run 问题 dev webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序 倾旎 nodejsvue
    nodejs的npminstall，npmrun问题devwebpack-dev-server’不是内部或外部命令，也不是可运行的程序1.安装脚手架安装脚手架命令：npminstall-globalvue-cli2.升级脚手架有时候需要把整个脚手架升级一下，这个用到命令npminstall--globalvue-cli，这个命令会把整个脚手架升级一下，但是我发现使用上面npm-check命令可以把
  • Docker 的安全配置与优化（一） 计算机毕设定制辅导-无忧学长 #Dockerdocker安全php
    引言在当今快速发展的云计算和DevOps时代，Docker作为容器化技术的佼佼者，已经成为现代开发和运维的基石。它以其独特的优势，如环境隔离、快速部署、资源高效利用等，极大地改变了软件交付和运行的方式。在微服务架构中，每个微服务都可以被封装成一个独立的Docker容器，实现了服务的隔离和独立部署，使得系统的扩展性和维护性得到了极大的提升。同时，在持续集成和持续交付（CI/CD）流程中，Docker
  • 原生支付sdk到unity引擎项目(一) 你一身傲骨怎能输 商业化游戏开发技术专栏unity游戏引擎
    封装一个Unity引擎使用的SDK功能插件涉及多个步骤，从设计和开发到打包和发布。以下是一个详细的步骤指南：1.需求分析和设计确定功能需求：明确SDK需要实现的功能和目标。设计API：设计易于使用的API接口，确保开发者能够方便地集成和使用你的SDK。2.项目设置创建Unity项目：在Unity中创建一个新的项目，用于开发和测试SDK。设置命名空间：为你的SDK选择一个独特的命名空间，避免与其他库
  • 鸿蒙HarmonyOS开发实战：网络组件API使用规范总结 冲浪王子_浪浪 HarmonyOSOpenHarmony鸿蒙开发鸿蒙华为前端harmonyos移动开发开发语言策略模式
    网络相关类组件模块介绍efAxiosParams提供eftool封装axios请求所需的参数efAxios二次封装axios的产物,提供统一请求响应拦截等efClientApi提供针对于统一post,get,delete,put等请求封装网络组件使用API前言1.efAxiosParams类参数详解/***是否整体传输加密与关键字加密isAllEncrypt互斥二者只能有其一为true*/stat
  • JSON的序列化和反序列化 -黑大帅 jsonlinux数据库
    一、什么是JSONJSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，因其简单、易读、易写而被广泛采用。它通过键值对和数组的方式表示数据，能够高效地在前后端之间传输数据，并且大多数编程语言都支持JSON格式。JSON主要用于前后端数据交换、配置文件存储和API设计等场景，使得数据处理变得直观和一致。二、序列化序列化就是将对象转换为JSON格式的字符串。在pyth
  • 俄罗斯宣布最新停战条件，关于俄美总统结束战争倡议的谈判成关键，如何看待目前的对话和冲突走向？ 日记成书 热门实事学习
    当前俄乌冲突局势与谈判动向分析一、俄罗斯的核心诉求与战略意图停战条件设置俄罗斯外长拉夫罗夫提出的停战条件包括：乌克兰军队投降、基辅政权更迭为“去纳粹化”政府、部分或完全让出顿涅茨克等五地区主权，以及放弃加入北约。这些要求被俄方称为“最大限度条件”，实质上是将2022年特别军事行动初期目标升级为正式谈判基础，试图通过战场优势固化既得利益。俄美谈判的战略考量俄方明确将停火与俄美谈判成果挂钩，表明其试图
  • Opencv之图像SIFT 特征检测与Harris角点检测 是十一月末 opencvopencv计算机视觉人工智能python特征检测
    图像SIFT特征检测与Harris角点检测目录图像SIFT特征检测与Harris角点检测1SIFT特征检测1.1概念1.2主要步骤1.3优缺点1.4函数及参数2Harris角点检测2.1概念2.2**算法思想**2.3特点2.4函数及参数3角点、特征检测3.1焦点、特征检测代码及结果1SIFT特征检测1.1概念SIFT（尺度不变特征变换）是一种用于图像处理中检测和描述图像中局部结构的算法。它是由D
  • JMeter 如何并发执行 Python 脚本 朱公子的Note pythonJMeter执行Python
    你是否遇到过这样的场景：需要用Python实现复杂的逻辑处理，同时又想利用JMeter的强大并发能力来模拟大规模用户行为？这篇文章带你快速掌握如何让JMeter并发执行Python脚本，完美结合两者的优势！JMeter如何配置来调用Python脚本？如何实现高效的并发执行？在实践中有哪些需要注意的坑？随着性能测试需求的增加，JMeter的应用场景越来越广泛，而Python的灵活性与强大的第三方库支
  • 前端开发中的最佳实践与技巧 lina_mua javascriptvue.jshtml前端es6node.js
    1.引言1.1前端开发的重要性在当今的互联网时代，前端开发已经成为构建用户友好、高效、安全的Web应用程序的关键。前端不仅仅是用户与应用程序交互的界面，它还直接影响用户体验、性能和安全性。1.2本文的目标本文旨在分享前端开发中的最佳实践与技巧，帮助开发者提高代码质量、优化性能、增强安全性，并掌握最新的前端技术趋势。2.HTML最佳实践2.1语义化标签的使用语义化HTML不仅有助于SEO，还能提高代
  • 【数据挖掘在量化交易中的应用：特征发现与特征提取】 调皮的芋头 数据挖掘人工智能神经网络
    好的，我将撰写一篇关于金融领域数据挖掘的技术博客，重点阐述特征发现和特征提取，特别是在量化交易中的应用。我会提供具体的实操步骤，并结合Python和TensorFlow进行代码示例。完成后，我会通知您进行查看。数据挖掘在量化交易中的应用：特征发现与特征提取1.概述在金融领域的量化交易中，数据挖掘扮演着极其重要的角色。量化交易依赖于对海量金融数据的分析，从中寻找规律和模式，以支撑交易决策。数据挖掘技
  • 数据挖掘中特征发现与特征提取的数学原理 调皮的芋头 数据挖掘人工智能AIGC计算机视觉
    好的，我将深入研究数据挖掘中特征发现与特征提取的数学原理，涵盖统计学基础、特征工程的数学方法、以及在机器学习和深度学习中的应用。我会整理相关数学公式和理论，包括主成分分析（PCA）、独立成分分析（ICA）、线性判别分析（LDA）、信息增益、互信息、方差分析等统计方法，并结合金融量化交易的实际应用，确保内容既有理论深度，又能落地实践。完成后，我会通知您！1.统计学基础：描述性统计、方差分析、相关性与
  • PostgreSQL 源码解读（153）- 后台进程#5（walsender#1） cuichao1900 数据库
    本节简单介绍了PostgreSQL的后台进程walsender,该进程实质上是streamingreplication环境中master节点上普通的backend进程,在standby节点启动时,standby节点向master发送连接请求,master节点的postmaster进程接收到请求后,启动该进程与standby节点的walreceiver进程建立通讯连接,用于传输WALRecord.w
  • 城电｜零碳公园解决方案：光伏太阳花与百花竞相绽放 城电科技 笔记
    近日，珠海城电科技向内蒙古一座零碳公园又交付了数台光伏太阳花。城电科技—建设零碳新园区这些光伏太阳花被巧妙地安置于花海之中，与周围的万紫千红相映成趣。绿意盎然的草地，碧空如洗的蓝天，加上这些自动跟踪太阳轨迹的三轴智能太阳花和单轴智能太阳花，成为了温暖秋日里一道引人入胜的风景线。城电科技—建设零碳新园区它们在阳光的照耀下，仿佛在花海中翩翩起舞，既为零碳公园提供了清洁能源，又为游客带来了视觉上的享受，
  • Java 大视界 -- Java 大数据未来十年的技术蓝图与发展愿景（95） 青云交 大数据新视界Java大视界java大数据开发语言未来十年技术蓝图发展愿景新兴技术融合
    亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也期待你毫无保留地分享独特见解，愿我们于此携手成长，共赴新程！一、欢迎加入【福利社群】点击快速加入：青云交灵犀技韵交响盛汇福利社群点击快速加入2：2024CSDN博客之星创作交流营（NEW)二、本博客的精华专栏：大数据新视
  • Java 大视界 -- 5G 与 Java 大数据融合的行业应用与发展趋势（82） 青云交 大数据新视界Java大视界java5G大数据技术融合智能交通工业制造智能安防
    亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也期待你毫无保留地分享独特见解，愿我们于此携手成长，共赴新程！一、欢迎加入【福利社群】点击快速加入：青云交灵犀技韵交响盛汇福利社群点击快速加入2：2024CSDN博客之星创作交流营（NEW)二、本博客的精华专栏：大数据新视
  • OA流程设计以及常见错误总结 OA系统交流 业界资讯学习方法
    1、背景：企业使用OA系统，通常是为了解决企业自身内部业务审批，把线下的业务审批通过OA系统提高效率和规范化，但是在很多公司使用办公系统后发现审批流程经常错误等问题，常见的费用相关报销、合同审批等。结合近十年的OA系统的开发运维，使用过国内泛微OA、致远OA并参与过开发，总结以下内容:2、OA系统项目核心：企业需要梳理自身组织架构，清晰划分各部门管理权责，每个部门只能有唯一一个负责领导，不能一个部
  • Flutter开发者必备面试问题与答案02 flutter
    Flutter开发者必备面试问题与答案02视频https://youtu.be/XYSxTb0iA9Ihttps://www.bilibili.com/video/BV1Zk2dYyEBr/前言原文Flutter完整面试问题及答案02本文是flutter面试问题的第二讲，高频问答10题。正文11.PageRoute是什么？在Flutter中，PageRoute是一个用于管理应用中页面导航的抽象类。
  • 提升 Flutter 代码质量的技巧与实践 flutter
    提升Flutter代码质量的技巧与实践视频https://youtu.be/0ZxBj-lG9Z8https://www.bilibili.com/video/BV1jztoeDEeB/前言原文提升Flutter代码质量的技巧与实践本文总结了Flutter开发中的编码技巧与最佳实践，帮助开发者提升代码质量和应用性能，无论是初学者还是经验丰富的开发者都能从中受益。这些技巧和规则只是对你的编码提供建议
  • 未来至少十年时间里，哪些行业的岗位更有发展前景且很难被人工智能替代？ 向贤 人工智能人工智能
    未来至少十年时间里，哪些行业的岗位更有发展前景且很难被人工智能替代？在人工智能技术快速迭代的背景下，未来十年内，以下六大类行业因其对人类独特能力的依赖，将展现出强大的抗替代性，并成为具有长期发展潜力的领域：一、医疗健康行业：生命科学与人文关怀的交织复杂决策与不确定性应对医学诊断需要结合患者个体差异、病史和社会背景进行综合判断，AI虽能辅助影像识别和数据分析，但面对突发并发症或罕见病例时，医生的临床
  • 前端开发岗模拟面试题套卷A答案及解析（一）技术面部分 向贤 前端开发前端数据库javascript面试
    前端开发岗模拟面试题套卷A答案及解析（一）技术面部分（一）技术面一、JavaScript核心技术（ES6+）1-1、实现防抖函数functiondebounce(fn,delay){lettimer=null;returnfunction(...args){clearTimeout(timer);//清除已有定时器timer=setTimeout(()=>{fn.apply(this,args);
  • 设计模式 之 建造者模式（C++） TT-Kun 设计模式C++设计模式建造者模式c++
    文章目录设计模式之建造者模式（C++）建造者模式概述建造者模式的结构C++实现建造者模式示例1.产品类（`Computer`）2.抽象建造者类（`Builder`）3.具体建造者类（`MacBookBuilder`）4.指挥者类（`Director`）5.客户端代码（`main`函数）建造者模式的优缺点优点缺点建造者模式的适用场景与其他模式的比较与工厂模式的比较与抽象工厂模式的比较设计模式之建造者
  • PC端-发票真伪查验系统-Node.js全国发票查询接口 OCR_API 接口node.js
    在现代企业的财务管理中，发票真伪的验证至关重要。随着电子发票的普及，假发票问题日益严峻，如何高效、准确的对发票进行真伪查验，已经成为各类企业在日常运营中必须解决的关键问题。翔云发票查验接口做企业财务管理、税务合规的好帮手。快速查询，全国覆盖：通过全国增值税发票查验接口，用户只需提供发票的基础信息，如发票代码、号码、日期、金额、校验码等，系统即可实现全国范围内的查询与比对。无论是来自哪个省市的发票，
  • The Rust Programming Language 学习
    说明关于参考的教程TheRustProgrammingLanguage是英文版本的由于本人英语水平相当的有限,所以我们这里直接去看翻译好的版本Rust程序设计语言.下面我们将两个地址全部都贴出来.TheRustProgrammingLanguageRust程序设计语言Rust官方文档中文教程教程中提到的一些前置翻译已参照最新的Rust1.58.0版及开发版进行调整，这是目前网上最新的中文版本，最后
  • 鸿蒙Harmony开发：应用组件间的通信原理规范 太空人_喜之郎 HarmonyOSOpenHarmony鸿蒙harmonyos华为前端linux鸿蒙移动开发组件
    前言ETS(基于TS扩展的声明式开发范式)提供了强大的组件化能力，支持开发者高效的构建应用的UI界面，然而每一个组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，因此组件间的相互通信是非常重要的。组件间通信原理ETS组件间通信是通过组合不同的装饰器来实现数据在各个组件之间的单向/双向传递。相关装饰器介绍装饰器名称功能特征@State所装饰变量的值发生变化时，将会调用
  • 大数据模型：技术赋能，引领未来 大模型教程 人工智能AI大模型大模型语言模型
    随着互联网、物联网、人工智能等技术的飞速发展，我们正身处一个数据爆炸的时代。数据，已经成为这个时代最为宝贵的资源之一。而如何挖掘和利用这些海量数据，为企业和社会创造价值，正是大数据模型所追求的目标。本文将从以下几个方面对大数据模型进行探讨：概述、技术原理、应用场景、挑战与发展趋势。一、概述大数据模型是一种基于数据挖掘和机器学习技术的分析方法，通过对海量数据进行处理和分析，挖掘出有价值的信息和知识，
  • 如何优化你的 Node.js API 程序员小英 node.js
    原文来源于：freeCodeCamp，作者：PapayaHUANG如有侵权，联系删除在这篇文章中，我将讲解如何优化使用Node.js编写的API。前提条件想要充分了解本文内容，你必须了解以下概念：Node.js的设置与安装如何使用Node创建API如何使用PostmanJavaScript的async/await工作原理Redis的基础操作API优化到底指的是什么优化包含了改善API的响应时间。响
  • 如何根据企业架构设计IT架构？ 自由鬼 IT应用探讨行业发展架构企业架构IT架构
    企业IT架构高度匹配企业架构是实现战略目标、提高业务效率和增强组织竞争力的关键。以下是关于企业架构（EnterpriseArchitecture，EA）及其与IT架构设计关系的详细说明：一、什么是企业架构（EA）？企业架构是一种方法论和工具集，用于系统地描述和分析企业的业务、信息、流程和技术，以支持企业的战略目标和业务运营。它是一个全局视角，确保企业内各个部分协同一致。企业架构的核心组成部分（通常
  • 如何防止 Docker 注入了恶意脚本 调皮的芋头 docker容器运维web安全阿里云
    根据您的描述，攻击者通过CentOS7系统中的Docker注入了恶意脚本，导致自动启动名为“masscan”和“x86botnigletjsw”的进程。这些进程可能用于网络扫描或其他恶意活动。为了解决这一问题，建议您采取以下步骤：1.停止并删除可疑容器和进程：列出所有运行中的容器：dockerps-a检查输出，寻找与“masscan”或“x86botnigletjsw”相关的容器。停止并删除可疑容
  • web报表工具FineReport常见的数据集报错错误代码和解释 老A不折腾 web报表finereport代码可视化工具
    在使用finereport制作报表，若预览发生错误，很多朋友便手忙脚乱不知所措了，其实没什么，只要看懂报错代码和含义，可以很快的排除错误，这里我就分享一下finereport的数据集报错错误代码和解释，如果有说的不准确的地方，也请各位小伙伴纠正一下。   NS-war-remote=错误代码\:1117 压缩部署不支持远程设计 NS_LayerReport_MultiDs=错误代码
  • Java的WeakReference与WeakHashMap bylijinnan java弱引用
    首先看看 WeakReference wiki 上 Weak reference 的一个例子： public class ReferenceTest { public static void main(String[] args) throws InterruptedException { WeakReference r = new Wea
  • Linux——（hostname）主机名与ip的映射 eksliang linuxhostname
    一、 什么是主机名 无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。但IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。域名类型 linuxsir.org 这样的； 主机名是用于什么的呢？ 答：在一个局域网中，每台机器都有一个主
  • oracle 常用技巧 18289753290
    oracle常用技巧 ①复制表结构和数据   create table  temp_clientloginUser as   select distinct userid from tbusrtloginlog ②仅复制数据 如果表结构一样 insert into  mytable  select  * &nb
  • 使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException 酷的飞上天空 exception
    有一个线上环境使用的是c3p0数据库，为外部提供接口服务。最近访问压力增大后台tomcat的日志里面频繁出现 com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResou
  • IT系统分析师如何学习大数据 蓝儿唯美 大数据
    我是一名从事大数据项目的IT系统分析师。在深入这个项目前需要了解些什么呢？学习大数据的最佳方法就是先从了解信息系统是如何工作着手，尤其是数据库和基础设施。同样在开始前还需要了解大数据工具，如Cloudera、Hadoop、Spark、Hive、Pig、Flume、Sqoop与Mesos。系 统分析师需要明白如何组织、管理和保护数据。在市面上有几十款数据管理产品可以用于管理数据。你的大数据数据库可能
  • spring学习——简介 a-john spring
    Spring是一个开源框架，是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只能由EJB完成的事情。然而Spring的用途不仅限于服务器端的开发，从简单性，可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。其主要特征是依赖注入、AOP、持久化、事务、SpringMVC以及Acegi Security 为了降低Java开发的复杂性，
  • 自定义颜色的xml文件 aijuans xml
    <?xml version="1.0" encoding="utf-8"?> <resources> <color name="white">#FFFFFF</color> <color name="black">#000000</color> &
  • 运营到底是做什么的？ aoyouzi 运营到底是做什么的？
    文章来源：夏叔叔（微信号：woshixiashushu），欢迎大家关注！很久没有动笔写点东西，近些日子，由于爱狗团产品上线，不断面试，经常会被问道一个问题。问：爱狗团的运营主要做什么？答：带着用户一起嗨。为什么是带着用户玩起来呢？究竟什么是运营？运营到底是做什么的？那么，我们先来回答一个更简单的问题——互联网公司对运营考核什么？以爱狗团为例，绝大部分的移动互联网公司，对运营部门的考核分为三块——用
  • js面向对象类和对象 百合不是茶 js面向对象函数创建类和对象
    接触js已经有几个月了,但是对js的面向对象的一些概念根本就是模糊的,js是一种面向对象的语言 但又不像java一样有class,js不是严格的面向对象语言 ,js在java web开发的地位和java不相上下  ,其中web的数据的反馈现在主流的使用json,json的语法和js的类和属性的创建相似   下面介绍一些js的类和对象的创建的技术   一:类和对
  • web.xml之资源管理对象配置 resource-env-ref bijian1013 javaweb.xmlservlet
    resource-env-ref元素来指定对管理对象的servlet引用的声明，该对象与servlet环境中的资源相关联 <resource-env-ref> <resource-env-ref-name>资源名</resource-env-ref-name> <resource-env-ref-type>查找资源时返回的资源类
  • Create a composite component with a custom namespace sunjing
    https://weblogs.java.net/blog/mriem/archive/2013/11/22/jsf-tip-45-create-composite-component-custom-namespace   When you developed a composite component the namespace you would be seeing would
  • 【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter bit1129 mongodb
     一、复本集为什么要加入Arbiter这个角色 回答这个问题，要从复本集的存活条件和Aribter服务器的特性两方面来说。 什么是Artiber？ An arbiter does not have a copy of data set and cannot become a primary. Replica sets may have arbiters to add a
  • Javascript开发笔记 白糖_ JavaScript
    获取iframe内的元素 通常我们使用window.frames["frameId"].document.getElementById("divId").innerHTML这样的形式来获取iframe内的元素，这种写法在IE、safari、chrome下都是通过的，唯独在fireforx下不通过。其实jquery的contents方法提供了对if
  • Web浏览器Chrome打开一段时间后，运行alert无效 bozch Webchormealert无效
    今天在开发的时候，突然间发现alert在chrome浏览器就没法弹出了，很是怪异。 试了试其他浏览器，发现都是没有问题的。 开始想以为是chorme浏览器有啥机制导致的，就开始尝试各种代码让alert出来。尝试结果是仍然没有显示出来。 这样开发的结果，如果客户在使用的时候没有提示，那会带来致命的体验。哎，没啥办法了 就关闭浏览器重启。   结果就好了，这也太怪异了。难道是cho
  • 编程之美-高效地安排会议 图着色问题 贪心算法 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.Random; public class GraphColoringProblem { /**编程之美 高效地安排会议 图着色问题 贪心算法 * 假设要用很多个教室对一组
  • 机器学习相关概念和开发工具 chenbowen00 算法matlab机器学习
    基本概念： 机器学习(Machine Learning, ML)是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。 它是人工智能的核心，是使计算机具有智能的根本途径，其应用遍及人工智能的各个领域，它主要使用归纳、综合而不是演绎。 开发工具 M
  • [宇宙经济学]关于在太空建立永久定居点的可能性 comsci 经济
           大家都知道,地球上的房地产都比较昂贵,而且土地证经常会因为新的政府的意志而变幻文本格式........        所以,在地球议会尚不具有在太空行使法律和权力的力量之前,我们外太阳系统的友好联盟可以考虑在地月系的某些引力平衡点上面,修建规模较大的定居点
  • oracle 11g database control 证书错误 daizj oracle证书错误oracle 11G 安装
    oracle 11g database control 证书错误  win7 安装完oracle11后打开 Database control 后，会打开em管理页面，提示证书错误，点“继续浏览此网站”，还是会继续停留在证书错误页面 解决办法： 是 KB2661254 这个更新补丁引起的，它限制了 RSA 密钥位长度少于 1024 位的证书的使用。具体可以看微软官方公告：
  • Java I/O之用FilenameFilter实现根据文件扩展名删除文件 游其是你 FilenameFilter
    在Java中，你可以通过实现FilenameFilter类并重写accept(File dir, String name) 方法实现文件过滤功能。 在这个例子中，我们向你展示在“c:\\folder”路径下列出所有“.txt”格式的文件并删除。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
  • C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例 dcj3sjt126com carray
    # include <stdio.h> int main(void) { int a[5] = {1, 2, 3, 4, 5}; //a 是数组的名字 5是表示数组元素的个数，并且这五个元素分别用a[0], a[1]...a[4] int i; for (i=0; i<5; ++i) printf("%d\n",
  • PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。 就是 唯一 且 不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引 dcj3sjt126com primary
    PRIMARY, INDEX, UNIQUE 这3种是一类PRIMARY 主键。 就是 唯一 且 不能为空。INDEX 索引，普通的UNIQUE 唯一索引。 不允许有重复。FULLTEXT 是全文索引，用于在一篇文章中，检索文本信息的。举个例子来说，比如你在为某商场做一个会员卡的系统。这个系统有一个会员表有下列字段：会员编号   INT会员姓名  
  • java集合辅助类 Collections、Arrays shuizhaosi888 CollectionsArraysHashCode
      Arrays、Collections   1 ）数组集合之间转换 public static <T> List<T> asList(T... a) { return new ArrayList<>(a); }      a）Arrays.asL
  • Spring Security（10）——退出登录logout 234390216 logoutSpring Security退出登录logout-urlLogoutFilter
           要实现退出登录的功能我们需要在http元素下定义logout元素，这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain。当我们指定了http元素的auto-config属性为true时logout定义是会自动配置的，此时我们默认退出登录的URL为“/j_spring_secu
  • 透过源码学前端 之 Backbone 三 Model 逐行分析JS源代码 backbone源码分析js学习
    Backbone 分析第三部分  Model 概述： Model 提供了数据存储，将数据以JSON的形式保存在 Model的 attributes里， 但重点功能在于其提供了一套功能强大，使用简单的存、取、删、改数据方法，并在不同的操作里加了相应的监听事件， 如每次修改添加里都会触发 change，这在据模型变动来修改视图时很常用，并且与collection建立了关联。
  • SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter 乒乓狂魔 springMVC
    这一篇文章主要介绍下HttpMessageConverter整个注册过程包含自定义的HttpMessageConverter，然后对一些HttpMessageConverter进行具体介绍。 HttpMessageConverter接口介绍： public interface HttpMessageConverter<T> { /** * Indicate
  • 分布式基础知识和算法理论 bluky999 算法zookeeper分布式一致性哈希paxos
      分布式基础知识和算法理论 BY [email protected] 本文永久链接：http://nodex.iteye.com/blog/2103218   在大数据的背景下，不管是做存储，做搜索，做数据分析，或者做产品或服务本身，面向互联网和移动互联网用户，已经不可避免地要面对分布式环境。笔者在此收录一些分布式相关的基础知识和算法理论介绍，在完善自我知识体系的同
  • Android Studio的.gitignore以及gitignore无效的解决 bell0901 androidgitignore
    　　github上.gitignore模板合集，里面有各种.gitignore ： https://github.com/github/gitignore 　　自己用的Android Studio下项目的.gitignore文件，对github上的android.gitignore添加了 　　　　　　# OSX files　　　　　　//mac os下　　　　　　.DS_Store
  • 成为高级程序员的10个步骤 tomcat_oracle 编程
    What 软件工程师的职业生涯要历经以下几个阶段：初级、中级，最后才是高级。这篇文章主要是讲如何通过 10 个步骤助你成为一名高级软件工程师。   Why 得到更多的报酬！因为你的薪水会随着你水平的提高而增加 提升你的职业生涯。成为了高级软件工程师之后，就可以朝着架构师、团队负责人、CTO 等职位前进 历经更大的挑战。随着你的成长，各种影响力也会提高。
  • mongdb在linux下的安装 xtuhcy mongodblinux
    一、查询linux版本号： lsb_release -a  LSB Version:    :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-noarch:printing-4.0-amd64:printing-4.0-noa
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他