快乐江小鱼
快乐江小鱼

CSS处理页面元素浮动的几个办法

CSS处理页面元素浮动的几个办法

  1. 不使用浮动的情况下，子盒子1和2分别在盒子1中占据一行的空间。
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未使用浮动title>
    <style>
        .box1 {
            height: 200px;
            width: 600px;
            background-color: pink;
        }

        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }

        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
        }

        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
        }
    style>
head>
<body>
    <div class="box1">
        <div class="son1">div>
        <div class="son2">div>
    div>
    <div class="box2">div>
body>
html>

CSS处理页面元素浮动的几个办法_第1张图片

  1. 使用添加额外标签的方法清除浮动，子盒子1和2分别使用左浮动， 两个元素都不占用原来文档流的空间了，跑到了同一行，额外添加一个div标签，清除浮动，避免盒子2也随着向上占据盒子1的空间。
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动 - 额外标签title>
    <style>
        .box1 {
            /* height: 200px; 很多情况下，不方便给父级盒子高度，考虑到孩子高度会变化 */
            width: 600px;
            background-color: pink;
        }

        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }

        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }

        .clearfix {
            clear: both;
        }
    style>
head>
<body>
    <div class="box1">
        <div class="son1">div>
        <div class="son2">div>
        <div class="clearfix">div>
    div>
    <div class="box2">div>
body>
html>

CSS处理页面元素浮动的几个办法_第2张图片

  1. 使用双伪元素的方式清除浮动
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动 - 双伪元素title>
    <style>
        .box1 {            
            width: 600px;
            background-color: pink;
        }

        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }

        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }

        .clearfix:before, .clearfix:after {
            content: "";
            /* 触发BFC 防止外边距合并 */
            display: table;
        }

        .clearfix:after {
            clear: both;
        }
    style>
head>
<body>
    <div class="box1 clearfix">
        <div class="son1">div>
        <div class="son2">div>
    div>
    <div class="box2">div>
body>
html>
  1. 使用after伪元素的方式清除浮动
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动 - after伪元素title>
    <style>
        .box1 {            
            width: 600px;
            background-color: pink;
        }

        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }

        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }

        .clearfix:after {
            /* 内容为小点，尽量加不要空，否则低版本浏览器有空隙 */
            content: ".";
            display: block;
            height: 0;
            /* 隐藏盒子 */
            visibility: hidden;
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
    style>
head>
<body>
    <div class="box1 clearfix">
        <div class="son1">div>
        <div class="son2">div>
    div>
    <div class="box2">div>
body>
html>
  1. 使用父级元素的overflow属性清除浮动，盒子1设置overflow为hidden，触发BFC达到清除浮动的目的。
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动 - 父级overflowtitle>
    <style>
        .box1 {
            width: 600px;
            background-color: pink;
            /* 触发BFC BFC可以清除浮动 */
            overflow: hidden; 
        }

        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }

        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
    style>
head>
<body>
    <div class="box1">
        <div class="son1">div>
        <div class="son2">div>
    div>
    <div class="box2">div>
