如果皮卡会coding
如果皮卡会coding

【CSS】网格布局（简单布局、网格合并、网格嵌套）

文章目录

    • CSS网格布局（Grid Layout）
      • 1. 简单布局
      • 2. 网格合并
      • 3. 网格嵌套
      • 4. 总结

CSS网格布局（Grid Layout）

CSS网格布局（Grid Layout）是一种强大且灵活的CSS布局系统，允许开发者以网格形式组织和定位HTML元素。网格布局可以帮助我们在一个容器中定义行（rows）和列（columns），然后将元素放置在这些网格中。这种布局方式比传统的基于浮动和定位的布局更直观和易于管理，特别适用于响应式设计和复杂的布局需求。

1. 简单布局

我们首先来看一个简单的网格布局示例。假设我们有一个容器，我们将其分为3列，每列的宽度平分剩余空间，然后在容器中放置一些网格项。

【CSS】网格布局（简单布局、网格合并、网格嵌套）_第1张图片

HTML代码：

DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout - 简单布局title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }

    .grid-item {
      font-size: 2em;
      text-align: center;
      border: 1px solid #e5e4e9;
      padding: 20px;
    }
  style>
head>
<body>
  <div class="grid-container">
    <div class="grid-item">1div>
    <div class="grid-item">2div>
    <div class="grid-item">3div>
    <div class="grid-item">4div>
    <div class="grid-item">5div>
    <div class="grid-item">6div>
    <div class="grid-item">7div>
    <div class="grid-item">8div>
    <div class="grid-item">9div>
  div>
body>
html>

在这个简单的示例中，我们创建了一个包含9个网格项的网格布局。我们使用display: grid;来创建网格容器，通过grid-template-columns设置为repeat(3, 1fr)来定义3列，每列宽度平分剩余空间。通过设置grid-gap: 10px;，我们为网格项之间添加了10px的间隔。

2. 网格合并

在网格布局中，我们可以通过设置grid-row和grid-column的起始和结束行/列索引，将多个网格项合并成一个大的网格单元。

【CSS】网格布局（简单布局、网格合并、网格嵌套）_第2张图片
在这个例子中，我们不难看出上面的网格是3*4的。注意看这里的item-1、item-2。

HTML代码：

DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout - 网格项合并title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }

    .grid-item {
      font-size: 2em;
      text-align: center;
      border: 1px solid #e5e4e9;
      padding: 20px;
    }

    .item-1 {
      background-color: #ef342a;
      grid-row: 1 / 3; /* 合并占据 1到2 行，不包括3 */
      grid-column: 1 / 2; /* 合并占据 1到1 列，不包括2 */
    }

    .item-2 {
      background-color: #f68f26;
      grid-row: 1 / 2; /* 占据 1 行 */
      grid-column: 2 / 4; /* 合并占据 2到3 列 */
    }

    .item-3 {
      background-color: #4ba946;
      grid-row: 1 / 2; /* 占据 1 行 */
      grid-column: 4 / 4; /* 占据 4 列 */
    }

    .item-4 {
      background-color: #0376c2;
      grid-row: 2 / 4; /* 合并占据 2到3 行 */
      grid-column: 2 / 3; /* 占据 2 列*/
    }

    .item-5 {
      background-color: #c077af;
      grid-row: 2 / 4; /* 合并占据2到3行 */
      grid-column: 3 / 4; /* 合并占据3列 */
    }

    .item-6 {
      background-color: #f8d29d;
      grid-row: 2 / 2; /* 占据2行 */
      grid-column: 4 / 4; /* 占据4列 */
    }

    .item-7 {
      background-color: #b5a87f;
      grid-row: 3 / 4; /* 占据3行 */
      grid-column: 1 / 3; /* 合并占据1到2列 */
    }

    .item-8 {
      background-color: #d0e4a9;
      grid-row: 3 / 4; /* 占据3行 */
      grid-column: 3 / 4; /* 占据3列 */
    }

    .item-9 {
      background-color: #4dc7ec;
      grid-row: 3 / 4; /* 占据3行 */
      grid-column: 4 / 4; /* 占据4列 */
    }
  style>
