失眠时间
失眠时间

css常见居中方式

文章目录

  • 前言
  • 一、水平居中
    • 1、使用`text-align + inline-block`水平居中
    • 2、使用定位`postion` + 变形`transform`水平居中
    • 3、使用 `margin: 0 auto + display: block` 水平居中
    • 4、使用`css3`新特性`flex`弹性盒子布局水平居中
  • 二、垂直居中
    • 1、固定高度（height） = 行高（line-height）
    • 2、使用定位（postion） + 变形（transform）垂直居中
    • 3、使用display: table-cell + vertical-align 垂直居中
    • 4、使用`css3`新特性`flex`弹性盒子布局垂直居中

前言

页面布局基本都会有居中样式，包括水平居中、垂直居中等

一、水平居中

1、使用text-align + inline-block水平居中

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用 text-align + inline-block 水平居中title>
<style>
    .wrap{
        height: 200px;
        text-align: center;
        border: 1px solid red;
    }
    .wrap .text{
        height: 100px;
        width: 300px;
        display: inline-block;
        border: 1px solid blue; 
    }
style>
head>
<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
body>
html>

2、使用定位postion + 变形transform水平居中

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用定位（postion） + 变形（transform）水平居中title>
    <style>
        .wrap {
            height: 200px;
            border: 1px solid red;
            position: relative;
        }

        .wrap .text {
            height: 100px;
            width: 300px;
            border: 1px solid blue;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    style>
head>

<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
body>

html>

3、使用 margin: 0 auto + display: block 水平居中

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用 margin: 0 auto + display: block 水平居中title>
    <style>
        .wrap {
            height: 200px;
            border: 1px solid red;
        }

        .wrap .text {
            height: 100px;
            width: 300px;
            display: block;
            border: 1px solid blue;
            margin: 0 auto;
        }
    style>
head>

<body>
    <div class="wrap">
        <span class="text">我是元素1span>
    div>
body>

html>

4、使用css3新特性flex弹性盒子布局水平居中

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>flex弹性盒子布局水平居中title>
    <style>
       .wrap {
            height: 200px;
            border: 1px solid red;
            display: flex;
            justify-content: center;
        }
        .wrap .text {  
            border: 1px solid blue;
        }
    style>
head>

<body>
    <div class="wrap">
        <span class="text">我是元素1span>
    div>
body>

html>

二、垂直居中

1、固定高度（height） = 行高（line-height）

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>固定高度（height） = 行高（line-height）title>
    <style>
        .wrap {
            height: 300px;
            line-height: 300px;
        }

        .wrap .text {
            border: 1px solid blue;
        }
    style>
head>

<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
body>

html>

2、使用定位（postion） + 变形（transform）垂直居中

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用定位（postion） + 变形（transform）垂直居中title>
    <style>
        .wrap {
            height: 600px;
            width: 300px;
            border: 1px solid red;
            position: relative;
        }

        .wrap .text {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        #div1 {
            width: 300px;
            height: 200px;
            background-color: #ccc;
            position: relative;
        }

        #div2 {
            width: 100px;
            height: 100px;
            background-color: #FB7299;
            margin: auto;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    style>
head>

<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
    <div id="div1">
        <div id="div2">
            子容器的垂直居中
        div>
    div>
body>

html>

3、使用display: table-cell + vertical-align 垂直居中

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>display: table-cell + vertical-align 垂直居中title>
    <style>
        .wrap {
            height: 600px;
            width: 300px;
            border: 1px solid red;

            display: table-cell;
            vertical-align: middle;
        }

        .wrap .text {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
        }

        #div1 {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            /* 使容器水平边距自动相等 */
            border: 1px solid red;
            /* 给文本加上边框可以更清楚地看到效果 */
            display: table;
        }

        #div2 {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 100%;
        }
    style>
head>

<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
    <div id="div1">
        <div id="div2">
            多行文本的垂直居中
            多行文本的垂直居中
            多行文本的垂直居中
            多行文本的垂直居中
            多行文本的垂直居中
        div>
    div>
body>

html>