body>
html>

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

  • JS 与 CSS 的交互式开发：打造灵动的网页体验 维他奶糖61 pandas数据库前端
    在当今的网页开发领域，静态的网页早已无法满足用户日益增长的交互需求。JavaScript（JS）和层叠样式表（CSS）作为前端开发的两大支柱，它们的强强联合能够创造出令人惊叹的交互式网页效果。从简单的按钮点击变色，到复杂的动画过渡和动态页面布局变换，JS与CSS的交互式开发赋予了网页生命与活力。接下来，就让我们深入探索这一奇妙的领域。理解JS与CSS的分工与协作在开始交互式开发之前，我们需要明确J
  • Python 图片爬虫实战：从代码解析到应用技巧 维他奶糖61 python爬虫开发语言
    在数字时代，图片资源丰富多样，通过爬虫技术批量获取心仪的图片成为不少人的需求。本文将以爬取彼岸桌面壁纸网4K美女壁纸为例，深入解析Python图片爬虫代码，分享实用技巧，带你轻松掌握图片爬虫技术。一、爬虫实现思路爬虫的核心是模拟浏览器访问网页，解析页面内容，提取所需信息。本次爬虫的流程如下：构建目标网页URL列表，循环访问各页面；发送HTTP请求获取页面内容，解析HTML文档；定位图片元素，提取图
  • HTML前端的自动化构建工具使用 前端视界 前端艺匠馆前端html自动化ai
    HTML前端的自动化构建工具使用：从手工作坊到智能工厂的蜕变关键词：前端构建工具、自动化流程、Gulp、Webpack、前端工程化摘要：本文将带你从前端开发的“手工作坊时代”出发，一步步理解为什么需要自动化构建工具，揭秘核心概念和工作原理，并通过实战案例教你用Gulp和Webpack搭建高效的前端工作流。无论你是刚入门的前端新手，还是想优化现有项目的开发者，都能在这里找到从“手动劳动”到“智能生产
  • 用Pytorch训练手写签名模型并进行签名识别 TBM矩阵 #AI体系学习pytorch人工智能python
    整体思路收集至少两个人的手写签名图片，每个人至少20张使用Pytorch进行模型训练使用Flask搭建Web服务使用Html/JavaScript实现前端调用进行签名识别项目结构signature-systemdatatrainuser001001.png...user002001.png...templatesindex.htmlapp.pymodel.pytrain.py建模：model.py
  • Node.js特训专栏-实战进阶：7.Express模板引擎选型与使用 爱分享的程序员 Node.jsnode.js前端javascript
    欢迎来到Node.js实战专栏！在这里，每一行代码都是解锁高性能应用的钥匙，让我们一起开启Node.js的奇妙开发之旅！Node.js特训专栏主页专栏内容规划详情Express模板引擎选型与使用全解析：打造动态Web页面的利器在基于Express构建Web应用时，模板引擎是生成动态页面的核心组件。它允许开发者将数据与HTML结构分离，通过简单的语法将后端数据动态填充到页面中。市面上存在多种模板引擎
  • Vue2案例 尔-尔 学习笔记vue前端
    一、自定义创建项目1、基于VueCli自定义创建项目Babel/Router/Vuex/CSS/LinterVue2.xVueRouterhash模式CSS预处理LessESlint:StandardconfigLintonSaveIndedicatedconfigfiles(配置文件所在位置)Npm2、ESlint代码规范1.认识代码规范代码规范:一套写代码的约定规则。赋值符号的左右是否需要空格
  • 利用H5为小程序领域增添新活力 小程序开发2020 小程序开发宝典小程序ai
    利用H5为小程序领域增添新活力关键词：H5技术、小程序开发、跨平台架构、WebView通信、动态内容渲染、性能优化、全栈开发摘要：本文深入探讨如何通过HTML5（H5）技术提升小程序开发效率与用户体验。从技术架构对比到核心通信机制，结合具体代码案例解析H5与小程序的深度融合方案。通过WebView嵌入、JSSDK扩展、动态模板渲染等技术手段，实现跨平台代码复用、复杂交互组件开发和实时内容更新。同时
  • HTML5的新特性 码哥DFS html5前端html
    1.视频video支持MP4、ogg、webm格式src:url视频播放地址autoplay:autoplay视频就绪自动播放，谷歌浏览器需要添加muted来解决自动播放问题controls：controls向用户显示播放插件loop：loop循环播放poster:imgural加载等待的画面图片muted:muted静音播放2.音频audio支持MP3、Wav、Ogg格式autoplay:aut
  • vue中多行文本标签_css实现单行、多行文本超出显示省略号 weixin_39946996 vue中多行文本标签
    前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。单行文本省略.ellipsis-line{border:1pxsolid#f70505;padding:8px;width:400px;overflow:hidden;text-overflow:ellipsis;//文本溢出显示省略号white-space:no
  • Python爬虫实战：研究xmltodict库相关技术 ylfhpy 爬虫项目实战python爬虫开发语言xmltodict
    1.引言1.1研究背景与意义气象数据在农业生产、交通规划、灾害预警等多个领域具有重要应用价值。传统的气象数据获取方式主要依赖于气象部门发布的统计信息，存在更新不及时、数据维度有限等问题。随着互联网技术的发展，气象网站提供了丰富的实时气象数据，但这些数据通常以HTML、XML等非结构化或半结构化形式存在，难以直接利用。因此，开发高效的数据采集与解析系统具有重要的现实意义。1.2国内外研究现状网络爬虫
  • Nacos适配GaussDB超详细部署流程，通过二进制包、以及 Docker 打通用镜像包部署保姆级教程 Mr.L-OAM linux系统运维gaussdbdocker经验分享
    1部署openGauss官方文档下载https://support.huaweicloud.com/download_gaussdb/index.html社区地址安装包下载本文主要是以部署轻量级为主要教程，系统为openEuler，ip:192.168.1.151.1系统环境准备操作系统选择系统AARCH64X86-64openEuler√√CentOS7×√Docker√√1.2软硬件安装环境版
  • Python 解析 AI 在能源管理与智能电网中的应用 头发在线失联 python人工智能开发语言
    ```htmlPython解析AI在能源管理与智能电网中的应用Python解析AI在能源管理与智能电网中的应用随着全球对可持续发展的重视和能源需求的不断增长，能源管理与智能电网技术正在成为研究和实践的重要领域。在这个背景下，人工智能（AI）作为一项前沿技术，正被广泛应用于能源管理与智能电网中，以提高效率、优化资源分配并减少环境影响。本文将探讨Python如何在这一领域中发挥作用，并解析其具体应用场
  • HTML响应式Web设计 水云桐程序员 前端htmljavascript
    什么是响应式Web设计？RWD指的是响应式Web设计（ResponsiveWebDesign)RWD能够以可变尺寸传递网页RWD对于平板和移动设备是必需的创建一个响应式设计：.city{float:left;margin:5px;padding:15px;width:300px;height:300px;border:1pxsolidblack;}HTMLDemoResizethisreponsi
  • 从HTML4到HTML5+CSS3，如何快速掌握？(有老版HTML基础或经验) 唐骁虎 html前端
    从HTML4.0到HTML5+CSS3的升级是Web开发技术的一次重要迭代，两者在语法、功能、兼容性等方面存在显著差异。以下是具体异同点、学习注意事项及快速掌握方法：一、HTML5与HTML4.0的核心差异语义化标签HTML5新增：、、、、等，使代码结构更清晰，利于SEO和可维护性。HTML4.0依赖：主要用配合class/id实现布局，语义性较弱。多媒体支持HTML5原生支持：、标签，无需依赖F
  • 家谱html源码,好看的族谱树状图效果代码 Illusion.H 家谱html源码
    家谱树状代码demobywww.webym.net/*NowtheCSS*/*{margin:0;padding:0;}.treeul{padding-top:20px;position:relative;transition:all0.5s;-webkit-transition:all0.5s;-moz-transition:all0.5s;}.treeli{float:left;text-al
  • python爬取京东图片 通信小小白 python爬虫python爬虫图片
    网上的淘宝爬取图片的代码一般都已经不能实际运行了，在查看淘宝网源代码是找不到图片源地址，估计采取了反爬技术。又去京东看了下，发现很容易爬取。根据下面网址构建urlhttps://list.jd.com/list.html?cat=670%2C671%2C1105&go=0https://list.jd.com/list.html?cat=670,671,1105&page=2&sort=sort_
  • 前端面试题 被诅咒的猫 前端面试题
    前端面试题：一个200*200的div在不同分辨率屏幕上下左右居中，用css实现div{position:absolute;width:200px;height:200px;top:50%;left:50%;margin-left:-100px;height:-100px;z-index:1000;}写一个左中右布局占满屏幕，其中左右两块是固定宽度200，中间自适应宽，要求先加载中间块，请写出结构
  • H265 Intro - General Concepts fanbird2008 StreamMediaStreamMedia/HEVC/H265hevc
    http://www.f265.org/f265/static/txt/h265_companion.htmlH.265CompanionPurposeandorganizationofthisdocumentThisdocumentcontainshuman-readableinformationaboutthemorecomplexpartsoftheH.265specification.It
  • 错误处理 Bainily
    问题一1.Parseerror:syntaxerror,unexpectedendoffileinE:\phpstudy\phpStudy\WWW\wish\view\index.htmlonline63**解析错误：语法错误，第63行的E：\phpstudy\phpStudy\WWW\wish\view\index.html中的文件意外结束问题原因：是因为在html文件中用PHP语法是php语法
  • 基于人工智能的图表生成器 警世龙 开发记录人工智能自然语言处理
    基于人工智能的图表生成器软件需求分析本项目旨在开发一个基于Web的图表生成工具，利用人工智能技术将自然语言描述转换为专业的流程图、时序图等可视化图表。具体需求如下：支持用户输入自然语言描述来生成图表。提供实时预览功能，让用户能够即时看到生成的图表。允许用户对生成的Mermaid代码进行编辑。支持图表的缩放和平移操作。提供代码保存和图片导出功能。具备快捷键支持，提高用户操作效率。技术选型前端HTML
  • Flask(四) 模板渲染render_template @昵称不存在 Flaskflaskpython后端
    文章目录过程详解（路由HTML模板）数据是怎么传过去的？多变量示例✅Jinja2支持条件判断、循环、模板继承：✅安全性Flask默认也会对变量进行HTML转义：{{chart|safe}}在pyecharts中怎么用？模板继承文件结构示例base.html（母板模板）index.html（子模板）login.html（子模板）过滤器宏和模板包含Flask-Login登录系统1、安装Flask-Lo
  • Python实例题：基于 Flask 的博客系统 狐凄 实例python开发语言
    目录Python实例题题目要求：解题思路：代码实现：1.base.html2.index.html3.post.html4.create_post.html5.login.html6.register.htmlPython实例题题目基于Flask的博客系统要求：使用Flask框架构建一个简单的博客系统。实现用户认证（注册、登录、注销）。支持博客文章的创建、编辑、删除和查看。使用SQLite数据库存
  • 2021-07-08 转载Cesium中文网 liuqun69 javapythonlinux人工智能html
    Cesium更新日志英文完整更新日志：https://github.com/CesiumGS/cesium/blob/master/CHANGES.md中文：http://cesium.coinidea.com/site/download.html中文更新日志由Cesium中文网(京ICP备15014655号)提供1.83-2021-07-01：Cesium-1.83.zip新增对KTX2和基本通
  • iOS 26中的 Liquid Glass 设计理念与 CSS 的 UI 实现 duxweb ioscssui
    引言2025年6月，苹果在WWDC2025上发布了令人惊艳的iOS26，引入了全新的"LiquidGlass"（液态玻璃）设计语言。这被苹果称为"有史以来最广泛的软件设计更新"，不仅彻底重新定义了iOS的视觉语言，更是为整个移动界面设计领域带来了全新的思路。本文将深入探讨LiquidGlass设计理念的核心思想，并提供详细的CSS实现方案，帮助开发者在Web项目中实现类似的视觉效果。LiquidG
  • H5液态玻璃背景效果实现 木木黄木木 html5cssjavascript
    H5液态玻璃背景效果实现教程在现代网页设计中，动态和交互式的背景效果可以大大提升用户体验。本教程将详细介绍如何使用HTML5技术实现一个美观、流畅的液态玻璃背景效果，无论你是初学者还是有经验的开发者，都能轻松掌握。效果预览本教程提供了两种实现方式：基础版本：使用Canvas2DAPI实现，适合初学者，兼容性好高级版本：使用WebGL和GLSL着色器实现，效果更加逼真，但复杂度更高两个版本都具有以下
  • arm交叉编译qt应用中含opengl问题解决 m0_55576290 青泥何盘盘qtarm开发qt开发语言
    问题是采用正点原子方案中，用虚拟机交叉编译含opengl的qt程序会出现编译失败问题，因为正点原子中的交叉编译qt源码时没有编opengl。野火似乎有解决：https://doc.embedfire.com/linux/rk356x/Qt/zh/latest/lubancat_qt/install/install_arm_2.html
  • AD20学习笔记——BOM表输出 Fz@ EDA学习学习笔记
    BOM表输出脚本链接GitHub上-lianlian33/InteractiveHtmlBomForAD网盘链接链接：https://pan.baidu.com/s/1uGpwDyWKNgzghY5EH1Aj8A?pwd=72tx提取码：72tx1、下载文件并解压2、复制文件路径3、将脚本导入AD①点击设置中的ScriptingSystem中的GlobalProjects，选择从文件夹安装。②粘贴
  • Linux离线安装mysql 为你奋斗！ 开发环境软件安装androidadb
    Linux离线安装mysql(centos7)1、下载MySQL2、使用xshell文件传输工具，上传到Linux服务器3、安装前准备4、安装MySQL5、Navicat连接测试1、下载MySQLhttps://dev.mysql.com/downloads/mysql/5.7.html#downloads2、使用xshell文件传输工具，上传到Linux服务器在/usr/local文件夹下创建m
  • 一个简单测试Deepseek吞吐量的脚本,国内环境可跑 谢平康 深度学习pytorch人工智能
    一个简单测试Deepseek吞吐量的脚本,这里用DeepSeek-R1-Distill-Qwen-32B,支持单卡409024G可跑,具体看你的硬件情况做调整,理论支持所有的模型,看你需要,可以修改模型名称,重点是pip使用国内的源,模型下载用阿里的ModelScope,无障碍下载,使用.最后可以生成一个txt与html报表.前提是你安装了python与python-venv,你可以不用venv来
  • 第 4 部分 - 认证与权限 pythondjango
    目前我们的API对于谁能编辑或删除代码片段没有任何限制。我们希望实现更高级的行为以确保：代码片段始终与创建者相关联。只有经过身份验证的用户才能创建片段。只有片段的创建者才能更新或删除它。未经过身份验证的请求应具有完全的只读访问权限。向模型中添加信息我们将在Snippet模型类中做一些更改。首先，让我们添加几个字段。其中的一个字段将用于表示创建代码片段的用户。另一个字段将用于存储代码的高亮HTML表
  • 312个免费高速HTTP代理IP（能隐藏自己真实IP地址） yangshangchuan 高速免费superwordHTTP代理
        124.88.67.20:843 190.36.223.93:8080 117.147.221.38:8123 122.228.92.103:3128 183.247.211.159:8123 124.88.67.35:81 112.18.51.167:8123 218.28.96.39:3128 49.94.160.198:3128 183.20
  • pull解析和json编码 百合不是茶 androidpull解析json
    n.json文件: [{name:java,lan:c++,age:17},{name:android,lan:java,age:8}]   pull.xml文件 <?xml version="1.0" encoding="utf-8"?> <stu>     <name>java
  • [能源与矿产]石油与地球生态系统 comsci 能源
          按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的....       那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好
  • 类与对象浅谈 沐刃青蛟 java基础
           类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是
  • 新站开始被收录后，我们应该做什么？ IT独行者 PHPseo
    新站开始被收录后，我们应该做什么？         百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。       至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百
  • oracle 连接碰到的问题 文强chu oracle
    Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案 作者：草根IT网 来源：未知 人气：813标签： 导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod
  • Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据） 小桔子 java继承swing接口监听
            都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。 编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea
  • linux常用的命令 aichenglong linux常用命令
    1 startx切换到图形化界面 2 man命令:查看帮助信息 man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分 name:对命令的简单说明 synopsis:命令的使用格式说明 description:命令的详细说明信息 options:命令的各项说明 3 date:显示时间 语法：date [OPTION]... [+FORMAT]
  • eclipse内存优化 AILIKES javaeclipsejvmjdk
    一 基本说明      在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。     1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人
  • 关键字的使用探讨 百合不是茶 关键字
    //关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的 只能在包中访问*//*final   类 方法 变量 final 类 不能被继承 final 方法 不能被子类覆盖，但可以继承 final 变量 只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法*///this()
  • JS中定义对象的几种方式 bijian1013 js
        1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： <html> <head> <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title> </head> <script> var obj = new Object();
  • 表驱动法实例 bijian1013 java表驱动法TDD
    获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下： MonthDaysTest.java package com.study.test; import org.junit.Assert; import org.junit.Test; import com.study.MonthDays; public class MonthDaysTest { @T
  • LInux启停重启常用服务器的脚本 bit1129 linux
    启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改   #! /bin/bash Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo); Ops=(Start, Stop, Restart); currentDir=$(pwd); echo
  • 【HBase六】REST操作HBase bit1129 hbase
    HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作   1. 启动和停止HBase REST 服务 1.1 启动REST服务 前台启动（默认端口号8080） [hadoop@hadoop bin]$ ./hbase rest start   后台启动 hbase-daemon.sh start rest   启动时指定
  • 大话zabbix 3.0设计假设 ronin47
    What’s new in Zabbix 2.0? 去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个：          :: Performance improvements::Trigger related da
  • http错误码大全 byalias http协议javaweb
    响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。 响应码分五种类型，由它们的第一位数字表示： 1）1xx：信息，请求收到，继续处理 2）2xx：成功，行为被成功地接受、理解和采纳 3）3xx：重定向，为了完成请求，必须进一步执行的动作 4）4xx：客户端错误，请求包含语法错误或者请求无法实现 5）5xx：服务器错误，服务器不能实现一种明显无效的请求
  • J2EE设计模式-Intercepting Filter bylijinnan java设计模式数据结构
    Intercepting Filter类似于职责链模式 有两种实现 其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下： package com.ljn.filter.custom; import java.util.ArrayList;
  • 修改jboss端口 chicony jboss
    修改jboss端口   %JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml   中找到 <!-- The ports-default bindings are obtained by taking the base bindin
  • c++ 用类模版实现数组类 CrazyMizzz C++
    最近c++学到数组类，写了代码将他实现，基本具有vector类的功能 #include<iostream> #include<string> #include<cassert> using namespace std; template<class T> class Array { public: //构造函数
  • hadoop dfs.datanode.du.reserved 预留空间配置方法 daizj hadoop预留空间
    对于datanode配置预留空间的方法 为：在hdfs-site.xml添加如下配置  <property>     <name>dfs.datanode.du.reserved</name>     <value>10737418240</value>    
  • mysql远程访问的设置 dcj3sjt126com mysql防火墙
    第一步: 激活网络设置 你需要编辑mysql配置文件my.cnf. 通常状况，my.cnf放置于在以下目录： /etc/mysql/my.cnf (Debian linux) /etc/my.cnf （Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf，修改内容从以下行： [mysqld] 你所需要: 1
  • ios 使用特定的popToViewController返回到相应的Controller dcj3sjt126com controller
    1、取navigationCtroller中的Controllers NSArray * ctrlArray = self.navigationController.viewControllers; 2、取出后，执行， [self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES
  • Linux正则表达式和通配符的区别 eksliang 正则表达式通配符和正则表达式的区别通配符
    转载请出自出处：http://eksliang.iteye.com/blog/1976579 首先得明白二者是截然不同的 通配符只能用在shell命令中,用来处理字符串的的匹配。 判断一个命令是否为bash shell(linux 默认的shell)的内置命令 type -t commad 返回结果含义 file  表示为外部命令 alias  表示该
  • Ubuntu Mysql Install and CONF gengzg Install
    http://www.navicat.com.cn/download/navicat-for-mysql Step1: 下载Navicat ，网址：http://www.navicat.com/en/download/download.html Step2：进入下载目录，解压压缩包：tar -zxvf navicat11_mysql_en.tar.gz
  • 批处理，删除文件bat huqiji windowsdos
    @echo off ::演示：删除指定路径下指定天数之前（以文件名中包含的日期字符串为准）的文件。 ::如果演示结果无误，把del前面的echo去掉，即可实现真正删除。 ::本例假设文件名中包含的日期字符串（比如：bak-2009-12-25.log） rem 指定待删除文件的存放路径 set SrcDir=C:/Test/BatHome rem 指定天数 set DaysAgo=1
  • 跨浏览器兼容的HTML5视频音频播放器 天梯梦 html5
    HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。   How to enable <video> and <audio> tags in
  • Bundle自定义数据传递 hm4123660 androidSerializable自定义数据传递BundleParcelable
          我们都知道Bundle可能过put****()方法添加各种基本类型的数据，Intent也可以通过putExtras(Bundle)将数据添加进去，然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity   把数据放到Intent
  • C＃：异步编程和线程的使用（.NET 4.5 ） powertoolsteam .net线程C#异步编程
    异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程，可使用线程也可以不用。将异步与线程同时讲，将有助于我们更好的理解它们的特征。 本文中涉及关键知识点 1. 异步编程 2. 线程的使用 3. 基于任务的异步模式 4. 并行编程 5. 总结 异步编程 什么是异步操作？异步操作是指某些操作能够独立运行，不依赖主流程或主其他处理流程。通常情况下，C＃程序
  • spark 查看 job history 日志 Stark_Summer 日志sparkhistoryjob
    SPARK_HOME/conf 下: spark-defaults.conf 增加如下内容 spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true spark-env.sh 增加如下内容 export SP
  • SSH框架搭建 wangxiukai2015eye springHibernatestruts
    MyEclipse搭建SSH框架 Struts Spring Hibernate 1、new一个web project。 2、右键项目，为项目添加Struts支持。    选择Struts2 Core Libraries -<MyEclipes-Library>      点击Finish。src目录下多了struts
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他