是发财不是旺财
是发财不是旺财

字节跳动青训营--前端day2

文章目录

  • 前言
  • 一、css
    • 1. css的组成
    • 2. css三种使用方式
    • 3.css的工作方式
  • 二、 css选择器Selector
    • 1. 选择元素的方式
    • 2. 伪类（pseudo-classes）
      • 2.1 状态伪类
      • 2.1 结构伪类
    • 3.通过组合选择元素
      • 3.1 直接组合
      • 3.2 元素组合的拓展
    • 4. 选择器的特异度（Specificity）
    • 5. 样式覆盖
    • 6. 样式继承
      • 6.1 显式继承：
      • 6.2 初始值
    • 7. css求值过程
  • 三、css文档流（NormalFlow）
    • 1. css行级 & 块级
    • 2. diaplay 属性
    • 3. 行级排版上下文
      • 3.1 IFC 内的排版规则：
    • 4. 块级排版上下文
      • 4.1会创建一个BFC的容器
      • 4.2 BFC内的排版规则
  • 四、布局（Layout）
    • 1.布局相关技术
    • 2.常规盒模型
      • 2.1 width
      • 2.2 heigth
      • 2.3 padding
      • 2.4 boeder
      • 2.5 margin
    • 3. Flex Box
      • 3.1 他可以控制盒子的：
      • 3.2 Flexibility
    • 4. Grid
    • 5. float
    • 6. position属性
      • 6.1 position：relative
      • 6.2 position：absolute
  • 五、颜色
    • 1. RGB
    • 2. HSL
    • 3. 透明度

前言

仅以此文章记录学习历程

一、css

Cascading Style Sheets（用来定义页面元素的样式）

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

1. css的组成

字节跳动青训营--前端day2_第1张图片

2. css三种使用方式

通常建议时用外链和嵌入式（主要是样式分离）
字节跳动青训营--前端day2_第2张图片

3.css的工作方式

字节跳动青训营--前端day2_第3张图片

二、 css选择器Selector

作用：找出页面中的元素，以便给他们设置样式

1. 选择元素的方式

  • 按照标签名（h1，div，p…）、类名class（.）或者id（#）
  • 按照属性
  • 按照DOM树中的位置

字节跳动青训营--前端day2_第4张图片
利用通配符匹配选择
字节跳动青训营--前端day2_第5张图片

2. 伪类（pseudo-classes）

定义：伪类是添加到选择器的关键字，用于指定所选元素的特殊状态

两种伪类类型：

  • 状态伪类
  • 结构性伪类

2.1 状态伪类

<style>
/*默认状态*/
a:link{
    color:black;
}
/*点击后状态*/
a:visited {
    color:gray;
}
/*鼠标悬浮状态*/
a:hover{
    color: red;
}
/*输入框边框高亮样式*/
:focus{
    outline: 2px solid orange;
}
</style>
<body>
<a href="http://baidu.com">百度</a>
<label>
  <input type="text">
</label>

2.1 结构伪类

<style>
/*默认状态*/
li{
    list-style-position: inside;
    border-bottom: 1px solid;
    padding: .5em;
}
/*选中第一个*/
li:first-child{
    color: #ff99cc;
}
/*选中最后一个*/
li:last-child{
    border-bottom: none;
}
</style>
<body>
<ol>
  <li>泰坦尼克号</li>
  <li>星球大战</li>
  <li>阿凡达</li>
  <li>复仇者联盟</li>
  <li>速度与激情8</li>
</ol>
</body>

字节跳动青训营--前端day2_第6张图片

3.通过组合选择元素

3.1 直接组合

<style>
/*默认状态*/
.error {
    color: red;
}
/*通过类名和标签组合*/
input.error {
    border-color: red;
}
</style>
<body>
<label>
  用户名
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>
</body>

字节跳动青训营--前端day2_第7张图片

3.2 元素组合的拓展

字节跳动青训营--前端day2_第8张图片

4. 选择器的特异度（Specificity）

字节跳动青训营--前端day2_第9张图片

5. 样式覆盖

字节跳动青训营--前端day2_第10张图片

6. 样式继承

不可继承属性：width，hiegth等
可继承属性：color，font-size等

