走馬勿观花
走馬勿观花

【CSS3】flex-basis属性演示

【传送门：阮一峰 - Flex 布局教程：语法篇】

相关文章：
1. 【flex-grow】属性演示
2.【flex-shrink】属性演示
3.【flex-basis】属性演示
4.【flex】属性演示 

<html>
<head>
	<meta charset="utf-8" />
	<title>title>
	<style type="text/css">
		body {
      
			padding: 0;
			margin: 0;
		}
		.bg {
      
			position: absolute;
			min-width: 100%;
			min-height: 100%;
			background-color: rgb(210, 253, 198);
		}
		.center {
      
			width: 80%;
			margin: 0 auto;
		}
		.center .title {
      
			text-align: center;
		}
		/* 规定弹性容器 */
		.flex-container {
      
			display: -webkit-flex;
			display: flex;
		}
		.main-content {
      
			-webkit-flex: 0 1 50%;
			flex: 0 1 50%;
		}
		.main-content>h3 {
      
			text-align: center;
		}
		/* 分割线 */
		.line {
      
			margin: 0 20px;
			border: 1px dashed #aaa;
			-webkit-flex: 0 1 auto;
			flex: 0 1 auto;
		}

		/* 演示的容器和子元素 */
		.demo {
      
			position: relative;
			height: 100px;
			background-color: white;
			border: 2px solid black;
		}
		.demo .demo-item {
      
			width: 25%;
		}
		/* 非弹性元素的高需要定义 */
		.demo.block-container .demo-item {
      
			height: 100%;
			background-color: coral;
		}
		.demo.flex-container .demo-item {
      
			background-color: lightblue;
		}
		/* 文本输出 */
		.demo .output-txt {
      
			position: absolute;
			top: 30px;
			left: 10px;
			font-weight: bold;
			color: purple;
		}

		/* 控件部分 */
		/* 阻止收缩扩展 */
		.control .flex-container:first-child,
		.control .flex-container:last-child {
      
			margin-top: 10px;
		}
		.control .flex-container div,
		.control .flex-container .btn {
      
			padding: 5px;
			font-weight: bold;
			-webkit-flex: 0 1 100%;
			flex: 0 1 100%;
		}
		.control .flex-container div:first-of-type,
		.control .flex-container div:last-of-type {
      
			-webkit-flex: none;
			flex: none;
		}
		.control .flex-container div input[type="range"] {
      
			width: 100%;
			cursor: pointer;
		}
		.control .flex-container .btn {
      
			position: relative;
			overflow: hidden;
			font-size: 1.05em;
			font-weight: normal;
			text-align: center;
			text-decoration: none;
			color: white;
			background-color: rgb(72, 189, 91);
			border: 0 none;
			border-radius: 10px;
			outline: 0 none;
			cursor: pointer;
		}
		.control .flex-container .btn span:after {
      
			display: block;
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 150%;
			height: 150%;
			background-color: rgb(144, 238, 144);
			opacity: 0;
			transition: all 0.5s;
			-webkit-transition: all 0.5s;
		}
		.control .flex-container .btn:active span:after {
      
			width: 0;
			height: 0;
			opacity: 1;
			transition: 0s;
			-webkit-transition: 0s;
		}

		/* 总结部分 */
		.summary {
      
			padding: 10px;
			margin-top: 10px;
			background-color: white;
			border: 2px dashed #aaa;
			border-radius: 14px;
			box-shadow: 8px 8px 6px 0px grey;
		}
		.summary .txt-list {
      
			padding: 15px;
			margin: 0;
			color: white;
			background-color: purple;
			border-radius: inherit;
		}
		.summary .txt-list dd {
      
			line-height: 1.4;
			margin-bottom: 10px;
		}
		.summary .txt-list dd:last-child {
      
			margin-bottom: 0;
		}
	style>
