喵了个咪蛋儿
喵了个咪蛋儿

web前端学习笔记04-CSS颜色、文本、边框、背景

一、CSS颜色表示法

1. 颜色名表示，如：red,blue
2. 16进制数值表示，如：#ff0000红色，这样的也可以简写为#f00，每种颜色取值范围0-9，a-f
3. RGB颜色：红R，绿G，蓝B三个颜色通道的变化 ，参数取值范围0-255
background-color:rgb(200,100,0)
4. RGBA颜色：红R，绿G，蓝B，透明度A(取值范围0-1)
background-color:rgba(200,100,0,0.5)

二、CSS文本设置

【文本常用CSS样式】

关键字 释义 示例
color 设置文字颜色 color:red;
font-size 设置文字大小 font-size:12px;
font-family 设置文字字体 font-family:'微软雅黑';
font-style 设置文字是否斜体 font-style:normal; 、 font-style:italic;
font-weight 设置文字是否加粗 font-weight:normal; 、 font-weight:bold;
line-height 设置文字的行高 line-height:24px;
text-decoration 设置文字下划线 常用于a标签去除下划线 text-decoration:none;
text-indent 设置文字首行缩进 text-indent:24px;
text-align 设置文字水平对齐方式 text-align:center; left(居左) right(居右)

    && 利用行高设置单行文本垂直居中：行高设置为父元素的高度

div{
    /* html: 
当记忆的风吹来时，便漾出无边的心澜
  */
	width: 500px;
	height: 100px;
	background-color: peachpuff;
	/*利用行高设置单行文本垂直居中:行高设置为父元素的高度*/
	line-height: 100px;
}

三、CSS边框设置

【CSS边框常用属性】

关键字 释义
border:宽度 边框样式 颜色 三个参数不分顺序，必须都有
border-top:宽度 边框样式 颜色 单独设置某一边框 top上，bottom下，left左，right右
border-style 边框样式：solid实线，dotted点状线，dashed虚线
border-radius 边框圆角（CSS3）
box-shadow:x轴偏移 y轴偏移 模糊度 扩散程度 颜色 设置阴影（CSS3）

    && 圆角设置： 参数可以为px值或百分数

.item{
	/* html: 
 */
	width: 200PX;
	height: 200PX;
	border: 3px solid green;
	
	/*设置圆角——————————————————*/
	border-radius: 10px;
	/*也可以给2个参数(对角：左上右下/右上左下)*/
	border-radius: 10px 30px;
	/*也可以给4个参数(顺时针：依次为左上/右上/右下/左下)*/
	border-radius: 10px 30px 50px 70px;
	/*利用圆角制作圆形：宽高一致，圆角参数50%*/
	border-radius: 50%;
}

    && 阴影设置： 参数为x轴偏移 y轴偏移 模糊度 扩散程度 颜色 内阴影inset(可选参数)

.item{
	/* html: 
 */
	width: 200PX;
	height: 200PX;
	border: 3px solid green;
	/*设置阴影 参数：x轴偏移 y轴偏移 模糊度 扩散程度 颜色 内阴影（可选）*/
	/*x轴偏移为正则阴影在右侧，为负则在左侧  y轴偏移为正阴影在下方，为负则在上方*/
	box-shadow: 10px 10px 15px 0px gray;
}

四、CSS背景设置

【CSS背景设置常用属性】

关键字 释义
background: 颜色; 设置背景颜色
background-image: url(图片地址); 设置背景图片(关键字可省略image)
background-size: 100% 100%; 设置背景图片大小
background-position: -200px -200px; 设置背景图片指定部分显示（定位）
background-repeat:no-repeat; 设置背景图片是否重复，默认平铺重复

    && 设置图片指定部分显示： background-position，即设置图片的平移坐标：往左/上移动为负值，往右/下移动为正值

.bg1{
	/* html: 
 */
	width: 250PX;
	height: 250PX;
	/*背景设置——————————————————————————*/
	/*设置背景图片*/
	background-image: url(../img/01.jpg);
	/*设置背景图片显示部分 图片的平移坐标：往左/上移动为负值，往右/下移动为正值*/
	background-position: -610px -603px;
}

【注】关于平移坐标的解释：

本节示例代码