字节跳动青训营--前端day2_第11张图片

6.1 显式继承：

通过通配符 * 和 inherit 关键字使不可继承元素能够继承

inherit的定义和用法：

  • inherit 关键字指定一个属性应从父元素继承它的值
  • inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性

字节跳动青训营--前端day2_第12张图片

6.2 初始值

CSS中，每个属性都有一个初始值

  • background-color 的初始值为 transparent
  • margin-left 的初始值为 0

可以使用initial 关键字显式重置为初始值

  • background-color: initial

7. css求值过程

字节跳动青训营--前端day2_第13张图片

三、css文档流（NormalFlow）

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之内 (in-flow)
  • 常规流中的盒子，在某种排版上下文中参与布局

1. css行级 & 块级

Block Level Box Inline Level Box
不和其它盒子并列摆放 和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性 盒模型中的width、height不适用
块级元素 行级元素
生成块级盒子 生成行级盒子；内容分散在多个行盒(line box) 中
body、article、div、main、section、h1-6、p、ul、li等 span、em: strong、cite、code 等
display: block display: inline

2. diaplay 属性

block inline inline - block none
块级盒子 行级盒子 行内块级盒子；本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行 排版时完全被忽略

3. 行级排版上下文

  • Inline Formatting Context (IFC)
  • 只包含行级盒子的容器会创建一个IFC

3.1 IFC 内的排版规则：

  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align 决定一行内盒子的水平对齐
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动(float)元素

4. 块级排版上下文

Block Formatting Context (BFC)

4.1会创建一个BFC的容器

  • 根元素
  • 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow 不是 visible 的块盒
  • display: flow-root;

4.2 BFC内的排版规则

  • 盒子从上到下摆放
  • 垂直 margin 合并
  • BFA内盒子的 margin 不会与外面的合并
  • BFC 不会和浮动元素重叠

四、布局（Layout）

作用：确定内容的大小和位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

1.布局相关技术

常规流也称为文档流
字节跳动青训营--前端day2_第14张图片

2.常规盒模型

字节跳动青训营--前端day2_第15张图片

2.1 width

  • 指定 content box 宽度
  • 取值为长度、百分数、auto
  • auto 由浏览器根据其它属性确定
  • 百分数相对于容器的 content box 宽度

2.2 heigth

  • 指定 content box 宽度
  • 取值为长度、百分数、auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的 content box 高度
  • 容器有指定的高度时，百分数才生效

2.3 padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

padding定义的几种方式

  1. padding：10px（四个边内边距均为10px）
  2. padding：10px 20px（上下内边距为10px，左右内边距为20px）
  3. padding：10px 20px 30px 40px（内边距分别为上10px 右20px 下30px 左40px）

2.4 boeder

字节跳动青训营--前端day2_第16张图片

2.5 margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

边距塌陷：
当有两个盒子存在，并且都有边距时，会取两者中最大的一个而不是相加，如：
a下边距为100px，b上边距为120px 他两者的间距为120px

3. Flex Box

一种新的排版上下文

3.1 他可以控制盒子的：

  • 摆放的流向( ↑ ↓ ← → )
  • 摆放顺序
  • 盒子宽度和高度水平和垂直方向的对齐
  • 是否允许折行

3.2 Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
  • flex-grow 有剩余空间时的伸展能力
  • lex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

字节跳动青训营--前端day2_第17张图片

4. Grid

  • display：grid使元素生成一个块级的Grid容器

  • display: grid 使元素生成一个块级的 Grid 容器
    使用grid-template 相关属性将容器划分为网格

  • 设置每一个子项占哪些行/列

5. float

  • 通过改变子元素的float：left/right值来让元素布局，需要时可以在子元素上加上width
  • 当子元素浮动之后会造成父元素塌陷的情况，需要在父元素上加上clearfix：after来清除浮动

6. position属性

static relative absolute fied stick
默认值，非定位元素 相对自身原本位置偏移，不脱离文档流 绝对定位，相对非 static 祖先元素定位 相对于视口绝对定位 一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）

6.1 position：relative

字节跳动青训营--前端day2_第18张图片

6.2 position：absolute