head>
<body>
  <div class="grid-container">
    <div class="grid-item item-1">1div>
    <div class="grid-item item-2">2div>
    <div class="grid-item item-3">3div>
    <div class="grid-item item-4">4div>
    <div class="grid-item item-5">5div>
    <div class="grid-item item-6">6div>
    <div class="grid-item item-7">7div>
    <div class="grid-item item-8">8div>
    <div class="grid-item item-9">9div>
  div>
body>
html>

在这个示例中，我们为每个网格项添加了相应的类名（item-1到item-9），这些类名与CSS选择器中的类名相对应，使得网格合并生效。通过设置

grid-row和grid-column属性，我们将中间的9个网格项合并成了一个大的网格单元。

3. 网格嵌套

在网格布局中，我们可以创建更复杂的布局，比如嵌套网格和不规则网格。以下是一个复杂的网格布局示例，其中包含嵌套的网格。

【CSS】网格布局（简单布局、网格合并、网格嵌套）_第3张图片

HTML代码：

DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout - 复杂布局title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 10px;
    }

    .grid-item {
      font-size: 2em;
      text-align: center;
      border: 1px solid #e5e4e9;
      padding: 20px;
    }

    .nested-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 5px;
    }
  style>
head>
<body>
  <div class="grid-container">
    <div class="grid-item">1div>
    <div class="grid-item">2div>
    <div class="grid-item">3div>
    <div class="grid-item">4div>
    <div class="grid-item">5div>
    <div class="grid-item">6div>
    <div class="grid-item nested-grid">
      <div class="grid-item">7div>
      <div class="grid-item">8div>
      <div class="grid-item">9div>
    div>
  div>
body>
html>

在这个复杂的示例中，我们首先创建了一个包含6个网格项的网格布局。然后，在第6个网格项中创建了一个嵌套的网格布局，该嵌套网格包含3个网格项。

这个示例演示了如何在网格布局中实现嵌套，通过在一个网格项中创建另一个网格容器，我们可以更灵活地组织和排列内容。

4. 总结

CSS网格布局是一种强大的CSS布局系统，它简化了页面的布局和定位，同时适应不同屏幕大小的需求。通过使用display: grid;、grid-template-columns、grid-template-rows、grid-row和grid-column等属性，我们可以轻松地实现简单到复杂的网格布局。网格合并和嵌套使得在网格中创建复杂的布局变得更加简单和灵活。