head>
<body>
	<div class="bg">
		<div class="center">
			<h2 class="title">flex-basis：规定弹性子元素的初始宽度h2>
			
			<div class="flex-container">
				
				<div class="main-content">
					<h3>block盒子h3>
					
					<div class="demo block-container">
						
						<div class="demo-item">正常子元素div>
						
						<div class="output-txt">
							<div>width: <output class="width">25%output>;div>
							<div>flex-basis: <output class="flex-basis">autooutput>;div>
						div>
					div>
					
					<div class="control">
						<div class="flex-container">
							<div>width: 0%div>
							<div><input type="range" min="0" max="150" value="25" />div>
							<div>150%;div>
						div>
						<div class="flex-container">
							<div>flex-basis: 0%div>
							<div><input type="range" min="0" max="150" value="25" />div>
							<div>150%;div>
						div>
						<div class="flex-container">
							<button class="btn"><span>【重置】 flex-basis: auto;span>button>
						div>
					div>
				div>
				
				<div class="line">div>
				
				<div class="main-content">
					<h3>flex盒子h3>
					
					<div class="demo flex-container">
						
						<div class="demo-item">弹性子元素div>
						
						<div class="output-txt">
							<div>width: <output class="width">25%output>;div>
							<div>flex-basis: <output class="flex-basis">autooutput>;div>
						div>
					div>
					
					<div class="control">
						<div class="flex-container">
							<div>width: 0%div>
							<div><input type="range" min="0" max="150" value="25" />div>
							<div>150%;div>
						div>
						<div class="flex-container">
							<div>flex-basis: 0%div>
							<div><input type="range" min="0" max="150" value="25" />div>
							<div>150%;div>
						div>
						<div class="flex-container">
							<button class="btn"><span>【重置】 flex-basis: auto;span>button>
						div>
					div>
				div>
			div>
			<div class="summary">
				<dl class="txt-list">
					<dt>总结：dt>
					<dd>1. "flex-basis" 会覆盖弹性子元素的 "width"，优先级："flex-basis" > "width";dd>
					<dd>2. "flex-basis" 仅对弹性子元素有效，非弹性子元素无任何效果【容器为 "display: flex"、"display: inline-flex"】;dd>
					<dd>3. 若弹性子元素同时设置 "width"、"flex-basis（不为 auto）" 时，则以 "flex-basis" 的值作为初始宽度，且修改 "width" 无效;dd>
					<dd>4. 弹性子元素内 "width" 被 "flex-basis" 覆盖时，通过设置 "flex-basis: auto;"，即可修改 "width"【但，"flex-basis" 不香吗？】;dd>
					<dd>5. 【特性】在单独设置的情况下，"flex-basis" 比 "width" 更具灵活性："flex-basis: 0;" 由内容撑开，"flex-basis: 999%;" 不会撑破容器;dd>
					<dd>6. 【区别】在 "flex-basis: auto;" 的情况下，弹性子元素不设置 "width" 时，由内容撑开，而设置 "width: 0" 则令宽度为 0;dd>
					<dd>7. 【区别】默认情况下，普通盒子会被 width > 100% 的子元素撑破，而弹性盒子则不会被撑破;dd>
				dl>
			div>
		div>
	div>
	<script type="text/javascript">
		;(function(doc) {
      
			// 获取元素
			var item = doc.querySelectorAll('.demo .demo-item'),
				output_block = doc.querySelectorAll('.main-content:first-of-type output'),
				output_flex = doc.querySelectorAll('.main-content:last-of-type output'),
				// 组合选择 input 和 button
				input_block = doc.querySelectorAll('.main-content:first-child .control input[type="range"], .main-content:first-child .control button.btn'),
				input_flex = doc.querySelectorAll('.main-content:last-child .control input[type="range"], .main-content:last-child .control button.btn');

			// 创建并填充成二维数组，当然也可以直接获取所有滑键集进行遍历
			var input = new Array();
				input.push(input_block);
				input.push(input_flex);
				// input.push(reset);

			// 文本输出的二维数组
			var output = new Array();
				output.push(output_block);
				output.push(output_flex);

			/* - - - - - - - - - - - - - - - - - - - - - - - - IE兼容 - - - - - - - - - - - - - - - - - - - - - - - - */
			// 检测浏览器是否为 IE
			var IEVersion = (function() {
      
				// 取得浏览器的userAgent字符串
				var userAgent = navigator.userAgent;

				//判断是否IE<11浏览器
				var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;

				//判断是否IE的Edge浏览器
				var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; 
				var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;

				if (isIE) {
      
					var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
					reIE.test(userAgent);
					var fIEVersion = parseFloat(RegExp["$1"]);
					if(fIEVersion == 7) {
      
						// 不是很准确，IE5 也是返回 7
						return 7;
					} else if (fIEVersion == 8) {
      
						return 8;
					} else if (fIEVersion == 9) {
      
						return 9;
					} else if (fIEVersion == 10) {
      
						return 10;
					} else {
      
						// IE版本<=7
						return 6;
					}
				} else if (isEdge) {
      
					// edge
					return 'edge';
				} else if (isIE11) {
      
					// IE11
					return 11;
				} else {
      
					// 不是ie浏览器
					return -1;
				}
			})();

			// 监听句柄兼容 IE
			function addHandler(element, type, handler){
      
				if(element.addEventListener){
      
					element.addEventListener(type, handler, false);
				}else if(element.attachEvent){
      
					element.attachEvent('on' + type, handler);
				}else{
      
					element['on' + type] = handler;
				}
			}

			/* - - - - - - - - - - - - - - - - - - - - - - - - 项目 - - - - - - - - - - - - - - - - - - - - - - - - */
			// 修改样式
			function chgStyle(ele, type, txt) {
      
				// IE不支持"input"事件，改用"change"事件
				if (IEVersion !== -1 && type === 'input') {
      
					type = 'change';
				}
				for (var i = 0; i < ele.length; i++) {
      
					for (var j = 0; j < ele[i].length; j++) {
      
						// 避免污染，创建函数域
						(function(type) {
      
							// 筛选除 button
							if (ele[i][j].tagName.toLowerCase() === 'button') {
      
								// 该变量会污染上层（括号外）的变量
								type = 'click';
							}
							// console.log(type);
							addHandler(ele[i][j], type, function(i, j) {
      
								return function() {
      
									if (j === 0) {
      	// width
										txt[i][j].value = ele[i][j].value + '%';
										item[i].style.width =  ele[i][j].value + '%';
										if (ele[i][0].getAttribute('data-disable') === null) {
      
											// flex-basis: auto; 表示跟随 width
											ele[i][1].value = ele[i][j].value;
										}
									} else if (j === 1) {
      	// flex-basis
										txt[i][j].value = ele[i][j].value + '%';
										item[i].style.flexBasis =  ele[i][j].value + '%';
										item[i].style.webkitFlexBasis =  ele[i][j].value + '%';
										// 禁止滑键跟随
										ele[i][0].setAttribute('data-disable', 'on');
									} else {
      	// reset-btn
										txt[i][1].value = 'auto';
										item[i].style.flexBasis =  'auto';
										item[i].style.webkitFlexBasis =  'auto';
										ele[i][1].value = ele[i][0].value;
										ele[i][0].removeAttribute('data-disable');
									}
								}
							}(i, j));
						})(type);
					}
				}
			}

			/*
				// 方法二：创建一个新变量，作判断赋值
				function chgStyle(ele, type, txt) {
					// IE不支持"input"事件，改用"change"事件
					if (IEVersion !== -1 && type === 'input') {
						type = 'change';
					}
					for (var i = 0; i < ele.length; i++) {
						for (var j = 0; j < ele[i].length; j++) {

							// 创建变量，通过判断赋值
							var tp = '';
							// 筛选除 button
							if (ele[i][j].tagName.toLowerCase() === 'button') {
								tp = 'click';	// 主要原因在于该值会污染括号外的值
							}  else {
								if (IEVersion !== -1 && type === 'input') {
									tp = 'change';
								} else {
									tp = type;
								}
							}

							console.log(tp);

							addHandler(ele[i][j], tp, function(i, j) {
								return function() {
									if (j === 0) {	// width
										txt[i][j].value = ele[i][j].value + '%';
										item[i].style.width =  ele[i][j].value + '%';
										if (ele[i][0].getAttribute('data-disable') === null) {
											// flex-basis: auto; 表示跟随 width
											ele[i][1].value = ele[i][j].value;
										}
									} else if (j === 1) {	// flex-basis
										txt[i][j].value = ele[i][j].value + '%';
										item[i].style.flexBasis =  ele[i][j].value + '%';
										item[i].style.webkitFlexBasis =  ele[i][j].value + '%';
										// 禁止滑键跟随
										ele[i][0].setAttribute('data-disable', 'on');
									} else {	// reset-btn
										txt[i][1].value = 'auto';
										item[i].style.flexBasis =  'auto';
										item[i].style.webkitFlexBasis =  'auto';
										ele[i][1].value = ele[i][0].value;
										ele[i][0].removeAttribute('data-disable');
									}
								}
							}(i, j));
						}
					}
				}
			*/

			/*
				// 方法三：不传入 type，直接内部声明变量，再作判断，注意调用时要修改实参
				function chgStyle(ele, txt) {
					for (var i = 0; i < ele.length; i++) {
						for (var j = 0; j < ele[i].length; j++) {
							// 或者，不传入参数，直接内部声明变量，再作判断
							var type = '';
							// 筛选除 button
							if (ele[i][j].tagName.toLowerCase() === 'button') {
								type = 'click';	// 主要原因在于该值会污染括号外的值
							}  else {
								if (IEVersion !== -1 && type === 'input') {
									type = 'change';
								} else {
									type = 'input';
								}
							}

							console.log(type);

							addHandler(ele[i][j], type, function(i, j) {
								return function() {
									if (j === 0) {	// width
										txt[i][j].value = ele[i][j].value + '%';
										item[i].style.width =  ele[i][j].value + '%';
										if (ele[i][0].getAttribute('data-disable') === null) {
											// flex-basis: auto; 表示跟随 width
											ele[i][1].value = ele[i][j].value;
										}
									} else if (j === 1) {	// flex-basis
										txt[i][j].value = ele[i][j].value + '%';
										item[i].style.flexBasis =  ele[i][j].value + '%';
										item[i].style.webkitFlexBasis =  ele[i][j].value + '%';
										// 禁止滑键跟随
										ele[i][0].setAttribute('data-disable', 'on');
									} else {	// reset-btn
										txt[i][1].value = 'auto';
										item[i].style.flexBasis =  'auto';
										item[i].style.webkitFlexBasis =  'auto';
										ele[i][1].value = ele[i][0].value;
										ele[i][0].removeAttribute('data-disable');
									}
								}
							}(i, j));
						}
					}
				}
			*/
		
			// etc...

			function bindEvent() {
      
				chgStyle(input, 'input', output);
			}

			function init() {
      
				bindEvent();
			}

			init();

		})(document);
	script>
