小谢sd
小谢sd

【CSS】常见 CSS 布局

1. 响应式布局

DOCTYPE html>
<html>

<head>
    <title>简单的响应式布局title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 导航样式 */
        nav {
            background-color: #f2f2f2;
            padding: 10px;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin-right: 10px;
        }

        nav ul li a:hover {
            background-color: #ccc;
        }

        nav ul li a {
            color: #333;
            text-decoration: none;
            padding: 5px;
        }

        /* 主要内容样式 */
        main {
            padding: 20px;
        }

        section {
            margin-bottom: 20px;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
        }
    style>
head>

<body>
    <header>
        <h1>响应式布局示例h1>
    header>
    <nav>
        <ul>
            <li><a href="#">首页a>li>
            <li><a href="#">关于a>li>
            <li><a href="#">服务a>li>
            <li><a href="#">联系我们a>li>
        ul>
    nav>
    <main>
        <section>
            <h2>欢迎来到我们的网站！h2>
            <p>这是一个简单的响应式布局示例。p>
        section>
    main>
    <footer>
        <p>版权所有 © 2023p>
    footer>
    <script>
    script>
body>

html>

【CSS】常见 CSS 布局_第1张图片

2. 块级布局

DOCTYPE html>
<html>

<head>
    <title>简单的块级布局title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 主要内容样式 */
        main {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        section {
            flex-basis: 48%;
            background-color: #f2f2f2;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .left-section {
            /* order 规定 section 出现的先后顺序 */
            order: 1;
        }

        .right-section {
            order: 2;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    style>
head>

<body>
    <header>
        <h1>块级布局示例h1>
    header>
    <main>
        <section class="left-section">
            <h2>左侧区域h2>
            <p>这是左侧区域的内容。p>
        section>
        <section class="right-section">
            <h2>右侧区域h2>
            <p>这是右侧区域的内容。p>
        section>
    main>
    <footer>
        <p>版权所有 © 2023p>
    footer>
    <script src="main.js">script>
body>

html>

【CSS】常见 CSS 布局_第2张图片

3. 流式布局

DOCTYPE html>
<html>

<head>
    <title>简单的流式布局title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 内容区域样式 */
        #content {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }

        .box {
            flex-basis: 300px;
            background-color: #f2f2f2;
            padding: 20px;
            margin: 10px;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    style>
head>

<body>
    <header>
        <h1>流式布局示例h1>
    header>
    <div id="content">
        <div class="box">
            <h2>盒子 1h2>
            <p>这是盒子 1 的内容。p>
        div>
        <div class="box">
            <h2>盒子 2h2>
            <p>这是盒子 2 的内容。p>
        div>
        <div class="box">
            <h2>盒子 3h2>
            <p>这是盒子 3 的内容。p>
        div>
        <div class="box">
            <h2>盒子 4h2>
            <p>这是盒子 4 的内容。p>
        div>
    div>
    <footer>
        <p>版权所有 © 2023p>
    footer>
    <script src="main.js">script>
body>

html>

【CSS】常见 CSS 布局_第3张图片

4. 定位布局

DOCTYPE html>
<html>

<head>
    <title>简单的定位布局title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 容器样式 */
        #container {
            position: relative;
            width: 500px;
            height: 300px;
            background-color: #f2f2f2;
        }

        /* 盒子样式 */
        .box {
            position: absolute;
            padding: 20px;
            background-color: #333;
            color: #fff;
        }

        #box1 {
            top: 20px;
            left: 20px;
        }

        #box2 {
            bottom: 20px;
            right: 20px;
        }

        #box3 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    style>
head>

<body>
    <div id="container">
        <div
            id="box1"
            class="box"
        >盒子 1div>
        <div
            id="box2"
            class="box"
        >盒子 2div>
        <div
            id="box3"
            class="box"
        >盒子 3div>
    div>
    <script src="main.js">script>
body>

html>

【CSS】常见 CSS 布局_第4张图片

5. 多列布局

DOCTYPE html>
<html>

<head>
    <title>简单的多列布局title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 容器样式 */
        #container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        /* 列样式 */
        .column {
            flex-basis: 30%;
            background-color: #f2f2f2;
            padding: 20px;
            margin: 10px;
        }
    style>
