kkkk_1112
kkkk_1112

CSS布局之 浮动-4

网页布局的核心——用CSS来摆放盒子。

CSS布局的三种机制：

普通流（标准流）

【块级元素】
独占一行，自上而下顺序排列
常用元素：div hr p h1~h6 ul ol dl form table

【行内元素】
按照顺序，从左向右顺序排列，碰到父元素边缘则会自动换行
常用元素 ：span a i em 等

浮动

【什么是浮动？】
概念：元素的浮动是指设置了浮动属性的元素会
1.脱离标准普通流的控制
2.移动到指定位置。

【作用】：
1.让多个盒子（div）水平排列成一行
2.可以实现盒子的左右对齐
3.浮动最早是用来控制图片，实现文字环绕图片的效果。

【语法】

选择器 { float : 属性值; }
属性 描述
none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

1） 浮动口诀之 浮

漂离在标准流之上，脱离标准流。俗称“脱标”


<html>
<head>
	<title>浮动口诀title>
	<style>

		.one{
			/*不再是标准流了，脱离标准流，浮动在其他盒子的上方*/
			float: left;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.two{
			width: 300px;
			height: 300px;
			background-color: purple;
		}

	style>
head>
<body>
	<div class="one">div>
	<div class="two">div>
body>
html>

【代码结果如下】
CSS布局之 浮动-4_第1张图片
2）浮动口诀 之 漏
漏：浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，而是漂浮在上面。

3）浮动口诀 之 特
浮动—特性：任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是和中元素，生成的块级框和我们前面的行内块极其相似，（行内块之间两个盒子之间有间隙），但是通过浮动设置出来的两个盒子之间没有任何间隙。

/*div 添加浮动之后，仍然是块级元素，默认相当于转换成了 inline-block*/
		div{
			float: left;
			height: 100px;
			background-color: pink;
		}

/*对两个div 盒子设置，两个盒子都进行浮动，两个盒子会形成行内块元素的形式，并列排放，且两个盒子之间没有间隙*/
	.one,
		.two {
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		.one{
			float:left ;
		}
		.two {
			background-color: purple;
			float: left;
		}

【结果如下】
CSS布局之 浮动-4_第2张图片
两个盒子一左一右放置的代码：

.one,
		.two {
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		/*左浮动*/
		.one{
			float: left;
		}
		/*右浮动*/
		.two {
			background-color: purple;
			float: right;
		}

【结果如下】
CSS布局之 浮动-4_第3张图片

浮动小结

特点 说明
浮 加了浮动的盒子是浮起来的，浮在其他标准流盒子之上
漏 加了浮动的盒子是不占位置的，原来的位置 漏 给了标准流的盒子
特 特别注意：浮动元素会改变display的属性，类似转换成了行内块，但是元素之间没有空白缝隙

浮动的应用

浮动和标准流的父盒子搭配

因为浮动是脱标的，会影响下面的标准流元素，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准的影响。

一个完整的网页：标准流 + 浮动 + 定位 一起形成的。

案例：小米网站首页


<html>
<head>
	<title>小米title>
	<style >
		*{
			margin:0px;
			padding:0px;
		}
		li {
			list-style: none;
		}
		/*最大的盒子*/
		.box{
			width: 1226px;
			height: 615px;
			background-color: transparent;
			/*盒子摆放在最中间*/
			margin:auto auto;
		}
		/*左侧盒子*/
		.left{
			width: 234px;
			height: 615px;
			background-color: purple;
			/*浮动的形式*/
			float: left;
		}
		/*插入的左侧图片 和左侧盒子的宽度相同*/
		.left img{
			width: 100%
		}
		/*右侧盒子*/
		.right{
			width: 992px;
			height: 615px;
			background-color:transparent;
			/*浮动的形式，一左一右*/
			float: right;
		}
		/*右侧盒子内部的每一行*/
	    .right li{
	    	float:left;
	    	width: 234px;
	    	height: 300px;
	    	background-color: green;
	    	margin-left: 14px;
	    	/*下方有空隙*/
	    	margin-bottom: 14px;  	
		}

	style>
head>

<body>
	<div class="box">
		<div class="left" ><img src="images/mi.jpg">div>
		
		<ul class="right">
			<li><img src="images/mi.png">li>
			<li>2li>
			<li>3li>
			<li>4li>
			<li>5li>
			<li>6li>
			<li>7li>
			<li>8li>
		ul>
	div>
body>
html>

【结果如下：】
CSS布局之 浮动-4_第4张图片
案例2：导航栏
实际重要的导航栏中，我们不会直接用链接 a 而是用 li 包含链接 （li + a ）的做法


<html>
<head>
	<title>导航栏title>
	<style >
		*{
			margin:0px;
			padding: 0px;
		}
		li{
			list-style: none;
		}
		.banner{
			width: 760px;
			height: 150px;
			/*background-color: red;*/
			margin:auto;
			
		}
		.bottom{
			width: 760px;
			height: 32px;
			/*line-height: 32px;*/
			/*background-color: blue;*/
			margin:0 auto;
			background: url(images/nav_bg.jpg) repeat-x;
		}

		.bottom ul li {
			/*因为li让文字竖着显示，所以需要给li加浮动*/
			float: left;
			
			
			
		}
		.bottom ul li a {
			display: inline-block;
			text-decoration: none;
			
			/*color: black;*/
			width: 80px ;
			height: 32px;
			text-align: center;
			line-height: 32px;
			background:url(images/button1.jpg) no-repeat;
			font-size: 12px;
			
		}
		/*鼠标经过时会有一个框框显示，所以要给a标签加背景图片，还要对a 设置行高、宽度*/
		.bottom ul li a:hover{
			color: white;
			background:url(images/button2.jpg) no-repeat;
		}

	style>
head>
<body>
	
	<div class="banner"><img src="images/banner.jpg">div>
	<div class="bottom">
		<ul>
			<li><a href="#">网站首页a>li>
			<li><a href="#">网站首页a>li>
			<li><a href="#">网站首页a>li>
			<li><a href="#">网站首页a>li>
			<li><a href="#">网站首页a>li>
			<li><a href="#">网站首页a>li>
			
		ul>
	div>
body>
html>

【结果如下：】
CSS布局之 浮动-4_第5张图片

浮动的扩展

1）浮动元素与父盒子的关系

  • 子盒子的浮动参照父盒子对齐
  • 不会与父盒子的边框重叠，也不会超过父盒子的内边距
    2）浮动元素和兄弟之间的关系
    【建议】：
如果一个盒子里面有多个盒子，如果其中一个浮动了，那么其他兄弟也应该浮动，防止引起问题。

清除浮动

1）为什么要清除浮动？
因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
2）清除浮动的本质
清除浮动主要是为了解决父级元素是因为子级元素浮动引起内部高度为0的问题，清除浮动之后，浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
3）清除浮动的方法

  • 语法
    选择器 { clear : 属性值；} clear 清除
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

基本上只使用clear: both；

【方法1：额外标签法】

在浮动元素末尾添加一个空的标签。
例如：

代码：


<html>
<head>
	<title>浮动盒子title>
	<style >
		.one{
			
			width: 500px;
			border:5px red solid;
			/*padding: 100px;*/
		}
		.da{
			float: left;
			width: 100px;
			height: 100px;
			background-color: purple;
			
		}
		.er {
			float: left;
			width: 200px;
			height: 200px;
			background-color: green;
		}
		/*清除浮动*/
		.clear{
			clear: both;
		}
		/*与 one 并列的盒子*/
		.two{
			width: 500px;
			height: 200px;
			background-color: black;
		}
	style>
head>
<body>
	<div class="one">
		<div class="da">div>
		<div class="er">div>
		<div class="clear">div>
	div>
	<div class="two">div>
body>
html>

【结果如下】：很好的清除了浮动
CSS布局之 浮动-4_第6张图片
优点：方法简单
缺点：添加了额外的无意义的标签，不提倡使用。

【方法2：父级添加overflow属性方法】

语法：
可以给父级添加 ：overflow:hidden |auto |scroll都 可以实现。

.one{
			
			width: 500px;
			border:5px red solid;
			/*给父级添加overflow 就可以解决问题，常用的是hidden*/
			overflow:hidden;
	}

优点：代码简洁
缺点：内容过多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

【方法3：使用after伪元素清除浮动】

/*在head中 提前声明*/
.clearfix:after {
			content:;
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}
		

<div class=" nav clearfix">

优点：符合闭合浮动思想，结构语义化正确
缺点 ：ie6-7不支持after，使用 zoom:1触发 hasLayout

【方法4：使用双伪元素清除浮动】

/*在head  style 中写的*/
		.clearfix:after,
		.clearfix:before {
			content:"";
			display: table;
		}
		.clear:after{
			clear:both;
		}
		.clearfix{
			*zoom:1;
		}
 
 <div class=" nav clearfix">

4）什么时候使用清除浮动呢？

  1. 父级没有高度
  2. 子盒子浮动了
  3. 影响下面布局了，我们就需要清除浮动了

清除浮动 总结

清除浮动的方式 优点 缺点
额外标签法 通俗易懂，书写方便 添加许多无意义的标签，结构化较差
父级 overflow:hidden; 书写简单 溢出隐藏
父级伪元素 结构化语义正确 ie6-q不支持after，兼容性问题
父级双伪元素 结构化语义正确 ie6-q不支持after，兼容性问题

定位

你可能感兴趣的:(CSS布局之 浮动-4)

  • Python机器学习之XGBoost从入门到实战(基本理论说明) 雪域枫蓝 PythonAtificialIntelligence机器学习python分布式
    Xgboost从基础到实战XGBoost:eXtremeGradientBoosting*应用机器学习领域的一个强有力的工具*GradientBootingMachines(GBM)的优化表现，快速有效—深盟分布式机器学习开源平台(DistributedmachinelearningCommunity，DMLC)的分支—DMLC也开源流行的深度学习库mxnet*GBM：Machine：机器学习模型
  • midjourney初学者必看（迅速入门） 会飞the羊 midjourney
    Midjourney初步学习：基本操作流程：-新建一个服务器-在输入框里添加MJROBOT:https://discord.com/oauth2/authorize?client_id=936929561302675456&permissions=2147601472&scope=applications.commands%20bot-输入/→选择imagine开始写prompt-prompt使用
  • 实战设计模式之命令模式 希望_睿智 实战设计模式系列设计模式命令模式软件工程架构设计系统架构
    概述命令模式是一种行为设计模式，用于将请求封装成对象，从而使我们可以用不同的请求对客户进行参数化。简单来说，命令模式就是把一个请求转换为一个包含所有关于这个请求信息的对象。这样，就可以像传递其他对象一样传递这个请求，并且可以在适当的时间和地点执行它。命令模式主要适用于以下几种应用场景。1、需要支持撤销、重做操作的应用程序，比如：文本编辑器、绘图程序等。2、操作可以被放入队列中，并按顺序或特定条件执
  • 【Python篇】深入机器学习核心：XGBoost 从入门到实战 半截诗 Pythonpython机器学习深度学习分类回归数据分析XGBoost
    文章目录XGBoost完整学习指南：从零开始掌握梯度提升1.前言2.什么是XGBoost？2.1梯度提升简介3.安装XGBoost4.数据准备4.1加载数据4.2数据集划分5.XGBoost基础操作5.1转换为DMatrix格式5.2设置参数5.3模型训练5.4预测6.模型评估7.超参数调优7.1常用超参数7.2网格搜索8.XGBoost特征重要性分析9.高级功能扩展9.1模型解释与可解释性9.2
  • 【大模型】Spring AI Alibaba 对接百炼平台大模型使用详解 小码农叔叔 AI大模型实战与应用微服务治理与实战springaiSpringAI详解百炼大模型
    目录一、前言二、SpringAI概述2.1springai是什么2.2SpringAI核心能力2.3SpringAI应用场景三、SpringAIAlibaba介绍3.1SpringAIAlibaba是什么3.2SpringAIAlibaba核心特点3.3SpringAIAlibaba应用场景四、SpringBoot对接SpringAIAlibaba过程4.1前置准备4.1.1获取apikey4.1
  • 使用java代码消费kafka数据 二进制_博客 大数据javakafka
    首先创建maven项目，导入jar包org.apache.kafkakafka-clients3.0.0org.slf4jslf4j-log4j121.7.25示例一：使用java代码消费kafka所有数据packagecom.bigdata.day03;importorg.apache.kafka.clients.consumer.ConsumerConfig;importorg.apache.
  • Spring Boot入门(19)：超酷炫！Spring Boot + Thymeleaf 带你玩转 Web 页面开发！ 喵手 Springbootspringboot前端后端
    前言在Web开发中，不管是MVC框架还是前后端分离，都需要使用模板引擎来渲染生成页面。Thymeleaf是一款非常优秀的模板引擎，它以自然的方式处理模板，支持HTML5标签，同时兼容HTML4。本文将介绍如何使用SpringBoot框架，整合Thymeleaf模板引擎来开发Web页面。摘要本文将分为以下几个部分:新建SpringBoot项目配置Thymeleaf模板引擎编写HTML页面模板引擎使用
  • 海康威视SDK常见错误码 熊文豪 语音识别人工智能
    错误码宏定义描述0NET_DVR_NOERROR没有错误1NET_DVR_PASSWORD_ERROR用户名密码错误2NET_DVR_NOENOUGHPRI权限不足3NET_DVR_NOINITSDK未初始化4NET_DVR_CHANNEL_ERROR通道号错误5NET_DVR_OVER_MAXLINK连接到的设备端口超出最大数6NET_DVR_VERSIONNOMATCH版本不匹配7NET_DV
  • EL表达式与JSTL标签库详解 秦老师Q JavaWeb基础java
    前言本章主要学习EL表达式与JSTL标签库，用于简化JSP数据操作。收录JavaWeb基础系列，该系列主要学习JavaWeb开发原生框架、Servlet、JSP、request请求对象、response响应对象、Session会话对象、Filter过滤器、EL表达式、JSTL标签库、三层开发模型等知识点，欢迎童鞋们互相交流。觉得不错可以三连订阅喔。目标一、EL表达式1.概念2.语法3.示例4.EL
  • Omnissa Dynamic Environment Manager 2412 - 个性化动态 Windows 桌面环境管理 虚拟化
    OmnissaDynamicEnvironmentManager2412-个性化动态Windows桌面环境管理Simplifymanagementofuserprofiles,environmentsettings,andpoliciesacrossdesktopsandapps.请访问原文链接：https://sysin.org/blog/omnissa-dynamic-environment-
  • 盘点ECMAScript 2024的新提案 前端
    前面我们了解了ECMAScript2024(ES15)的5个新特性，现在我们继续学习一下其他令人耳目一新的提案吧。1.模式匹配（初期阶段）JavaScript变得更智能了，有了模式匹配！想象它就像一个超强大的switch语句，可以处理复杂的数据结构。ES15允许你简单地匹配模式，而不是编写一堆嵌套的条件语句来检查对象的形状。️旧方式functioncheckAnimal(animal){if(an
  • Nuqs：解锁URL状态管理 前端
    nuqs是一个强大的库，旨在使用URL查询字符串管理React应用程序的状态。这样做的好处是将应用程序状态与浏览器的地址栏同步，为浏览复杂界面的用户提供无缝体验。无论您是构建单页应用程序还是多路由平台，nuqs都提供了一个强大的框架，可用于直接在URL中处理状态。例子：https://nuqs.47ng.com/playground/basic-counter官网介绍：https://nuqs.4
  • leetcode 485 python weixin_36908057 leetcode
    Givenabinaryarray,findthemaximumnumberofconsecutive1sinthisarray.Example1:Input:[1,1,0,1,1,1]Output:3Explanation:Thefirsttwodigitsorthelastthreedigitsareconsecutive1s.Themaximumnumberofconsecutive1sis
  • python连接485网关设备 dilqu python网络开发语言
    Python相关视频讲解：python的or运算赋值用法用python编程Excel有没有用处？011_编程到底好玩在哪？查看python文件_输出py文件_cat_运行python文件_shel如何实现Python连接485网关设备1.流程图gantttitlePython连接485网关设备流程图section了解485网关设备:1dsection安装Python库:1dsection编写Pyt
  • Python学习day14 BBS功能和聊天室 weixin_30725467 json数据库前端ViewUI
    Createdon2017年5月15日@author:louts第1课作业讲解及装饰器使用28minutesdefcheck(func):defrec(request,*args,**kargs):returnfunc(request,*args,**kargs)returnrec@checkdefindex(request,):printrequest第2课自定义装饰器扩展使用18minutes
  • Linux性能优化CPU篇之平均负载 linux
    首先使用uptime命令查看对应平均负载.平均负载是指单位时间内,系统处于可运行状态和不可中断状态进程数所谓的可运行状态的进程是指,正在使用CPU或者正在等待的CPU进程数量,也就是我们常用的ps命令,处于R状态。不可中断状态的进程是正在处于内核关键流程中的进程,注意这些进程不可以被打断的,当我们向一个磁盘写入一个文件的时候,它是不可以被打断的。那么平均复杂怎么样才算好呢?平均负载最理想的情况是等
  • 2025年，游戏行业何去何从？65位业内大佬给出答案 花生糖@ 技术创业之路：从创意到企业游戏人工智能
    2024年，游戏行业呈现出冰火两重天的景象：独立游戏领域如沐春风，爆款频出，开发者和粉丝们沉浸在创意的狂欢中；而AAA游戏业务却遭遇寒冬，裁员潮一波接一波，众多工作室黯然离场。站在2020年代下半叶的门槛上，我们不禁要问：游戏行业的未来将何去何从？为此，我们采访了65位游戏行业的领军人物，从创意领袖到初创公司创始人，从社区领袖到营销专家，他们给出了各自独到的见解和新年决心，为这个疯狂且不断发展的行
  • 无缝融入，即刻智能[二]：Dify-LLM平台(聊天智能助手、AI工作流)快速使用指南，42K+星标见证专属智能方案 汀、人工智能 AIAgentLLM工业级落地实践人工智能AIAgentLLMDify智能体智能问答聊天助手
    无缝融入，即刻智能[二]：Dify-LLM平台(聊天智能助手、AI工作流)快速使用指南，42K+星标见证专属智能方案1.快速创建应用你可以通过3种方式在Dify的工作室内创建应用：基于应用模板创建（新手推荐）创建一个空白应用通过DSL文件（本地/在线）创建应用从模板创建应用初次使用Dify时，你可能对于应用创建比较陌生。为了帮助新手用户快速了解在Dify上能够构建哪些类型的应用，Dify团队内的提
  • 集成AI离线免费，全平台毫秒级快速处理！ 纪元A梦 资源分享人工智能科技电脑软件抠图
    随着PS技术的发展，大家对图像的要求和处理更加的多样化，其中，抠图作为一种常见的图像处理操作，并不是每个小伙伴都完全掌握PS技能，对于那些复杂的抠图操作往往会显得捉襟见肘，近两年随着AI技术的进步，各类软件都和AI集合，希望通过AI快速、高效的实现某些操作；分享一款免费、离线并且内嵌AI模型的抠图工具：鲜艺AI抠图v3.1；获取方式：https://pan.baidu.com/s/1gej6HL4
  • 1.Spring AI 从入门到实践 laopeng301 SpringAIspring人工智能java
    SpringAI从入门到实践1.什么是SpringAI2.使用SpringBoot&SpringAI快速构建AI应用程序3.ChatClient&ChatModel简化与AI模型的交互4.SpringAIPrompt:与大模型进行有效沟通5.结构化输出大模型响应6.实战:AI聊天机器人Ben技术站关注Java技术，LLM，计算机科学等内容。关注会持续更新推送详细教程内容和源码。
  • Spring Boot 3.x- MybatisPlus集成 laopeng301 SpringBoot3.x教程springbootjava后端mysqlspring
    系列文章目录系列文章:SpringBoot3.x系列教程文章目录系列文章目录简介一、快速开始1.数据库表和数据准备2.新增项目&导入依赖3.配置4.开发编码5.运行测试二、注解三、测试四、CRUDServiceCRUDMapperCRUD五、完整CRUD例子简介官网介绍:MyBatis-Plus（简称MP）是一个MyBatis的增强工具，在MyBatis的基础上只做增强不做改变，为简化开发、提高效
  • 【论文翻译】GOT-OCR论文翻译——General OCR Theory: Towards OCR-2.0 via a Unified End-to-end Model 机器白学 论文翻译ocr论文阅读论文翻译
    论文原文链接：https://arxiv.org/abs/2409.01704特别声明，本文不做任何商业用途，仅作为个人学习相关论文的翻译记录。本文对原文内容直译，一切以论文原文内容为准，对原文作者表示最大的敬意。如有任何侵权请联系我下架相关文章。目录通用OCR理论：通过统一的端到端模型迈向OCR-2.00摘要1引言2相关工作2.1传统OCR2.2基于LVLM的OCR3通用OCR理论3.1框架3.
  • 【视觉算法—视频目标跟踪】基于camshift实现视频目标实时追踪 明月下 视觉算法opencvpython音视频
    本文代码功能：1.获取摄像头，实时显示2.鼠标获取第一帧中的目标roi区域3.在视频中实时对目标进行追踪。4.两种目标追踪的方式：‘meanshift’，‘camshift’5.保存视频代码准备新建test.py，复制以下代码：importcv2ascvimportnumpyasnpglobalmin_y,height,min_x,width#1代表打开外置摄像头,外置多个摄像头可依此枚举0，1，
  • 【国内直连】国内可用的ChatGPT中文版镜像集合（2025年1月更新）
    更新时间：2025年01月18日全方位指南，带您轻松使用ChatGPT中文版，支持GPT-4，无需！本文提供详细的ChatGPT中文版使用说明，包括镜像站推荐、官网注册教程以及常见问题解答，帮助您快速掌握ChatGPT的使用方法。目录什么是ChatGPT中文版？国内可用的ChatGPT中文版镜像网站推荐为什么选ChatGPT中文版ChatGPT官网与中文版的区别如何快速开始使用ChatGPT中文版
  • python安装包提示Requirement already satisfied 可爱的的编辑人员 配置pythonnumpy开发语言
    python安装cnocr提示Requirementalreadysatisfied错误信息如下：Requirementalreadysatisfied:pyreadline3inc:\python310\lib\site-packages(fromhumanfriendly>=9.1->coloredlogs->onnxruntime->cnocr)(3.4.1)Installingcollec
  • 文心一言 vs gpt-4 全面横向比较 周盛欢 文心一言
    文心一言是中国百度公司研发的大规模语言模型，它有超多的参数，就像一个超级大脑，特别擅长理解并生成中文内容。在聊天啊、写文章啊、答题这些任务上表现不错，对中国文化和国情有更深的理解和适应能力。GPT-3.5是OpenAI公司的上一代大模型，比GPT-3更智能一些。而GPT-4作为其升级版，大家预计它会有更大的模型参数量，更强的学习和推理能力，可能会在各种语言任务上实现更大突破。所以，如果拿文心一言跟
  • SSCOM串口调试工具安装和使用方法--V5.13.1版本 测试笔记（自看） 嵌入式软件测试嵌入式串口调试工具SSCOM
    安装链接：下载解压后直接双击打开使用使用1、选择端口2、点击【打开串口】3、输入内容点击发送4、上方就会展示发送或接收数据
  • NVIDIA下一代Hopper架构曝光，采用5nm工艺 晶体管超1400亿 Java小海. 架构人工智能后端程序人生java
    据媒体报道，NVIDIA下一代主要面向高性能计算、人工智能等Hopper架构，将会采用5nm工艺制程，晶体管多达1400亿个，面积核心达到了900平方毫米，是有史以来最大的GPU。作为参考，NVIDIA自家旗舰Ampere架构的A100为542亿个晶体管（每平方毫米约为6560万个晶体管），AMD阵营中采用Aldebaran架构的InstinctMI200系列为582亿个晶体管（每平方米约为736
  • 解决 GitHub 端口连接超时 御风牧云_ Android开发环境配置
    一，前言GitHub端口默认使用的本机端口为22，某些情况下如果此端口被占用，就会导致GitHub连接超时错误。ssh:connecttohostgithub.comport22:ConnectiontimedoutWindows下可以通过下面的命令，来查看端口占用情况netstat-ano二，解决方案可以通过SSH命令临时修改端口号为443，测试是否可以连接到GitHubssh-T-p443gi
  • 利用python向modbus RTU设备（RS485串口通信）发送16进制指令 无名小白12138 python开发语言
    importserialimporttime#配置串口通信参数serial_port='COM1'baudrate=9600#创建串口连接ser=serial.Serial(port=serial_port,baudrate=baudrate)#检查串口是否已打开ifser.is_open:try:hex_data=bytes.fromhex('01100010000102000564C3')se
  • Spring4.1新特性——综述 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • Schema与数据类型优化 annan211 数据结构mysql
    目前商城的数据库设计真是一塌糊涂，表堆叠让人不忍直视，无脑的架构师，说了也不听。 在数据库设计之初，就应该仔细揣摩可能会有哪些查询，有没有更复杂的查询，而不是仅仅突出 很表面的业务需求，这样做会让你的数据库性能成倍提高，当然，丑陋的架构师是不会这样去考虑问题的。 选择优化的数据类型 1 更小的通常更好 更小的数据类型通常更快，因为他们占用更少的磁盘、内存和cpu缓存，
  • 第一节 HTML概要学习 chenke htmlWebcss
    第一节 HTML概要学习 1. 什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。 打开记事本 输入一下内
  • MyEclipse里部分习惯的更改 Array_06 eclipse
    继续补充中---------------------- 1.更改自己合适快捷键windows-->prefences-->java-->editor-->Content Assist-->      Activation triggers for java的右侧“.”就可以改变常用的快捷键 选中 Text
  • 近一个月的面试总结 cugfy 面试
    本文是在学习中的总结，欢迎转载但请注明出处：http://blog.csdn.net/pistolove/article/details/46753275 前言       打算换个工作，近一个月面试了不少的公司，下面将一些面试经验和思考分享给大家。另外校招也快要开始了，为在校的学生提供一些经验供参考，希望都能找到满意的工作。 
  • HTML5一个小迷宫游戏 357029540 html5
         通过《HTML5游戏开发》摘抄了一个小迷宫游戏，感觉还不错，可以画画，写字，把摘抄的代码放上来分享下，喜欢的同学可以拿来玩玩！ <html> <head> <title>创建运行迷宫</title> <script type="text/javascript"
  • 10步教你上传githib数据 张亚雄 git
    官方的教学还有其他博客里教的都是给懂的人说得，对已我们这样对我大菜鸟只能这么来锻炼，下面先不玩什么深奥的，先暂时用着10步干净利索。等玩顺溜了再用其他的方法。 操作过程（查看本目录下有哪些文件NO.1）ls （跳转到子目录NO.2）cd+空格+目录 （继续NO.3）ls （匹配到子目录NO.4）cd+ 目录首写字母+tab键+（首写字母“直到你所用文件根就不再按TAB键了”） （查看文件
  • MongoDB常用操作命令大全 adminjun mongodb操作命令
    成功启动MongoDB后，再打开一个命令行窗口输入mongo，就可以进行数据库的一些操作。输入help可以看到基本操作命令，只是MongoDB没有创建数据库的命令，但有类似的命令 如：如果你想创建一个“myTest”的数据库，先运行use myTest命令，之后就做一些操作（如：db.createCollection('user')）,这样就可以创建一个名叫“myTest”的数据库。 一
  • bat调用jar包并传入多个参数 aijuans
    下面的主程序是通过eclipse写的： 1.在Main函数接收bat文件传递的参数（String[] args）  如：   String ip =args[0];          String user=args[1];       &nbs
  • Java中对类的主动引用和被动引用 ayaoxinchao java主动引用对类的引用被动引用类初始化
      在Java代码中，有些类看上去初始化了，但其实没有。例如定义一定长度某一类型的数组，看上去数组中所有的元素已经被初始化，实际上一个都没有。对于类的初始化，虚拟机规范严格规定了只有对该类进行主动引用时，才会触发。而除此之外的所有引用方式称之为对类的被动引用，不会触发类的初始化。虚拟机规范严格地规定了有且仅有四种情况是对类的主动引用，即必须立即对类进行初始化。四种情况如下：1.遇到ne
  • 导出数据库 提示 outfile disabled BigBird2012 mysql
    在windows控制台下，登陆mysql，备份数据库：   mysql>mysqldump -u root -p test test > D:\test.sql 使用命令 mysqldump 格式如下： mysqldump -u root -p *** DBNAME > E:\\test.sql。 注意：执行该命令的时候不要进入mysql的控制台再使用，这样会报
  • Javascript 中的 && 和 || bijian1013 JavaScript&&||
            准备两个对象用于下面的讨论 var alice = { name: "alice", toString: function () { return this.name; } } var smith = { name: "smith",
  • [Zookeeper学习笔记之四]Zookeeper Client Library会话重建 bit1129 zookeeper
    为了说明问题，先来看个简单的示例代码：   package com.tom.zookeeper.book; import com.tom.Host; import org.apache.zookeeper.WatchedEvent; import org.apache.zookeeper.ZooKeeper; import org.apache.zookeeper.Wat
  • 【Scala十一】Scala核心五：case模式匹配 bit1129 scala
    package spark.examples.scala.grammars.caseclasses object CaseClass_Test00 { def simpleMatch(arg: Any) = arg match { case v: Int => "This is an Int" case v: (Int, String)
  • 运维的一些面试题 yuxianhua linux
    1、Linux挂载Winodws共享文件夹   mount -t cifs //1.1.1.254/ok /var/tmp/share/ -o username=administrator,password=yourpass 或 mount -t cifs -o username=xxx,password=xxxx //1.1.1.1/a /win    
  • Java lang包-Boolean BrokenDreams boolean
             Boolean类是Java中基本类型boolean的包装类。这个类比较简单，直接看源代码吧。 public final class Boolean implements java.io.Serializable,
  • 读《研磨设计模式》-代码笔记-命令模式-Command bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.List; /** * GOF 在《设计模式》一书中阐述命令模式的意图：“将一个请求封装
  • matlab下GPU编程笔记 cherishLC matlab
    不多说，直接上代码 gpuDevice % 查看系统中的gpu,,其中的DeviceSupported会给出matlab支持的GPU个数。 g=gpuDevice(1); %会清空 GPU 1中的所有数据,,将GPU1 设为当前GPU reset(g) %也可以清空GPU中数据。 a=1; a=gpuArray(a); %将a从CPU移到GPU中 onGP
  • SVN安装过程 crabdave SVN
    SVN安装过程   subversion-1.6.12   ./configure --prefix=/usr/local/subversion --with-apxs=/usr/local/apache2/bin/apxs --with-apr=/usr/local/apr --with-apr-util=/usr/local/apr --with-openssl=/
  • sql　行列转换 daizj sql行列转换行转列列转行
    行转列的思想是通过case when 来实现 列转行的思想是通过union all 来实现 下面具体例子： 假设有张学生成绩表(tb)如下: Name Subject Result 张三 语文　　74 张三 数学　　83 张三 物理　　93 李四 语文　　74 李四 数学　　84 李四 物理　　94 */ /* 想变成 姓名   &
  • MySQL--主从配置 dcj3sjt126com mysql
    linux下的mysql主从配置： 说明：由于MySQL不同版本之间的(二进制日志)binlog格式可能会不一样，因此最好的搭配组合是Master的MySQL版本和Slave的版本相同或者更低， Master的版本肯定不能高于Slave版本。（版本向下兼容） mysql1  : 192.168.100.1    //master mysq
  • 关于yii 数据库添加新字段之后model类的修改 dcj3sjt126com Model
    rules: array('新字段','safe','on'=>'search') 1、array('新字段', 'safe')//这个如果是要用户输入的话，要加一下， 2、array('新字段', 'numerical'),//如果是数字的话 3、array('新字段', 'length', 'max'=>100),//如果是文本 1、2、3适当的最少要加一条，新字段才会被
  • sublime text3 中文乱码解决 dyy_gusi Sublime Text
    sublime text3中文乱码解决 原因：缺少转换为UTF-8的插件 目的：安装ConvertToUTF8插件包 第一步：安装能自动安装插件的插件，百度“Codecs33”，然后按照步骤可以得到以下一段代码： import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a30980927
  • 概念了解：CGI，FastCGI，PHP-CGI与PHP-FPM geeksun PHP
    CGI CGI全称是“公共网关接口”(Common Gateway Interface)，HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。 CGI可以用任何一种语言编写，只要这种语言具有标准输入、输出和环境变量。如php,perl,tcl等。 FastCGI FastCGI像是一个常驻(long-live)型的CGI，它可以一直执行着，只要激活后，不
  • Git push 报错 "error: failed to push some refs to " 解决 hongtoushizi git
    Git push 报错 "error: failed to push some refs to " . 此问题出现的原因是：由于远程仓库中代码版本与本地不一致冲突导致的。 由于我在第一次git pull --rebase 代码后，准备push的时候，有别人往线上又提交了代码。所以出现此问题。 解决方案： 1： git pull    2：
  • 第四章 Lua模块开发 jinnianshilongnian nginxlua
    在实际开发中，不可能把所有代码写到一个大而全的lua文件中，需要进行分模块开发；而且模块化是高性能Lua应用的关键。使用require第一次导入模块后，所有Nginx 进程全局共享模块的数据和代码，每个Worker进程需要时会得到此模块的一个副本（Copy-On-Write），即模块可以认为是每Worker进程共享而不是每Nginx Server共享；另外注意之前我们使用init_by_lua中初
  • java.lang.reflect.Proxy liyonghui160com
      1.简介   Proxy 提供用于创建动态代理类和实例的静态方法 （1）动态代理类的属性 代理类是公共的、最终的，而不是抽象的 未指定代理类的非限定名称。但是，以字符串 "$Proxy" 开头的类名空间应该为代理类保留 代理类扩展 java.lang.reflect.Proxy 代理类会按同一顺序准确地实现其创建时指定的接口
  • Java中getResourceAsStream的用法 pda158 java
    1.Java中的getResourceAsStream有以下几种： 1. Class.getResourceAsStream(String path) ： path 不以’/'开头时默认是从此类所在的包下取资源，以’/'开头则是从ClassPath根下获取。其只是通过path构造一个绝对路径，最终还是由ClassLoader获取资源。 　　2. Class.getClassLoader.get
  • spring 包官方下载地址（非maven） sinnk spring
    SPRING官方网站改版后，建议都是通过 Maven和Gradle下载，对不使用Maven和Gradle开发项目的，下载就非常麻烦，下给出Spring Framework jar官方直接下载路径:   http://repo.springsource.org/libs-release-local/org/springframework/spring/   s
  • Oracle学习笔记(7) 开发PLSQL子程序和包 vipbooks oraclesql编程
        哈哈，清明节放假回去了一下，真是太好了，回家的感觉真好啊！现在又开始出差之旅了，又好久没有来了，今天继续Oracle的学习！      这是第七章的学习笔记，学习完第六章的动态SQL之后，开始要学习子程序和包的使用了……，希望大家能多给俺一些支持啊！     编程时使用的工具是PLSQL
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他