body>
html>

你可能感兴趣的:(CSS3,#,盒子模型练习)

  • 30天风格练习-DAY2 黄希夷
    Day2（重义）在一个周日/一周的最后一天，我来到位于市中心/市区繁华地带的一家购物中心/商场，中心内人很多/熙熙攘攘。我注意到/看见一个独行/孤身一人的年轻女孩/，留着一头引人注目/长过腰际的头发，上身穿一件暗红色/比正红色更深的衣服/穿在身体上的东西。走下扶梯的时候，她摔倒了/跌向地面，在她正要站起来/让身体离开地面的时候，过长/超过一般人长度的头发被支撑身体/躯干的手掌压/按在下面，她赶紧用
  • 高级编程--XML+socket练习题 masa010 java开发语言
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 日常演播练习0822 开阳春天
    日常演播练习0822一、绕口令练习司小四和史小世，四月十四日十四时四十上集市，司小四买了四十四斤四两西红柿，史小世买了十四斤四两细蚕丝。司小四要拿四十四斤四两西红柿换史小世十四斤四两细蚕丝。史小世十四斤四两细蚕丝不换司小四四十四斤四两西红柿。司小四说我四十四斤四两西红柿可以增加营养防近视，史小世说我十四斤四两细蚕丝可以织绸织缎又抽丝。二、文本练习狗熊是动物街有名的美食家，它吃得多所以长得胖，它能吃
  • C语言代码练习（第十九天） 小小框架 C语言C语言重点练习c语言
    今日练习：52、有一个已经排好序的数组，要求输入一个数后，按原来排序的规律将它插入数组中53、输出"魔方阵"。所谓魔方阵是指它的每一行，每一列和对角线之和均相等。54、找出一个二维数组中的鞍点，即该位置上的元素在该行上最大、在该列上最小。也可能没有鞍点。有一个已经排好序的数组，要求输入一个数后，按原来排序的规律将它插入数组中运行代码intmain(){intarr[11]={1,3,9,12,15
  • Python入门之Lesson2:Python基础语法 小熊同学哦 Python入门课程python开发语言算法数据结构青少年编程
    目录前言一.介绍1.变量和数据类型2.常见运算符3.输入输出4.条件语句5.循环结构二.练习三.总结前言欢迎来到《Python入门》系列博客的第二课。在上一课中，我们了解了Python的安装及运行环境的配置。在这一课中，我们将深入学习Python的基础语法，这是编写Python代码的根基。通过本节内容的学习，你将掌握变量、数据类型、运算符、输入输出、条件语句等Python编程的基础知识。一.介绍1
  • 入门MySQL——查询语法练习 K_un
    前言：前面几篇文章为大家介绍了DML以及DDL语句的使用方法，本篇文章将主要讲述常用的查询语法。其实MySQL官网给出了多个示例数据库供大家实用查询，下面我们以最常用的员工示例数据库为准，详细介绍各自常用的查询语法。1.员工示例数据库导入官方文档员工示例数据库介绍及下载链接：https://dev.mysql.com/doc/employee/en/employees-installation.h
  • 原画的线稿要怎么画？线稿这个大难题该怎么破？ 川川_9d43
    想要画好线稿需要具备什么的条件？一、手需要一个灵活且生动的小手手~~能够自如地操控手上的物体，达到随心所欲的地步，这样高深的操纵方式需要很高的熟练度！比如：上厕所，吃饭，洗脸，手指打结等。二、握笔的姿势握笔的姿势很重要，决定了画的线条的流畅度，小编个人感觉应该没有绝对的正确姿势，就是自己的习惯，随心就好，不盲目的学习别人的握笔的姿势，就像以前的一个典故一样——邯郸学步。三、排线练习排线的时候一定要
  • 我的一个小心愿，减肥20斤，有人一起吗 张晓晓ZXX
    我现在体重141斤，163cm，想减到120以内，不想吃减肥药，不喝奶昔，也不想买健身卡，就是希望通过一些运动的aPP进行训练和适当的节食，有人一起的吗？3月12号，我73公斤，现在70.9公斤，是通过咕咚app训练来的，但一个人太孤单，有一起的吗？我想知道除了小时候坚持一个月练习写字帖把字写好了，还能做什么锻炼一下自己的毅力，我也想知道100天之后，我能不能也达到理想的体重。接下来100天，愿意
  • 【算法练习】IDEA集成leetcode插件实现快速刷 2401_84102892 2024年程序员学习算法intellij-idealeetcode
    ============点击右侧边leetcode->设置->配置地址、用户名、密码、存放目录、文件模板用户名要登录后在账号信息里看模板代码1.codefilename!velocityTool.camelC
  • #跟宇彤老师成为声音万人迷#第十季打卡营第二十一天# 穆希乐
    今天是这季打卡营的最后一天，今天的打卡是用心诵读“初心”！很有意义的俩个字，但函给了每一位来练声的伙伴们最初的想法，让我也想起了我来练声的初心:就是想让自己的声音听起来有亲和力。从每日的基本功练习、到喜怒哀乐的绕口令在到各种的配音秀，最后俩天是用心的朗读等等，也是各种的第一次，想来有的伙伴们也和我一样是各种的第一次，这些第一次带着新鲜、刺激、更多的是激动与感恩！激动的是伙伴们在愉快的环境中每天开心
  • 2021.11.18 星初呀
    2021.11.18＃小狗钱钱金金先生和吉亚的对话，金先生说，我总感觉你和大多数小孩很不一样。吉雅说我思考的问题不一样。很惊讶于一个小孩这样的归纳能力。我们思考问题方式是怎样的?自从跟着小狗群练习，思考问题方式也在跟着转变，关注自己做到的，写成功日记，关注微小事情，思考问题消耗我们的注意力。注意力放在哪里，哪里就会开花结果。所以我们琢磨的东西会塑造我们的大脑，建立稳固的价值观。今天听了定投课堂一节
  • C语言---程序设计练习题目及学习方法1 Wanyu677 C语言c语言学习方法算法
    学习方法要多练习在这些题目中的代码和题目自己动手去敲练习也是在熟悉语法，写代码第一步就是熟悉语法练习是在锻炼编程思维，把实际问题转换为代码的能力学会画图画图去理解内存，理解指针这些比较难懂的知识画图可以更好的理清思路辅助理解，强化理解学会调试借助调试，更好的理解代码和感知代码找出代码中的bug和程序逻辑（1）自增自减运算符inta=5,b,c,i=10;b=a++;c=++b;printf("a=
  • Vicky的ScalersTalk第六轮新概念朗读持续力训练Day73 20210411 Vicky_b9de
    练习材料：ModerncavemenPart-3ˈmɒdənˈkeɪvmənpɑːt-3Theyplungedintothelake,andafterloadingtheirgearonaninflatablerubberdinghy,letthecurrentcarrythemtotheotherside.Toprotectthemselvesfromtheicywater,theyhadtow
  • 329王不林【1期3班】刻意练习day15 王不林不林
    【分析】1、描写对象是母亲，她已年迈，她常做的事，是摇纺车。2、开头运用听觉，引发联想以及比喻，并为下文写母亲摇纺车做了铺垫。3、写院子和露水，表明了地点和时间。4、描写人时，运用了很多动词，比如摇、垫、屈、压，使摇纺车这个动作更加形象。5、运用了比喻，说母亲摇纺车的这个声音是乡曲。表达了思乡，思念母亲。【刻意练习】如今，我一听见“喵~喵~”的声音，脑子里便浮现出一只小猫，软软的，像那织围巾的毛线
  • 正念内观练习20220622 蓝空静云
    夏一、善念&感谢女儿一边说想明天放学后去看看要去北京手术的闺蜜，又一边念叨明天闺蜜要出发，家里得收拾行李什么的，是不是去了会添乱，真是个心思细腻又善解人意的姑娘。上周表姐回了趟老家，妈妈托给捎回来一些鹅蛋、鸡蛋还有自己腌的咸鸭蛋，拿回来一直放在楼下，今天拿上来收拾整理放入冰箱保鲜慢慢吃。妈妈家不养家畜，这些都是邻居们自家养的送给妈妈，妈妈又特意捎给女儿，妈妈总说自家养的比外面卖的好，好的总是会留给
  • 南山演讲口才|教你如何克服演讲中的不良心理 韦先
    演讲者在演讲中必须解除思想负担和心理压力，及时调节自己的心境和情绪，树立起必胜的自信心。1．缺乏信心的心理演讲者看到自己的某些弱点，如普通话说得不太标准、言语技巧训练不足等，常有这样的疑问：“我能行吗？”这个疑问本身会促使演讲者夸大自己的弱点，从而对演讲丧失信心。其实，缺点人人都有，在千百双眼睛注视你时，需要的是扬长避短，掩盖缺点几乎不可能。因此，演讲时应告诉自己：“我刻苦练习了，只要发挥出应有水
  • 2021.10.25-2021.10.31一周计划 从21年9月11日起
    一、事业1、工作：100封开发信。2、学习开发新客户知识补充30min/天*3天二、心灵1、晨间日记+一日总结。2、读经：15分钟/天*5天3、10min/天*5天观照自己的内心。三、成长1、趁早学习：3个主题并行。美貌、赚钱、饮食—-并落地实践2、纸质书：30分钟/天*6天《刻意练习》3、一周总结和计划4、时间管理群人员的学习跟进四、社交西湖一圈行五、亲子1、带小朋友出去走走2、制作卡片，实行积
  • 你会读书吗 阿杰说澄长
    一上学那会，朋友W报名了一个快速阅读培训课。出于好奇，我拿着他的培训资料进行了一个月的自我训练，并一度深陷其中。材料主要是无规则的符号以及横跨A4纸的连线，通过视线快速移动，扩大视幅来提升信息的接受速度，又通过图案和符号锻炼大脑的视觉记忆，摆脱音读习惯。那一个月，我沉溺其中，每天用很多的时间练习。一个月后，我确实做到了快速阅读，以句群接受信息，一目一行。只是速度虽快，却读过无痕，该知道的全忘记了。
  • 丹青医姐：吐字归音 丹青医姐
    对于朗读者来说，吐字清晰，珠圆玉润，听起来温柔而坚定，也格外暖心。这就要靠唇舌力度和正确的吐字归音。唇舌力度可以靠口部操和绕口令来练习。而正确的吐字归音应该是叼住字头，字腹立起，字尾弱收，枣核形的吐字流程。字腹立起，这个知道，将口腔打开。而字头如何叼，字尾如何弱收，一直不明白，以致于怀疑自己的声音不能达到温柔而坚定。当我听了一个音频，老师示范了一下，才知道，字头应该有力饱满，字尾变弱收音，听起来字
  • 20220226号今日份（6） 张雅苑Momo
    考虑以下必备行程安排：1作息规律2三餐规律3早茶下午茶4晨练运动5阅读笔记6挚爱亲朋联络20220226号今日份快乐是有哪一些呢？1：视频号直播的持续今天已经是第221/190天啦今天主讲人在分享事上练的能力，事上见2：持续吉他练习今天已经第25天啦3：今天持续带动某人整理屋子，要加油哦，要持续哦今天的过程持续比较轻松愉快4：今天老佛爷入院的第四天，上阵父子兵，期待他们仨早起凯旋归来如何成为自己喜
  • 超过晚上9点不打卡和点评 别有余味
    一开营宇彤老师就说到：点评导师们，为了让大家积极练习，你们能及时点评，每天晚上9点前打完卡，写不完作业的，点评官就不点评了。原因:声音学习，不同于演讲不同于写作，可以深夜耕耘，“深耕”。声音就得早早练，如果半夜练习，哪能放的开。邻居会同意吗？家人会同意吗？为了家庭，邻居和谐，深夜不练声。给大家养成好习惯在坚持星球第二期声音训练营打卡第5天，宇彤老师上午又在群里抛出要一个问题：“参加写作，演讲学习，
  • 每日一画vol.015｜马克笔画过程「阴阳师★一目连」 曾同学的读写画
    先放完成图图片发自App朋友心心念念却没有抽到的SSR辅助卡…（具体是什么我也不懂）所以想让我帮他画一个，于是就开始画这个。阴阳师的原画都还长得挺好看的，复杂程度中等不算是特别难，但是人物配色什么的都非常的好看，推荐大家可以用来练习。接下来分享一下绘画过程。图片发自App首先还是草稿。大体确定人物的形态和背后那条龙的位置。这种复杂的临摹图，我没有把草稿画得太过详细。因为后期细化的线稿是用原图做参照
  • 财富自由之路读书笔记2 Elaine_a963
    继续财富自由读书笔记，今天就第十-二十三章进行归纳总结思考。这本书可以说是边学边练的武功秘籍。秘籍一：注意力。先从认知上刷新，先前谈到价值的重要性及单位价值提升的必要性。这里就引出了：“注意力”是在任何地方“挖掘”价值的最基本工具。那么，要自如运用注意力，就得练习。这里李老师给的无他，就是基本功训练扎实-坐享。秘籍二：活在未来。再一次颠覆认知，大众的思维是活在当下，而这里指引我们要活在未来。用正确
  • 增长黑客和最小可复制的内核 爱思考的糖
    五段-增长黑客的三大步骤生活就像逆水行舟，加入你不能加速，现实中最好的情况，你也就处在一种原地打转的状况。增长，就像一辆车里的加速器。围棋爱好者，水平一直没有进步的原因。是因为没有找到提高下棋水平的增长模式有三个办法可以提高：做死活题，练习做关键决策的能力；打谱，复盘经典案例；找AI陪练。增长黑客的三个实战步骤：第一步，假设：建立最小闭环。从笨办法开始，不怕犯错，代价并不高，你可以勇敢尝试。想知道
  • 觉察日记：教练技术没有让我外王 九型观心临在践行
    1、主题是什么？团队散了2、事件是什么？三阶学会教练技术之后，回到生活中我开始给同事们做教练，帮助他们清晰自己，同时也是练习我自己的水平。效果挺好的，清晰了自己，但是看到了自己不喜欢现在的工作同时，也选择为了自己的愿景去努力，然后就离开了团队，奔梦想去了。虽然人走了，但是我们之间的关系更深入了，这一点我还是挺开心的。不过随着团队里的人越来越少，工作压力陡然而升。自己有点害怕，不知道如何面对未来的海
  • 21天|生如夏花组合《蔡康永的说话之道》 summer_8f83
    【day12】今日阅读《蔡康永的说话之道》p1-p30这本书在前几年读过，当时没有留下深刻的印象，记忆里就是一个影视名人趁红出的一本书。前几天看到一位老铁推荐这本书，又找出来读一读，没想到读了以后跟以前相比有了很深刻的感悟和认同。会说话坚持太重要了，我觉得这本书叫跟《非暴力沟通》有异曲同工之处。“良言一句三冬暖”，“一样话百样说”所以，说话时候技巧的，是可以练习的。作者提示我们：每天我们说那么多话
  • 算法笔试-编程练习-好题-05 Glen 997 大厂校招-编程集训算法动态规划双指针
    【题目类型：动规+双指针】题目内容有N个基站采用链式组网，按照从左到右编码为1到N编号。已知定义“业务”概念为三元组(基站起始编号，基站结束编号，利润)，意味着需要占据基站起始编号到基站结束编号的所有基站，打通信号流，可以获得对应利润。现在外部存在多个“业务"需求待接纳，但基站使用具有排他性，也就是说一旦某一个业务占据某个基站，其他业务不可以再使用此基站。那么接纳哪些业务需求，可以使得利润最大化?
  • 用内心励志故事传递力量！扫雷英雄战士杜富国播音员上线啦。 斧惜山人
    杜富国在执行扫雷任务时，失去了手和眼睛，但他没有自暴自弃，他还有梦想，要用嘴去，用声音，用故事传递正能量。他经过康复治疗，坚持练习吐字发声，成为了一名播音员。“播音员杜富国”系列节目上线啦。用声音传递力量！把扫雷故事讲给更多的人听，让更多的人了解扫雷战士。杜家四兄妹，在哥哥杜富国的垂范表率下，演绎着什么是家国大义，什么叫“大疫当前有大义，小家当中有大爱”。妹妹杜富佳作为护士，两次请战前往抗疫前线，
  • ztree异步加载 3213213333332132 JavaScriptAjaxjsonWebztree
    相信新手用ztree的时候,对异步加载会有些困惑，我开始的时候也是看了API花了些时间才搞定了异步加载，在这里分享给大家。 我后台代码生成的是json格式的数据，数据大家按各自的需求生成，这里只给出前端的代码。 设置setting，这里只关注async属性的配置 var setting = { //异步加载配置
  • thirft rpc 具体调用流程 BlueSkator 中间件rpcthrift
    Thrift调用过程中，Thrift客户端和服务器之间主要用到传输层类、协议层类和处理类三个主要的核心类，这三个类的相互协作共同完成rpc的整个调用过程。在调用过程中将按照以下顺序进行协同工作：         （1）     将客户端程序调用的函数名和参数传递给协议层（TProtocol），协议
  • 异或运算推导, 交换数据 dcj3sjt126com PHP异或^
    /* * 5 0101 * 9 1010 * * 5 ^ 5 * 0101 * 0101 * ----- * 0000 * 得出第一个规律: 相同的数进行异或, 结果是0 * * 9 ^ 5 ^ 6 * 1010 * 0101 * ---- * 1111 * * 1111 * 0110 * ---- * 1001
  • 事件源对象 周华华 JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • MySql配置及相关命令 g21121 mysql
            MySQL安装完毕后我们需要对它进行一些设置及性能优化，主要包括字符集设置，启动设置，连接优化，表优化，分区优化等等。           一 修改MySQL密码及用户      
  • [简单]poi删除excel 2007超链接 53873039oycg Excel
          采用解析sheet.xml方式删除超链接，缺点是要打开文件2次,代码如下:      public void removeExcel2007AllHyperLink(String filePath) throws Exception { OPCPackage ocPkg = OPCPac
  • Struts2添加 open flash chart 云端月影
    准备以下开源项目： 1. Struts 2.1.6 2. Open Flash Chart 2 Version 2 Lug Wyrm Charmer (28th, July 2009) 3. jofc2，这东西不知道是没做好还是什么意思，好像和ofc2不怎么匹配，最好下源码，有什么问题直接改。 4. log4j 用eclipse新建动态网站，取名OFC2Demo，将Struts2 l
  • spring包详解 aijuans spring
    下载的spring包中文件及各种包众多，在项目中往往只有部分是我们必须的，如果不清楚什么时候需要什么包的话，看看下面就知道了。 aspectj目录下是在Spring框架下使用aspectj的源代码和测试程序文件。Aspectj是java最早的提供AOP的应用框架。 dist 目录下是Spring 的发布包，关于发布包下面会详细进行说明。 docs&nb
  • 网站推广之seo概念 antonyup_2006 算法Web应用服务器搜索引擎Google
       持续开发一年多的b2c网站终于在08年10月23日上线了。作为开发人员的我在修改bug的同时，准备了解下网站的推广分析策略。     所谓网站推广，目的在于让尽可能多的潜在用户了解并访问网站，通过网站获得有关产品和服务等信息，为最终形成购买决策提供支持。     网站推广策略有很多，seo，email，adv
  • 单例模式,sql注入,序列 百合不是茶 单例模式序列sql注入预编译
      序列在前面写过有关的博客,也有过总结,但是今天在做一个JDBC操作数据库的相关内容时 需要使用序列创建一个自增长的字段  居然不会了,所以将序列写在本篇的前面    1,序列是一个保存数据连续的增长的一种方式; 序列的创建; CREATE SEQUENCE seq_pro 2 INCREMENT BY 1 -- 每次加几个 3
  • Mockito单元测试实例 bijian1013 单元测试mockito
    Mockito单元测试实例： public class SettingServiceTest { private List<PersonDTO> personList = new ArrayList<PersonDTO>(); @InjectMocks private SettingPojoService settin
  • 精通Oracle10编程SQL(9)使用游标 bijian1013 oracle数据库plsql
    /* *使用游标 */ --显示游标 --在显式游标中使用FETCH...INTO语句 DECLARE CURSOR emp_cursor is select ename,sal from emp where deptno=1; v_ename emp.ename%TYPE; v_sal emp.sal%TYPE; begin ope
  • 【Java语言】动态代理 bit1129 java语言
      JDK接口动态代理 JDK自带的动态代理通过动态的根据接口生成字节码(实现接口的一个具体类)的方式，为接口的实现类提供代理。被代理的对象和代理对象通过InvocationHandler建立关联   package com.tom; import com.tom.model.User; import com.tom.service.IUserService;
  • Java通信之URL通信基础 白糖_ javajdkwebservice网络协议ITeye
    java对网络通信以及提供了比较全面的jdk支持，java.net包能让程序员直接在程序中实现网络通信。 在技术日新月异的现在，我们能通过很多方式实现数据通信，比如webservice、url通信、socket通信等等，今天简单介绍下URL通信。 学习准备：建议首先学习java的IO基础知识   URL是统一资源定位器的简写，URL可以访问Internet和www，可以通过url
  • 博弈Java讲义 - Java线程同步 (1) boyitech java多线程同步锁
      在并发编程中经常会碰到多个执行线程共享资源的问题。例如多个线程同时读写文件，共用数据库连接，全局的计数器等。如果不处理好多线程之间的同步问题很容易引起状态不一致或者其他的错误。    同步不仅可以阻止一个线程看到对象处于不一致的状态，它还可以保证进入同步方法或者块的每个线程，都看到由同一锁保护的之前所有的修改结果。处理同步的关键就是要正确的识别临界条件（cri
  • java-给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。 bylijinnan java
    public class DeleteExtraSpace { /** * 题目：给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。 * 方法1.用已有的String类的trim和replaceAll方法 * 方法2.全部用正则表达式，这个我不熟 * 方法3.“重新发明轮子”，从头遍历一次 */ public static v
  • An error has occurred.See the log file错误解决！ Kai_Ge MyEclipse
    今天早上打开MyEclipse时，自动关闭！弹出An error has occurred.See the log file错误提示！ 很郁闷昨天启动和关闭还好着！！！打开几次依然报此错误，确定不是眼花了！ 打开日志文件！找到当日错误文件内容： --------------------------------------------------------------------------
  • [矿业与工业]修建一个空间矿床开采站要多少钱? comsci
           地球上的钛金属矿藏已经接近枯竭...........        我们在冥王星的一颗卫星上面发现一些具有开采价值的矿床.....        那么,现在要编制一个预算,提交给财政部门..
  • 解析Google Map Routes dai_lm google api
    为了获得从A点到B点的路劲，经常会使用Google提供的API，例如 [url] http://maps.googleapis.com/maps/api/directions/json?origin=40.7144,-74.0060&destination=47.6063,-122.3204&sensor=false [/url] 从返回的结果上，大致可以了解应该怎么走，但
  • SQL还有多少“理所应当”？ datamachine sql
    转贴存档，原帖地址：http://blog.chinaunix.net/uid-29242841-id-3968998.html、http://blog.chinaunix.net/uid-29242841-id-3971046.html！ ------------------------------------华丽的分割线--------------------------------
  • Yii使用Ajax验证时，如何设置某些字段不需要验证 dcj3sjt126com Ajaxyii
    经常像你注册页面,你可能非常希望只需要Ajax去验证用户名和Email,而不需要使用Ajax再去验证密码,默认如果你使用Yii 内置的ajax验证Form,例如: $form=$this->beginWidget('CActiveForm', array(        'id'=>'usuario-form',&
  • 使用git同步网站代码 dcj3sjt126com crontabgit
    转自:http://ued.ctrip.com/blog/?p=3646?tn=gongxinjun.com   管理一网站，最开始使用的虚拟空间，采用提供商支持的ftp上传网站文件，后换用vps，vps可以自己搭建ftp的，但是懒得搞，直接使用scp传输文件到服务器，现在需要更新文件到服务器，使用scp真的很烦。发现本人就职的公司，采用的git+rsync的方式来管理、同步代码，遂
  • sql基本操作 蕃薯耀 sqlsql基本操作sql常用操作
    sql基本操作 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:30:33 星期一     &
  • Spring4+Hibernate4+Atomikos3.3多数据源事务管理 hanqunfeng Hibernate4
    Spring3+后不再对JTOM提供支持，所以可以改用Atomikos管理多数据源事务。Spring2.5+Hibernate3+JTOM参考：http://hanqunfeng.iteye.com/blog/1554251Atomikos官网网站：http://www.atomikos.com/   一.pom.xml <dependency> <
  • jquery中两个值得注意的方法one()和trigger()方法 jackyrong trigger
      在jquery中，有两个值得注意但容易忽视的方法，分别是one()方法和trigger()方法,这是从国内作者<<jquery权威指南》一书中看到不错的介绍 1） one方法     one方法的功能是让所选定的元素绑定一个仅触发一次的处理函数，格式为    one(type,${data},fn) &nb
  • 拿工资不仅仅是让你写代码的 lampcy 工作面试咨询
    这是我对团队每个新进员工说的第一件事情。这句话的意思是，我并不关心你是如何快速完成任务的，哪怕代码很差，只要它像救生艇通气门一样管用就行。这句话也是我最喜欢的座右铭之一。 这个说法其实很合理：我们的工作是思考客户提出的问题，然后制定解决方案。思考第一，代码第二，公司请我们的最终目的不是写代码，而是想出解决方案。 话粗理不粗。 付你薪水不是让你来思考的，也不是让你来写代码的，你的目的是交付产品
  • 架构师之对象操作----------对象的效率复制和判断是否全为空 nannan408 架构师
    1.前言。   如题。 2.代码。 (1)对象的复制，比spring的beanCopier在大并发下效率要高，利用net.sf.cglib.beans.BeanCopier Src src=new Src(); BeanCopier beanCopier = BeanCopier.create(Src.class, Des.class, false);
  • ajax 被缓存的解决方案 Rainbow702 JavaScriptjqueryAjaxcache缓存
    使用jquery的ajax来发送请求进行局部刷新画面，各位可能都做过。 今天碰到一个奇怪的现象，就是，同一个ajax请求，在chrome中，不论发送多少次，都可以发送至服务器端，而不会被缓存。但是，换成在IE下的时候，发现，同一个ajax请求，会发生被缓存的情况，只有第一次才会被发送至服务器端，之后的不会再被发送。郁闷。 解决方法如下： ① 直接使用 JQuery提供的 “cache”参数，
  • 修改date.toLocaleString()的警告 tntxia String
      我们在写程序的时候，经常要查看时间，所以我们经常会用到date.toLocaleString()，但是date.toLocaleString()是一个过时 的API，代替的方法如下：   package com.tntxia.htmlmaker.util; import java.text.SimpleDateFormat; import java.util.
  • 项目完成后的小总结 xiaomiya js总结项目
    项目完成了，突然想做个总结但是有点无从下手了。 做之前对于客户端给的接口很模式。然而定义好了格式要求就如此的愉快了。 先说说项目主要实现的功能吧 1，按键精灵 2，获取行情数据 3，各种input输入条件判断 4，发送数据（有json格式和string格式） 5，获取预警条件列表和预警结果列表， 6，排序， 7，预警结果分页获取 8，导出文件（excel，text等） 9，修
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他