head>

<body>
    <div id="container">
        <div class="column">
            <h2>列 1h2>
            <p>这是列 1 的内容。p>
        div>
        <div class="column">
            <h2>列 2h2>
            <p>这是列 2 的内容。p>
        div>
        <div class="column">
            <h2>列 3h2>
            <p>这是列 3 的内容。p>
        div>
    div>
    <script src="main.js">script>
body>

html>

【CSS】常见 CSS 布局_第5张图片

6. 网格布局

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Documenttitle>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 1700px;
            height: 500px;
            border: 10px solid gray;
            margin: 100px auto;
            display: grid;
            /* 13 列，每列列宽为 100px */
            grid-template-columns: repeat(13, 100px);
            /* 4 行，每行高度为 100px */
            grid-template-rows: repeat(4, 100px);
            /* 单元格间距 垂直 水平 */
            grid-gap: 10px 10px;
            /* 整体网格居中 */
            place-content: center center;
        }

        .box>div {
            background: pink;
        }

        .box1 {
            /* 横向网格线起始位置 */
            grid-row: 1/3;
            /* 纵向网格线起始位置 */
            grid-column: 12/14;
        }

        .box2 {
            grid-row: 1/2;
            grid-column: 10/12;
        }
    style>
head>

<body>
    <div class="box">
        <div class="box1">1div>
        <div class="box2">2div>
        <div>3div>
        <div>4div>
        <div>5div>
        <div>6div>
        <div>7div>
        <div>8div>
        <div>9div>
        <div>10div>
        <div>11div>
        <div>12div>
        <div>13div>
        <div>14div>
        <div>15div>
        <div>16div>
        <div>17div>
        <div>18div>
        <div>19div>
        <div>20div>
        <div>21div>
        <div>22div>
        <div>23div>
        <div>24div>
        <div>25div>
        <div>26div>
        <div>27div>
        <div>28div>
        <div>29div>
        <div>30div>
        <div>31div>
        <div>32div>
        <div>33div>
        <div>34div>
        <div>35div>
        <div>36div>
        <div>37div>
        <div>38div>
        <div>39div>
        <div>40div>
        <div>41div>
        <div>42div>
        <div>43div>
        <div>44div>
        <div>45div>
        <div>46div>
        <div>47div>
        <div>48div>
        
        
    div>
body>

html>

【CSS】常见 CSS 布局_第6张图片

7. 浮动布局

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Documenttitle>
    <style>
        .nav {
            width: 100%;
            overflow: hidden;
        }

        .nav li {
            float: left;
            margin-right: 15px;
        }

        .nav li a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: #000;
        }
    style>
head>

<body>
    <ul class="nav">
        <li><a href="#">首页a>li>
        <li><a href="#">关于我们a>li>
        <li><a href="#">服务a>li>
        <li><a href="#">联系我们a>li>
    ul>
body>

html>