4、使用css3新特性flex弹性盒子布局垂直居中

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>flex弹性盒子布局垂直居中title>
    <style>
        .wrap {
      height: 600px;
      width: 300px;
      border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .wrap .text {  
      width: 300px;
      height: 100px;
      border: 1px solid blue;
  }
    style>
head>

<body>
    <div class="wrap">
        <div class="text">我是元素1div>
    div>
body>

html>

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

  • 前端学习——HTML W起名有点难 学习笔记前端学习html
    VSCode常用快捷键代码格式化：Shift+Alt+F向上或向下移动一行：Alt+Up或Alt+Down快速复制一行代码：Shift+Alt+Up或者Shift+Alt+Down快速替换：Ctrl+HHTML标签文本标签定义着重文字定义粗体文字定义斜体文字加重语气删除字无特定含义列表标签1、有序列表//type可以改变列表项目标签//1：用数字标号；A：用大写字母标号；a：用小写字母标号；i：小
  • 我的创作纪念日 活宝小娜 前端前端vue.jsjavascript
    机缘在2020年初，正值前端开发技术日新月异的时期，我作为一名初入行不久的前端开发者，经常在工作中遇到各种挑战和难题。为了找到解决方案，我开始频繁地在CSDN上搜索相关的技术文章和讨论。渐渐地，我发现通过分享和讨论，不仅能帮助自己更快地解决问题，还能结识到许多志同道合的朋友。于是，在2020年03月01日，我鼓起勇气，发表了第一篇技术博客。收获知识深化：通过撰写博客，我不断巩固和深化了自己的前端知
  • 前端基础——HTML happyhappy666568 前端htmljavascript
    目录一、前端概述二、HTML简介三、HTML基本结构一、前端概述在Web开发中，有前端与后端之分。前端负责页面的布局，后端负责页面的逻辑。前端负责设计网页的样子，也就是我们看到的一个个彩色的方框和文字，但是一个网站只有这些按钮还远远不够啊，肯定还有服务器记录我们输入的信息数据。所以，后端负责的就是我们看不到的那些逻辑程序，它负责处理我们在网页上输入的那些信息或者点击信号等。核心技术：HTML(负责
  • 关于后端使用Boolean或boolean时前端收到的参数的区别 燃星cro 前端后端java
    当后端使用的是Boolean时，调用的方法是setIsLoginUser，前端收到的参数的参数名是isLoginUser而当后端使用的是boolean时，调用的方法是setLoginUser，前端收到的参数的参数名是loginUser封装类和基本数据类型在使用时需要注意这些细微的差别，因为这些细微的差别可能会导致前端收到的参数名称与预想的并不一样从而导致功能无法正常实现
  • Linux服务器防火墙白名单访问策略的配置示例 一望无际的大草原 后端运维防火墙服务器linux防火墙
    最近在做Linux系统应用部署配置过程中，为了确保应用的安全，简单学习了解了一些Linux中的动态防火墙管理工具的使用方法。本文测试实验主要采用Linux服务器的动态防火墙管理工具(即firewalld)，来实现服务或端口的访问控制，firewalld主要用于管理Linux系统中的防火墙规则，firewalld不是一个独立的防火墙软件，他基于Linux内核的netfilter框架的前端工具，fir
  • 【One Api】部署 giao客 大模型API
    文章目录介绍安装流程MySQL安装OneAPI安装访问前端使用超级管理员参考链接介绍Oneapi作为一个对用户请求和模型接口的中转站，能够根据用户的id和渠道id，调控用户与大模型api接口的请求。能够对用户的请求token量进行充值、监控、统计等功能。是作为大模型管理的一个开源高效工具。OneAPI是一个OpenAI接口管理&分发系统，可以通过标准的OpenAIAPI格式访问所有的大模型，开箱即
  • 如何在管理端项目中优雅地封装表格搜索条件 前端老曹 html5javascriptcss3vue.jstypescriptsass前端
    #前端做管理端项目时会有一个非常明显的问题就是表格页面过多如果每个表格页面都是自己写一套表格搜索条件会造成很多的代码冗余于是我就尝试封装一个适用于大部分表格的搜索条件组件用于提高代码复用性、可维护性和用户体验#文章目录引言需求分析设计思路实现细节使用示例总结引言在前端开发中，表格搜索是常见的功能需求。特别是在管理端项目中，表格搜索能够帮助用户快速定位到所需的数据。ElementPlus作为基于Vu
  • Vue 3 项目中的路由管理详解 前端老曹 vue.js前端javascript
    #随着前端单页应用（SPA）的兴起，路由管理成为了前端项目中不可或缺的一部分。VueRouter作为Vue.js官方的路由管理器，与Vue.js深度集成，为构建单页应用提供了强大的路由功能。在Vue3中，VueRouter也相应地进行了更新和优化，以更好地支持Vue3的新特性。本文将详细介绍Vue3项目中的路由管理。#一、VueRouter4概述VueRouter4是与Vue3配套使用的路由管理器
  • 使用WebStorm开发Vue3项目 web18285997089 面试学习路线阿里巴巴webstormrustide
    记录一下使用WebStorm开发Vu3项目时的配置现在WebStorm可以个人免费使用啦！??基本配置打包工具：Vite前端框架：ElementPlus开发语言：Vue3、TypeScript、Sass代码检查：ESLint、PrettierIDE：WebStorm2024.2首先说一下版本兼容问题，ElementPlus>=2.8.5需要Sass>=1.79.0，但是升级了Sass后，会导致El
  • 前端 github 项目拉取 启动出错一些列问题记录 风无雨 前端github
    1.MissingSecret:Pleasedefinea`secret`.Readmoreathttps://errors.authjs.dev#missingsecretatassertConfig(D:\project\ai-chatbot\.next\server\edge\chunks\c1962_@auth_core_9221fb._.js:480:16)atAuth(D:\proje
  • 2024年前端提效项目盘点之：低代码拖拽生成页面（架构设计篇） 前端77 前端低代码
    前言因为之前公司内部业务及提效的需要，做了一系列低代码的项目：分别有vscode插件、figma设计稿转代码插件、脚手架，拖拽生成h5营销页面和问卷等。现在把这一些系列实践的经验自我总结一下，形成一个低代码专栏。每个项目都分为思路架构设计和实践各两篇文章。当前是整个专栏的其中一个项目：拖拽生成h5页面（架构设计篇）1.起因为了满足公司运营及提效需要，搭建了一套供运营人员的使用的低代码平台。2.低代
  • 深入解析 Svelte：下一代前端框架的革命 赵大仁 技术前端大语言模型开发语言人工智能前端前端框架
    深入解析Svelte：下一代前端框架的革命1.Svelte简介Svelte是一款前端框架，与React、Vue等传统框架不同，它采用编译时（Compile-time）方式来优化前端应用。它不像React或Vue依赖虚拟DOM，而是在编译阶段直接生成高效的原生JavaScript代码，使其拥有更小的包体积、更快的渲染速度和更低的运行时开销。1.1Svelte的核心特点特性说明无虚拟DOM直接生成高效
  • HTML/CSS/JavaScript 如果你需要创建一个简单的网页可以使用: 一一代码 python
    我的网页body{font-family:Arial,sans-serif;background-color:#f0f0f0;text-align:center;padding:50px;}h1{color:#333;}button{padding:10px20px;font-size:16px;background-color:#007BFF;color:white;border:none;cu
  • Svelte 开发 AI 应用：高效轻量级前端框架的 AI 集成探索 赵大仁 大语言模型前端AI人工智能前端框架
    Svelte开发AI应用：高效轻量级前端框架的AI集成探索1.引言人工智能（AI）与Web应用的结合已经成为前端开发的重要趋势。传统上，Vue、React等框架常用于AI前端交互，而Svelte作为一款编译时优化的前端框架，以轻量级、高性能、无运行时的特点，成为AI应用开发的新选择。本文将探讨如何利用Svelte构建高效的AI应用，包括AIAPI集成、前端推理优化、可视化分析、Web组件开发等关键
  • 邮箱html邮件显示不全,制作邮箱能正常显示的HTML邮件的方法 weixin_39812577 邮箱html邮件显示不全
    制作邮箱能正常显示的HTML邮件的方法发送html邮件的建议：用style写内联的CSS；少用图片；用table实现左右布局或者更复杂的布局；用background元素设置背景图片等。几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯文本格式已不能满足界面和交互的要求，这时候我们就需要发送HTML页面。由于HTML邮件不是独立的HOST
  • Vue Router 4与路由管理实战 qcidyu 文章归档动态路由代码分割路由懒加载导航守卫路由管理单页面应用VueRouter
    title:VueRouter4与路由管理实战date:2024/6/7updated:2024/6/7excerpt:这篇文章介绍了如何在Vue.js应用中利用VueRouter实现单页面应用的路由管理，包括配置路由、导航守卫的使用、路由懒加载以优化性能以及动态路由的实现方法，旨在提升用户体验和应用加载效率categories:前端开发tags:VueRouter单页面应用路由管理导航守卫路由懒
  • 我的创作纪念日 几何心凉 前端小常识前端html5
    如何处理前端表单验证，确保用户输入合法？文章目录如何处理前端表单验证，确保用户输入合法？1.引言2.前端表单验证的类型2.1HTML5原生验证**示例****优点****缺点**2.2JavaScript基础验证**示例****优点****缺点**2.3正则表达式（Regex）验证**常见正则表达式****示例**2.4使用第三方库（如Yup、Validator.js）**使用`Yup`进行表单验
  • 深入探索RPFramework的架构与应用 华笠医生
    本文还有配套的精品资源，点击获取简介：RPFramework是一个在GitHub上托管的项目，提供了Web开发或软件工程中用于特定任务的框架。该项目的更新包括新功能的添加、性能优化和问题修复，保持与技术趋势同步。站点以HTML为基础结构，同时包含CSS和JavaScript来定义样式和交互。源代码文件中隐藏着框架的目录结构、配置、核心功能、样式设计和交互逻辑，通过对这些关键组成部分的研究，可以更好
  • Vue 3 路由管理实战：构建多页面博客导航 - 掌握 Vue Router 实现 SPA 页面跳转 Neo Evolution 前端学习vue.js前端javascript前端框架ecmascript
    引言欢迎再次回到Vue3+现代前端工程化系列技术博客！在昨天的第三篇博客中，我们深入探索了Vue3响应式系统的进阶应用，通过构建简易购物车应用，熟练掌握了watch监听器和computed计算属性的运用。今天，我们将开启Vue3工程化实践的全新篇章，聚焦于构建单页应用(SPA)的核心技术：路由管理。在现代前端开发中，单页应用(SPA)已经成为主流。与传统的多页应用不同，SPA通过动态更新组件内容来
  • AI驱动的前端技术选型：告别选择困难症，拥抱高效开发时代 liangruimi 人工智能前端
    在快节奏的互联网时代，选择合适的前端技术栈对于项目的成功至关重要。然而，面对层出不穷的新技术和框架，前端开发者常常面临着技术选型难题，例如技术更新迭代快，选择困难，以及传统方法效率低下等问题。因此，利用AI代码生成器等AI工具辅助前端技术选型，已成为提升效率、降低风险的关键。本文将探讨如何借助AI的力量，轻松应对前端技术选型挑战，高效完成项目开发。AI驱动的前端技术选型：现状与挑战目前，前端技术栈
  • Python 与Java 开发人形机器人远程控制APP Geeker-2025 pythonjava
    开发一款人行开发机器人远程控制App是一个复杂且高度技术性的项目。该项目涉及多个技术领域，包括前端开发、后端开发、物联网（IoT）通信、实时数据处理、数据加密、安全性保障等。使用Python和Java联合开发可以充分利用每种语言的优势，构建一个高性能、可扩展且功能丰富的应用。以下是一个高层次的设计概述，涵盖主要的技术栈和功能模块，并提供使用Python和Java联合开发的示例。##技术栈概述###
  • Java爬虫——jsoup xxxmine java爬虫开发语言
    JSoup是一个用于处理HTML的Java库，它提供了一个非常方便类似于使用DOM，CSS和jquery的方法的API来提取和操作数据。Jsoup能做什么？从URL、文件或字符串中抓取和解析HTML（爬虫）使用DOM遍历或CSS选择器查找和提取数据操作HTML元素、属性和文本根据安全列表清理用户提交的内容，以防止XSS攻击输出整洁的网页Jsoup相关概念Document：文档对象。每份HTML页面
  • 基于SSM框架的校园订餐小程序设计与实现 源码空间站11 课程设计点餐系统微信小程序小程序开发毕业设计
    内容概要：该文章介绍了使用SSM（Spring+SpringMVC+MyBatis）框架及Java开发语言和MySQL数据库，设计并实现了一款名为“校园订餐”的小程序。文中从系统需求出发，阐述了系统背景意义与国内外研究现状发展趋势，明确了需求并分析了系统可行性。随后详细讲解了系统的功能模块、数据库设计方案、微信小程序前端和后台管理的具体实现过程，包括登录注册、餐厅信息管理、美食信息管理和订单管理等
  • 【新手入门】SQL注入之防御代码的绕过、数据库数据读取 见青.. sql数据库web安全前端
    一、前端防御代码绕过有些输入数据的地方（如登陆页面），当输入的数据不太合适时，直接就有提示，并且不符合要求的话，就不能点击提交按钮，即不能和后台进行交互，像这种行为就都属于前端代码的限制。绕过前端代码最好的方式就是先输入一个符合格式要求的数据，然后抓包--处理--放包。所以前端代码限制的绕过很简单,但碰到js加密和混淆技术（代码语句顺序打乱）时，前端代码绕过也是比较有难度的。二、后端防御代码绕过<
  • 【Java 后端】Restful API 接口 非 白 Java网络javarestful开发语言
    RestfulAPI接口REST：RepresentationalStateTransfer，表现层（前端的视图页面和后端的控制层）资源状态转移。一种软件架构的风格（格式）RESTful是目前最流行的互联网软件架构，如果一个架构符合REST原则，则称它为RESTful架构。REST风格提倡URL地址使用统一的风格设计，从前到后各个单词使用斜杠分开，不使用问号键值对方式携带请求参数，而是将要发送给服
  • gradio创建openai前端对接deepseek等模型流式输出markdown格式文本 内卷焦虑人士 前端deepseekopenaigradiomarkdown
    环境gradio==3.50.2openai==1.63.1代码importopenaiimportgradioasgr#导入gradio的包api_key="sk-**a8"api_base="https://api.deepseek.com/v1"importgradioasgrimportopenaifromtypingimportList,Any,Iteratorclient=openai
  • 前端进阶题（面试必看） Caleb-niu 面试指南前端面试职场和发展
    网络&安全❓输入URL地址后发生了什么事情？DNS域名解析，从URL地址中获取域名地址，通过DNS服务器解析为IP地址。先本地缓存（浏览器、操作系统）》ISP网络服务商》根服务器（根域、一级域、二级域、三级域）建立TCP连接，HTTP协议是基于TCP协议的，浏览器与服务端通过三次握手建立TCP连接（如果是HTTPS则是四次握手，多了因此SSL握手）。下载数据，向服务端发送请求报文（header+b
  • 前端开发常用的加密算法 爱分享的程序员 前端前端
    以下是前端开发中常用的加密方式及其适用场景的详细说明：一、核心加密方案加密类型常用算法特点适用场景对称加密AES、DES、3DES加密解密使用相同密钥，速度快本地存储加密、HTTPBody加密非对称加密RSA、ECC公钥加密私钥解密，安全性高传输敏感数据、数字签名哈希算法SHA-256、MD5（不推荐）单向不可逆，验证数据完整性密码存储、数据校验消息认证码HMAC带密钥的哈希，防篡改API签名验证
  • 前端数据缓存的几种方式详细讲解 爱分享的程序员 前端前端缓存
    以下是前端数据缓存的完整解决方案，涵盖策略设计、技术实现和性能优化：一、缓存策略分层设计缓存策略内存缓存持久化缓存Map/WeakMap闭包变量LocalStorageSessionStorageIndexedDBServiceWorker二、核心场景实现方案1.高频请求数据缓存（内存缓存）//使用Map实现LRU缓存classMemoryCache{constructor(maxSize=100
  • CSS 超出部分显示省略号 36氪（36Kr）广播 程序员css前端
    text-overflow:ellipsis;}你问我为何时常沉默，有的人无话可说，有的话无人可说.你问我为何时常沉默，有的人无话可说，有的话无人可说.效果图：关键点：white-space:nowrap;overflow:hidden;text-overflow:ellipsis;多行超出显示省略号=================================================
  • tomcat基础与部署发布 暗黑小菠萝 Tomcat java web
    从51cto搬家了，以后会更新在这里方便自己查看。 做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。 Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。 一、Tomcat安装     安装方式：①运行.exe安装包      &n
  • 网站架构发展的过程 ayaoxinchao 数据库应用服务器网站架构
    1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上 2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器 3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构 4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何
  • [信息与安全]数据库的备份问题 comsci 数据库
          如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题   如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢?    是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢?  &n
  • 使用maven tomcat plugin插件debug关联源代码 商人shang mavendebug查看源码tomcat-plugin
    *首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。 *配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的
  • 大访问量高并发 oloz 大访问量高并发
    大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简 要列出几点解决方案： 01、优化你的代码和查询语句，合理使用索引 02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中 03、采用服务器集群、负载均衡分担大访问量高并发压力 04、数据读写分离 05、合理选用框架，合理架构(推荐分布式架构)。
  • cache 服务器 小猪猪08 cache
    Cache   即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。 　　1.Cache   是怎么样工作的? 　　Cache   是分配在服务器上
  • mysql存储过程 香水浓 mysql
    Description:插入大量测试数据 use xmpl; drop procedure if exists mockup_test_data_sp; create procedure mockup_test_data_sp( in number_of_records int ) begin declare cnt int; declare name varch
  • CSS的class、id、css文件名的常用命名规则 agevs JavaScriptUI框架Ajaxcss
      CSS的class、id、css文件名的常用命名规则     (一)常用的CSS命名规则 　　头：header 　　内容：content/container 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right
  • 全局数据源 AILIKES javatomcatmysqljdbcJNDI
    实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。 1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l
  • MYSQL的随机查询的实现方法 baalwolf mysql
    MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，
  • JAVA的getBytes()方法 bijian1013 javaeclipseunixOS
        在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！      String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： byte[] b_gbk = "
  • AngularJS中操作Cookies bijian1013 JavaScriptAngularJSCookies
            如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。         幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎
  • [Maven学习笔记五]Maven聚合和继承特性 bit1129 maven
    Maven聚合   在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块： 1. 模型和数据持久化层user-core, 2. 业务逻辑层user-service以 3. web展现层user-web， user-service依赖于user-core user-web依赖于user-core和use
  • 【JVM七】JVM知识点总结 bit1129 jvm
      1. JVM运行模式 1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化 1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler
  • linux下查看nginx、apache、mysql、php的编译参数 ronin47
    在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。 1、nginx [root@361way ~]# /App/nginx/sbin/nginx -V nginx: nginx version: nginx/
  • unity中运用Resources.Load的方法？ brotherlamp unity视频unity资料unity自学unityunity教程
    问：unity中运用Resources.Load的方法？ 答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置 1、unity实时替换的物体即是依据环境条件
  • 线段树-入门 bylijinnan java算法线段树
    /** * 线段树入门 * 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次 * 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i] * * 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18 * @author lijinna
  • 全选与反选 chicony 全选
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全选与反选</title>
  • vim一些简单记录 chenchao051 vim
    mac在/usr/share/vim/vimrc linux在/etc/vimrc   1、问：后退键不能删除数据，不能往后退怎么办？       答：在vimrc中加入set backspace=2   2、问：如何控制tab键的缩进？       答：在vimrc中加入set tabstop=4 (任何
  • Sublime Text 快捷键 daizj 快捷键sublime
    [size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：
  • php 引用(&)详解 dcj3sjt126com PHP
    在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址 变量的引用 PHP 的引用允许你用两个变量来指向同一个内容  复制代码代码如下: <?  $a="ABC";  $b =&$a;  echo
  • SVN中trunk,branches,tags用法详解 dcj3sjt126com SVN
    Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。
  • 对软件设计的思考 e200702084 设计模式数据结构算法ssh活动
    软件设计的宏观与微观    软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传
  • 同步、异步、阻塞、非阻塞 geeksun 非阻塞
    同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。   同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。 场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。   异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。 实现：
  • Reverse SSH Tunnel 反向打洞實錄 hongtoushizi ssh
    實際的操作步驟： # 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port ssh -NfR 12345:localhost:22 fred@myhost.com # 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器 ssh localhost -p 1
  • Hibernate中的缓存 Josh_Persistence 一级缓存Hiberante缓存查询缓存二级缓存
    Hibernate中的缓存   一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。 Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存
  • 对象关系行为模式之延迟加载 home198979 PHP架构延迟加载
    形象化设计模式实战     HELLO!架构   一、概念 Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。 延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。     二、实现延迟加载 实现Lazy Load主要有四种方法：延迟初始化、虚
  • xml 验证 pengfeicao521 xmlxml解析
    有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错 public static void testPattern() { // 含有非法字符的串 String str =       "Jamey&#52828;&#01;&#02;&#209;&#1282
  • div设置半透明效果 spjich css半透明
    为div设置如下样式：   div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}        说明： 1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci
  • 你真的了解单例模式么？ w574240966 java单例设计模式jvm
        单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。   一，单例模式的5中写法。（回字的四种写法，哈哈。）     1，懒汉式           （1）线程不安全的懒汉式 public cla
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他