CSS基础笔记
一、CSS基础
1. CSS 选择器的作用
2. CSS基础选择器
2.1 标签选择器
2.2 类选择器
2.3 多类名选择器
2.4 id选择器
2.5 id选择器和类选择器的区别
2.6 通配符选择器
2.7 选择器总结
3. CSS字体属性
3.1 字体系列
3.2 字体大小
3.3 字体粗细
3.4 字体样式
3.5 字体的综合写法
3.6 字体总结
4. css文本属性
4.1 文本颜色
4.2 文本对齐
4.3 修饰文本
4.4 文本缩进
4.5 行间距
4.6 文本属性总结
5. CSS样式表
5.1 行内样式表(行内式)
5.2 内部样式表(嵌入式)
5.3 外部样式表(链接式)
5.4 CSS 引入方式总结
6. Chrome 调试工具
7. CSS 的复合选择器
7.1 后代选择器 (重要)
7.2子选择器 (重要)
7.3 并集选择器 (重要)
7.4 伪类选择器
7.4.1链接伪类选择器
7.4.2 :focus 伪类选择器
7.5 复合选择器总结
8. CSS的显示模式
8.1 元素显示模式的分类
8.1.1 块元素
8.1.2 行内元素
8.1.3 行内块元素
8.1.4 元素显示模式总结
8.1.5 元素显示模式的转换
9. CSS的背景
9.1 背景颜色
9.2 背景图片
9.3 背景平铺
9.4 背景图片位置
9.5 背景图片固定
9.6 背景样式合写
9.7 背景色半透明
9.8 背景总结
10. CSS 的三大特性
二、盒子模型
1、网页布局的本质
2、盒子模型(Box Model)组成
3、边框(border)
3.1、边框的使用
3.2、表格的细线边框
3.3、边框会影响盒子实际大小
4、内边距(padding)
4.1、内边距的使用方式
4.2、内边距会影响盒子实际大小
5、外边距(margin)
5.1、外边距的使用方式
5.2、外边距典型应用
5.3、外边距合并
5.4、清除内外边距
三、PS 基本操作
一、CSS基础
1. CSS 选择器的作用
我是div
我是div
我是段落
我是ol里面小li哦
如何实现一下要求:
div 里面的文字改为红色?
第一个div 里面的文字改为红色?
ul 里面的 li 文字改为红色?
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说,就是选择标签用的。
以上 CSS 做了两件事:
找到所有的 h1 标签。 选择器(选对人)。
设置这些标签的样式,比如颜色为红色(做对事)。
2. CSS基础选择器
基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器
2.1 标签选择器
标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。
语法:
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
作用: 标签选择器可以把某一类标签全部选择出来,比如所有的 div 标签和所有的 span 标签。 优点: 能快速为页面中同类型的标签统一设置样式。 缺点: 不能设计差异化样式,只能选择全部的当前标签。
2.2 类选择器
差异化选择不同的标签,单独选一个或者某几个标签 —— 类选择器.
语法:
CCS 中定义类选择器
.类名 {
属性1: 属性值1;
...
}
HTML 中给标签添加 class 属性
XXX
2.3 多类名选择器
给一个标签指定多个类名,从而达到更多的选择目的。 这些类名都可以选出这个标签.简单理解就是一个标签有多个名字.
语法:
XXX
注意:
在标签class 属性中写 多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式
这些标签都可以调用这个公共的类,然后再调用自己独有的类
2.4 id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
语法:
CSS 中 id 选择器以“#" 来定义
#id名 {
属性1: 属性值1;
...
}
HTML 元素以 id 属性来设置 id 选择器
XXX
注意:id 属性只能在每个 HTML 文档中出现一次
2.5 id选择器和类选择器的区别
类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
id 选择器好比人的身份证号码,全中国是唯一的,不得重复。
id 选择器和类选择器最大的不同在于使用次数上。
类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用。
2.6 通配符选择器
在 CSS 中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)。
语法:
* {
属性1: 属性值1;
...
}
通配符选择器不需要调用, 自动就给所有的元素使用样式
特殊情况才使用,例如清除所有的元素标签的内外边距
* {
margin: 0;
padding: 0;
}
2.7 选择器总结
3. CSS字体属性
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。
3.1 字体系列
CSS 使用 font-family 属性定义文本的字体系列。
语法:
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
最常见的几个字体:body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }
3.2 字体大小
CSS 使用 font-size 属性定义字体大小。
语法:
p {
font-size: 20px;
}
px(像素)大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致,尽量给一个明确值大小,不要默认大小
可以给 body 指定整个页面文字的大小
3.3 字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细。
语法:
p {
font-weight: bold;
}
学会让加粗标签(比如 h 和 strong 等) 不加粗,或者其他标签加粗
实际开发时,一般用数字表示粗细 400不加粗 700加粗
3.4 字体样式
CSS 使用 font-style 属性设置文本的风格。
语法:
p {
font-style: normal;
}
3.5 字体的综合写法
字体属性可以把以上文字样式综合来写, 这样可以更节约代码:
body { font: font-style font-weight font-size/line-height font-family;}
使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
3.6 字体总结
4. css文本属性
4.1 文本颜色
color 属性用于定义文本的颜色。
语法:
div {
color: red;
}
4.2 文本对齐
text-align 属性用于设置元素内文本内容的水平对齐方式。
语法:
div {
text-align: center;
}
4.3 修饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
语法:
div {
text-decoration:underline;
}
4.4 文本缩进
text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
语法:
div {
text-indent:20px;
}
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
div {
text-indent:2em;
}
em 是一个相对单位,就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小,则会按照父元素的 1 个文字大小。
4.5 行间距
line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离
语法:
p {
line-height: 26px;
}
行高的文本分为 上间距 文本高度 下间距 = 行间距
4.6 文本属性总结
5. CSS样式表
按照 CSS 样式书写的位置(或者引入的方式),CSS 样式表可以分为三大类:
5.1 行内样式表(行内式)
行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
语法:
青春不常在,抓紧谈恋爱
style 其实就是标签的属性,在双引号中间,写法要符合 CSS 规范
可以控制当前的标签设置样式
5.2 内部样式表(嵌入式)
内部样式表(内嵌样式表)是写到html页面内部. 是将所有的 CSS 代码抽取出来,单独放到一个
一般会放在文档的 head标签中
可以方便控制当前整个页面中的元素样式设置
5.3 外部样式表(链接式)
实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中,之后把CSS文件引入到 HTML 页面中使用
引入外部样式表分为两步:
新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。
在 HTML 页面中,使用 标签引入这个文件。
语法:
5.4 CSS 引入方式总结
6. Chrome 调试工具
Ctrl+滚轮 可以放大开发者工具代码大小。
左边是 HTML 元素结构,右边是 CSS 样式。
右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色。
Ctrl + 0 复原浏览器大小。
如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。
7. CSS 的复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,可以更准确、更高效的选择目标元素(标签) 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
7.1 后代选择器 (重要)
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
元素1 元素2 { 样式声明 }
表示选择元素 1 里面的所有元素 2 (后代元素)。
eg:
ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */
说明:
元素1 和 元素2 中间用空格隔开
元素1 是父级,元素2 是子级,最终选择的是元素2
元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可
元素1 和 元素2 可以是任意基础选择器
7.2子选择器 (重要)
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。(简单理解就是选亲儿子元素)
语法:
元素1 > 元素2 { 样式声明 }
表示选择元素1 里面的所有直接后代(子元素) 元素2 。
例子:
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
说明:
元素1 和 元素2 中间用 > 隔开
元素1 是父级,元素2 是子级,最终选择的是元素2
元素2 必须是亲儿子,其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器
7.3 并集选择器 (重要)
并集选择器可以选择多组标签, 同时为他们定义相同的样式,通常用于集体声明。并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法:
元素1,元素2 { 样式声明 }
表示选择元素1 和 元素2。
eg:
ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */
说明:
元素1 和 元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
7.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
语法:
伪类选择器书写最大的特点是用冒号(:)表示,比如
:hover
:first-child
7.4.1链接伪类选择器
a:link 没有点击过的(访问过的)链接 a:visited 点击过的(访问过的)链接 a:hover 鼠标经过的那个链接 a:active 鼠标正在按下还没有弹起鼠标的那个链接
注意:
为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。
因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
语法:
a 是标签选择器 所有的链接
a {
color: gray;
}
:hover 是链接伪类选择器 鼠标经过
a:hover {
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
7.4.2 :focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况 input 类表单元素才能获取
eg:
input:focus {
background-color:yellow;
}
7.5 复合选择器总结
8. CSS的显示模式
元素显示模式就是元素(标签)以什么方式进行显示,比如 div 自己占一行,比如一行可以放多个 span。
HTML 元素一般分为块元素和行内元素两种类型。
8.1 元素显示模式的分类
8.1.1 块元素
常见的块元素:
~、 、
、
、、
div 标签是最典型的块元素。
块级元素的特点:
独占一行。
高度,宽度、外边距以及内边距可控。
宽度默认是容器(父级宽度)的100%。
是一个容器及盒子,里面可以放行内或者块级元素。
注意:
文字类的元素内不能放块级元素
p 标签主要用于存放文字,因此 p 里面不能放块级元素,特别是不能放 div
同理, h1>~h6 等都是文字类块级标签,里面也不能放其他块级元素
8.1.2 行内元素
常见的行内元素:
、、、、、、、、、
span 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
相邻行内元素在一行上,一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
注意:
链接里面不能再放链接
特殊情况链接 a 里面可以放块级元素,但是给 a 转换一下块级模式最安全
8.1.3 行内块元素
常见的行内块标签:
、 、
它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点:
和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
一行可以显示多个(行内元素特点)。
默认宽度就是它本身内容的宽度(行内元素特点)。
高度,行高、外边距以及内边距都可以控制(块级元素特点)。
8.1.4 元素显示模式总结
学习元素显示模式的主要目的就是分清它们各自的特点,当网页布局的时候,在合适的地方用合适的标签元素。
8.1.5 元素显示模式的转换
一个模式的元素需要另外一种模式的特性 比如想要增加链接 a 的触发范围。
转换方式:
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display: inline-block;
9. CSS的背景
通过 CSS 背景属性,可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
9.1 背景颜色
background-color 定义元素的背景颜色
语法:
background-color:颜色值;
元素背景颜色默认值是 transparent(透明)
background-color:transparent;
9.2 背景图片
background-image 定义元素的背景图片
语法:
background-image : none | url (url)
背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号。
9.3 背景平铺
background-repeat 设置元素背景图像的平铺
语法:
background-repeat: repeat | no-repeat | repeat-x | repeat-y
9.4 背景图片位置
background-position 属性可以改变图片在背景中的位置
语法:
background-position: x y;
参数代表的意思是:x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位 说明:
参数是方位名词:
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
参数是精确单位:
如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
参数是混合单位:
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标
9.5 背景图片固定
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
语法:
background-attachment : scroll | fixed
background-attachment 可以制作视差滚动的效果。
9.6 背景样式合写
没有特定的书写顺序,一般习惯约定顺序为: background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
语法:
background: transparent url(image.jpg) repeat-y fixed top ;
9.7 背景色半透明
CSS3 提供了背景颜色半透明的效果。
语法:
background: rgba(0, 0, 0, 0.3);
最后一个参数是 alpha 透明度,取值范围在 0~1之间
我们习惯把 0.3 的 0 省略掉,写为 background: rgba(0, 0, 0, .3);
背景半透明是指盒子背景半透明,盒子里面的内容不受影响
9.8 背景总结
实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置.
10. CSS 的三大特性
CSS 有三个非常重要的三个特性:层叠性、继承性、优先级。
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则:
样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
样式不冲突,不会层叠
1. 层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则:
样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
样式不冲突,不会层叠
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9yfxNrdN-1658322117890)(images\1571490015544.png)]
2、继承性
CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。恰当地使用继承可以简化代码,降低 CSS 样式的复杂性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BjuNFSbX-1658322117890)(images\1571490049279.png)]
子元素可以继承父元素的样式:
(text-,font-,line-这些元素开头的可以继承,以及color属性)
继承性口诀:龙生龙,凤生凤,老鼠生的孩子会打洞
行高的继承性:
body {
font : 12px/1.5 Microsoft YaHei;
}
行高可以跟单位也可以不跟单位
如果子元素没有设置行高,则会继承父元素的行高为 1.5
此时子元素的行高是:当前子元素的文字大小 * 1.5
body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
3、优先级
当同一个元素指定多个选择器,就会有优先级的产生。
选择器相同,则执行层叠性
选择器不同,则根据选择器权重执行
选择器优先级计算表格:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ug6lZlxa-1658322117891)(images\1571490129794.png)]
优先级注意点:
权重是有4组数字组成,但是不会有进位。
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…
等级判断从左向右,如果某一位数值相同,则判断下一位数值。
可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
继承的权重是0, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是 0。
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
二、盒子模型
1、网页布局的本质
网页布局的核心本质: 就是利用 CSS 摆盒子。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dIhaD7Ik-1658322117891)(images\1571492334739.png)]
网页布局过程:
先准备好相关的网页元素,网页元素基本都是盒子 Box 。
利用 CSS 设置好盒子样式,然后摆放到相应位置。
往盒子里面装内容
2、盒子模型(Box Model)组成
盒子模型:把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框 、外边距 、内边距 、和 实际内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9icNqiMI-1658322117892)(images\1571492536942.png)]
3、边框(border)
3.1、边框的使用
1、border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色;
2、语法:
border : border-width || border-style || border-color;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-54NSbq9e-1658322117892)(images\1571492659260.png)]
边框样式 border-style 可以设置如下值:
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线
dotted:边框为点线
3、边框的合写分写
边框简写:
border : 1px solid red;
边框分开写法:
border-top : 1px solid red;
3.2、表格的细线边框
1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
2、语法:
border-collapse : collapse;
collapse 单词是合并的意思
border-collapse: collapse; 表示相邻边框合并在一起
3.3、边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
测量盒子大小的时候,不量边框。
如果测量的时候包含了边框,则需要 width/height 减去边框宽度
4、内边距(padding)
4.1、内边距的使用方式
1、padding 属性用于设置内边距,即边框与内容之间的距离。
2、语法:
合写属性:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WSK2kPAO-1658322117892)(images\1571493298248.png)]
分写属性:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t0qk69YZ-1658322117893)(images\1571493260536.png)]
4.2、内边距会影响盒子实际大小
1、当我们给盒子指定 padding 值之后,发生了 2 件事情:
内容和边框有了距离,添加了内边距。
padding影响了盒子实际大小。
2、内边距对盒子大小的影响:
如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。
3、解决方案:
如果保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小即可。
5、外边距(margin)
5.1、外边距的使用方式
margin 属性用于设置外边距,即控制盒子和盒子之间的距离。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-05JXjxuW-1658322117893)(images\1571493741272.png)]
5.2、外边距典型应用
外边距可以让块级盒子水平居中的两个条件:
盒子必须指定了宽度(width)。
盒子左右的外边距都设置为 auto 。
常见的写法,以下三种都可以:
margin-left : auto; margin-right : auto;
margin : auto;
margin : 0 auto;
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
5.3、外边距合并
使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。
主要有两种情况:
1、相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZuuRteMO-1658322117894)(images\1571494239103.png)]
解决方案: 尽量只给一个盒子添加 margin 值。
2、嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CNZkujS2-1658322117894)(images\1571494373778.png)]
解决方案:
可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加 overflow:hidden。
5.4、清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
* {
padding : 0;
margin : 0;
}
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了
三、PS 基本操作
因为网页美工大部分效果图都是利用 PS(Photoshop)来做的,所以以后我们大部分切图工作都是在 PS 里面完成。
部分操作:
文件→打开 :可以打开我们要测量的图片
Ctrl+R:可以打开标尺,或者 视图→标尺
右击标尺,把里面的单位改为像素
Ctrl+ 加号(+)可以放大视图, Ctrl+ 减号(-)可以缩小视图
按住空格键,鼠标可以变成小手,拖动 PS 视图
用选区拖动 可以测量大小
Ctrl+ D 可以取消选区,或者在旁边空白处点击一下也可以取消选区
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bmt7PVau-1658322117894)(images\1571494543539.png)] 我们大部分切图工作都是在 PS 里面完成。
部分操作:
文件→打开 :可以打开我们要测量的图片
Ctrl+R:可以打开标尺,或者 视图→标尺
右击标尺,把里面的单位改为像素
Ctrl+ 加号(+)可以放大视图, Ctrl+ 减号(-)可以缩小视图
按住空格键,鼠标可以变成小手,拖动 PS 视图
用选区拖动 可以测量大小
Ctrl+ D 可以取消选区,或者在旁边空白处点击一下也可以取消选区
[外链图片转存中…(img-Bmt7PVau-1658322117894)]
你可能感兴趣的:(前端零基础,css,前端,css3)
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杨
Python python chrome drivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
虚拟 DOM 的优缺点有哪些
咕噜签名分发
前端 javascript 开发语言
虚拟DOM(VirtualDOM)技术作为现代前端开发中的重要组成部分,已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势,同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点,深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异,最小化实际DOM操作,从而减少页面重渲染时的性能消耗。这种优
3、JavaWeb-Ajax/Axios-前端工程化-Element
所谓远行Misnearch
# JavaWeb 前端 ajax elementui java 前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML,异步的JS和XMLJS网页动作,XML一种标记语言,存储数据,作用:数据交换:通过Ajax给服务器发送请求,并获取服务器响应的数据异步交互:在不重新加载整个页面的情况下,与服务器交换数据并实现更新部分网页的技术,例如:搜索联想、用户名是否可用的校验等等。同步与异步:同步:服务器在处理中客户端要处于等待状态,输入域名
java实体中返回前端的double类型四舍五入(格式化)
婲落ヽ紅顏誶
java
根据业务,需要通过后端给前端返回部分double类型的数值,一般需要保留两位小数,使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
Django forms组件
在飞行-米龙
Django django python 后端
【一】引入【1】实现登陆验证功能(1)需求分析登陆验证需要前后端交互,采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容(2)后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
Web前端Html的表单
任家伟
前端 html
表单的关键字:form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读,不可修改,但是可以提交disabled=“disabled”禁用组件不可修改,不能提交type=“password”密码框type=“radio”单
Thinkphp - 详细实现网站系统登录功能,附带 Mysql 数据库设置、Web 前端展示界面、信息校验等(详细代码,即设计过程)
王佳斌
+ Thinkphp mysql 前端 数据库
前言登录功能,是我们几乎开发每个系统都必须的模块。登录功能设计思路,主要包括几个方面。用户输入网址展示登录页面用户输入用户名,密码等点击登录进行信息校验校验通过之后,记录用户登录信息,跳转指定页面用户校验失败,提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面,我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
react native 总结
一切顺势而行
react native react.js javascript
reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
程序员开发技术整理
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)是一种函数式编程的概念,指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
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
基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java
计算机程序老哥
作者主页:计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言:Java数据库:MySQL系统架构:B/S后端:SSM(Spring+SpringMVC+Mybatis)前端:Vue工具:IDEA或者Eclipse,JDK1.8,Maven二、系统介绍2.1图片展示注册登录页面:登陆.png前端页面功能:首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
javascript实现SM2加密解密
人生在勤,不索何获
javascript 前端 jquery
前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
前端埋点解决方案
zhu_zhu_xia
前端
一、前言:基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2),入口文件接入sdk以及添加配置(func
webpack快速基础
风漫漫雨歇歇
webpack webpack 前端 前端框架
文章目录webpack快速基础1.概念1.1入口1.2输出(output)1.3loader1.4插件(plugin)2.建立项目,用于测试功能2.1安装webpack,2.2创建webpack配置文件,2.3配置package.json,运行项目3.配置mode开发环境4.配置entry编译入口5.配置output编译出口6.配置加载csswebpack快速基础1.概念webpack是现代Jav
如何提出令人爱回答的好问题?
兮若耶
我们经常会遇到这样的问题,如我适合做什么?这个名词怎么解释?大部分人面对这样的问题时,要么答非所问,要么无从下手。现在的很多事物都是速成的,只是好的问题并没有那么容易被提出来。而提不好的问题,可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时,能听到很多的比喻和新观点,而这些是在书上和网上找不到的。这些新的有用的东西,都在前端被实践着,暂时来不及把知识系统
谈谈对前端性能监控的理解和实践
Layla_c
web jave python 前端
一、谈谈对前端性能监控的理解和实践前端性能监控是确保网页或应用高效、稳定运行的关键环节,它涉及对前端页面加载速度、资源消耗、错误率等指标的实时监控和预警。通过前端性能监控,开发者和运维团队能够及时发现并解决性能瓶颈,从而提升用户体验和系统稳定性。理解前端性能监控,首先要明确其重要性。在移动互联网时代,用户对网页和应用的响应速度有着极高的要求。如果页面加载缓慢或出现卡顿,用户可能会选择离开,这对企业
mineadmin使用docker启动方式
qq_38812523
docker php 容器
找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端,https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录,把前端文件复制过来。#容器内访问宿主机的地址用:host.docker.internal#宿主机也可以在ho
为什么需要使用版本控制工具(如Git)?它如何帮助管理前端开发项目?
智伴科技
git
版本控制工具(如Git)在前端开发项目中扮演着重要的角色,主要有以下几方面的作用:1.**版本管理**:版本控制工具可以帮助开发团队管理项目的不同版本,记录每次代码变动的历史记录,方便追踪和回溯。开发人员可以通过版本控制工具轻松地查看、对比和恢复以前的版本。2.**协同合作**:多人开发同一个项目时,版本控制工具可以协助团队成员协同工作,避免代码冲突、重复工作和混乱。开发人员可以通过版本控制工具共
低代码与前端开发架构:重塑软件开发的未来
快乐非自愿
低代码 架构 前端
随着技术的不断进步和数字化转型的深入,软件开发领域正经历着一场革命性的变革。在这场变革中,低代码开发平台和前端开发架构扮演着越来越重要的角色。本文将探讨低代码与前端开发架构之间的关系,并分析它们如何共同推动软件开发的创新与发展。低代码开发平台的崛起低代码开发平台(Low-CodeDevelopmentPlatform,LCDP)是一种新型的软件开发方式,它允许开发者通过图形化界面、预构建的模块和模
CSS color-mix() 函数
蚂蚁上的大象
前端的那些事 CSS css 前端
CSScolor-mix()函数是近年来CSS色彩模块新增的一项强大功能,允许开发者在样式表中直接混合两种或多种颜色。这一特性为设计师和开发者带来了更多创作空间,让网页的颜色设计变得更加生动和丰富。本文将带你了解color-mix()函数的使用方法及其在实际项目中的应用。什么是CSScolor-mix()函数?color-mix()是一个即将推出的CSS颜色函数,它能够根据指定的颜色模型(如RGB
DIV + CSS 布局:盒子内容超出宽度时,不换行,以滚动条形式水平滑动
01空间
常见场景解决方案 css html
滚动条水平滚动展示溢出内容htmlcss(less)思路html11112222333344445555666677778888css(less).outer{background-color:#39a9ed;overflow-x:auto;&::-webkit-scrollbar{display:none;}white-space:nowrap;.item{display:inline-bloc
接口测试之测试原则、测试用例、测试流程......
程序员老鹰
测试工具 功能测试 测试用例 测试覆盖率 系统安全
一、接口的介绍软件测试中,常说的接口有两种:图形用户接口(GUI,人与程序的接口)、应用程序编程接口(API)。接口(API)是系统与系统之间,模块与模块之间或者服务与服务之间相互调用的入口。它的本质:其实就是一种约定,在开发前期,我们约定接口会接收什么数据;在处理完成后,它又会返回什么数据。开发岗位分为前端和后端,他们相互配合完成工作,会协商接口的定义方法。一般后端定义接口,前端调用接口。前后端
【前端】CommonJS和ES Module
Lucky小维
前端 前端
区别语法差异:CommonJS:使用require()导入模块,使用module.exports或exports导出模块。ESModule:使用import导入模块,使用export导出模块。编译时vs运行时:CommonJS是在运行时加载模块,模块代码是动态执行的。ESModule是在编译时静态解析模块依赖关系,以便更好地进行优化和静态分析。异步加载:CommonJS不支持异步加载模块,只能同步
基于python+vue高校毕业生离校管理系统flask-django-php-nodejs
QQ511008285
python vue.js flask django node.js php
课题主要采用Uni-weixin、django架构技术,前端以小程序页面呈现给用户,结合后台java语言使页面更加完善,后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能,从而实现智能化的管理方式,提高工作效率。关键字:高校毕业生离校管理系统;django框架;MySQL数据库语言:
Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题
百思不得小李
JS实战记录 vue2实战记录 javascript 前端 vue.js
1.process.env是Node.js中的一个环境1.打开命令行查看环境:2.process.env与VueCLI项目VueCli有以下三种运行模式development模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduction模式用于vue-cli-servicebuild和vue-cli-servicetest:e2
浅谈前端路由history和hash的理解
怂怂敲代码
前端 哈希算法 算法
hash和history在前端面试中是很常考的一道题目,可能很多人对于history和hash的理解差异性就是,他们两者的url字段一个没有#号一个有#号,但是有没有想过为什么这样呢,有无#号又有什么差异呢,这篇文章谈一谈我对前端路由history和hash的理解。hash和history都可以用于前后端分离项目,且两者有各自的特点和各自的使用场景。一、前端路由原理1、SPASPA,即单页面应用(
js动画html标签(持续更新中)
843977358
html js 动画 media opacity
1.jQuery 效果 - animate() 方法 改变 "div" 元素的高度: $(".btn1").click(function(){ $("#box").animate({height:"300px
springMVC学习笔记
caoyong
springMVC
1、搭建开发环境
a>、添加jar文件,在ioc所需jar包的基础上添加spring-web.jar,spring-webmvc.jar
b>、在web.xml中配置前端控制器
<servlet>
&nbs
POI中设置Excel单元格格式
107x
poi style 列宽 合并单元格 自动换行
引用:http://apps.hi.baidu.com/share/detail/17249059
POI中可能会用到一些需要设置EXCEL单元格格式的操作小结:
先获取工作薄对象:
HSSFWorkbook wb = new HSSFWorkbook();
HSSFSheet sheet = wb.createSheet();
HSSFCellStyle setBorder = wb.
jquery 获取A href 触发js方法的this参数 无效的情况
一炮送你回车库
jquery
html如下:
<td class=\"bord-r-n bord-l-n c-333\">
<a class=\"table-icon edit\" onclick=\"editTrValues(this);\">修改</a>
</td>"
j
md5
3213213333332132
MD5
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
public class MDFive {
public static void main(String[] args) {
String md5Str = "cq
完全卸载干净Oracle11g
sophia天雪
orale数据库 卸载干净 清理注册表
完全卸载干净Oracle11g
A、存在OUI卸载工具的情况下:
第一步:停用所有Oracle相关的已启动的服务;
第二步:找到OUI卸载工具:在“开始”菜单中找到“oracle_OraDb11g_home”文件夹中
&
apache 的access.log 日志文件太大如何解决
darkranger
apache
CustomLog logs/access.log common 此写法导致日志数据一致自增变大。
直接注释上面的语法
#CustomLog logs/access.log common
增加:
CustomLog "|bin/rotatelogs.exe -l logs/access-%Y-%m-d.log 
Hadoop单机模式环境搭建关键步骤
aijuans
分布式
Hadoop环境需要sshd服务一直开启,故,在服务器上需要按照ssh服务,以Ubuntu Linux为例,按照ssh服务如下:
sudo apt-get install ssh
sudo apt-get install rsync
编辑HADOOP_HOME/conf/hadoop-env.sh文件,将JAVA_HOME设置为Java
PL/SQL DEVELOPER 使用的一些技巧
atongyeye
java sql
1 记住密码
这是个有争议的功能,因为记住密码会给带来数据安全的问题。 但假如是开发用的库,密码甚至可以和用户名相同,每次输入密码实在没什么意义,可以考虑让PLSQL Developer记住密码。 位置:Tools菜单--Preferences--Oracle--Logon HIstory--Store with password
2 特殊Copy
在SQL Window
PHP:在对象上动态添加一个新的方法
bardo
方法 动态添加 闭包
有关在一个对象上动态添加方法,如果你来自Ruby语言或您熟悉这门语言,你已经知道它是什么...... Ruby提供给你一种方式来获得一个instancied对象,并给这个对象添加一个额外的方法。
好!不说Ruby了,让我们来谈谈PHP
PHP未提供一个“标准的方式”做这样的事情,这也是没有核心的一部分...
但无论如何,它并没有说我们不能做这样
ThreadLocal与线程安全
bijian1013
java java多线程 threadLocal
首先来看一下线程安全问题产生的两个前提条件:
1.数据共享,多个线程访问同样的数据。
2.共享数据是可变的,多个线程对访问的共享数据作出了修改。
实例:
定义一个共享数据:
public static int a = 0;
Tomcat 架包冲突解决
征客丶
tomcat Web
环境:
Tomcat 7.0.6
win7 x64
错误表象:【我的冲突的架包是:catalina.jar 与 tomcat-catalina-7.0.61.jar 冲突,不知道其他架包冲突时是不是也报这个错误】
严重: End event threw exception
java.lang.NoSuchMethodException: org.apache.catalina.dep
【Scala三】分析Spark源代码总结的Scala语法一
bit1129
scala
Scala语法 1. classOf运算符
Scala中的classOf[T]是一个class对象,等价于Java的T.class,比如classOf[TextInputFormat]等价于TextInputFormat.class
2. 方法默认值
defaultMinPartitions就是一个默认值,类似C++的方法默认值
java 线程池管理机制
BlueSkator
java线程池 管理机制
编辑
Add
Tools
jdk线程池
一、引言
第一:降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二:提高响应速度。当任务到达时,任务可以不需要等到线程创建就能立即执行。第三:提高线程的可管理性。线程是稀缺资源,如果无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,使用线程池可以进行统一的分配,调优和监控。
关于hql中使用本地sql函数的问题(问-答)
BreakingBad
HQL 存储函数
转自于:http://www.iteye.com/problems/23775
问:
我在开发过程中,使用hql进行查询(mysql5)使用到了mysql自带的函数find_in_set()这个函数作为匹配字符串的来讲效率非常好,但是我直接把它写在hql语句里面(from ForumMemberInfo fm,ForumArea fa where find_in_set(fm.userId,f
读《研磨设计模式》-代码笔记-迭代器模式-Iterator
bylijinnan
java 设计模式
声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.util.Arrays;
import java.util.List;
/**
* Iterator模式提供一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象内部表示
*
* 个人觉得,为了不暴露该
常用SQL
chenjunt3
oracle sql C++ c C#
--NC建库
CREATE TABLESPACE NNC_DATA01 DATAFILE 'E:\oracle\product\10.2.0\oradata\orcl\nnc_data01.dbf' SIZE 500M AUTOEXTEND ON NEXT 50M EXTENT MANAGEMENT LOCAL UNIFORM SIZE 256K ;
CREATE TABLESPA
数学是科学技术的语言
comsci
工作 活动 领域模型
从小学到大学都在学习数学,从小学开始了解数字的概念和背诵九九表到大学学习复变函数和离散数学,看起来好像掌握了这些数学知识,但是在工作中却很少真正用到这些知识,为什么?
最近在研究一种开源软件-CARROT2的源代码的时候,又一次感觉到数学在计算机技术中的不可动摇的基础作用,CARROT2是一种用于自动语言分类(聚类)的工具性软件,用JAVA语言编写,它
Linux系统手动安装rzsz 软件包
daizj
linux sz rz
1、下载软件 rzsz-3.34.tar.gz。登录linux,用命令
wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载。
2、解压 tar zxvf rzsz-3.34.tar.gz
3、安装 cd rzsz-3.34 ; make posix 。注意:这个软件安装与常规的GNU软件不
读源码之:ArrayBlockingQueue
dieslrae
java
ArrayBlockingQueue是concurrent包提供的一个线程安全的队列,由一个数组来保存队列元素.通过
takeIndex和
putIndex来分别记录出队列和入队列的下标,以保证在出队列时
不进行元素移动.
//在出队列或者入队列的时候对takeIndex或者putIndex进行累加,如果已经到了数组末尾就又从0开始,保证数
C语言学习九枚举的定义和应用
dcj3sjt126com
c
枚举的定义
# include <stdio.h>
enum WeekDay
{
MonDay, TuesDay, WednesDay, ThursDay, FriDay, SaturDay, SunDay
};
int main(void)
{
//int day; //day定义成int类型不合适
enum WeekDay day = Wedne
Vagrant 三种网络配置详解
dcj3sjt126com
vagrant
Forwarded port
Private network
Public network
Vagrant 中一共有三种网络配置,下面我们将会详解三种网络配置各自优缺点。
端口映射(Forwarded port),顾名思义是指把宿主计算机的端口映射到虚拟机的某一个端口上,访问宿主计算机端口时,请求实际是被转发到虚拟机上指定端口的。Vagrantfile中设定语法为:
c
16.性能优化-完结
frank1234
性能优化
性能调优是一个宏大的工程,需要从宏观架构(比如拆分,冗余,读写分离,集群,缓存等), 软件设计(比如多线程并行化,选择合适的数据结构), 数据库设计层面(合理的表设计,汇总表,索引,分区,拆分,冗余等) 以及微观(软件的配置,SQL语句的编写,操作系统配置等)根据软件的应用场景做综合的考虑和权衡,并经验实际测试验证才能达到最优。
性能水很深, 笔者经验尚浅 ,赶脚也就了解了点皮毛而已,我觉得
Word Search
hcx2013
search
Given a 2D board and a word, find if the word exists in the grid.
The word can be constructed from letters of sequentially adjacent cell, where "adjacent" cells are those horizontally or ve
Spring4新特性——Web开发的增强
jinnianshilongnian
spring spring mvc spring4
Spring4新特性——泛型限定式依赖注入
Spring4新特性——核心容器的其他改进
Spring4新特性——Web开发的增强
Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC
Spring4新特性——Groovy Bean定义DSL
Spring4新特性——更好的Java泛型操作API
Spring4新
CentOS安装配置tengine并设置开机启动
liuxingguome
centos
yum install gcc-c++
yum install pcre pcre-devel
yum install zlib zlib-devel
yum install openssl openssl-devel
Ubuntu上可以这样安装
sudo aptitude install libdmalloc-dev libcurl4-opens
第14章 工具函数(上)
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/
Xelsius 2008 and SAP BW at a glance
blueoxygen
BO Xelsius
Xelsius提供了丰富多样的数据连接方式,其中为SAP BW专属提供的是BICS。那么Xelsius的各种连接的优缺点比较以及Xelsius是如何直接连接到BEx Query的呢? 以下Wiki文章应该提供了全面的概览。
http://wiki.sdn.sap.com/wiki/display/BOBJ/Xcelsius+2008+and+SAP+NetWeaver+BW+Co
oracle表空间相关
tongsh6
oracle
在oracle数据库中,一个用户对应一个表空间,当表空间不足时,可以采用增加表空间的数据文件容量,也可以增加数据文件,方法有如下几种:
1.给表空间增加数据文件
ALTER TABLESPACE "表空间的名字" ADD DATAFILE
'表空间的数据文件路径' SIZE 50M;
&nb
.Net framework4.0安装失败
yangjuanjava
.net windows
上午的.net framework 4.0,各种失败,查了好多答案,各种不靠谱,最后终于找到答案了
和Windows Update有关系,给目录名重命名一下再次安装,即安装成功了!
下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=17113
方法:
1.运行cmd,输入net stop WuAuServ
2.点击开