【CSS】常见 CSS 布局_第7张图片

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

  • 前端文件预览，PDF，word，TXT LJ小番茄 随便写点pdf
    先说一下需求：这里要做的就是从后端返回的URL下载地址，然后前端去渲染出来刚开始看了其他的一些博主的文章，都是不怎么适用于我，我自己找了几个新的第三方库vue-office/pdf官网：vue-office简介|vue-office这里支持docx，xlsx，PDF文件格式mammoth.js文档：mammoth-npmPDF预览我用的是vue-office/pdf这个库//引入该库importV
  • 前端基础知识点 der.. htmlcssjavascript
    本人现在是一名准大二计算机系的学生，准备开始写博客，一方面是想在csdn留下自己的足迹，另一方面是想通过写博客来提高自己的能力。以后会分享一些学习心得，程序代码，以及我的一些学习计划，还有每天学习后的知识总结。如果你和我一样，不甘于平凡，那么，就请给我点一个关注，我们互相交流，共同进步。--------------------------------------------------------
  • linux多个sh 同时执行命令,sh, 批量执行Linux命令 一颗橙子君 linux多个sh同时执行命令
    step1:创建一个sh批处理命令文件#vim/etc/batch_ssh/install_redis.shstep2：给当前用户，能够执行sh脚本权限#chmodinstall_redis.sh777step3:编写要批量执行的命令，read表示等待前端用户输入，sleep表示等待时间单位为秒。echo'\nbegintoinstall01plugin\n';yuminstallcpp-y;ec
  • uniapp 小程序样式兼容 zpjing~.~ uni-app小程序前端
    一、遇到的问题使用uniapp一起开发h5和小程序版本，在h5上样式是正常的，但是小程序里样式未生效二、遇到的情况1、*标签经过小程序编译后会变成label标签，css中span样式的位置label标签*标签位置添加class，class在h5和小程序中都兼容2、ulli*标签标签经过小程序编译后会变成view标签*标签位置添加class，class在h5和小程序中都兼容3、引用子组件div中几个
  • hr标签和注释的总结 Rashore web零基础学习htmlcsshtml5
    hr标签的定义与使用说明定义以及使用说明标签定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。元素被用来分隔HTML页面中的内容（或者定义一个变化）。实例hr标签的使用HTMLHTML是用于描述web页面的一种语言。CSSCSS定义如何显示HTML元素。html中注释的使用定义注释标签用来在源文档中插入注释。注释不会在浏览器中显示。使用范围我们可使用注释对您的代码进行解释，这样做
  • 前端进阶：JavaScript实现优雅遮罩层下的表单验证技巧 VaporGas 前端前端javascripthtmlhtml5ecmascript开发语言
    表单验证的高级特性本次介绍的重点如下：动态改变样式属性className属性的用法遮罩层特效的制作动态输入的提示特性实现当文本框获得焦点时改变背景颜色，失去焦点时恢复白色使用元素的style属性访问样式规则object.style.property;例如:访问字体的颜色color使用obj.style.color访问字体的大小属性使用obj.style.fontSizefont-size变换成fo
  • jQuery选择器 VaporGas 前端jquery前端javascript学习
    jQuery选择器jQuery选择器类似于CSS选择器，用来选取网页中的元素$("h3").css("background","#09F");代码分析：获取并设置网页中所有元素的背景“h3”为选择器语法，必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法jQuery选择器分类jQuery选择器功能强大，种类也很多，分类如下：类CSS选择器基本选择器层次
  • 前端工程化——脚手架及自动化构建 Jelly-JK 前端工程化javascriptnode.jshtml
    定义一切以提高效率、降低成本、质量保证为目的的手段，都属于工程化前端工程化主要解决的问题传统语言或语法的弊端无法使用模块化/组件化重复性的机械工作代码风格统一、质量保证依赖后端服务接口的保证整体依赖后端项目工程化的表现体现在项目的整个流程：创建项目创建项目结构创建特定类型文件编码格式化校验校验代码风格编译/构建/打包预览/测试WebServer/MockLiveReloading/HMRSourc
  • Java架构师学习路线 网络全息测量 心得体会
    (1)第一步：研究spring,hibernate。通过研究jeecms开源框架。也同时学习css,html,javascript,jquery.以前都学习过，不过没有系统学习过，现在必须系统学习。同时看cms相关的论文。然后，改造jeecms能够改为自己的一个开源框架，以后开发cms系统都用我自己开发的框架，作为第一阶段的成果。(2)第二步：学习开源工作流引擎Activiti5，jbpm4.4以
  • 使用Electron读取本地文件 ch_s_t 前端开发electronjavascript前端
    Electron原来叫AtomShell,可以用Web技术搭建桌面端程序，以Electron为基础，可以用HTML，CSS和javascriptpt实现程序逻辑和用户桌面，Electron程序一般有主进程和渲染进程，主进程是启动程序的Node脚本，提供对原生的node模块访问。渲染进程是由chromium管理的Web界面。以下的内容介绍从零开始搭建一个读取本地文件的Electron项目。一运行简单
  • [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试 lgc0208 服务器网络socket
    在使用Tensorboard的过程中，遇到报错[WinError10013]以一种访问权限不允许的方式做了一个访问套接字的尝试可能原因：当前端口被占用。解决方案：以6006端口为例，首先打开命令行，输入命令：netstat-aon|findstr"6006"查找当前正在占用6006端口的进程PID。查询到对应进程PID后，打开任务管理器，点击详细信息，找到PID对应的进程关闭即可。
  • 块级标签不自动换行的解决方式 搜捕鸟了 HTML&CSS前端csshtml
    关键点：任何固定了长度的块级元素里，长单词和长数字不自动换行，中文字符会自动换行效果如下：https://codepen.io/xiao_5/pen/oNQZOpZ解决方案：给块级元素添加word-wrap:break-word;或word-break:break-all;样式。扩展知识点：CSS属性word-break，用于控制文本在换行时的断字规则，参考链接CSS属性word-wrap，允许长
  • mysql是后端还是前端_MySQL数据库之前端和后端的系统优化 草莓西瓜大桃子 mysql是后端还是前端
    本文中介绍的系统优化，主要针对前端和后台这两方面(后台方面主要对SQL语句和数据存储进行了优化)，下文中我们将介绍一些优化技巧和经验。技巧：1.如何查出效率低的语句？在MySQL下，在启动参数中设置--log-slow-queries=[文件名]，就可以在指定的日志文件中记录执行时间超过long_query_time(缺省为10秒)的SQL语句。你也可以在启动配置文件中修改longquery的时间
  • css 个人喜欢的样式 速查笔记 waterHBO css笔记前端
    起因，目的:记录自己喜欢的，觉得比较好看的css.下次用的时候，直接复制，很方便。1.个人html模板，导入常用的link设置英语字体:Noto导入默认的css使用网络icon图标导入Bootstrapcss框架html-->2.常用css模板todo,以后再增加。*{font-family:"NotoSerif",system-ui;font-optical-sizing:auto;}Noto字
  • Vue解說 白总Server vue.js前端javascript数据库架构网络协议ssl网络
    Vue.js（通常简称为Vue）是一个开源的JavaScript框架，用于构建用户界面和单页应用程序（SPA）。它由前谷歌工程师尤雨溪（EvanYou）创建，并首次发布于2014年。Vue被设计为易于上手、灵活且高效，它允许开发者通过组件化的方式构建复杂的前端应用。Vue.js的关键特点：渐进式框架：Vue可以从简单的界面元素开始，逐步扩展到复杂的单页应用。响应式数据绑定：Vue使用双向数据绑定，
  • 程式语言区分 白总Server htmlpythonjavac++开发语言
    程序语言有很多种，每种都有其特定的用途和特点。以下是一些广泛使用的编程语言：1.Python：易于学习，广泛用于数据科学、机器学习、网络开发、自动化等领域。2.Java：广泛应用于企业级应用、安卓开发、大型系统开发等。3.C：一种基础语言，广泛用于系统编程、嵌入式开发、操作系统等领域。4.C++：C语言的扩展，支持面向对象编程，用于游戏开发、高性能应用等。5.JavaScript：主要用于网页前端
  • div和textarea中英文和数字不换行解决方案 k_t_feng 网页前端
    设置div的css：word-wrap:break-word;word-break:break-all;解释：word-wrap:break-word;强制换行以单词为分解word-break:break-all;强制换行以最后一个单词，会强制拆分单词
  • html animation 属性,css3学习--css3动画详解一(animation属性） 蜗牛老湿 htmlanimation属性
    ***介绍的属性并不完全，写的都是我认为容易混淆的难点属性，所以属性会在最后综合案例展示~Keyframes介绍：Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframeschangecolor{0%{background:red;}100%{b
  • css3动画延迟运行 animation-delay 努力，加油，奋斗 笔记
    1.语法animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;2.说明name指定要绑定到选择器的关键帧的名称duration动画指定需要多少秒或毫秒完成timing-function设置动画将如何完成一个周期delay设置动画在启动前的延迟间隔。iteration-count定义
  • 前端架构师招聘 qq_42801150 前端架构金融
    前端架构师（薪酬50-80W）所属部门：医美云事业部级别：T4岗位职责：1.负责事业部前端技术选型、关键技术决策；2.负责为技术VP前端相关技术决策提供建议和支持；3.负责组织实施内部UI库、内部基础研发工具和研发依赖的开发和实施；4.负责制订公司前端研发规范的制订和实施审查；5.负责组织定期内部前端业务培训，协助提升内部员工前端业务技能。任职要求：1.5年以上工作经验，大型互联网公司前端团队技术
  • 大前端面试题集锦——HTML篇 Midshar.top 前端html
    HTML篇1.什么是DOCTYPE,有何作用?DOCTYPE是用来声明HTML文档应当使用哪种版本来进行解析如果不使用DOCTYPE告知浏览器应当使用哪种版本解析文档,那么浏览器将会开启最大兼容模式来解析文档,一般称为怪异模式.在怪异模式下,可能会产生一些预想不到的bug2.说说对HTML语义化的理解?HTML的语义化指的是在合适的地方使用合适的标签,让人能够根据标签进而大致知晓标签内容语义化使得
  • 高频面试题：ReactNative前端面试频率较高的面试题和答案（十六） 夲奋亻Jay 高频面试题react跨端reactnative前端面试
    ReactNative是一个由Facebook开发的框架，它允许使用React来开发原生移动应用。以下是一些在前端面试中可能会问到的关于ReactNative的高频面试题及答案：ReactNative是什么？答案：ReactNative是一个基于React构建的框架，允许使用JavaScript和React的编程方式来开发原生移动应用。ReactNative与React有什么不同？答案：React
  • CSS接入的四种方式 本来无一物_f1f2
    1.内联内联式是将CSS样式集中写在网页的标签对的标签对中。格式如下：...此处写CSS样式缺点是对于一个包含很多网页的网站，在每个网页中使用内联式，进行修改样式时非常麻烦。单一网页可以考虑使用内联式。2.内嵌具体表现形式3.外联也是将一个.css文件引入到HTML文件中，在网页的标签对中使用标记来引入外部样式表文件，使用语法如下：4.链接式在css文件中@importurl(./b.css);总
  • 前端架构师的职责 acigt0531 前端gitViewUI
    前端架构师的职责没有文档的代码=放弃治疗作为前端架构师,首先要解决的问题就是让日益膨胀的代码可控,因此你需要梳理代码,建立架构,组织文档,管理架构的更新和维护,评审技术方案对架构的影响,核心模块的方案设计,重点项目的方案设计,CodeReview等.架构师和资深开发在工作职责上有着明确的界限,在一个没有架构师的团队,每一个资深开发或多或少都承担了一部分架构的工作,但都是破碎的,不成体系而且不统一,
  • 前端技能树，面试复习第 54 天—— 手写代码：情景题 编程轨迹_ 前端面试复习笔记前端面试题手写题真题场景题
    ⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、区块链、Web3、答疑解惑、面试辅导以及职业发展。本文已收录至前端面试题库专栏：《前端面试复习笔记》（点击订阅）。1.循环打印红黄绿下面来看一道比较典型的问题，通过这个问题来对比几种异步编程方法：红灯3s亮一次，绿灯1s亮一次，黄灯2s亮一次；如何让三个灯不断交替重复亮灯？
  • CSS前端经典面试题及解析——小白入门必备 2301_82243710 程序员前端css
    12.如何实现一个使用非标准字体的网页设计？使用@font-face并为不同的font-weight定义font-family。13.解释浏览器如何确定哪些元素与CSS选择器匹配。这部分与上面关于编写高效的CSS有关。浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从DOM中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。例如，对于形如
  • 前端基础面试题·第三篇——JavaScript（其四） DT—— 前端面试javascript前端开发语言
    highlight:atom-one-dark1.JSON.stringifyJSON.stringify()方法将一个JavaScript值（对象或者数组）转换为一个JSON字符串，如果指定了一个replacer函数，则可以替换值。语法：JSON.stringify(value,replacer,space)参数value：要转换的值。replacer：替换值，可以是一个函数或者数组。（这个参数
  • 前端基础面试题·第二篇——CSS（其一） DT—— 前端面试前端css
    1.伪类与伪元素伪类，是用来描述元素的一个状态，比如第一个元素，元素被鼠标覆盖等等状态，写法为：伪元素，用于设置一个元素的特殊状态的一部分，写法为::伪元素于伪类：伪元素：::before::after::first-line伪类：:hover:active:focus:nth-child(n)2.单位px:像素，绝对单位em:相对单位，相对于父元素字体大小rem:相对单位，相对于根元素html的
  • 前端基础面试题·第二篇——CSS（其二） DT—— 前端面试前端css
    1.CSS选择器的优先性：！important-强制生效样式-有即生效行内样式-有即生效权重：1000id选择器权重：100类选择器，伪类，属性选择器权重：10元素选择器，伪元素选择器，权重：1通配符，兄弟，后代，子代，权重：02.CSS继承性1.继承属性：1.字体系列属性font,font-family,font-weight,font-size,font-style,font-variant等
  • AJAX实时表单验证系统 三年九班蓝同学
    本文还有配套的精品资源，点击获取简介：在网页开发中，"ajax验证表单"是一项关键任务，确保数据符合格式和规则，提升数据质量和用户体验。本应用通过使用JavaScript和XMLHttpRequest对象实现后台验证，无需页面刷新。它包括前端验证、事件处理、Ajax调用、服务器端处理、响应处理、用户体验和安全性等关键步骤，以jQuery库简化开发流程，创建高效、安全的表单验证系统。1.表单验证的重
  • 插入表主键冲突做更新 a-john
    有以下场景： 用户下了一个订单，订单内的内容较多，且来自多表，首次下单的时候，内容可能会不全（部分内容不是必须，出现有些表根本就没有没有该订单的值）。在以后更改订单时，有些内容会更改，有些内容会新增。 问题： 如果在sql语句中执行update操作，在没有数据的表中会出错。如果在逻辑代码中先做查询，查询结果有做更新，没有做插入，这样会将代码复杂化。 解决： mysql中提供了一个sql语
  • Android xml资源文件中@、@android:type、@*、？、@+含义和区别 Cb123456 @+@?@*
    一.@代表引用资源 1.引用自定义资源。格式：@[package:]type/name android：text="@string/hello"   2.引用系统资源。格式：@android:type/name     android:textColor="@android:color/opaque_red"
  • 数据结构的基本介绍 天子之骄 数据结构散列表树、图线性结构价格标签
    数据结构的基本介绍 数据结构就是数据的组织形式，用一种提前设计好的框架去存取数据，以便更方便，高效的对数据进行增删查改。正确选择合适的数据结构，对软件程序的高效执行的影响作用不亚于算法的设计。此外，在计算机系统中数据结构的作用也是非同小可。例如常常在编程语言中听到的栈，堆等，就是经典的数据结构。   经典的数据结构大致如下：   一：线性数据结构 (1)：列表 a
  • 通过二维码开放平台的API快速生成二维码 一炮送你回车库 api
     现在很多网站都有通过扫二维码用手机连接的功能，联图网(http://www.liantu.com/pingtai/)的二维码开放平台开放了一个生成二维码图片的Api,挺方便使用的。闲着无聊，写了个前台快速生成二维码的方法。        html代码如下:(二维码将生成在这div下) ? 1  &nbs
  • ImageIO读取一张图片改变大小 3213213333332132 javaIOimageBufferedImage
    package com.demo; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * @Description 读取一张图片改变大小 * @author FuJianyon
  • myeclipse集成svn（一针见血） 7454103 eclipseSVNMyEclipse
                                     &n
  • 装箱与拆箱----autoboxing和unboxing darkranger J2SE
    4.2　自动装箱和拆箱 基本数据(Primitive)类型的自动装箱(autoboxing)、拆箱(unboxing)是自J2SE 5.0开始提供的功能。虽然为您打包基本数据类型提供了方便，但提供方便的同时表示隐藏了细节，建议在能够区分基本数据类型与对象的差别时再使用。 4.2.1　autoboxing和unboxing 在Java中，所有要处理的东西几乎都是对象(Object)
  • ajax传统的方式制作ajax aijuans Ajax
    //这是前台的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+
  • 只用jre的eclipse是怎么编译java源文件的？ avords javaeclipsejdktomcat
    eclipse只需要jre就可以运行开发java程序了，也能自动 编译java源代码，但是jre不是java的运行环境么，难道jre中也带有编译工具？ 还是eclipse自己实现的？谁能给解释一下呢问题补充：假设系统中没有安装jdk or jre，只在eclipse的目录中有一个jre，那么eclipse会采用该jre，问题是eclipse照样可以编译java源文件，为什么呢？ &nb
  • 前端模块化 bee1314 模块化
    背景： 前端JavaScript模块化，其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来，还处于刀耕火种的野蛮生长阶段。   JavaScript一直缺乏有效的包管理机制，造成了大量的全局变量，大量的方法冲突。我们多么渴望有天能像Java（import），Python (import)，Ruby(require)那样写代码。在没有包管理机制的年代，我们是怎么避免所
  • 处理百万级以上的数据处理 bijian1013 oraclesql数据库大数据查询
    一.处理百万级以上的数据提高查询速度的方法：        1.应尽量避免在 where 子句中使用!=或<>操作符，否则将引擎放弃使用索引而进行全表扫描。         2.对查询进行优化，应尽量避免全表扫描，首先应考虑在 where 及 o
  • mac 卸载 java 1.7 或更高版本 征客丶 javaOS
    卸载 java 1.7 或更高 sudo rm -rf /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin 成功执行此命令后，还可以执行 java 与 javac 命令 sudo rm -rf /Library/PreferencePanes/JavaControlPanel.prefPane 成功执行此命令后，还可以执行 java
  • 【Spark六十一】Spark Streaming结合Flume、Kafka进行日志分析 bit1129 Stream
    第一步，Flume和Kakfa对接，Flume抓取日志，写到Kafka中 第二部，Spark Streaming读取Kafka中的数据，进行实时分析   本文首先使用Kakfa自带的消息处理（脚本）来获取消息，走通Flume和Kafka的对接 1. Flume配置 1. 下载Flume和Kafka集成的插件，下载地址：https://github.com/beyondj2ee/f
  • Erlang vs TNSDL bookjovi erlang
          TNSDL是Nokia内部用于开发电信交换软件的私有语言，是在SDL语言的基础上加以修改而成，TNSDL需翻译成C语言得以编译执行，TNSDL语言中实现了异步并行的特点，当然要完整实现异步并行还需要运行时动态库的支持，异步并行类似于Erlang的process（轻量级进程），TNSDL中则称之为hand，Erlang是基于vm(beam)开发，
  • 非常希望有一个预防疲劳的java软件, 预防过劳死和眼睛疲劳,大家一起努力搞一个 ljy325 企业应用
    　非常希望有一个预防疲劳的java软件，我看新闻和网站，国防科技大学的科学家累死了，太疲劳，老是加班，不休息，经常吃药，吃药根本就没用，根本原因是疲劳过度。我以前做java,那会公司垃圾，老想赶快学习到东西跳槽离开，搞得超负荷，不明理。深圳做软件开发经常累死人，总有不明理的人，有个软件提醒限制很好，可以挽救很多人的生命。 相关新闻： （1）IT行业成五大疾病重灾区：过劳死平均37.9岁
  • 读《研磨设计模式》-代码笔记-原型模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * Effective Java 建议使用copy constructor or copy factory来代替clone()方法： * 1.public Product copy(Product p){} * 2.publi
  • 配置管理---svn工具之权限配置 chenyu19891124 SVN
    今天花了大半天的功夫，终于弄懂svn权限配置。下面是今天收获的战绩。 安装完svn后就是在svn中建立版本库，比如我本地的是版本库路径是C:\Repositories\pepos。pepos是我的版本库。在pepos的目录结构 pepos    component    webapps 在conf里面的auth里赋予的权限配置为 [groups]
  • 浅谈程序员的数学修养 comsci 设计模式编程算法面试招聘
                                     浅谈程序员的数学修养
  • 批量执行 bulk collect与forall用法 daizj oraclesqlbulk collectforall
    BULK COLLECT 子句会批量检索结果，即一次性将结果集绑定到一个集合变量中，并从SQL引擎发送到PL/SQL引擎。通常可以在SELECT INTO、 FETCH INTO以及RETURNING INTO子句中使用BULK COLLECT。本文将逐一描述BULK COLLECT在这几种情形下的用法。     有关FORALL语句的用法请参考：批量SQL之 F
  • Linux下使用rsync最快速删除海量文件的方法 dongwei_6688 OS
    1、先安装rsync：yum install rsync 2、建立一个空的文件夹：mkdir /tmp/test 3、用rsync删除目标目录：rsync --delete-before -a -H -v --progress --stats /tmp/test/ log/这样我们要删除的log目录就会被清空了，删除的速度会非常快。rsync实际上用的是替换原理，处理数十万个文件也是秒删。
  • Yii CModel中rules验证规格 dcj3sjt126com rulesyiivalidate
    Yii cValidator主要用法分析：  yii验证rulesit 分类： Yii yii的rules验证 cValidator主要属性 attributes ,builtInValidators,enableClientValidation,message,on,safe,skipOnError  
  • 基于vagrant的redis主从实验 dcj3sjt126com vagrant
    平台: Mac 工具: Vagrant 系统: Centos6.5 实验目的: Redis主从   实现思路 制作一个基于sentos6.5, 已经安装好reids的box, 添加一个脚本配置从机, 然后作为后面主机从机的基础box   制作sentos6.5+redis的box   mkdir vagrant_redis cd vagrant_
  • Memcached(二)、Centos安装Memcached服务器 frank1234 centosmemcached
    一、安装gcc rpm和yum安装memcached服务器连接没有找到，所以我使用的是make的方式安装，由于make依赖于gcc，所以要先安装gcc 开始安装，命令如下，[color=red][b]顺序一定不能出错[/b][/color]： 建议可以先切换到root用户，不然可能会遇到权限问题：su root 输入密码...... rpm -ivh kernel-head
  • Remove Duplicates from Sorted List hcx2013 remove
    Given a sorted linked list, delete all duplicates such that each element appear only once. For example,Given 1->1->2, return 1->2.Given 1->1->2->3->3, return&
  • Spring4新特性——JSR310日期时间API的支持 jinnianshilongnian spring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • 浅谈enum与单例设计模式 247687009 java单例
    在JDK1.5之前的单例实现方式有两种(懒汉式和饿汉式并无设计上的区别故看做一种)，两者同是私有构 造器，导出静态成员变量，以便调用者访问。 第一种 package singleton; public class Singleton { //导出全局成员 public final static Singleton INSTANCE = new S
  • 使用switch条件语句需要注意的几点 openwrt cbreakswitch
    1. 当满足条件的case中没有break，程序将依次执行其后的每种条件（包括default）直到遇到break跳出 int main() { int n = 1; switch(n) { case 1: printf("--1--\n"); default: printf("defa
  • 配置Spring Mybatis JUnit测试环境的应用上下文 schnell18 springmybatisJUnit
    Spring-test模块中的应用上下文和web及spring boot的有很大差异。主要试下来差异有： 单元测试的app context不支持从外部properties文件注入属性 @Value注解不能解析带通配符的路径字符串 解决第一个问题可以配置一个PropertyPlaceholderConfigurer的bean。 第二个问题的具体实例是：    
  • Java 定时任务总结一 tuoni javaspringtimerquartztimertask
     Java定时任务总结  一.从技术上分类大概分为以下三种方式：  1.Java自带的java.util.Timer类，这个类允许你调度一个java.util.TimerTask任务;   说明：    java.util.Timer定时器，实际上是个线程，定时执行TimerTask类 &
  • 一种防止用户生成内容站点出现商业广告以及非法有害等垃圾信息的方法 yangshangchuan rank相似度计算文本相似度词袋模型余弦相似度
    本文描述了一种在ITEYE博客频道上面出现的新型的商业广告形式及其应对方法，对于其他的用户生成内容站点类型也具有同样的适用性。   最近在ITEYE博客频道上面出现了一种新型的商业广告形式，方法如下：     1、注册多个账号（一般10个以上）。     2、从多个账号中选择一个账号，发表1-2篇博文
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他