表示 div 同时引用了 c1 和 c2 两个类样式
类选择器和元素选择器结合使用 :能够实现对某种元素中不同 样式的细分控制。又称之为“分类选择器”
语法:元素选择器. 类选择器
p.classname{ }
4)id选择器
语法:# idname{ }
特点:作用于指定id 属性值的元素上
id属性作用:标识元素的唯一的值;引用样式表中的 id 样式。
5)群组选择器
语法:选择器1 ,选择器 2 ,选择器 3 , ......{ }
选择器的声明是以 ” , ” 隔开 的选择器列表
作用:将相同的规则用于多个元素中
6)后代选择器
语法:选择器1 选择器 2 选择器 3 ...{ }
选择器的声明是以 ” 空格 ” 隔开 的选择器列表
作用:根据元素的位置关系(层次)找到元素,然后改掉样式
div span{} 修改 div 元素中的 span 元素的样式
div .classname{} 修改 div 元素中的 class 为 classname 的元 素的样式
7)子代选择器
语法:选择器1> 选择器 2{ }
只描述父子关系的元素,标签嵌套页局限于父子关系的嵌套
span.s1是 fieldset 的子代元素
span.s2不是 fieldset 的子代元素,是 div 的子代元素,是 fieldset 的后代元素
fieldset>span 对
fieldset>.s1 对
8)伪类选择器
语法:通过 “ : ”作为结合符
选择器: 伪类选择器
作用:为一些选择器添加特殊的效果,多数表示的是一个元素 (选择器)的不同状态
伪类选择器的分类:
链接伪类
:link 尚未访问的链接
:visited 访问过的链接
动态伪类
:hover 鼠标悬停在元素上的状态
:active 元素被激活时的状态
:focus 元素获取焦点时的状态
目标伪类
元素状态伪类
结构伪类
否定伪类
8、选择器的优先级
内联样式 > ID 选择器 > 类(伪类)选择器 > 元素选择器
权值:1,0,0,0 0,1,0,0 0,0,1,0 0,0,0,1
1越靠左,其优先级别就越高
div{color:blue;}
#d1{color:green;}
.red{color:red;}
9、颜色
#rrggbb:十六进制数 如 #ff0000
每一位的范围:0 — 9 A — F
#rgb:简写的十六进制数 如 #f00
表示颜色的英文单词,如red
10、尺寸
尺寸属性是用于设置元素的宽度和高度
单位一般为像素或百分比
宽度属性:width
max-width
min-width
高度属性:height
max-height
min-height
在HTML 中哪些元素适合使用尺寸属性
①所有的块级元素 div,p,h1,ol,li,ul...
②大部分行内元素不适合 使用尺寸属性 span...
③存在width 和 height 属性的元素适合使用尺寸 img , table
溢出:使用尺寸属性控制框的大小时,如果内容所需的空间大于框本 身的空间,会导致内容溢出
overflow 当内容溢出元素框时如何处理
属性:visible 显示
hidden 隐藏
scroll 滚动
auto 自动(只出现纵向滚动条)
overflow-x 横向溢出
overflow-y 纵向溢出
11、边框 border
border设置四个方向边框的宽度 (width) ,样式 (style) ,颜色 (color)
border-left/right/top/bottom: width style color
定义四个边框某一方向的宽度 样式 颜色
border-width: 四个边框的宽度
border-style: 四个边框的样式
border-color: 四个边框的颜色
border-left/right/top/bottom-width: 定义某一方向的宽度
border-left/right/top/bottom-style: 定义某一方向的样式
border-left/right/top/bottom-color: 定义某一方向的颜色
边框倒角 border-radius
为简写属性,按顺时针顺序设置四个倒角
取值为绝对值或者百分比
单独定义:border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-left-radius 左下角
border-bottom-right-radius 右下角
12、边框阴影 box-shadow
box-shadow:h-shadow v-shadow blur spread color inset;
box-shadow:10px(水平 ) 10px( 垂直 ) 5px( 模糊程度 ) #ccc( 颜色 ) inset(内阴影 );
向方框添加阴影
取值:h-shadow 必选 水平阴影
v-shadow 必选 垂直阴影
blur 可选 模糊程度
spread 可选 阴影的尺寸
color 可选 阴影的颜色
inset 将外部阴影 (outset) 改为内部阴影
13、图片边框 border-image
由图像作为元素的边框显示效果
border-image: src width repeat
border-imagr:url(img/a.jpg) 26px repeat
repeat值: repeat 平铺
round 铺满
stretch 拉伸
border-image-source:url(img/a.jpg) 图片的路径
border-image-width: 图片边框的宽度
border-image-repeat:repeat/round/stretch 图片边框是否平铺
14、轮廓 outline
轮廓是绘制于元素周围的一条线,在边框的外围。
语法:
outline:color style width;
outline-color: 轮廓的颜色
outline-style: 轮廓的样式
outline-width: 轮廓的宽度
15、框模型 ( 盒子模型 )
定义了元素框处理元素内容、内边距padding 、边框 border 和外边 距margin 的方式。
Width和 height 指内容区域的宽度和高度
外边距margin
外边距是指围绕在边框外围的空白区域
默认情况下,html 中的块级元素都存在外边距( body , h1,h2,..h6,p )
margin取值为 auto 时,实现的是水平方向居中显示的效果
取值:margin : 10px ; 表示上下左右各为 10px
margin: 5px 10px ; 表示上下 5px ,左右 10px
margin: 5px 10px 5px ; 表示上 5px ,左右 10px ,下 5px
margin: 5px 10px 5px 10px ;表示上 5px ,右 10px ,下 5px , 左10px
外边距合并
当上下外边距相遇时,他们将形成一个外边距,称为外边距合并 最终的外边距以数值大的为准
内边距padding
内边距时指内容区域与边框之间的距离
注意:会扩大元素边框所占用的区域
赋值:(取值与margin 相似)
padding: value
内边距属性值可以为像素、百分比,不能是负数
padding-left
padding-right
padding-top
Padding-bottom
CSS重写
方式:将margin padding 全部设置为 0 ;将 list-style-type: none ;
*{margin:0px;padding:0px;list-style-type:none;}
目的:去除有些标签默认显示效果
hn,p,ul,ol,di,dt,dd,
16、背景
①背景颜色background-color
②背景图片 background-image
默认值是none ,表示背景上没有放置任何图像
如果需要设置一个图像,需要用起始字母url 附带一个 URL 地址
background-image: url( “ image/a.jpg ” )
③背景重复 background-repeat
取值: repeat 垂直、水平方向平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
no-repeat 不平铺,仅显示一次
④背景图像尺寸
属性:background-size
取值:v1 v2 宽度 高度
v1% v2% 原始大小的百分比
cover 扩展背景图像,使背景图完全覆盖背景区域
contain 将图像扩展至最大尺寸,让高度与宽度自适应 内容区域
⑤背景图片固定
属性:background-attachment
取值:scroll 默认情况下随着滚动条滚动
fixed 背景图像固定,不会随着滚动条而滚动,
实现水印效果
⑥背景定位
属性:background-position
取值:
left :在页面左边显示
right :页面右边显示
center :页面中间显示
top :页面顶部显示
bottom :页面底部显示
x% y% : 第一个值表示水平偏移量
第二个值表示垂直偏移量
x y : x 表示水平偏移量, y 表示垂直偏移量
⑦背景绘制区域(颜色)
属性:background-clip
取值:border-box 背景被裁减到边框,默认值
padding-box 背景被裁减到内边距框
content-box 背景被裁减到内容框
⑧背景的定位区域(图像)
属性:background-origin
取值:border-box 背景图像相对于外边框来定位
padding-box 背景图像相对于内边距框来定位 content-box 背景图像相对于内容框来定位
⑨背景属性background
在一个属性中声明所有的相关的背景属性
语法:background: color url( ) repeat attachment position ; 背景颜色 路径 平铺 固定 定位
background: red url(a.jpg) no-repeat fixed -35px -25px;
17、渐变属性
渐变是指两种或多种颜色之间的平滑过渡
线性渐变
径向渐变
重复渐变
渐变语法:使用background-image 属性进行设置
取值:linear-gradient 线性渐变
radial-gradient 径向渐变
repeating-linear-gradient 重复线性渐变
repeating-radial-gradient 重复径向渐变
①线性渐变
linear-gradient(angle.color-point1,color-point2,...)
background-image: linear-gradient ( to bottom,red 0% , green 30% , yellow 50%, blue 100% )
angle : 为第一个参数,指定渐变的方向,可以是角度值,也可 以是关键词。如:angle : to top(odeg)/to right(90deg)/
to bottom(180deg)/to left(270deg)
color-point:表示颜色的起始点、中间点或者结束点,取值为颜色 和位置的组合。如:red 0% 、 green50%
②径向渐变
radial-gradient( size at position , color-point1 , color-point2 , ... )
background-image:radial-gradient(200px at left top ,red 0%,
blue 50%,yellow 100%);
position: 为第一个参数,指定渐变的圆心位置,默认值为 center ; 可以取值为数值、百分比或者关键字;可省略。
size表示半径; position 可以为 left right top bottom /x y(x 轴y 轴 )
如:200px at left top
color-point:表示颜色的起始点、中间点、最终点,取值为颜色和 位置的组合。如:red 10% , green 50% , blue 100%
③重复线性渐变
repeating-linear-gradient(angle, color-point1 , color-point2 , ... )
background-image:repeating-linear-gradient(180deg,red 0px,
green 30px,red 60px);
④重复径向渐变
repeating-radial-gradien(size at position,color-point1,color-point2, ...)
background-image:repeating-radial-gradient(50px at center,
red 0%,blue 50%,orange 100%);
浏览器兼容性
对于不支持的版本:
Firefox 需要加前缀 -moz-
Chrome 和 Safari 需要加前缀 -webkit-
Opera 需要加前缀 -o-
background-image:linear-gradient(angle.color-point1,color-point2,...)
background-image:-moz- linear-gradient(angle.color-point1,color-point2,...)
background-image:-webkit- linear-gradient(angle.color-point1,color-point2,...)
background-image:-o- linear-gradient(angle.color-point1,color-point2,...)
1、文本格式化
1)控制字体
指定字体:font-family : value value..... ;
字体大小:font-size : value ;( font-size:24px ;)
字体加粗:font-weight : bold 加粗 /normal 正常 /value 取值 ;
字体样式(斜体):font-style:normal/italic;
小型大写字母显示:font-variant:normal/small-caps 小型大写 ;
2)字体属性 font
简写格式:font:font-style font-variant font-weight font-size font-family;
常用:font:12px Times, 微软雅黑;
3)控制文本格式
文本颜色 color
文本水平对齐方式 text-align:left/center/right
文字线条修饰
text-decoration: none 无 /underline( 下划线 )/overline( 上划 线)/line-through( 删除线 )
4)行高 line-height
注意:如果行高的高度高于文本自身的高度的话,那么文本将在这段区域内垂直居中。
属性:line-height : value ;
取值:常用值 与所在容器设置相同高度
5) 首行文本缩进 text-indent
属性:text-indent : value ;
取值:缩进的距离 比如20px
6)文本阴影 t ext-shadow
属性:text-shadow : h-shadow v-shadow blur color ;
水平方向 垂直方向 阴影程度 颜色
7)溢出
处理空白white-space : normal/nowrap( 不换行 ) ;
文本溢出 text-overflow : clip( 溢出 )
elipsis(显示 ...);
8)文本换行(只对英文有效)
长单词换行 word-wrap:normal
break-word(强制换单词 );
文本换行 word-break:normal
break-all 不关心单词显示完整问题,该换就换
keep-all; 当文本到达边界处后根据半角空 格” ”和连字符”-”进行换行
2、表格常用样式属性
边距属性:padding
尺寸属性: width height 设置表格或者单元格的尺寸
文本格式化属性
背景属性 :设置表格或者单元格的背景色或者背景图像
Border属性 :设置表格的边框
垂直方向对齐
vertical-align属性
取值:vertical-align:top/middle/bottom;
在表单元格中,设置单元格框中的单元格内容的对齐方式
表格特有属性
①边框合并 属性:border-collapse
取值:separate( 默认值 )
collapse(边框合并 )
②边框边距 属性:border-spacing
取值:v1 :水平和垂直方向的距离都是 v1
v1 v2: v1 表示水平间距
v2表示垂直间距
注意:必须是border-collapse 为 separate 的时候才有作用
table的 属性 cellspacing
③标题位置 属性:caption-side
取值:top 默认
bottom 靠下
④显示规则 属性:table-layout
取值:auto 列的宽度由单元格的内容决定,默认
fixed 列宽由表格宽度和列宽来决定,不受内 容来影响
3、定位
定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
①普通流定位
页面中的块级元素框从上到下一个接一个地排列。
内联元素将在一行中从左到右排列水平布置
②浮动定位
是指将元素排除在普通流之外,即元素脱离标准文档流;元素将不在页面占用空间;将浮动元素放置在包含框的左边或者右边;浮动元素依旧位于包含框之内。
浮动的框可以向左或向右移动,知道它的外边缘碰到包含框或另一个浮动框的边框为止;经常使用它来实现特殊的定位效果。
属性:float
取值:none/ left (左浮动 )/ right (右浮动 )
清除浮动
用来清除浮动所带来的影响,定义了元素哪边上不允许出现浮动 元素。
属性: clear
取值:left/right/both
float与 overflow
包含框内的元素被应用了float 之后,包含框的高度会发生变化,高度变成 0.
在包含框内设置一个overflow 属性后才能显示高度。
在父框中添加: overflow:hidden;
定位属性
position属性
取值:static 默认
relative 相对定位
absolute 绝对定位
fixed
偏移属性
top/bottom/right/left: value
堆叠顺序
z-index: value
value的数值越大,越靠近用户,就显示在上面
value的数值越小,离用户越远
如:z-index:10; 显示在上面
z-index:5;显示在下面
相对定位
元素框相对于它原来的位置偏移某个距离
首先设置position: relative
然后使用 left 或 right 、 top 或 bottom 属性设置水平方向的偏移量
绝对定位
将元素的内容从普通流中完全移除,不占据空间
相对于最近的已定位的元素来进行偏移,如果元素外围没有已定位的元素,那么他的位置是相对于body 元素来进行偏移的
首先设置position: absolute
然后使用 left 或 right 、 top 或 bottom 属性设置水平方向的偏移量
固定定位
将元素的内容固定在页面的某个位置
元素从普通流完全移除,不占用页面空间;当用户向下滚动页 面时元素框并不随着移动
首先设置position: fixed
然后使用 left 或 right 、 top 或 bottom 属性设置水平方向的偏移量
显示方式
display属性
取值:none (隐藏 ) ,框及其所有内容都不再显示, 不占空间的隐藏
block 让行内元素表现为块级元素(显示)
inline 让块级元素表现为行内元素(显示)
inline-block 行内块元素,本身是行内元素但具备块元素的特点
显示效果
visibility属性
取值:visible 默认值,元素可见
hidden 元素不可见,但 依然占据空间
collapse 用在表格元素时,可删除一行/ 列,不影响表格布局
opacity属性
取值:opacity : value ;
value的取值从 0.0 (透明)到 1.0 (不透明)
vertical-align属性
取值:baseline 默认,元素放置在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
bottom 把元素的顶端与行中最低的元素的顶端对齐
middle 把此元素放置在父元素的中部
设置单元格框中的单元格
内容的垂直对齐方式。
修改图像周围的文本相对于图像的垂直对齐方式。
对于行内块级元素,如,可设置垂直对齐方式。
定义行内元素的基线相对于该元素所在行的基线的垂直对齐 方式。
光 标
cursor属性
取值:default 三角
pointer 手状
crosshair 十字
text I状
wait 等待
help 箭头 + 问号
鼠标悬停在链接上时,光标变成手状
鼠标悬停在文本区域时,显示I 形状
鼠标悬停在一个按钮上时,光标会显示箭头状
列表样式
列表项标志 list-style-type属性
无序列表取值:none 无标记
disc 实心圆
circle 空心圆
square 实心方块
有序列表取值: none 无标记
decimal 数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
列表项位置 list-style-position属性
取值:outside 标记位于文本的左侧,放在文本外,默认
inside 标记放在文本内
列表项图像 list-style-image属性
list-style-image: url ( “image/a.jpg”)
指定图像作为有序或无序列表的列表项标志
列表属性list-style
简写方式:list-style : type url position
标志 图像 位置
一般情况下,直接将list-style 属性设置为 none
CSS3 2D转换
transform属性
取值:translate( v1 v2 ); 左(X轴)和顶部(Y轴)位置给定的参数,
从当前元素位置移动。
rotate(30deg ); 在一个给定度数顺时针旋转的元素。负值是允许的, 这样是元素逆时针旋转。
scale(2,4 ); 该元素增加或减少的大小,取决于宽度(X轴)和高度
(Y轴)的参数:
skew(30deg,20deg ); 该元素会根据横向(X轴)和垂直(Y轴)
线参数给定角度 .
matrix (0.866,0.5,-0.5,0.866,0,0 ); matrix 方法有六个参数,包含 旋转,缩放,移动(平移)和倾斜功能。
你可能感兴趣的:(笔记,css)
10月|愿你的青春不负梦想-读书笔记-01
Tracy的小书斋
本书的作者是俞敏洪,大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧,也是我事业上的偶像。本日摘录他书中第一章中的金句:『一个人如果什么目标都没有,就会浑浑噩噩,感觉生命中缺少能量。能给我们能量的,是对未来的期待。第一件事,我始终为了进步而努力。与其追寻全世界的骏马,不如种植丰美的草原,到时骏马自然会来。第二件事,我始终有阶段性的目标。什么东西能给我能量?答案是对未来的期待。』读到这里的时候,我便
《投行人生》读书笔记
小蘑菇的树洞
《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅,比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力,更多的是自我意识,你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议,细节,截止日期和数据很重要截止日期,一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数
广龙宇
一起学Rust # Rust设计模式 rust 设计模式 开发语言
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言,它的所有特性,使其独一无二。因此,学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此,本系列文章的结构也与此书的结构相同(后续可能会调成结构),基本上分为三个部分
git常用命令笔记
咩酱-小羊
git 笔记
###用习惯了idea总是不记得git的一些常见命令,需要用到的时候总是担心旁边站了人~~~记个笔记@_@,告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"
[email protected] "基本操作克隆远程仓库gitclone查看
509. 斐波那契数(每日一题)
lzyprime
lzyprime博客(github)创建时间:2021.01.04qq及邮箱:2383518170leetcode笔记题目描述斐波那契数,通常用F(n)表示,形成的序列称为斐波那契数列。该数列由0和1开始,后面的每一项数字都是前面两项数字的和。也就是:F(0)=0,F(1)=1F(n)=F(n-1)+F(n-2),其中n>1给你n,请计算F(n)。示例1:输入:2输出:1解释:F(2)=F(1)+
拥有断舍离的心态,过精简生活--《断舍离》读书笔记
爱吃丸子的小樱桃
不知不觉间房间里的东西越来越多,虽然摆放整齐,但也时常会觉得空间逼仄,令人心生烦闷。抱着断舍离的态度,我开始阅读《断舍离》这本书,希望从书中能找到一些有效的方法,帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的,整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”,接着又成为每个人都能实行的“改变人生的断舍离”,从“哲学”逐渐升华成“
四章-32-点要素的聚合
彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1032.html,对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理
STU学生网页设计
网页设计 期末网页作业 html静态网页 html5期末大作业 网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
高端密码学院笔记285
柚子_b4b4
高端幸福密码学院(高级班)幸福使者:李华第(598)期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲:刘莉一,知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫,目标永远下游。智者的梦再美,也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1,重视和珍惜的前提是知道它的价值非常重要,当你珍惜了,你就真正定下来,真正的学到身上。2,大家需要
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
二挡起步
web前端期末大作业 javascript html css 旅游 风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动
二挡起步
web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线
Day17笔记-高阶函数
~在杰难逃~
Python 笔记 python 开发语言 pycharm 数据分析
高阶函数【重点掌握】函数的本质:函数是一个变量,函数名是一个变量名,一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数,B函数调用完成之后,会得到一个结果,则B函数被称为高阶函数常用的高阶函数:map(),reduce(),filter(),sorted()1.map()map(func,iterable),返回值是一个iterator【容器,迭代器】func:函数iterab
Day1笔记-Python简介&标识符和关键字&输入输出
~在杰难逃~
Python python 开发语言 大数据 数据分析 数据挖掘
大家好,从今天开始呢,杰哥开展一个新的专栏,当然,数据分析部分也会不定时更新的,这个新的专栏主要是讲解一些Python的基础语法和知识,帮助0基础的小伙伴入门和学习Python,感兴趣的小伙伴可以开始认真学习啦!一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码,再通过语言处理程序执行向计算机发送指令,让计算机完成对应的工作,编程
webpack图片等资源的处理
dmengmeng
需要的loaderfile-loader(让我们可以引入这些资源文件)url-loader(其实是file-loader的二次封装)img-loader(处理图片所需要的)在没有使用任何处理图片的loader之前,比如说css中用到了背景图片,那么最后打包会报错的,因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以,打开网页能准确看到图片。{test:/\.(p
node.js学习
小猿L
node.js node.js 学习 vim
node.js学习实操及笔记温故node.js,node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础,三大框架vuereactangular离不开node.jsnode.js是什么官网:node.js是一个开源的、跨平台的运行JavaScript的运行
数据仓库——维度表一致性
墨染丶eye
背诵 数据仓库
数据仓库基础笔记思维导图已经整理完毕,完整连接为:数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看,当一系列星型模型共享一组公共维度时,所涉及的维度称为一致性维度。当维度表存在不一致时,短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别,因为维度的差别,分析工作涉及的领域从简单到复杂,但是都是通过复杂的报表来弥补设计
【Git】常见命令(仅笔记)
好想有猫猫
Git Linux学习笔记 git 笔记 elasticsearch linux c++
文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"
[email protected]
为什么你总是对下属不满意?
ZhaoWu1050
【ZhaoWu的听课笔记】大多数公司,都存在两种问题。我创业四年,更是体会深切。这两种问题就是:老板经常不满意下属的表现;下属总是不知道老板想要什么;虽然这两种问题普遍存在,其实解决方法并不复杂。这节课,我们再聊聊第一个问题:为什么老板经常不满意下属表现?其实,这背后也是一条管理常识。管理学家德鲁克先生早就说过:管理者的任务,不是去改变人。*来自《卓有成效的管理者》只是大多数老板和我一样,都是一边
母亲节如何做小红书营销
美橙传媒
小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题,我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析,这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先,小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中,大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品
读书笔记|《遇见孩子,遇见更好的自己》5
抹茶社长
为人父母意味着放弃自己的过去,不要对以往没有实现的心愿耿耿于怀,只有这样,孩子们才能做回自己。985909803.jpg孩子在与父母保持亲密的同时更需要独立,唯有这样,孩子才会成为孩子,父母才会成其为父母。有耐心的人生往往更幸福,给孩子留点余地。认识到养儿育女是对耐心的考验。为失败做好心理准备,教会孩子控制情绪。了解自己的底线,说到底线,有一点很重要,父母之所以发脾气,真正的原因往往在于他们自己,
基于Python给出的PDF文档转Markdown文档的方法
程序媛了了
python pdf 开发语言
注:网上有很多将Markdown文档转为PDF文档的方法,但是却很少有将PDF文档转为Markdown文档的方法。就算有,比如某些网站声称可以将PDF文档转为Markdown文档,尝试过,不太符合自己的要求,而且无法保证文档没有泄露风险。于是本人为了解决这个问题,借助GPT(能使用GPT镜像或者有条件直接使用GPT的,反正能调用GPT接口就行)生成Python代码来完成这个功能。笔记、代码难免存在
语文主题教学学习笔记之87
东哥杂谈
“语文主题教学”学习笔记之八十七(0125)今天继续学习小学语文主题教学的实践样态。板块三:教学中体现“书艺”味道。作为四大名著之一的《水浒传》,堪称我国文学宝库之经典。对从《水浒传》中摘选的单元,教师就要了解其原生态,即评书体特点。这也要求教师要了解一些常用的评书行话术语,然后在教学时适时地加入一些,让学生体味其文本中原有的特色。学生也要尽可能地通过朗读的方式,而不单是分析讲解的方式进行学习。细
Armv8.3 体系结构扩展--原文版
代码改变世界ctw
ARM-TEE-Android armv8 嵌入式 arm架构 安全架构 芯片 Trustzone Secureboot
快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:个人博客笔记导读目录(全部)TheArmv8.3architectureextensionTheArmv8.3architectureextensionisanextensiontoArmv8.2.Itaddsmandatoryandoptionalarchitecturalfeatures.Somefeat
springboot+vue项目实战一-创建SpringBoot简单项目
苹果酱0567
面试题汇总与解析 spring boot 后端 java 中间件 开发语言
这段时间抽空给女朋友搭建一个个人博客,想着记录一下建站的过程,就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站,或者用cms系统,三四个小时就可以做出一个前后台都有的网站,而且想做成啥样也都行。但是就是要从新做,自己做的意义不一样,更何况,俺就是专门干这个的,嘿嘿嘿要做一个网站,而且从零开始,首先呢就是技术选型了,经过一番思量决定选择-SpringBoot做后端,前端使用Vue做一
阅读《认知觉醒》读书笔记
就看看书
本周阅读了周岭的《认知觉醒开启自我改变的原动力》,启发较多,故做读书笔记一则,留待学习。全书共八章,讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
阅读笔记:阅读方法中的逻辑和转念
施吉涛
聊聊一些阅读的方法论吧,别人家的读书方法刚开始想写,然后就不知道写什么了,因为作者写的非常的“精致”我有一种乡巴佬进城的感觉,看到精美的摆盘,精致的食材不知道该如何下口也就是《阅读的方法》,我们姑且来试一下强劲的大脑篇,第一节:逻辑通俗的来讲,也就是表达的排列和顺序,再进一步就是因果关系和关联实际上书已经看了大概一遍,但直到打算写一下笔记的时候,才发现作者讲的推理更多的是阅读的对象中呈现出的逻辑也
《转介绍方法论》学习笔记
小可乐的妈妈
一、高效转介绍的流程:价值观---执行----方案一)转介绍发生的背景:1、对象:谁向谁转介绍?全员营销,人人参与。①员工的激励政策、客户的转介绍诱因制作客户画像:a信任;支付能力;意愿度;便利度(根据家长具备四个特征的个数分为四类)B性格分类C职业分类D年龄性别②执行:套路,策略,方法,流程2、诱因:为什么要转介绍?认同信任;多方共赢;传递美好;零风险承诺打动人心,超越期待。选择做教育,就是选择
JAVA学习笔记之23种设计模式学习
victorfreedom
Java技术 设计模式 android java 常用设计模式
博主最近买了《设计模式》这本书来学习,无奈这本书是以C++语言为基础进行说明,整个学习流程下来效率不是很高,虽然有的设计模式通俗易懂,但感觉还是没有充分的掌握了所有的设计模式。于是博主百度了一番,发现有大神写过了这方面的问题,于是博主迅速拿来学习。一、设计模式的分类总体来说设计模式分为三大类:创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式,共七种:适配器
解决Obsidian写笔记中的<img>标签无法显示图片的问题
全能全知者
笔记
Obsidian中写md笔记如果使用标签会显示不出图案,后来才知道因为Obsidian的问题导致只能用绝对路径定位。所以我本人写了一个py插件,将md笔记里的img标签批量替换成Obsidian能够读取的形式。安装FixObsImgDpy:pipinstallFixObsImgDpy安装完成后在需要修复的md文件的父目录下运行命令:FixObsImgDpy就会自动修复父目录以下的全部md文件 仓库
2021年周总结 03
Ruby之家
这周的生活过得也是比较快,因为暂时住的离公司有点距离,所以通勤时间相对较长一点,而在地铁上的一个半小时如何充分利用起来,则是我最近一直在思考的问题,2021年想让自己的生活都运行在计划中。(有时候自己想干一件事情就总是给自己找很多借口,想着以后怎么怎么样?然而哪有那么多的以后,能够方便当下的工作生活就立马执行就OK,这仅仅只是我此时想到背的很重的老人机笔记本电脑,也算是陪伴我快8年的—当时买的时候
ASM系列五 利用TreeApi 解析生成Class
lijingyao8206
ASM 字节码动态生成 ClassNode TreeAPI
前面CoreApi的介绍部分基本涵盖了ASMCore包下面的主要API及功能,其中还有一部分关于MetaData的解析和生成就不再赘述。这篇开始介绍ASM另一部分主要的Api。TreeApi。这一部分源码是关联的asm-tree-5.0.4的版本。
在介绍前,先要知道一点, Tree工程的接口基本可以完
链表树——复合数据结构应用实例
bardo
数据结构 树型结构 表结构设计 链表 菜单排序
我们清楚:数据库设计中,表结构设计的好坏,直接影响程序的复杂度。所以,本文就无限级分类(目录)树与链表的复合在表设计中的应用进行探讨。当然,什么是树,什么是链表,这里不作介绍。有兴趣可以去看相关的教材。
需求简介:
经常遇到这样的需求,我们希望能将保存在数据库中的树结构能够按确定的顺序读出来。比如,多级菜单、组织结构、商品分类。更具体的,我们希望某个二级菜单在这一级别中就是第一个。虽然它是最后
为啥要用位运算代替取模呢
chenchao051
位运算 哈希 汇编
在hash中查找key的时候,经常会发现用&取代%,先看两段代码吧,
JDK6中的HashMap中的indexFor方法:
/**
* Returns index for hash code h.
*/
static int indexFor(int h, int length) {
最近的情况
麦田的设计者
生活 感悟 计划 软考 想
今天是2015年4月27号
整理一下最近的思绪以及要完成的任务
1、最近在驾校科目二练车,每周四天,练三周。其实做什么都要用心,追求合理的途径解决。为
PHP去掉字符串中最后一个字符的方法
IT独行者
PHP 字符串
今天在PHP项目开发中遇到一个需求,去掉字符串中的最后一个字符 原字符串1,2,3,4,5,6, 去掉最后一个字符",",最终结果为1,2,3,4,5,6 代码如下:
$str = "1,2,3,4,5,6,";
$newstr = substr($str,0,strlen($str)-1);
echo $newstr;
hadoop在linux上单机安装过程
_wy_
linux hadoop
1、安装JDK
jdk版本最好是1.6以上,可以使用执行命令java -version查看当前JAVA版本号,如果报命令不存在或版本比较低,则需要安装一个高版本的JDK,并在/etc/profile的文件末尾,根据本机JDK实际的安装位置加上以下几行:
export JAVA_HOME=/usr/java/jdk1.7.0_25  
JAVA进阶----分布式事务的一种简单处理方法
无量
多系统交互 分布式 事务
每个方法都是原子操作:
提供第三方服务的系统,要同时提供执行方法和对应的回滚方法
A系统调用B,C,D系统完成分布式事务
=========执行开始========
A.aa();
try {
B.bb();
} catch(Exception e) {
A.rollbackAa();
}
try {
C.cc();
} catch(Excep
安墨移动广 告:移动DSP厚积薄发 引领未来广 告业发展命脉
矮蛋蛋
hadoop 互联网
“谁掌握了强大的DSP技术,谁将引领未来的广 告行业发展命脉。”2014年,移动广 告行业的热点非移动DSP莫属。各个圈子都在纷纷谈论,认为移动DSP是行业突破点,一时间许多移动广 告联盟风起云涌,竞相推出专属移动DSP产品。
到底什么是移动DSP呢?
DSP(Demand-SidePlatform),就是需求方平台,为解决广 告主投放的各种需求,真正实现人群定位的精准广
myelipse设置
alafqq
IP
在一个项目的完整的生命周期中,其维护费用,往往是其开发费用的数倍。因此项目的可维护性、可复用性是衡量一个项目好坏的关键。而注释则是可维护性中必不可少的一环。
注释模板导入步骤
安装方法:
打开eclipse/myeclipse
选择 window-->Preferences-->JAVA-->Code-->Code
java数组
百合不是茶
java数组
java数组的 声明 创建 初始化; java支持C语言
数组中的每个数都有唯一的一个下标
一维数组的定义 声明: int[] a = new int[3];声明数组中有三个数int[3]
int[] a 中有三个数,下标从0开始,可以同过for来遍历数组中的数
javascript读取表单数据
bijian1013
JavaScript
利用javascript读取表单数据,可以利用以下三种方法获取:
1、通过表单ID属性:var a = document.getElementByIdx_x_x("id");
2、通过表单名称属性:var b = document.getElementsByName("name");
3、直接通过表单名字获取:var c = form.content.
探索JUnit4扩展:使用Theory
bijian1013
java JUnit Theory
理论机制(Theory)
一.为什么要引用理论机制(Theory)
当今软件开发中,测试驱动开发(TDD — Test-driven development)越发流行。为什么 TDD 会如此流行呢?因为它确实拥有很多优点,它允许开发人员通过简单的例子来指定和表明他们代码的行为意图。
TDD 的优点:
&nb
[Spring Data Mongo一]Spring Mongo Template操作MongoDB
bit1129
template
什么是Spring Data Mongo
Spring Data MongoDB项目对访问MongoDB的Java客户端API进行了封装,这种封装类似于Spring封装Hibernate和JDBC而提供的HibernateTemplate和JDBCTemplate,主要能力包括
1. 封装客户端跟MongoDB的链接管理
2. 文档-对象映射,通过注解:@Document(collectio
【Kafka八】Zookeeper上关于Kafka的配置信息
bit1129
zookeeper
问题:
1. Kafka的哪些信息记录在Zookeeper中 2. Consumer Group消费的每个Partition的Offset信息存放在什么位置
3. Topic的每个Partition存放在哪个Broker上的信息存放在哪里
4. Producer跟Zookeeper究竟有没有关系?没有关系!!!
//consumers、config、brokers、cont
java OOM内存异常的四种类型及异常与解决方案
ronin47
java OOM 内存异常
OOM异常的四种类型:
一: StackOverflowError :通常因为递归函数引起(死递归,递归太深)。-Xss 128k 一般够用。
二: out Of memory: PermGen Space:通常是动态类大多,比如web 服务器自动更新部署时引起。-Xmx
java-实现链表反转-递归和非递归实现
bylijinnan
java
20120422更新:
对链表中部分节点进行反转操作,这些节点相隔k个:
0->1->2->3->4->5->6->7->8->9
k=2
8->1->6->3->4->5->2->7->0->9
注意1 3 5 7 9 位置是不变的。
解法:
将链表拆成两部分:
a.0-&
Netty源码学习-DelimiterBasedFrameDecoder
bylijinnan
java netty
看DelimiterBasedFrameDecoder的API,有举例:
接收到的ChannelBuffer如下:
+--------------+
| ABC\nDEF\r\n |
+--------------+
经过DelimiterBasedFrameDecoder(Delimiters.lineDelimiter())之后,得到:
+-----+----
linux的一些命令 -查看cc攻击-网口ip统计等
hotsunshine
linux
Linux判断CC攻击命令详解
2011年12月23日 ⁄ 安全 ⁄ 暂无评论
查看所有80端口的连接数
netstat -nat|grep -i '80'|wc -l
对连接的IP按连接数量进行排序
netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n
查看TCP连接状态
n
Spring获取SessionFactory
ctrain
sessionFactory
String sql = "select sysdate from dual";
WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext();
String[] names = wac.getBeanDefinitionNames();
for(int i=0; i&
Hive几种导出数据方式
daizj
hive 数据导出
Hive几种导出数据方式
1.拷贝文件
如果数据文件恰好是用户需要的格式,那么只需要拷贝文件或文件夹就可以。
hadoop fs –cp source_path target_path
2.导出到本地文件系统
--不能使用insert into local directory来导出数据,会报错
--只能使用
编程之美
dcj3sjt126com
编程 PHP 重构
我个人的 PHP 编程经验中,递归调用常常与静态变量使用。静态变量的含义可以参考 PHP 手册。希望下面的代码,会更有利于对递归以及静态变量的理解
header("Content-type: text/plain");
function static_function () {
static $i = 0;
if ($i++ < 1
Android保存用户名和密码
dcj3sjt126com
android
转自:http://www.2cto.com/kf/201401/272336.html
我们不管在开发一个项目或者使用别人的项目,都有用户登录功能,为了让用户的体验效果更好,我们通常会做一个功能,叫做保存用户,这样做的目地就是为了让用户下一次再使用该程序不会重新输入用户名和密码,这里我使用3种方式来存储用户名和密码
1、通过普通 的txt文本存储
2、通过properties属性文件进行存
Oracle 复习笔记之同义词
eksliang
Oracle 同义词 Oracle synonym
转载请出自出处:http://eksliang.iteye.com/blog/2098861
1.什么是同义词
同义词是现有模式对象的一个别名。
概念性的东西,什么是模式呢?创建一个用户,就相应的创建了 一个模式。模式是指数据库对象,是对用户所创建的数据对象的总称。模式对象包括表、视图、索引、同义词、序列、过
Ajax案例
gongmeitao
Ajax jsp
数据库采用Sql Server2005
项目名称为:Ajax_Demo
1.com.demo.conn包
package com.demo.conn;
import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;
//获取数据库连接的类public class DBConnec
ASP.NET中Request.RawUrl、Request.Url的区别
hvt
.net Web C# asp.net hovertree
如果访问的地址是:http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu那么Request.Url.ToString() 的值是:http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree<&
SVG 教程 (七)SVG 实例,SVG 参考手册
天梯梦
svg
SVG 实例 在线实例
下面的例子是把SVG代码直接嵌入到HTML代码中。
谷歌Chrome,火狐,Internet Explorer9,和Safari都支持。
注意:下面的例子将不会在Opera运行,即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。 SVG 实例
SVG基本形状
一个圆
矩形
不透明矩形
一个矩形不透明2
一个带圆角矩
事务管理
luyulong
java spring 编程 事务
事物管理
spring事物的好处
为不同的事物API提供了一致的编程模型
支持声明式事务管理
提供比大多数事务API更简单更易于使用的编程式事务管理API
整合spring的各种数据访问抽象
TransactionDefinition
定义了事务策略
int getIsolationLevel()得到当前事务的隔离级别
READ_COMMITTED
基础数据结构和算法十一:Red-black binary search tree
sunwinner
Algorithm Red-black
The insertion algorithm for 2-3 trees just described is not difficult to understand; now, we will see that it is also not difficult to implement. We will consider a simple representation known
centos同步时间
stunizhengjia
linux 集群同步时间
做了集群,时间的同步就显得非常必要了。 以下是查到的如何做时间同步。 在CentOS 5不再区分客户端和服务器,只要配置了NTP,它就会提供NTP服务。 1)确认已经ntp程序包: # yum install ntp 2)配置时间源(默认就行,不需要修改) # vi /etc/ntp.conf server pool.ntp.o
ITeye 9月技术图书有奖试读获奖名单公布
ITeye管理员
ITeye
ITeye携手博文视点举办的9月技术图书有奖试读活动已圆满结束,非常感谢广大用户对本次活动的关注与参与。 9月试读活动回顾:http://webmaster.iteye.com/blog/2118112本次技术图书试读活动的优秀奖获奖名单及相应作品如下(优秀文章有很多,但名额有限,没获奖并不代表不优秀):
《NFC:Arduino、Andro