<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/c04.css"/>
		<title>CSS颜色、文本字体title>
	head>
	<body>
		<div class="item1">div>
		<p>当记忆的风吹来时，便漾出无边的心澜，念也悄悄，思也无言，让思绪的花在指尖淡淡飘香，心，会莫名的安静与柔软，一任灵魂于温温婉婉中，诉说深深浅浅的美丽。
			当记忆的风吹来时，便漾出无边的心澜，念也悄悄，思也无言，让思绪的花在指尖淡淡飘香，心，会莫名的安静与柔软，一任灵魂于温温婉婉中，诉说深深浅浅的美丽。
			当记忆的风吹来时，便漾出无边的心澜，念也悄悄，思也无言，让思绪的花在指尖淡淡飘香，心，会莫名的安静与柔软，一任灵魂于温温婉婉中，诉说深深浅浅的美丽。			
		p>
		<p>轻握一份懂得，在似水的流年中，轻倚一袭心湖的斑斓，让真情点亮夜的星光，在纯净的音乐里，倾听心灵的纤尘不染。轻握一份懂得，在似水的流年中，轻倚一袭心湖的斑斓，让真情点亮夜的星光，在纯净的音乐里，倾听心灵的纤尘不染。p>
		<div class="item2">
			当记忆的风吹来时，便漾出无边的心澜
		div>
		<a href="https://www.baidu.com">百度a>
		<br>br>	
		<div class="item3">div>
		<br><br/>
		<div class="item4">div>
		<br>br>
		<div class="bg1">div>
		<br>br>
		<div class="bg2">div>
		<br>br>	
	body>
html>

.item1{
	width: 50px;
	height: 50px;
	/*颜色名*/
	/*background-color:red;*/
	
	/*16进制*/
	/*background-color: #00ff00;*/
	
	/*RGB*/
	/*background-color: rgb(200,10,30);*/
	
	/*RGBA*/
	background-color: rgba(200,10,30,0.5);	
}
p{
	color: blueviolet;
	font-size: 20px;
	/*若用户设备上没有所设置的字体，将以默认字体显示*/
	font-family: "楷体";
	font-style: italic;
	font-weight: bold;
	line-height: 24px;	
	text-indent: 40px;
	text-align: center;
}
.item2{
	width: 500px;
	height: 100px;
	background-color: peachpuff;
	/*利用行高设置单行文本垂直居中:行高设置为父元素的高度*/
	line-height: 100px;
}
a{
	/*去除元素下划线*/
	text-decoration: none;
}
.item3{
	/* 
 */
	width: 200PX;
	height: 200PX;
	border: 3px solid green;
	
	/*设置圆角——————————————————*/
	/*border-radius: 10px;*/
	/*也可以给2个参数*/
	/*border-radius: 10px 30px;*/
	/*也可以给4个参数*/
	border-radius: 10px 30px 50px 70px;
	/*利用圆角制作圆形：宽高一致，圆角参数50%*/
	/*border-radius: 50%;*/
}
.item4{
	/* 
 */
	width: 200PX;
	height: 200PX;
	border: 3px solid green;
	/*设置阴影 参数：x轴偏移 y轴偏移 模糊度 扩散程度 颜色*/
	/*x轴偏移为正则阴影在右侧，为负则在左侧  y轴偏移为正阴影在下方，为负则在上方*/
	box-shadow: 10px 10px 15px 0px gray;
}
.bg1{
	/* html: 
 */
	width: 250PX;
	height: 250PX;
	/*背景设置——————————————————————————*/
	/*设置背景颜色*/
	background: lightblue;	
	/*设置背景图片*/
	background-image: url(../img/01.jpg);
	/*设置背景图片大小*/
	/*background-size: 100% 100%;*/	
	/*设置背景图片显示部分 图片的平移坐标：往左/上移动为负值，往右/下移动为正值*/
	background-position: -610px -603px;	
	
}
.bg2{
	width: 250PX;
	height: 250PX;
	border: 5px solid orange;
	background-image: url(../img/03.jpg);
	background-repeat:no-repeat ;
}