字节跳动青训营--前端day2_第19张图片

五、颜色

1. RGB

初始值都为0，最大值则为255
即：rgb（000,000,000）–> rgb(255,255,255)

字节跳动青训营--前端day2_第20张图片

2. HSL

场景：当需要把一个颜色变亮或者变暗时，可以通过调整Lightness实现
字节跳动青训营--前端day2_第21张图片
字节跳动青训营--前端day2_第22张图片

3. 透明度

字节跳动青训营--前端day2_第23张图片

你可能感兴趣的:(字节跳动青训营--前端,前端,javascript,css,字节跳动,字节跳动青训营)

  • 3/31总结 静心第一
    今日总结：1.上午体验课以及反馈2.p1专注力上课3.情绪精品营上课4.燕子营队辅营以及前台值班5.活动室带孩子接待带到访今日反思：1.合理安排体力2.对于准客户记得跟进3.不要放过每一次成交的机会（这个精品营转发有点失败，后期需调整）今日感受：1.为了效果，后期课程一定想方设法布置家庭，给予一个好的支持系统2.上到下午的课程感觉特别特别的累3.晚上在做辅营一个孩子大声叫喊，后来单独出去沟通，其实
  • 被隔离的日子（五）@三七会写作营 三七会萍海临风
    从隔离的初期，我们三人都不适应，彼此说话都还火药味十足。后随着时间的推移，到现在，我们仨人能够心平气和，幽默地对待彼此。看来，时间可真是个好东西，不仅能见证一个人的心性，还能看清自己的需求、他人的本质。今天晚上，孩子跑到厨房，告诉我她给人捐款了。我纳闷，不是给河南捐过款了么。当时，我还落后于她捐的呢。这次又捐给谁？看到我一脸狐疑，孩子说，还记得初四给她补课的那个男老师么？当让记得，当时，就因为是男
  • android 自定义曲线图,Android自定义View——贝赛尔曲线 weixin_39767513 android自定义曲线图
    个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化
  • 浇灌根部 山静幽兰
    “浇灌根部。”对，浇灌根部。张学青点醒了我。无论是我自己，还是我学生，都，正需要浇灌。正因为虚度了那么多岁月，不曾懂得浇灌自己，我这棵树才长得如此缓慢，四十多岁才长成今天这个样子。好在我现在的学生还小，犹如一棵棵小芽，浇灌正是时候。是的，要浇就浇根部。我的根，在课堂。根在课堂，就认认真真读书，读有“盐”的书，长智的书。以前也常看那些抚慰灵魂的“心灵鸡汤”，但时间长了觉得发腻，对我的语文教学也帮不了
  • 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss
    PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
  • 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers
    ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
  • 虚拟 DOM 的优缺点有哪些 咕噜签名分发 前端javascript开发语言
    虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
  • #D174-读书会作业-《财务自由之路》3 白洲笔记
    最近沉迷于写作营，一直就没时间去弄读书会的作业，书的第二遍也就看了个开头，趁着日更的时间，赶紧把作业做了，这次是15到21课。【1.印象最深刻的部分】(本周所读内容中印象最深刻的部分)*活在未来，最正确的方法是什么？用正确的方法做正确的事情，判断什么是正确的？逻辑。学会思考。"作对事情"永远比“把事情作对“重要的多。”长远思考，耐心验证，小心总结提炼“证明自己正确并不是学习的任务和目标，时刻成长，
  • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
    P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
  • “播下种子，亲近梦想”北京研学营日记Day2 贝壳Bella
    到目前为止，没有收到同学们想家的反馈，应该没有孩子哭，从门外听到的也是一片安静，估计一个个都进入了梦想。从6:30至9:00回到酒店，的确有些辛苦。有些孩子坚持得很好，有些在下午五点离开科技馆时已经疲惫不堪，嚷嚷着回酒店。于是，餐后在车上立了一个规矩，明天在长城上喊累不能超过三次，因为这也是会传染的。图片发自App从科技馆步行至鸟巢，在等红绿灯时居然就有同学蹲下了。有些孩子一上车睡觉，养好精神，路
  • 如何成为思维的高手？ 明安包装闫慧玲
    六项精进训练营Day2复盘20210112湖北荆州学习靠氛围，成长靠圈子1.关于金钱认知金句：1.当今世界，非钱不行2.有钱能使鬼推磨3.金钱是万恶之本4.时间就是金钱5.金钱不是万能的，但是没有钱是万万不能的6.谈钱伤感情，谈感情伤钱道德系统→好人→美德→回流利益系统→好好生活天下熙熙皆为利来，天下攘攘皆为利往出自西汉著名史学家、文学家司马迁《史记》的第一百二十九章“货殖列传”。这句话意思是说天
  • 绘本讲师训练营【27期】1/21阅读——《绘本之力》 Miya儿童情商绘本讲师
    27020-林玉霞图片发自App拿到这本书，就被封面所吸引。在一片广阔的树林里，高高低低的树，各种动物，在树林草地的中间，一位父亲陪着一位孩子在读着绘本。让人感觉充满了爱、宁静、和谐和拥有了整个世界。我想这就是绘本能够带给人类的境界吧！是的，接下来书中就提到了“绘本实是神奇的东西。”神奇之处有：1、0-100岁都能从中获得乐趣。2、好绘本看过一次后，能让人印象深刻，留存心底。3、好绘本跨越了文化的
  • Python dict字符串转json对象，小数精度丢失问题 朝如青丝 暮成雪 jsonpython
    一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
  • 拼多多旗下返利app是什么,拼多多自己的返利软件用哪个? 氧惠爱高省
    在电商领域，拼多多以其独特的团购模式和低价优惠吸引了大量消费者。为了进一步满足用户对于省钱购物的需求，拼多多也推出了自己的返利APP，为用户带来更多的实惠。氧惠APP是与以往完全不同的抖客+淘客app！2024全新模式，我的直推也会放到你下面。主打：带货高补贴，深受各位带货团队长喜爱（训练营导师每天出单带货几万单）。注册即可享受高补贴+0撸+捡漏等带货新体验。送万元推广大礼包，教你如何1年做到百万
  • java实体中返回前端的double类型四舍五入（格式化） 婲落ヽ紅顏誶 java
    根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
  • Django forms组件 在飞行-米龙 Djangodjangopython后端
    【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
  • 女人之死（一） 写悦
    无戒学堂IP营打卡15天，1708字，累计24069。（10.1日更第一天）江心挺着大肚皮，正在堂姐家沙发上休息。因为自己工作在一个偏远的县城，临近生产，决定在堂姐家住着，等到肚子有了生娃的动静，再去医院。堂姐在老家城区居住，城区的医疗条件好些，毕竟江心也是接近30岁了，还没有生第一胎。电话音乐响起来，是幺叔的电话，电话是传来幺叔心急如焚的声音，这在平时是不会有的。因为幺叔一向是一个自己过高兴了就
  • Web前端Html的表单 任家伟 前端html
    表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
  • Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程） 王佳斌 +Thinkphpmysql前端数据库
    前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
  • javascript 日期转换为时间戳，时间戳转换为日期的函数 cdcdhj javascript学习日记javascript开发语言ecmascript
    日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-
  • react native 总结 一切顺势而行 reactnativereact.jsjavascript
    reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
  • COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript开发语言ecmascript
    Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform
  • JSON与AJAX：网页交互的利器 入冉心 jsonajax前端
    在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
  • 程序员开发技术整理 laizhixue 学习前端框架
    前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
  • 【前端学习——js篇】7.函数缓存 笔下无竹墨下有鱼 前端学习前端学习javascript
    具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
  • 牛郎织女罗曼史 潮汐_d5d4
    牛郎织女是我国四大民间传说之一，牛郎织女的爱情故事家喻户晓，对他们的真挚感情热情讴歌。那么牛郎和织女是怎么走到一起的呢？单身阶段北斗九星牛郎织女起源于天文，诗经中出现了银河和织女、牵牛星宿，但尚未形成传说故事，还没有后来的情节，这个时候牛郎和织女还是单身。河南郑州青台遗址--陶罐北斗九星天文遗迹，说明5000多年前先民就对天文进行了细致的观察，具备了一定的天文知识，并将观察的结果应用到生活场景中。
  • 时间管理训练营第六期作业：通过excell表格记录，你有什么体会？ 三味淑屋
    作业没有记录就没有发生。记录，你才能够在时光的隧道里发现许多光，看到更多希望！作业1、你专注在哪里，你就会在哪里出成果。这三天的时间盘点，虽然今天还没结束，但是基本上都是按照平时的安排来进行。记录的过程中，会看到自己的时间花在哪。今年在个人成长的维度上，会看到这一块时间相对别的板块比较多，在娱乐休闲与朋友关系上的时间比较少，需要提醒自己要在时间上再做一些分配，让自己的工作和生活更平衡些。当然，这个
  • javascript的数据类型及转换 田小田txt
    一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa
  • Websocket服务监听收发消息 beiback Java服务器问题websocket网络协议网络
    目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
  • Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题Java服务器运维netty
    目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
  • ViewController添加button按钮解析。（翻译） 张亚雄 c
    <div class="it610-blog-content-contain" style="font-size: 14px"></div>//  ViewController.m //  Reservation software // //  Created by 张亚雄 on 15/6/2.
  • mongoDB 简单的增删改查 开窍的石头 mongodb
       在上一篇文章中我们已经讲了mongodb怎么安装和数据库/表的创建。在这里我们讲mongoDB的数据库操作       在mongo中对于不存在的表当你用db.表名 他会自动统计 下边用到的user是表明，db代表的是数据库       添加(insert):
  • log4j配置 0624chenhong log4j
    1) 新建java项目 2) 导入jar包，项目右击，properties—java build path—libraries—Add External jar，加入log4j.jar包。 3) 新建一个类com.hand.Log4jTest package com.hand; import org.apache.log4j.Logger; public class
  • 多点触摸(图片缩放为例) 不懂事的小屁孩 多点触摸
    多点触摸的事件跟单点是大同小异的，上个图片缩放的代码，供大家参考一下 import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener
  • 有关浏览器窗口宽度高度几个值的解析 换个号韩国红果果 JavaScripthtml
    1 元素的 offsetWidth 包括border padding  content  整体的宽度。 clientWidth  只包括内容区 padding 不包括border。 clientLeft =  offsetWidth -clientWidth  即这个元素border的值 offsetLeft  若无已定位的包裹元素
  • 数据库产品巡礼：IBM DB2概览 蓝儿唯美 db2
    IBM DB2是一个支持了NoSQL功能的关系数据库管理系统，其包含了对XML，图像存储和Java脚本对象表示（JSON）的支持。DB2可被各种类型的企 业使用，它提供了一个数据平台，同时支持事务和分析操作，通过提供持续的数据流来保持事务工作流和分析操作的高效性。 DB2支持的操作系统 DB2可应用于以下三个主要的平台:   工作站，DB2可在Linus、Unix、Windo
  • java笔记5 a-john java
    控制执行流程： 1，true和false    利用条件表达式的真或假来决定执行路径。例：（a==b）。它利用条件操作符“==”来判断a值是否等于b值，返回true或false。java不允许我们将一个数字作为布尔值使用，虽然这在C和C++里是允许的。如果想在布尔测试中使用一个非布尔值，那么首先必须用一个条件表达式将其转化成布尔值，例如if(a!=0)。 2，if-els
  • Web开发常用手册汇总 aijuans PHP
    一门技术，如果没有好的参考手册指导,很难普及大众。这其实就是为什么很多技术，非常好，却得不到普遍运用的原因。 正如我们学习一门技术，过程大概是这个样子： ①我们日常工作中，遇到了问题，困难。寻找解决方案，即寻找新的技术； ②为什么要学习这门技术？这门技术是不是很好的解决了我们遇到的难题，困惑。这个问题，非常重要，我们不是为了学习技术而学习技术，而是为了更好的处理我们遇到的问题，才需要学习新的
  • 今天帮助人解决的一个sql问题 asialee sql
                今天有个人问了一个问题，如下： type     AD      value          A  
  • 意图对象传递数据 百合不是茶 android意图IntentBundle对象数据的传递
    学习意图将数据传递给目标活动; 初学者需要好好研究的       1,将下面的代码添加到main.xml中    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/
  • oracle查询锁表解锁语句 bijian1013 oracleobjectsessionkill
    一.查询锁定的表 如下语句，都可以查询锁定的表 语句一： select a.sid, a.serial#, p.spid, c.object_name, b.session_id, b.oracle_username, b.os_user_name from v$process p, v$s
  • mac osx 10.10 下安装 mysql 5.6 二进制文件［tar.gz］ 征客丶 mysqlosx
    场景：在 mac osx 10.10 下安装 mysql 5.6 的二进制文件。 环境：mac osx 10.10、mysql 5.6 的二进制文件 步骤：[所有目录请从根“/”目录开始取，以免层级弄错导致找不到目录] 1、下载 mysql 5.6 的二进制文件，下载目录下面称之为 mysql5.6SourceDir； 下载地址：http://dev.mysql.com/downl
  • 分布式系统与框架 bit1129 分布式
    RPC框架 Dubbo 什么是Dubbo   Dubbo是一个分布式服务框架，致力于提供高性能和透明化的RPC远程服务调用方案，以及SOA服务治理方案。其核心部分包含:    远程通讯: 提供对多种基于长连接的NIO框架抽象封装，包括多种线程模型，序列化，以及“请求-响应”模式的信息交换方式。    集群容错: 提供基于接
  • 那些令人蛋痛的专业术语 白糖_ springWebSSOIOC
    spring 【控制反转(IOC)/依赖注入(DI)】： 由容器控制程序之间的关系，而非传统实现中，由程序代码直接操控。这也就是所谓“控制反转”的概念所在：控制权由应用代码中转到了外部容器，控制权的转移，是所谓反转。 简单的说：对象的创建又容器(比如spring容器)来执行，程序里不直接new对象。 Web 【单点登录(SSO)】：SSO的定义是在多个应用系统中，用户
  • 《给大忙人看的java8》摘抄 braveCS java8
    函数式接口：只包含一个抽象方法的接口 lambda表达式：是一段可以传递的代码       你最好将一个lambda表达式想象成一个函数，而不是一个对象，并记住它可以被转换为一个函数式接口。 事实上，函数式接口的转换是你在Java中使用lambda表达式能做的唯一一件事。   方法引用：又是要传递给其他代码的操作已经有实现的方法了，这时可以使
  • 编程之美-计算字符串的相似度 bylijinnan java算法编程之美
    public class StringDistance { /** * 编程之美 计算字符串的相似度 * 我们定义一套操作方法来把两个不相同的字符串变得相同，具体的操作方法为： * 1.修改一个字符（如把“a”替换为“b”）; * 2.增加一个字符（如把“abdd”变为“aebdd”）; * 3.删除一个字符（如把“travelling”变为“trav
  • 上传、下载压缩图片 chengxuyuancsdn 下载
    /** * * @param uploadImage --本地路径(tomacat路径) * @param serverDir --服务器路径 * @param imageType --文件或图片类型 * 此方法可以上传文件或图片.txt,.jpg,.gif等 */ public void upload(String uploadImage,Str
  • bellman-ford(贝尔曼-福特)算法 comsci 算法F#
    Bellman-Ford算法(根据发明者 Richard Bellman 和 Lester Ford 命名)是求解单源最短路径问题的一种算法。单源点的最短路径问题是指：给定一个加权有向图G和源点s，对于图G中的任意一点v，求从s到v的最短路径。有时候这种算法也被称为 Moore-Bellman-Ford 算法，因为 Edward F. Moore zu 也为这个算法的发展做出了贡献。 与迪科
  • oracle ASM中ASM_POWER_LIMIT参数 daizj ASMoracleASM_POWER_LIMIT磁盘平衡
    ASM_POWER_LIMIT 该初始化参数用于指定ASM例程平衡磁盘所用的最大权值，其数值范围为0~11，默认值为1。该初始化参数是动态参数，可以使用ALTER  SESSION或ALTER  SYSTEM命令进行修改。示例如下： SQL>ALTER  SESSION  SET   Asm_power_limit=2;
  • 高级排序:快速排序 dieslrae 快速排序
    public void quickSort(int[] array){ this.quickSort(array, 0, array.length - 1); } public void quickSort(int[] array,int left,int right){ if(right - left <= 0
  • C语言学习六指针_何谓变量的地址 一个指针变量到底占几个字节 dcj3sjt126com C语言
    # include <stdio.h> int main(void) { /* 1、一个变量的地址只用第一个字节表示 2、虽然他只使用了第一个字节表示，但是他本身指针变量类型就可以确定出他指向的指针变量占几个字节了 3、他都只存了第一个字节地址，为什么只需要存一个字节的地址，却占了4个字节，虽然只有一个字节， 但是这些字节比较多，所以编号就比较大，
  • phpize使用方法 dcj3sjt126com PHP
    phpize是用来扩展php扩展模块的，通过phpize可以建立php的外挂模块,下面介绍一个它的使用方法,需要的朋友可以参考下 安装（fastcgi模式）的时候，常常有这样一句命令： 代码如下: /usr/local/webserver/php/bin/phpize   一、phpize是干嘛的？ phpize是什么？ phpize是用来扩展php扩展模块的，通过phpi
  • Java虚拟机学习 - 对象引用强度 shuizhaosi888 JAVA虚拟机
    本文原文链接：http://blog.csdn.net/java2000_wl/article/details/8090276 转载请注明出处！ 无论是通过计数算法判断对象的引用数量，还是通过根搜索算法判断对象引用链是否可达，判定对象是否存活都与“引用”相关。 引用主要分为 ：强引用(Strong Reference)、软引用(Soft Reference)、弱引用(Wea
  • .NET Framework 3.5 Service Pack 1（完整软件包）下载地址 happyqing .net下载framework
      Microsoft .NET Framework 3.5 Service Pack 1（完整软件包）  http://www.microsoft.com/zh-cn/download/details.aspx?id=25150 Microsoft .NET Framework 3.5 Service Pack 1 是一个累积更新，包含很多基于 .NET Framewo
  • JAVA定时器的使用 jingjing0907 javatimer线程定时器
    1、在应用开发中，经常需要一些周期性的操作，比如每5分钟执行某一操作等。 对于这样的操作最方便、高效的实现方式就是使用java.util.Timer工具类。 privatejava.util.Timer timer; timer = newTimer(true); timer.schedule( newjava.util.TimerTask() { public void run()
  • Webbench 流浪鱼 webbench
    首页下载地址 http://home.tiscali.cz/~cz210552/webbench.html Webbench是知名的网站压力测试工具，它是由Lionbridge公司（http://www.lionbridge.com）开发。 Webbench能测试处在相同硬件上，不同服务的性能以及不同硬件上同一个服务的运行状况。webbench的标准测试可以向我们展示服务器的两项内容：每秒钟相
  • 第11章 动画效果（中） onestopweb 动画
    index.html <!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/
  • windows下制作bat启动脚本. sanyecao2314 javacmd脚本bat
    java -classpath C:\dwjj\commons-dbcp.jar;C:\dwjj\commons-pool.jar;C:\dwjj\log4j-1.2.16.jar;C:\dwjj\poi-3.9-20121203.jar;C:\dwjj\sqljdbc4.jar;C:\dwjj\voucherimp.jar com.citsamex.core.startup.MainStart
  • Java进行RSA加解密的例子 tomcat_oracle java
    加密是保证数据安全的手段之一。加密是将纯文本数据转换为难以理解的密文；解密是将密文转换回纯文本。 　　数据的加解密属于密码学的范畴。通常，加密和解密都需要使用一些秘密信息，这些秘密信息叫做密钥，将纯文本转为密文或者转回的时候都要用到这些密钥。 　　对称加密指的是发送者和接收者共用同一个密钥的加解密方法。 　　非对称加密(又称公钥加密)指的是需要一个私有密钥一个公开密钥，两个不同的密钥的
  • Android_ViewStub 阿尔萨斯 ViewStub
    public final class ViewStub extends View java.lang.Object android.view.View android.view.ViewStub 类摘要： ViewStub 是一个隐藏的，不占用内存空间的视图对象，它可以在运行时延迟加载布局资源文件。当 ViewSt
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他