你可能感兴趣的:(前端学习,#,HTML与CSS,css,前端)

  • 《提示工程的科学化探索与大语言模型交互革新》 XianxinMao 语言模型交互
    文章信息摘要主题：提示工程的科学化与大语言模型交互革新核心内容：提示工程的科学化与系统化建立可复现的方法论形成系统性知识体系构建标准化流程和评估体系大语言模型带来的交互变革从指令驱动到对话驱动从单一输出到多轮复杂交互从工具到协作伙伴的转变提示对模型行为的影响机制认知层面：引导思考路径语言层面：控制输出风格任务层面：定义问题边界关键要点：强调数据驱动和理论构建的重要性提出具体的技术路线和评估框架探讨
  • 如何在Mac上使用Brew更新Cursor应用程序 熊明才 macos
    在这篇博文中，我们将介绍如何在Mac上更新Cursor应用程序，以及一些相关的使用技巧和功能。什么是Cursor？Cursor是一款强大的工具，旨在帮助用户更好地编写、编辑和讨论代码。它结合了AI技术，使得编程过程更加高效和便捷。Cursor不仅支持代码编辑，还可以与团队成员进行实时协作。如何安装Cursor如果你还没有安装Cursor，可以通过以下步骤进行安装：使用Homebrew安装：如果你已
  • QT —— "model/view" 使用帮助 Jecklin_online QTcqtmodelviewdelegate
    （一）Model/View结构Model-View-Controller(MVC)，是从Smalltalk发展而来的一种设计模式，常用于创建用户界面。MVC包含3个组件：Model:应用对象，用来表示数据View:模型的用户界面，用来显示数据Controller:定义了用户界面对用户输入的反应方式Delegate(委托)：为了对用户输入进行灵活处理被引入，用于定制数据的渲染和编辑方式其中，模型与数
  • 基于 Python 和 Django 的课程管理系统设计与实现 赵谨言 python论文经验分享毕业设计python
    标题:基于Python和Django的课程管理系统设计与实现内容:1.摘要摘要：本文介绍了基于Python和Django的课程管理系统的设计与实现。文章首先阐述了课程管理系统的背景和意义，接着详细描述了系统的设计与实现过程，包括系统架构、功能模块、数据库设计等。然后，通过实际应用案例展示了系统的运行效果和优势。最后，总结了系统的特点和创新点，并对未来的研究方向进行了展望。关键词：课程管理系统；Py
  • Dart语言的多线程编程 java熊猫 包罗万象golang开发语言后端
    Dart语言的多线程编程在现代软件开发中，多线程编程是实现高性能和高响应应用程序的重要手段。Dart语言是由Google开发的一种现代编程语言，广泛应用于Flutter应用开发。Dart的并发模型与传统多线程编程有所不同，主要采用的是异步编程和隔离（Isolates）的方式。在本文中，我们将详细探讨Dart语言的多线程编程，尤其是如何使用Dart中的异步功能和隔离来实现并发。一、Dart的并发模型
  • Swift语言的语法糖 java熊猫 包罗万象golang开发语言后端
    Swift语言的语法糖引言在软件开发中，程序员经常会面临语法的复杂性与代码的可读性之间的权衡。Swift语言作为一种现代编程语言，注重于简洁性和高效性，提供了多种语法糖，使得代码既简洁又易于理解。本文将深入探讨Swift语言中的语法糖，及其对提高程序员生产力的重要意义。1.什么是语法糖在编程语言中，"语法糖"指的是一些语法特性，它们使得代码更加易读和易写，但并不提供新的功能。换句话说，语法糖仅仅是
  • 高级Python Web开发：FastAPI的前后端集成与API性能优化 Switch616 PythonWebpython前端fastapi性能优化开发语言数据库
    高级PythonWeb开发：FastAPI的前后端集成与API性能优化目录️前后端集成的基本原理与实践FastAPI的API设计与实现API性能测试与负载测试使用Locust进行API性能测试使用ApacheJMeter进行API性能测试自动化性能测试用例与性能瓶颈分析编写性能测试用例性能瓶颈的定位与分析1.️前后端集成的基本原理与实践在现代Web开发中，前后端分离已成为主流架构。前端与后端通过A
  • 《AI 造梦：解锁虚拟场景与角色逼真丰富密码》 人工智能深度学习
    在科技飞速发展的当下，生成式人工智能正以前所未有的态势席卷各个领域，尤其在构建虚拟世界方面，展现出令人惊叹的潜力。从沉浸式游戏世界到逼真的影视特效场景，从栩栩如生的虚拟偶像到互动性极强的虚拟角色，生成式人工智能正在改写我们对虚拟场景和角色的认知。今天，就让我们深入探寻如何利用这一前沿技术，创造出更加逼真且丰富的虚拟场景与角色。生成式AI技术基石生成式对抗网络（GANs）和变分自编码器（VAEs）是
  • Transformer 架构对比：Dense、MoE 与 Hybrid-MoE 的优劣分析 XianxinMao transformer架构深度学习
    1.LLM基础架构类型DenseTransformerMoE(MixtureofExperts)TransformerHybrid-MoETransformer2.Transformer按照编码方式分类单向自回归模型(如早期GPT系列)双向模型(如BERT)编码器-解码器模型(如BART,T5)DenseTransformerDenseTransformer的优势是什么DenseTransform
  • 一步到位：购买适合 SEO 的域名全攻略 后端
    选择一个对SEO友好的域名不仅可以提高搜索引擎排名，还能增强品牌影响力。以下是简化优化后的购买流程：1.检查域名历史，确保无负面记录在购买域名前，务必确认它没有被封锁或拉黑，并且历史记录与您的行业相关：检查域名安全性和历史VirusTotal：查看域名是否被列为不安全。WebArchive：查看域名以前的用途，判断是否有不良记录或与您的行业冲突。GoogleTransparencyReport：检
  • 《量子AI：突破量子比特稳定性与容错性的关键瓶颈》 人工智能深度学习机器学习
    在量子计算的发展进程中，量子比特的稳定性和容错性问题一直是阻碍其走向广泛应用的关键障碍。量子AI作为前沿技术，正积极探索各种途径来攻克这些难题。量子纠错：守护量子比特的精准防线量子纠错是解决量子比特稳定性和容错性问题的核心技术之一。其原理是通过在量子比特之间建立量子纠错码，来检测和纠正量子比特在计算过程中发生的错误。比如谷歌量子人工智能实验室采用的“表面码”技术，通过构建物理量子比特的网格来编码逻
  • 附原文 |《2024年漏洞与威胁趋势报告》深度解读 漏洞
    在信息技术飞速发展的当下，网络安全已然成为全球瞩目的焦点。安全极客社区精心译制的《2024年漏洞与威胁趋势报告》明确指出，2023年堪称网络安全领域的重要分水岭。这一年，新发现漏洞的数量出现了前所未有的增长态势，其中高危或严重级别的漏洞占比高达一半，漏洞利用的时间线显著缩短，然而平均修复时间却过长。金融服务、制造业以及公用事业等行业面临的网络威胁愈发严峻，首席信息安全官所承担的法律责任也日益加重。
  • 星环科技×恒生电子，联合打造反洗钱解决方案 人工智能
    随着反洗钱行为更具隐蔽性、多样性和跨区域性，金融机构的反洗钱能力也相应面临新一轮升级。将大数据技术应用于反洗钱领域，可借助大数据平台高效整合、分析海量客户身份信息和交易数据，保障反洗钱系统有效开展客户风险等级评定、可疑交易筛查、黑名单监测等工作，为反洗钱工作赋能。近日，星环科技与恒生电子联合发布反洗钱解决方案，系统覆盖金融机构全业务全客户全流程，满足客户尽调、大额可疑交易检测、名单筛查、自评估等各
  • 让创意在幻觉中肆虐: 认识Illusion Diffusion AI 程序员
    人工智能新境界在不断发展的人工智能领域,一款非凡的新工具应运而生,它能将普通照片转化为绚丽的艺术品。敬请关注IllusionDiffusion,这是一个将现实与想象力完美融合的AI驱动平台,可创造出迷人的视错觉和超现实意境。AI算法的魔力所在IllusionDiffusion的核心是借助先进的AI模型,包括StableDiffusion和ControlNet,来解读用户输入的文本提示,并生成相应的
  • 浅谈云计算06 | 云管理系统架构 时光札记z 云计算系统架构云计算架构云原生计算机网络
    云管理系统架构一、云管理系统架构（一）远程管理系统（二）资源管理系统（三）SLA管理系统（四）计费管理系统二、安全与可靠性保障（一）数据安全防线（二）故障应对策略云管理系统是一种综合性的软件平台，用于对云计算环境中的各类资源、服务和业务流程进行集中化、自动化的管理与监控。它就像是云计算的“智能管家”，整合了多种功能模块，能够跨越不同的物理和虚拟资源，为云服务提供商及用户提供统一的管理界面与操作入口
  • Node.js Express与MongoDB博客系统开发实战 凯二七
    本文还有配套的精品资源，点击获取简介：本项目采用Node.js及其Express框架，结合MongoDB非关系型数据库，构建一个基于RESTfulAPI的Web博客服务。通过CRUD操作实现文章的发布、阅读、编辑和删除功能。项目强调了Node.js的异步I/O和事件驱动特性，以及MongoDB处理大规模、复杂数据集的能力，适合进行毕业设计等综合性开发任务。1.Node.js技术介绍与应用Node.
  • 《C++编程思想》笔记 Wanncye C++面试题汇总书籍课程笔记c++开发语言mfc
    《C++编程思想》笔记第3章：C++中C第4章：数据抽象第5章：隐藏实现第6章：初始化与清除第7章：函数重载与默认参数第8章：常量第9章：内联函数第10章：名字控制第13章：动态对象创建第14章：组合和继承第15章：多态性和虚函数第16章：模板介绍第3章：C++中C标准C和C++有一种特征叫做函数原型。用函数原型，在声明和定义一个函数时，必须使用参数类型描述。这种描述就是“原型”。调用函数时，编译
  • 超越 RAG：Memobase 为 AI 应用注入长期记忆丨社区来稿 人工智能
    本文由RTE开发者社区成员通过社区网站投稿提供，如果你也有与实时互动（Real-TimeEngagement，RTE）相关的项目分享，欢迎访问网站rtecommunity.dev发布，优秀项目将会在公众号发布分享。目录什么是AI记忆？AI记忆的类型短记忆vs.长记忆UserMemoryvs.AgentMemory：两种记忆，两种侧重记忆vs.RAG：到底有什么区别？为什么AI应用需要记忆？现在的长
  • java进度条动画_Android自定义控件之圆形进度条动画 高尚雅 java进度条动画
    本文实例为大家分享了Android实现圆形进度条动画的具体代码，供大家参考，具体内容如下首先贴上图片：额，感觉还行吧，就是进度条的颜色丑了点，不过咱是程序员，不是美工，配色这种问题当然不在考虑范围之内了。下面说重点，如何来写一个这样的自定义控件。首先，需要有一个灰色的底图，来作为未填充时的进度条；然后，根据传入的当前进度值，绘制填充时的进度圆弧，这段圆弧所对应的圆心角，由当前进度与进度的最大值(一
  • Linux系统文件与目录管理(1) 放错位的天才 操作系统数据库运维
    文件与目录的操作在Linux系统的文件与目录的管理上,不外乎『显示属性』、『拷贝』、『删除文件』、『移动文件或目录』、『重命名』等常用操作,由于文件与目录的管理在Linux当中是很重要的,尤其是每个人自己家目录的数据也都需要管理,所以我们来谈一谈有关文件与目录的一些基础管理部分吧.◆ls显示目录或文件◆ls命令用来显示目标列表,在Linux系统中是使用率较高的命令.ls命令的输出信息可以进行彩色加
  • android自定义圆形控件,Android自定义控件之圆形/圆角的实现代码 研究生欧阳同学呀 android自定义圆形控件
    一、问题在哪里？问题来源于app开发中一个很常见的场景——用户头像要展示成圆的：二、怎么搞？机智的我，第一想法就是，切一张中间圆形透明、四周与底色相同、尺寸与头像相同的蒙板图片，盖在头像上不就完事了嘛，哈哈哈！在背景纯色的前提下，这的确能简单解决问题，但是如果背景没有这么简单呢？在这种不规则背景下，有两个问题：1)、背景图常常是适应手机宽度缩放，而头像的尺寸又是固定宽高DP的，所以固定的蒙板图片是
  • linux出现bash: ./java: cannot execute binary file 问题的解决办法 w36680130 linux
    linux出现bash:./java:cannotexecutebinaryfile问题的解决办法参考文章：（1）linux出现bash:./java:cannotexecutebinaryfile问题的解决办法（2）https://www.cnblogs.com/longshiyVip/p/4802339.html备忘一下。
  • curl命令参数解释翻译 梅见十柒 计算机网络计算机网络http网络安全
    这一次将详细学习curl的各个参数，下面将从第一个参数开始，逐一解析它们的含义和用法。1.--abstract-unix-socket这个参数用于通过抽象的Unix域套接字进行连接。抽象的Unix域套接字与文件系统无关，可以在内存中进行通信。这在某些需要高效IPC（进程间通信）的应用中非常有用。例如：[curl--abstract-unix-socket/var/run.sockhttp://lo
  • 掌握 React 高阶组件与高阶函数：构建可复用组件的新境界 风茫 Reactreact.jsjavascript
    一、引言在React开发中，代码复用性和逻辑分离是提高开发效率和维护性的重要手段。高阶组件（Higher-OrderComponent,HOC）和高阶函数（Higher-OrderFunction,HOF）是实现这一目标的两种强大工具。本文将详细介绍这两种技术的概念、应用场景及其实现方式，并通过具体示例帮助你更好地理解和应用它们。二、高阶函数（HOF）1.概念高阶函数是指以函数作为参数或返回值的函
  • 如何防止缓存雪崩、击穿和穿透?思维导图 代码示例（java 架构) 用心去追梦 缓存java架构
    防止缓存雪崩、击穿和穿透是确保缓存系统稳定性和性能的关键。以下是一个思维导图结构，以及一个简化的Java架构代码示例，展示了如何通过设计和技术手段来预防这些问题。思维导图结构防止缓存问题缓存雪崩分散过期时间设置随机的TTL（Time-To-Live）限流与熔断服务降级流量控制预热机制提前加载热点数据缓存击穿分布式锁使用Redis等工具实现分布式锁缓存冗余多副本存储异步更新异步加载数据到缓存缓存穿透
  • 设计模式——责任链模式 fajianchen 设计模式系统设计思维系统设计设计模式责任链模式
    责任链模式定义责任链模式，是一种行为设计模式，允许你将请求沿着处理者链进行发送。收到请求后，每个处理者均可对请求进行处理，或将其传递给链上的下个处理者。避免了请求发送者与多个请求处理者耦合在一起**处理者链**：通过当前的处理者（前一个处理者）记住下一个处理者的对象引用的方式把所有处理者链子一起与许多其他行为设计模式一样，责任链会将特定行为转换为被称作处理者的独立对象。在上述示例中，每个检查步骤都
  • Go语法和特性 penngo Gogolanglinuxbash
    文章目录1、语法基础1.1环境安装1.1.1安装1.1.2编译工具1.2基本语法1.2.1变量的声明与初始化1.2.1原生数据类型1.2.2指针1.2.3常量与类型别名1.2.4分支与循环1.3容器1.3.1数组1.3.2列表1.3.2字典1.3.3容器遍历1.4函数与接口1.4.1函数声明和参数传递1.4.2匿名函数和闭包1.4.2.1匿名函数1.4.2.2闭包1.4.3接口声明与嵌套1.4.4
  • 推荐开源项目：SwiftUI-MVVM —— 让你的SwiftUI应用更易测试与管理 马冶娆
    推荐开源项目：SwiftUI-MVVM——让你的SwiftUI应用更易测试与管理项目地址:https://gitcode.com/gh_mirrors/sw/SwiftUI-MVVM1、项目介绍SwiftUI-MVVM是一个精心设计的开源项目，它引入了Model-View-ViewModel（MVVM）架构模式到Apple的最新界面构建框架SwiftUI中。项目的主要目标是实现数据流的最大可测试性
  • MMORPG游戏中的道具系统开发技术总结 小宝哥Code MMORPG游戏
    MMORPG游戏中的道具系统开发技术总结在MMORPG（大型多人在线角色扮演游戏）中，道具系统是游戏设计的核心组成部分之一。道具系统不仅仅是玩家角色装备与消耗品的管理平台，它还影响着游戏的经济体系、玩家之间的互动、角色的成长等多方面内容。因此，设计一个高效、灵活的道具系统是开发MMORPG时的关键任务。本文将从道具系统的基本设计到性能优化，系统架构等方面进行总结，帮助开发者构建一个健壮且具扩展性的
  • Objective-C语言的数据库交互 Code花园 包罗万象golang开发语言后端
    Objective-C语言的数据库交互引言在现代应用程序开发过程中，数据库在数据存储和管理方面起着至关重要的作用。对于iOS应用开发者而言，掌握如何在Objective-C中与数据库交互显得尤为重要。本文将全面探讨Objective-C的数据库交互，包括SQLite的基本用法、数据模型的设计、常用的数据库操作及在实际应用中的综合示例。1.数据库基础在深入Objective-C的数据库交互之前，我们
  • Enum 枚举 120153216 enum枚举
    原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
  • Java8简明教程 bijian1013 javajdk1.8
            Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
  • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
    我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
  • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
          “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
  • Xshell实现Windows上传文件到Linux主机 被触发 windows
    经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
  • 类的加载ClassLoader 肆无忌惮_ ClassLoader
    类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
  • html5写的玫瑰花 知了ing html5
    <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
  • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
    原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
  • webservice获取访问服务的ip地址 alleni123 webservice
    1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
  • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
    1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
  • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
    Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
  • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
    Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
  • [Velocity二]自定义Velocity指令 bit1129 velocity
    什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
  • 【Hive十】Programming Hive学习笔记 bit1129 programming
    第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
  • nginx有选择性进行限制 ronin47 nginx 动静　限制
    http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
  • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
    /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
  • Netty学习笔记 bylijinnan javanetty
    本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
  • js获取项目路径 cngolon js
    //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
  • oracle 的性能优化 cuishikuan oracleSQL Server
       在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
  • Shell变量和数组使用详解 daizj linuxshell变量数组
    Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
  • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
    KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
  • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
    1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
  • solrcloud 部署方式比较 eksliang solrCloud
    solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
  • Java synchronized关键字详解 gqdy365 synchronized
    转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
  • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
    在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
  • 开发者必备的 Chrome 扩展 justjavac chrome
    Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
  • 算法机试题 李亚飞 java算法机试题
           在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
  • 正确配置Linux系统ulimit值 字符串 ulimit
    在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
  • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
    注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
  • Spring 4.2新特性-更简单的Application Event wiselyman application
    1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他