你可能感兴趣的:(web前端学习,css,html,html5)

  • Vue.js组件开发-实现全屏手风琴幻灯片切换特效 LCG元 前端vue.js前端javascript
    使用Vue实现全屏手风琴幻灯片切换特效步骤概述创建Vue项目：使用VueCLI创建一个新的Vue项目。设计组件结构：创建一个手风琴幻灯片组件，包含幻灯片项和切换逻辑。实现样式：使用CSS实现全屏和手风琴效果。添加交互逻辑：通过Vue的事件处理实现幻灯片的切换。详细代码1.创建Vue项目安装VueCLI，使用以下命令进行安装：npminstall-g@vue/cli然后创建一个新的Vue项目：vue
  • Javascript基础 2301_79306982 javascript开发语言ecmascript
    1.ID的限制：ID必须唯一：在同一个HTML文档中，每个id属性的值必须是唯一的。id的设计初衷就是为页面上的每个元素提供一个独特的标识符，便于JavaScript精确操作。如果ID重复会发生什么？当有多个元素使用相同的id时，document.getElementById()只会返回第一个匹配的元素，后面的会被忽略。示例：DuplicateIDJavaScript:varduplicateEl
  • Vue.js组件开发-实现图片浮动效果 LCG元 前端vue.js前端javascript
    使用Vue实现图片浮动效果实现思路将使用Vue的单文件组件（.vue）来实现图片浮动效果。主要思路是通过CSS的transform属性结合JavaScript的定时器来改变图片的位置，从而实现浮动效果。代码实现exportdefault{data(){return{//初始化图片在x轴上的偏移量xOffset:0,//初始化图片在y轴上的偏移量yOffset:0,//定时器ID，用于后续清除定时器
  • nodejs 安装node-sass kino的编程笔记 vuenodejsnpmnode-sassvue
    installnode-sass作用检验node-sass是否安装以及是否安装成功安装node-sass配置淘宝镜像安装node-sass的命令作用Sass是一种预处理器脚本语言，可以解释或编译成层叠样式表(CSS)检验node-sass是否安装以及是否安装成功node-sass-v表示已经安装或安装成功表示没有安装或者安装失败安装node-sass配置淘宝镜像设置淘宝镜像的二进制站点setSAS
  • Python 魔法学院 - 第32篇：Python ORM框架 ⭐⭐⭐ 星核日记 《Python魔法学院》python数据库pycharm开发语言windows
    目录引言1.ORM框架概述1.1什么是ORM？比喻：ORM就像一位翻译官1.2ORM的优势2.[SQLAlchemy](https://docs.sqlalchemy.org.cn/en/20/intro.html)2.1SQLAlchemy简介2.2SQLAlchemy的核心组件2.3SQLAlchemy示例2.3.1安装SQLAlchemy2.3.2定义模型2.3.3插入数据2.3.4查询数据
  • XSLT `＜value-of＞` 元素详解 lly202406 开发语言
    XSLT元素详解XSLT（可扩展样式表语言转换）是一种用于将XML文档转换为其他格式（如HTML或纯文本）的语言。在XSLT中，元素是一个非常有用的元素，它允许开发者从XML源文档中提取特定值。本文将详细介绍元素的用法、属性以及在实际应用中的示例。1.元素概述元素是XSLT中用于提取XML源文档中数据的常用元素。它可以将XML源文档中的节点值转换为其他格式，如字符串、数字等。下面是元素的语法：其中
  • 深入探索 HTML5 拖拽效果 API：打造流畅交互体验 山禾女鬼001 html5前端html
    在现代的Web开发中，交互性和用户体验一直是开发者关注的重点。HTML5的拖拽效果API(DragandDropAPI)提供了一种非常直观的方式来让网页元素或文件能够被拖动并放置到页面的指定位置，极大提升了用户的交互体验。本篇文章将深入探讨如何使用HTML5拖拽API来实现拖拽效果，帮助开发者理解并掌握这一强大的工具。一、HTML5拖拽API简介HTML5的拖拽API允许用户通过鼠标或触摸屏等设备
  • React常见面试题（2024最新版） 前端小小王 react.js前端前端框架面试
    创建项目npxcreate-react-appmy-app启动项目npmstart目录结构目录/文件名描述README.md项目的自述文件node_modules/项目依赖包存放目录package.json包管理配置文件，记录项目信息和依赖package-lock.json锁定依赖版本，确保跨环境一致性public/公共资源目录public/index.html主HTML文件，React应用将被引
  • 若依RuoYi框架浅析 基础篇③——Swagger接口文档 | SwaggerConfig、启用和禁用Swagger 小康师兄 若依RuoYi框架浅析Swagger接口文档808080若依
    文章目录一、访问网址二、纠错排查三、SwaggerConfig一、访问网址http://localhost:8080/swagger-ui.html切记要加上端口号8080二、纠错排查我一开始没有加8080，是访问http://localhost/swagger-ui.html然后被重定向都登录界面，我就很纳闷，是因为没有token被拦截了吗。但是代码com.ruoyi.framework.con
  • 【项目实战】Electron最佳实践 本本本添哥 007-大前端技术electronjavascript前端
    一、Electron的入门介绍1.1Electron是什么？Electron由GitHub开发团队创建，最初是为了构建GitHub客户端而设计的。Electron是一个开源的框架，用于构建跨平台桌面应用程序。Electron是一个强大的框架，它可以帮助您使用Web技术构建跨平台桌面应用程序。Electron是一个流行的跨平台框架，可以使用HTML、CSS和JavaScript构建桌面应用程序。1.
  • javascrip基础语法 大道戏 前端前端javascript开发语言
    为什么学习JavaScript?JavaScript是web开发人员必须学习的3门语言中的一门：HTML定义了网页的内容CSS描述了网页的布局JavaScript控制了网页的行为1.JavaScript输出1.1console.log()：用于将信息输出到浏览器控制台，例如console.log("Hello,World!");，可以输出字符串、变量、表达式等。1.2console.error()
  • [利用Python加载和处理网址内容：从Unstructured到Selenium和Playwright] bhawfgrcbtwny pythonselenium开发语言
    引言在现代网页数据分析中，加载和处理来自多种网址的内容是一个常见需求。无论是数据挖掘还是网页内容分析，我们常常需要从多个网页中提取HTML文档。本篇文章将介绍如何利用Python中的Unstructured、Selenium和Playwright库来加载这些网页内容，并将其转换为适合后续处理的文档格式。主要内容UnstructuredURLLoaderUnstructuredURLLoader可以
  • React学习(十)-React中编写样式CSS(styled-components) itclanCoder
    虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文|川川VX-ID:suibichuanji点击文末左下方阅读原文,可看更多内容前言React是一个构建用户界面的js库,从UI=render()这个等式中就很好的映射了这一点,UI的显示取决于等式右边的render函数的返回值.而编写React应用,就是在编写
  • 大学生HTML期末大作业——HTML+CSS+JavaScript美食网站（西餐） 无·糖 Web前端期末大作业html课程设计css大学生javascript美食大作业
    HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目美食网站（西餐）精美响应式含JQuery7页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单
  • 大学生期末大作业|HTML+CSS+JavaScript 登录页面实例：超实用、新手友好、完整源码分享 从零开始：用原生 HTML、CSS 和 JS 打造简洁美观的登录页面（附完整代码） 新手必看：一 南北极之间 前端进阶练手实战htmlcss大学生期末大作业前端html5javascript
    效果图：目录一、新建一个HTML项目二、创建基本结构三、使用CSS美化页面四、添加交互功能五、完整代码六、结语步骤在Web开发中，登录页面是常见且重要的组件。一个设计良好的登录页面可以提升用户体验，并为网站留下良好的第一印象。今天，我们将一起学习如何使用HTML、CSS和JavaScript（不使用任何框架）来构建一个响应式的登录页面，实现基本的前端验证功能。一、新建一个HTML项目首先，创建一个
  • HTML5 技术深度解读：本地存储与地理定位的最佳实践 吴师兄大模型 html5前端html本地存储地理定位localStorageGeolocationAPI
    系列文章目录01-从零开始学HTML：构建网页的基本框架与技巧02-HTML常见文本标签解析：从基础到进阶的全面指南03-HTML从入门到精通：链接与图像标签全解析04-HTML列表标签全解析：无序与有序列表的深度应用05-HTML表格标签全面解析：从基础到高级优化技巧06-HTML表单深度解析：GET和POST提交方法07-HTML表单控件类型大全：文本框、密码框、文件上传全掌握08-前端表单验
  • HTML5 Canvas 与 SVG：让网页图形与动画活跃起来 吴师兄大模型 html5前端htmlCanvasSVG网页图形与动画HTML5
    系列文章目录01-从零开始学HTML：构建网页的基本框架与技巧02-HTML常见文本标签解析：从基础到进阶的全面指南03-HTML从入门到精通：链接与图像标签全解析04-HTML列表标签全解析：无序与有序列表的深度应用05-HTML表格标签全面解析：从基础到高级优化技巧06-HTML表单深度解析：GET和POST提交方法07-HTML表单控件类型大全：文本框、密码框、文件上传全掌握08-前端表单验
  • 前端表单验证终极指南：HTML5 内置验证 + JavaScript 自定义校验 吴师兄大模型 前端html5javascripthtml表单验证内置验证自定义校验
    系列文章目录01-从零开始学HTML：构建网页的基本框架与技巧02-HTML常见文本标签解析：从基础到进阶的全面指南03-HTML从入门到精通：链接与图像标签全解析04-HTML列表标签全解析：无序与有序列表的深度应用05-HTML表格标签全面解析：从基础到高级优化技巧06-HTML表单深度解析：GET和POST提交方法07-HTML表单控件类型大全：文本框、密码框、文件上传全掌握08-前端表单验
  • Vue：前端体系、前后端分离 天宇阿 Vue前端vue.js
    文章目录一、前端核心分析1、概述2、前端知识体系2.1、前端三要素2.2、结构层（HTML）2.3、表现层（CSS）2.4、行为层（JavaScript）2.5、三端统一2.6、后端技术2.7、主流前端框架3、了解前后分离的演变史3.1、后端为主的MVC时代3.2、基于AJAX带来的SPA时代3.3、前端为主的MV*时代3.4、NodeJS带来的全栈时代3.5、总结学习视频来自于：秦疆（遇见狂神说
  • 高光谱数据下载 左手拈花，右手舞剑 3S技术
    1：WashingtonDCMal,IndianPine等https://engineering.purdue.edu/~biehl/MultiSpec/hyperspectral.html2：IndianPines,Salinas,PaviaCentreandUniversity,Cuprite等http://www.ehu.eus/ccwintco/index.php?title=Hypers
  • CSS整体回顾 m0_zj csscss3前端
    一.邂逅CSS和常见的CSS1.1.CSS的编写方式1.2.常见的CSSfont-size/color/width/height/backgroundColor二.文本属性2.1.text-decoration2.2.text-indent2.3.text-align三.字体属性3.1.font-family3.2.font-style3.3.font-weight3.4.font-size3.5
  • Colmap根据相机内外参数重建稀疏模型 失去对象的野指针 colmap计算机视觉
    Colmap根据相机内外参数重建稀疏模型1.创建稀疏模型工作文件夹2.命令行执行稀疏重建2.1提取图像特征点2.2手动导入相机内参2.3特征匹配2.4三角测量官方文档：https://colmap.github.io/faq.html#reconstruct-sparse-dense-model-from-known-camera-poses参考博客：http://www.mamicode.com
  • 【无标题】clientWidth、offsetWidth、scrollWidth与getBoundingClientRect 空之箱大战春日影 前端开发学习前端javascript开发语言
    概要在JavaScript中，我们常常要获取某个HTML元素的尺寸。但是在js中，我们往往能获取好几种尺寸，这几种尺寸的区别是什么呢？本文给出详细解析。clientWidth与clientHeightclientWidth表示某个元素的可见宽度（即元素内容区域的宽度），clientHeight表示某个元素的可见高度（即元素内容区域的宽度）。它的计算规则只包括内容和内边距，不包括边框、滚动条和外边距
  • Highcharts 柱形图，线条图，饼图组合 chengqiuming HighchartsHighcharts
    一代码Highcharts柱形图，线条图，饼图组合$(document).ready(function(){//标题vartitle={text:'组合图'};//X轴varxAxis={categories:['苹果','橘子','梨子','香蕉','李子']};//标签varlabels={items:[{html:'水果消费',style:{left:'50px',top:'18px',co
  • Highcharts 柱形图：深入解析与最佳实践 lsx202406 开发语言
    Highcharts柱形图：深入解析与最佳实践引言Highcharts是一个功能强大的图表库，它允许用户轻松地在网页上创建各种类型的图表。其中，柱形图因其直观的展示方式，在数据分析、业务报告等领域得到了广泛应用。本文将深入解析Highcharts柱形图，包括其基本用法、高级特性以及最佳实践。高charts柱形图的基本用法1.初始化图表首先，需要在HTML文件中引入Highcharts库。以下是一个
  • 【自学笔记】Web前端的重点知识点-持续更新 Long_poem 笔记前端
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Web前端知识点一、HTML基础二、CSS样式三、JavaScript基础四、前端框架与库五、前端工具与构建六、前端性能优化七、响应式设计与适配八、前端安全总结Web前端知识点一、HTML基础常用标签超链接(标签)图片(标签)表格(、、等标签)列表(无序列表、有序列表、定义列表)HTML5新特性语义化标签(、、等)音频视频(、
  • html中取消列表圆点,css列表怎么去掉点？ 李淳风的谜底 html中取消列表圆点
    css列表怎么去掉点？在CSS中，可以通过设置li标签的list-style属性为none将列表前的圆点去掉。下面本篇文章就来给大家介绍一下CSSlist-style属性，希望对大家有所帮助。list-style属性在一个声明中设置所有的列表属性。说明：该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有display为list-item的元素，所以在普通的HTML和XHTML中只能
  • React 和 Vue _使用区别 m0_74823490 vue.jsreact.jsjavascript
    目录一、框架介绍1.Vue2.React?二、框架结构1.创建应用2.框架结构三、使用区别1.单页面组成2.样式3.显示响应式数据4.响应式html标签属性5.控制元素显隐6.条件渲染7.渲染列表react和vue是目前前端比较流行的两大框架，前端程序员应该将两种框架都掌握，本文总结一些基本知识点的使用区别。一、框架介绍1.VueVue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求
  • vscode设置左侧字体大小 超甜小布丁 visualstudio
    1、在vscode安装目录下，找到workbench.desktop.main.css文件mac：/Users/Downloads/VisualStudioCode.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css2、在workbench.desktop.main.css中搜索.monaco-workben
  • CSS标准盒模型与怪异盒模型 DTcode7 HTML网站开发#前端基础入门三大核心之CSSHTMLCSSwebcss3网页开发
    CSS标准盒模型与怪异盒模型基本概念与作用标准盒模型怪异盒模型示例一：比较标准盒模型与怪异盒模型示例二：使用box-sizing属性示例三：响应式布局中的应用示例四：解决布局问题示例五：创建复杂的背景效果实际工作中的使用技巧在CSS布局的世界里，盒模型是构建网页布局的基础。它定义了元素如何在页面上占据空间，以及元素的边距、边框、内边距和内容如何相互作用。本文将深入探讨两种盒模型——标准盒模型（St
  • PHP如何实现二维数组排序？ IT独行者 二维数组PHP排序　
    二维数组在PHP开发中经常遇到，但是他的排序就不如一维数组那样用内置函数来的方便了，（一维数组排序可以参考本站另一篇文章【PHP中数组排序函数详解汇总】）。二维数组的排序需要我们自己写函数处理了，这里UncleToo给大家分享一个PHP二维数组排序的函数： 代码： functionarray_sort($arr,$keys,$type='asc'){ $keysvalue= $new_arr
  • 【Hadoop十七】HDFS HA配置 bit1129 hadoop
    基于Zookeeper的HDFS HA配置主要涉及两个文件,core-site和hdfs-site.xml。   测试环境有三台 hadoop.master hadoop.slave1 hadoop.slave2   hadoop.master包含的组件NameNode, JournalNode, Zookeeper，DFSZKFailoverController
  • 由wsdl生成的java vo类不适合做普通java vo darrenzhu VOwsdlwebservicerpc
    开发java webservice项目时，如果我们通过SOAP协议来输入输出，我们会利用工具从wsdl文件生成webservice的client端类，但是这里面生成的java data model类却不适合做为项目中的普通java vo类来使用，当然有一中情况例外，如果这个自动生成的类里面的properties都是基本数据类型，就没问题，但是如果有集合类，就不行。原因如下： 1)使用了集合如Li
  • JAVA海量数据处理之二（BitMap） 周凡杨 java算法bitmapbitset数据
           路漫漫其修远兮，吾将上下而求索。想要更快，就要深入挖掘 JAVA 基础的数据结构，从来分析出所编写的 JAVA 代码为什么把内存耗尽，思考有什么办法可以节省内存呢？ 啊哈！算法。这里采用了 BitMap 思想。   首先来看一个实验： 指定 VM 参数大小： -Xms256m -Xmx540m
  • java类型与数据库类型 g21121 java
    很多时候我们用hibernate的时候往往并不是十分关心数据库类型和java类型的对应关心，因为大多数hbm文件是自动生成的，但有些时候诸如：数据库设计、没有生成工具、使用原始JDBC、使用mybatis(ibatIS)等等情况，就会手动的去对应数据库与java的数据类型关心，当然比较简单的数据类型即使配置错了也会很快发现问题，但有些数据类型却并不是十分常见，这就给程序员带来了很多麻烦。 &nb
  • Linux命令 510888780 linux命令
    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS / DMI) hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试性读取操作 cat /proc/cpuinfo 显示C
  • java常用JVM参数 墙头上一根草 javajvm参数
    -Xms：初始堆大小，默认为物理内存的1/64(<1GB)；默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时，JVM就会增大堆直到-Xmx的最大限制 -Xmx：最大堆大小，默认(MaxHeapFreeRatio参数可以调整)空余堆内存大于70%时，JVM会减少堆直到 -Xms的最小限制 -Xmn：新生代的内存空间大小，注意：此处的大小是（eden+ 2
  • 我的spring学习笔记9-Spring使用工厂方法实例化Bean的注意点 aijuans Spring 3
    方法一： <bean id="musicBox" class="onlyfun.caterpillar.factory.MusicBoxFactory" factory-method="createMusicBoxStatic"></bean> 方法二：
  • mysql查询性能优化之二 annan211 UNIONmysql查询优化索引优化
    1 union的限制 有时mysql无法将限制条件从外层下推到内层，这使得原本能够限制部分返回结果的条件无法应用到内层 查询的优化上。 如果希望union的各个子句能够根据limit只取部分结果集，或者希望能够先排好序在 合并结果集的话，就需要在union的各个子句中分别使用这些子句。 例如 想将两个子查询结果联合起来，然后再取前20条记录，那么mys
  • 数据的备份与恢复 百合不是茶 oraclesql数据恢复数据备份
     数据的备份与恢复的方式有: 表,方案 ,数据库;     数据的备份: 导出到的常见命令; 参数 说明 USERID 确定执行导出实用程序的用户名和口令 BUFFER 确定导出数据时所使用的缓冲区大小，其大小用字节表示 FILE 指定导出的二进制文
  • 线程组 bijian1013 java多线程threadjava多线程线程组
    有些程序包含了相当数量的线程。这时，如果按照线程的功能将他们分成不同的类别将很有用。        线程组可以用来同时对一组线程进行操作。        创建线程组：ThreadGroup g = new ThreadGroup(groupName);  &nbs
  • top命令找到占用CPU最高的java线程 bijian1013 javalinuxtop
    上次分析系统中占用CPU高的问题，得到一些使用Java自身调试工具的经验，与大家分享。 (1)使用top命令找出占用cpu最高的JAVA进程PID:28174 (2)如下命令找出占用cpu最高的线程 top -Hp 28174 -d 1 -n 1 32694 root 20 0 3249m 2.0g 11m S 2 6.4 3:31.12 java
  • 【持久化框架MyBatis3四】MyBatis3一对一关联查询 bit1129 Mybatis3
      当两个实体具有1对1的对应关系时，可以使用One-To-One的进行映射关联查询   One-To-One示例数据 以学生表Student和地址信息表为例，每个学生都有都有1个唯一的地址(现实中，这种对应关系是不合适的，因为人和地址是多对一的关系)，这里只是演示目的   学生表   CREATE TABLE STUDENTS (
  • C/C++图片或文件的读写 bitcarter 写图片
    先看代码： /*strTmpResult是文件或图片字符串 * filePath文件需要写入的地址或路径 */ int writeFile(std::string &strTmpResult,std::string &filePath) { int i,len = strTmpResult.length(); unsigned cha
  • nginx自定义指定加载配置 ronin47
    进入 /usr/local/nginx/conf/include 目录，创建 nginx.node.conf 文件，在里面输入如下代码： upstream nodejs { server 127.0.0.1:3000; #server 127.0.0.1:3001; keepalive 64; } server { liste
  • java-71-数值的整数次方.实现函数double Power(double base, int exponent)，求base的exponent次方 bylijinnan double
    public class Power { /** *Q71-数值的整数次方 *实现函数double Power(double base, int exponent)，求base的exponent次方。不需要考虑溢出。 */ private static boolean InvalidInput=false; public static void main(
  • Android四大组件的理解 Cb123456 android四大组件的理解
     分享一下，今天在Android开发文档-开发者指南中看到的:                            App components are the essential building blocks of an Android
  • [宇宙与计算]涡旋场计算与拓扑分析 comsci 计算
         怎么阐述我这个理论呢？ 。。。。。。。。。       首先： 宇宙是一个非线性的拓扑结构与涡旋轨道时空的统一体。。。。       我们要在宇宙中寻找到一个适合人类居住的行星，时间非常重要，早一个刻度和晚一个刻度，这颗行星的
  • 同一个Tomcat不同Web应用之间共享会话Session cwqcwqmax9 session
    实现两个WEB之间通过session 共享数据 查看tomcat 关于 HTTP Connector 中有个emptySessionPath 其解释如下： If set to true, all paths for session cookies will be set to /. This can be useful for portlet specification impleme
  • springmvc Spring3 MVC，ajax，乱码 dashuaifu springjquerymvcAjax
      springmvc Spring3 MVC @ResponseBody返回，jquery ajax调用中文乱码问题解决   Spring3.0 MVC @ResponseBody 的作用是把返回值直接写到HTTP response body里。具体实现AnnotationMethodHandlerAdapter类handleResponseBody方法，具体实
  • 搭建WAMP环境 dcj3sjt126com wamp
    这里先解释一下WAMP是什么意思。W:windows，A：Apache，M：MYSQL，P：PHP。也就是说本文说明的是在windows系统下搭建以apache做服务器、MYSQL为数据库的PHP开发环境。      工欲善其事，必须先利其器。因为笔者的系统是WinXP，所以下文指的系统均为此系统。笔者所使用的Apache版本为apache_2.2.11-
  • yii2 使用raw http request dcj3sjt126com http
    Parses a raw HTTP request using yii\helpers\Json::decode()   To enable parsing for JSON requests you can configure yii\web\Request::$parsers using this class: 'request' =&g
  • Quartz-1.8.6 理论部分 eksliang quartz
    转载请出自出处：http://eksliang.iteye.com/blog/2207691 一.概述 基于Quartz-1.8.6进行学习，因为Quartz2.0以后的API发生的非常大的变化，统一采用了build模式进行构建； 什么是quartz?   答：简单的说他是一个开源的java作业调度框架，为在 Java 应用程序中进行作业调度提供了简单却强大的机制。并且还能和Sp
  • 什么是POJO？ gupeng_ie javaPOJO框架Hibernate
    POJO--Plain Old Java Objects(简单的java对象)   POJO是一个简单的、正规Java对象，它不包含业务逻辑处理或持久化逻辑等，也不是JavaBean、EntityBean等，不具有任何特殊角色和不继承或不实现任何其它Java框架的类或接口。   POJO对象有时也被称为Data对象，大量应用于表现现实中的对象。如果项目中使用了Hiber
  • jQuery网站顶部定时折叠广告 ini JavaScripthtmljqueryWebcss
    效果体验：http://hovertree.com/texiao/jquery/4.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网页顶部定时收起广告jQuery特效 - HoverTree<
  • Spring boot内嵌的tomcat启动失败 kane_xie spring boot
    根据这篇guide创建了一个简单的spring boot应用，能运行且成功的访问。但移植到现有项目（基于hbase）中的时候，却报出以下错误：     SEVERE: A child container failed during start java.util.concurrent.ExecutionException: org.apache.catalina.Lif
  • leetcode: sort list michelle_0916 Algorithmlinked listsort
    Sort a linked list in O(n log n) time using constant space complexity. ====analysis======= mergeSort for singly-linked list  ====code=======   /** * Definition for sin
  • nginx的安装与配置,中途遇到问题的解决 qifeifei nginx
    我使用的是ubuntu13.04系统，在安装nginx的时候遇到如下几个问题，然后找思路解决的，nginx 的下载与安装   wget http://nginx.org/download/nginx-1.0.11.tar.gz tar zxvf nginx-1.0.11.tar.gz ./configure make make install   安装的时候出现
  • 用枚举来处理java自定义异常 tcrct javaenumexception
    在系统开发过程中，总少不免要自己处理一些异常信息，然后将异常信息变成友好的提示返回到客户端的这样一个过程，之前都是new一个自定义的异常，当然这个所谓的自定义异常也是继承RuntimeException的，但这样往往会造成异常信息说明不一致的情况，所以就想到了用枚举来解决的办法。 1，先创建一个接口，里面有两个方法，一个是getCode, 一个是getMessage public
  • erlang supervisor分析 wudixiaotie erlang
    当我们给supervisor指定需要创建的子进程的时候，会指定M,F,A,如果是simple_one_for_one的策略的话，启动子进程的方式是supervisor:start_child(SupName, OtherArgs),这种方式可以根据调用者的需求传不同的参数给需要启动的子进程的方法。和最初的参数合并成一个数组，A ++ OtherArgs。那么这个时候就有个问题了，既然参数不一致，那
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他