CSS总结
CSS引入方式
CSS选择器
CSS常用属性总结
CSS优先级
CSS页面布局
Flex布局
Grid布局
Table布局
布局垂直居中
响应式布局
box-sizing属性
CSS引入方式
行内引入:
我是一个块级的标签
嵌入式:将CSS样式表放到head中用
...
导入式: 将一个独立的.css文件引入HTML文件中,导入式使用@import 引入外部CSS文件,
...
链接式引入:将一个独立的.css文件引入到HTML文件中,使用标记写在标记中。 链接式会以网页文件主体装载前装载CSS文件。
...
样式的应用顺序:
行内样式优先级最高
针对相同的样式属性,不同的样式属性将以合并的方式呈现
相同样式并且相同属性,呈现方式在
中的顺序决定,后面会覆盖前面属性
!important 指定样式规则应用最优先
CSS选择器
基本选择器:
1、通用元素选择器:
表示应用到所有的标签 。*{margin:0;padding:0;}
2、标签选择器
匹配所有使用 div 标签的元素(可以匹配所有标签)div {color: yellow}
3、类选择器
匹配所有class属性中包含info的元素。
语法:.类名{样式}(类名不能以数字开头,类名要区分大小写。)
.yanse{color:yellow}
我的div
4、id选择器
使用id属性来调用样式,在一个网页中id的值都是唯一的(是W3C规范而不是规则,所以不会报错)。
语法:#ID名{样式}(ID名不能以数字开头
#Mycolor {color: yellow}
H3
组合选择器:
1、多元素组合选择器
同时匹配两个或多个标签,用逗号隔开
p,a,div{color: yellow;}
段落
link
kuai
2、后代元素选择器
匹配所有div标签里嵌套的P标签,之间用空格分隔。
div p {color: yellow;}
3、子代元素选择器
匹配所有div标签里嵌套的子P标签,之间用 >分隔。
div > p {color: yellow;}
4、兄弟元素选择器
匹配所有紧随div标签之后的同级标签P,之间用+分隔(只能匹配一个)。
div + p {color: yellow;}
div
ppp
伪类选择器:
link、hover、active、visited
a:link(未访问的链接状态),用于定义了常规的链接状态。
a:hover(鼠标放在链接上的状态),用于产生视觉效果。
a:active(在链接上按下鼠标时的状态)。
a:visited(已访问过的链接状态),可以看出已经访问过的链接。
before、after
P:before 在每个元素的内容之前插入内容;
P:after 在每个
元素的内容之后插入内容。
CSS常用属性总结
1.颜色属性:
transparent
全透明,使用方式:color: transparent
opacity
元素的透明度,语法:opacity: 0.5
属性值在0.0到1.0范围内,0表示透明,1表示不透明。
filter滤镜属性(只适用于早期的IE浏览器,语法:filter:alpha(opacity:20);
)。
2.字体属性:
font-style: 用于规定斜体文本
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
font-weight: 设置文本的粗细
normal(默认)
bold(加粗)
bolder(相当于
和
标签)
lighter (常规)
100 ~ 900 整百(400=normal,700=bold)
font-size: 设置字体的大小
默认值:medium
可选参数值:xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
相对于父标签中字体的尺寸进行调节。可选参数值:smaller、 larger
百分比指定文字大小。
用长度值指定文字大小,不允许负值。
font-family:字体名称
使用逗号隔开多种字体(优先级从前向后,如果系统中没有找到当前字体,则往后面寻找)
font:简写属性
语法:font:字体大小/行高 字体;(字体要在最后)
3.文本属性:
text-align: 文本的水平对齐方式
line-height: 文本行高
vertical-align: 文本所在行高的垂直对齐方式
baseline 默认
sub 垂直对齐文本的下标,和标签一样的效果
super 垂直对齐文本的上标,和标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐
text-transform: 属性控制文本的大小写
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。
text-overflow: 文本溢出样式
text-decoration: 文本的装饰
none 默认。
underline 下划线。
overline 上划线。
line-through 中线。
text-shadow:文本阴影
text-shadow: 5px 5px 5px #888;
第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
word-wrap:自动换行
4.背景属性
背景颜色
background-image 设置图像为背景
url(“1.png”); 图片地址
background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果
background-position 设置背景图像的位置坐标
background-position: center center; 图片置中,x轴center,y轴center
1px -195px 截取图片某部分,分别代表坐标x,y轴
background-repeat 设置背景图像不重复平铺
no-repeat 设置图像不重复,常用
round 自动缩放直到适应并填充满整个容器
space 以相同的间距平铺且填充满整个容器
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background 简写
background: url(“1.png”) no-repeat 0 -196px;
background: url(“1.png”) no-repeat center bottom 15px;
background: url(“1.png”) no-repeat left 30px bottom 15px;
5.列表属性
list-style-type: 列表项标志的类型
none 去除标志
square; 方框
circle; 空心圆
upper-alph; & disc; 实心圆
list-style-image:将图象设置为列表项标志
list-style-position:列表项标志的位置
list-style:(缩写,3个参数为以上属性)
CSS优先级
当有多个样式对作用于一个标签时便使用到CSS优先级,它来决定哪些样式会被作用于该标签,哪些会被覆盖。
1.选择器的优先级
CSS 7 种基础的选择器:
ID 选择器, 如 #id{}
类选择器, 如 .class{}
属性选择器, 如 a[href=“segmentfault.com”]{}
伪类选择器, 如 :hover{}
伪元素选择器, 如 ::before{}
标签选择器, 如 span{}
通配选择器, 如 *{}
对于标签自有的属性,选择器的优先级规则为
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
2.选择符的优先级
所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成,组合的方式有 3 种:
后代选择符: .father .child{}
子选择符: .father > .child{}
相邻选择符: .bro1 + .bro2{}
当一个标签同时被多个选择符选中,我们便需要确定这些选择符的优先级。我们有如下规则:
计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。
3.多重样式优先级
外部样式表和内部样式表的优先级由其引入顺序有关,一般认为内部样式优先级大于外部样式,也可以认为其相等,因为如果外部样式放在内部样式的后面引入,则外部样式将覆盖内部样式。
内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
如果外部样式表和内部样式表中的样式发生冲突会出现什么情况呢?
这与样式表在 HTML 文件中所处的位置有关。样式被应用的位置越在下面则优先级越高
4.继承样式
一般来说对于文字样式的设置都会具有继承性,例如font-family、font-size、font-weight、color等等,当需要继承样式时,最近的祖先样式比其他祖先样式优先级高 。
规则总结:
CSS 优先规则1 : 最近的祖先样式比其他祖先样式优先级高。
CSS 优先规则2 :"直接样式"比"祖先样式"优先级高。
CSS 优先规则3 :优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
CSS 优先规则4 :计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断
CSS 优先规则5 :属性后插有 !important 的属性拥有最高优先级。若同时插有 !important,则再利用规则 3、4 判断优先级。
错误的说法:
在学习过程中,你可能发现给选择器加权值的说法,即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1,当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签,按理说 110 > 100,应该应用前者的样式,然而事实是应用后者的样式。错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110,但因为 11 个均为类选择器,所以其实总权值最多不能超过 100, 你可以理解为 99.99,所以最终应用后者样式。
CSS页面布局
1. 边框
border-style:边框样式
solid 默认,实线
double 双线
dotted 点状线条
dashed 虚线
border-color:边框颜色
border-width:边框宽度
border-radius:圆角
1个参数:四个角都应用
2个参数:第一个参数应用于 左上、右下;第二个参数应用于 左下、右上
3个参数:第一个参数应用于 左上;第二个参数应用于 左下、右上;第三个参数应用于右下
4个参数:左上、右上、右下、左下(顺时针
border: 简写
border: 2px yellow solid;
box-shadow:边框阴影
box-shadow: 10px 10px 5px #888;
第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
2.盒子模型
padding:用于控制内容与边框之间的距离;
margin: 用于控制元素与元素之间的距离;
padding、margin
表示上右下左都应用
padding-top、margin-top
上
padding-right、margin-right
右
padding-bottom、margin-bottom
下
padding-left、margin-left
左
有一个参数,应用于四边。
两个参数,第一个用于上、下,第二个用于左、右。
三个参数,第一个用于上,第二个用于左、右,第三个用于下。
当我们写html的时候;在我们写body与浏览器之间还存在一块的空白区域
body{
margin:0;
}
3.display
none 不显示。
block 显示为块级元素。
inline 显示为内联元素。
inline-block 行内块元素(会保持块元素的高宽)。
list-item 显示为列表元素。
4.visibility
visible 元素可见
hidden 元素不可见
collapse 当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局。
5. float 浮动
让一行显示两个或多个块级标签,会脱离文档流;如果浮动起来的标签的父级标签没有内容;那么父标签将消失;
clear 清除浮动:
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许两边有浮动对象
6. clip 剪裁图像
rect 剪裁定位元素:
例:clip:rect(0px,60px,200px,0px);
auto 默认值,无剪切
上-右-下-左(顺时针)的顺序提供四个偏移值
区域外的部分是透明的
必须指定 position:absolute;
7.overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
visible 默认值,内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
8. position 规定元素的定位类型
static: 默认值,没有定位,遵从正常的文档流
relative: 相对定位元素,相对于其正常位置进行定位,遵从正常的文档流
absolute: 绝对定位元素,脱离正常文档流
fixed: 绝对定位元素,固定在浏览器某处
通过以下四种属性进行定位:
left、top、right、bottom、z-index
9.z-index 元素层叠顺序
z-index 仅在定位元素上有效(例:position:absolute;)
可以指定负数属性值(例:-1;)
10. outline 边框轮廓
outline-width 轮廓宽度
outline-color 轮廓颜色
outline-style 轮廓样式
11.zoom 缩放比例 :
.zoom1 {
zoom: 100%;
}
.zoom2 {
zoom: 150%;
}
.zoom3 {
zoom: 200%;
}
12.cursor 鼠标的类型形状
cursor 属性规定要显示的光标的类型(形状)。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
13.transform、transition 动画效果
transform 转换,变形
origin 定义旋转基点(left top center right bottom 坐标值) transform-origin: 50px 50px; transform-origin: left;。
rotate 旋转 transform:rotate(50deg) 旋转角度可以为负数,需要先定义origin。
skew 扭曲 transform:skew(50deg,50deg) 分别为相对x轴倾斜,相对y轴倾斜。
scale 缩放 transform:scale(2,3) 横向放大2倍,纵向放大3倍;transform:scale(2) 横竖都放大2倍。
translate 移动 transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动
transition 过渡属性是一个简写属性,用于设置四个过渡属性:
transition-property: 变换的属性(none(没有属性改变)、all(所有属性改变)、具体属性)
transition-duration: 变换持续时间
transition-timing-function: 变换的速率(ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线))
transition-delay: 变换延迟时间
Flex布局
Flex布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。
1.基础
通过指定display: flex
来标识一个弹性布局盒子,称为FLEX容器,容器内部的盒子就成为FLEX容器的成员,容器默认两根轴线,水平的主轴与垂直的交叉轴,主轴的开始位置叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end,容器成员默认按照主轴排列。
2.容器属性
flex-direction
flex-direction
属性决定主轴的方向,取值为row | row-reverse | column | column-reverse
row
默认值:主轴为水平方向,起点在左端。
row-reverse
:主轴为水平方向,起点在右端,容器成员顺序与row顺序相反。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿,容器成员顺序与column
顺序相反。
flex-wrap
flex-wrap
属性决定当轴线方向放不下成员时,是否换行,取值为nowrap | wrap | wrap-reverse
nowrap
默认:不换行,当空间不足时,会按轴线方向成员大小比例缩小的成员
wrap
:距离不够时换行,新起一行排列 -wrap-reverse
:距离不够时换行,新起的一行在上方
flex-flow
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认row nowrap
justify-content
justify-content
属性定义了成员在主轴上的对齐方式,可以很容易地实现多种布局,取值为flex-start | flex-end | center | space-between | space-around
flex-start
默认值:左对齐 -flex-end
:右对齐
center
: 居中对齐 -space-between
:两端对齐,成员之间的间隔都相等。
space-around
:每个成员两侧的间隔相等,成员之间的间隔比成员与边框的间隔大一倍。
align-items
align-items
属性定义成员在交叉轴上如何对齐,取值为flex-start | flex-end | center | baseline | stretch
stretch
默认值:如果成员未设置高度或设为auto
,将占满整个容器的高度。
flex-start
:交叉轴的起点对齐。
flex-end
:交叉轴的终点对齐。
center
:交叉轴的中点对齐。
baseline
: 成员的第一行文字的基线对齐。
align-content
align-content
属性定义了多根轴线的对齐方式。如果成员只有一根轴线,该属性不起作用,取值为flex-start | flex-end | center | space-between | space-around | stretch
stretch
默认值:轴线占满整个交叉轴。
flex-start
:与交叉轴的起点对齐。
flex-end
:与交叉轴的终点对齐。
center
:与交叉轴的中点对齐。
space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
3.成员属性
order
order
属性定义成员的排列顺序,数值越小,排列越靠前,默认为0
flex-grow
flex-grow
属性定义成员的放大比例,默认为0
flex-shrink
flex-shrink
属性定义了成员的缩小比例,默认为1
,即如果空间不足,该成员将缩小。
flex-basis
flex-basis
属性定义了在分配多余空间之前,成员占据的主轴空间main size
,浏览器根据这个属性,计算主轴是否有多余空间,它的默认值为auto
,即成员的本来大小。
flex
flex
属性是flex-grow
, flex-shrink
和flex-basis
的简写,默认值0 1 auto
。后两个属性可选。
align-self
align-self
属性允许单个成员有与其他成员不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
Grid布局
目前CSS
布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid
布局与Flex
布局有一定的相似性,都可以指定容器内部多个成员的位置。不同之处在于,Flex
布局是轴线布局,只能指定成员针对轴线的位置,可以看作是一维布局。Grid
布局则是将容器划分成行和列,产生单元格,然后指定成员所在的单元格,可以看作是二维布局。
1.基础
通过指定display: grid;
指定容器使用Grid
布局,Grid
布局中采用网格布局的区域,称为容器
,容器内部采用网格定位的子元素,称为成员
。容器中水平区域称为行
,垂直区域称为列
,可以将其看作二位数组。划分网格的线就称为网格线
,正常情况下n
行有n + 1
根水平网格线,m
列有m + 1
根垂直网格线。注意当容器设置为Grid
布局以后,容器子元素的float、display: inline-block、display: table-cell、vertical-align和column-*
等设置都将失效。
2.容器属性
grid-template-rows grid-template-columns
grid-template-rows
属性定义每一行的行高,设定为多少行就设置多少个值,取值可以为固定像素,也可以为百分比,grid-template-columns
属性定义每一列的列宽,设定为多少列就设置多少个值,取值可以为固定像素,也可以为百分比
repeat
repeat()
函数可以简化重复的值,其可以自动重复设定的规则
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
有时候,重复写同样的值非常麻烦,尤其网格很多时。这时,可以使用repeat()函数,简化重复的值。上面的代码用repeat()改写如下。
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
auto-fill
有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行或每一列容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充
,当容器不足容纳成员时会自适应换行。
fr关键字
为表示比例关系,网格布局提供了fr
关键字。如果两列的宽度分别为1fr
和2fr
,就表示后者是前者的两倍。
minmax函数
minmax()
函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值,当距离不够时会从最大值自动减少长度或宽度到设定最小值为止。 minmax( [ | | min-content | max-content | auto ] , [ | | | min-content | max-content | auto ] )
auto关键字
auto
关键字表示由浏览器自己决定长度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width
,且这个值大于最大宽度。
grid-row-gap / grid-column-gap/ grid-gap
grid-row-gap
属性设置行与行的间隔,即行间距
grid-column-gap
属性设置列与列的间隔,即列间距
grid-gap
属性是grid-column-gap
和grid-row-gap
的合并简写形式,如果grid-gap
省略了第二个值,浏览器认为第二个值等于第一个值
grid-template-areas
网格布局允许指定区域area
,一个区域由单个或多个单元格组成,grid-template-areas
属性用于定义区域。区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为{areaName}-start
,终止网格线自动命名为{areaName}-end
grid-auto-flow
划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是先行后列,通过设置grid-auto-flow
可以更改为先列后行,grid-auto-flow
属性除了设置成row
和column
,还可以设成row dense
和column dense
,这两个值主要用于某些项目指定位置以后,剩下的项目怎么自动放置。
justify-items / align-items / place-items
justify-items
属性设置成员中内容的水平位置,取值为start | end | center | stretch
align-items
属性设置成员中内容的垂直位置,取值为start | end | center | stretch
place-items
属性是align-items
属性和justify-items
属性的合并简写形式,如果省略第二个值,则浏览器认为与第一个值相等。
stretch
默认值:拉伸,占满单元格的整个宽度。
start
:对齐单元格的起始边缘。
end
:对齐单元格的结束边缘。
center
:单元格内部居中。
justify-content / align-content / place-content
justify-content
属性是整个内容区域在容器里面的水平位置,也就是成员的水平分布,取值为start | end | center | stretch | space-around | space-between | space-evenly
align-content
属性是整个内容区域在容器里面的垂直位置,也就是成员的垂直分布,取值为start | end | center | stretch | space-around | space-between | space-evenly
place-content
属性是align-content
属性和justify-content
属性的合并简写形式,如果省略第二个值,则浏览器认为与第一个值相等。
space-around
- 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
space-between
- 项目与项目的间隔相等,项目与容器边框之间没有间隔。
space-evenly
- 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
grid-auto-columns grid-auto-rows
有时候,一些项目的指定位置,在现有网格的外部。比如网格只有3行,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。grid-auto-columns
属性和grid-auto-rows
属性用来设置,浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns
和grid-template-rows
完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。
3.项目属性
grid-column-start / grid-column-end
·grid-column-start·属性指定左边框所在的垂直网格线,·grid-column-end·属性指定右边框所在的垂直网格线
grid-row-start / grid-row-end
grid-row-start
属性指定上边框所在的水平网格线,grid-row-end
属性指定下边框所在的水平网格线
还可以给轴线命名来指定位置
grid-column / grid-row
grid-column
属性是grid-column-start
和grid-column-end
的合并简写形式,grid-row
属性是grid-row-start
属性和grid-row-end
的合并简写形式。
grid-area
grid-area
属性指定项目放在grid-template-areas
指定的区域,还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end
的合并简写形式,直接指定项目的位置。
justify-self / align-self / place-self
justify-self
属性设置单元格内容的水平位置,跟justify-items
属性的用法完全一致,但只作用于单个项目,取值为start | end | center | stretch;
。 align-self
属性设置单元格内容的垂直位置,跟align-items
属性的用法完全一致,也是只作用于单个项目,取值为start | end | center | stretch;
。
stretch
默认值:拉伸,占满单元格的整个宽度。
start
:对齐单元格的起始边缘。
end
:对齐单元格的结束边缘。
center
:单元格内部居中。
place-self
属性是align-self
属性和justify-self
属性的合并简写形式。
Table布局
最常用的使用方法是制作表格,由于其对占据的空间有着划分的作用,便可以使用来布局。
实例
实现一个简单的布局,将表格的border
、cellpadding
、cellspacing
全部设置为0
,表格的边框和间距就不占有页面空间,它只起到划分空间的作用,如果布局复杂,可以在单元格中再嵌套表格,单元格中的元素或者嵌套的表格用align
和valign
设置对齐方式。要注意的是,在HTML5标准中,的align
、bgcolor
、cellpadding
、cellspacing
、frame
、rules
、summary
、width
属性皆已不再支持,由CSS设置相关属性来呈现效果。
TABLE布局
问题
使用来布局绝对不是一个好的解决方案,对于布局方案首选Flex
布局,稍微复杂的布局可以选择Grid
布局方案,本身是为呈现表格化的数据而设计的,如果使用来呈现数据表格是完全没有问题的。
要比其它html标记占更多的字节,代码的复杂度会大大提升。
会阻塞浏览器渲染引擎的渲染顺序,是整体载入后才开始显示的,没有加载完毕前,为一片空白,而等标签可以逐行渲染,一边加载一边显示。
>经常需要多个关口,因为可以影响在它们之前已经进入的DOM
元素的显示的元素。假设因为表格最后一个单元格的内容过宽而导致纵列大小完全改变,这会造成浏览器的回流从而引发渲染性能问题。
里显示图片时有可能需要你把单个、有逻辑性的图片切成多个图,这个主要看需求,中进行单元格合并操作也是可行的方案。
会影响其单元格内部的某些布局属性的生效。
的各种属性逐渐不受支持,需要使用CSS
控制显示相应效果。
的语义是数据表格,使用来布局不利于SEO
。
若布局较为复杂,则可能造成多层嵌套,代码嵌套过多表现的过于复杂。
display
倘若需要类似于表格的布局,可以使用display: table;
来呈现,display
的table
属性值只是声明了某些元素在浏览器中的样式,其并不包含语义,他的属性基本能够对应系列标签,并且还能将缺少的表格元素会被浏览器以匿名方式创建,CSS2.1
规范中写道:CSS2.1
表格模型中的元素,可能不会全部包含在除HTML
之外的文档语言中。这时,那些“丢失”的元素会被模拟出来,从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table
对象,使其符合table/inline-table、table-row、table-cel
l的三层嵌套关系。
table
类似:此元素会作为块级表格来显示,表格前后带有换行符。
inline-table
类似:此元素会作为内联表格来显示,表格前后没有换行符。
table-header-group
类似:此元素会作为一个或多个行的分组来显示。
table-footer-group
类似:此元素会作为一个或多个行的分组来显示。
table-row
类似:此元素会作为一个表格行显示。
table-row-group
类似:此元素会作为一个或多个行的分组来显示。
table-column
类似
:此元素会作为一个单元格列显示。
table-column-group
类似
:此元素会作为一个或多个列的分组来显示。
table-cell
类似和:此元素会作为一个表格单元格显示。
table-caption
类似
:此元素会作为一个表格标题显示。
布局垂直居中
首先将
与
的高度设置为100%
(为演示父元素不定宽高的效果),并清除
的默认样式
html,body{
margin: 0;
height: 100%;
}
垂直居中大致分为两类,父元素定宽高与父元素不定宽高,将两类样式以及子容器设定好
.set-parent,.dy-parent{
width: 300px;
height: 200px;
background: #eee;
margin: 10px 0;
}
.child{
width: 20px;
height: 10px;
background: #fff;
}
.dy-parent{
width: 30%;
height: 20%;
}
1. 父元素定宽高 position + margin
使用margin: auto
使水平居中,将子容器设定为relative
以在不脱离文档流的情况下偏移50%
,由于本身子容器占用一定宽高,会将其撑下,使用margin
使其向上偏移。 若是子容器使用absolute
定位,则父容器应设置为relative
,否则会其相对于static
定位以外的第一个父元素进行定位,在本Demo中会以浏览器为基准定位;此外absolute
无法使用margin: auto
水平居中。
2. 父元素定宽高 position + transform
原理与position
+margin
相同,CSS3的transform
使得div
向上平移自身高度的50%
。
3. 父元素定宽高 position + calc
css3提供calc
函数,能够进行动态计算
4. 父元素不定宽高 flex
flex
布局可以说是布局神器,极其强大,现在大部分浏览器都兼容性flex
布局
5. 父元素不定宽高 grid
Grid
布局将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局 Grid
布局与Flex
布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。 Flex
布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid
布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid
布局远比Flex
布局强大。
6. 父元素不定宽高 table
table
中有vertical-align
属性设置垂直对齐方式
响应式布局
响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局,能够在大屏设备以及小屏设备获得更好的浏览体验,简单来说就是页面适应终端而无需为每个终端制作单独的页面。
1.媒体查询
通过使用CSS媒体查询来实现响应式布局,针对不同的媒体类型设置不同的样式规则,可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。
使用link链接
直接在CSS中使用
使用@import导入
/* @import url("example.css") mediatype and|not|only (media feature); */
@import url("example.css") all and (max-width:600px);
媒体类型
all: 用于所有设备。
print: 用于打印机和打印预览。
screen: 用于电脑屏幕,平板电脑,智能手机等。
speech: 应用于屏幕阅读器等发声设备。
逻辑操作符
and: 表示且,当所有的条件满足的时候返回true。
not: 是用来排除某种制定的媒体类型。
only: 用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。
,: 逗号用于将多个媒体查询合并为一个规则,逗号分隔效果等同于or逻辑操作符。
媒体功能
aspect-ratio: 定义输出设备中的页面可见区域宽度与高度的比率。
color: 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0。
color-index: 定义在输出设备的彩色查询表中的条目数,如果没有使用彩色查询表,则值等于0。
device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的比率。
device-height: 定义输出设备的屏幕可见高度。
device-width: 定义输出设备的屏幕可见宽度。
grid: 用来查询输出设备是否使用栅格或点阵。
height: 定义输出设备中的页面可见区域高度。
max-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最大比率。
max-color: 定义输出设备每一组彩色原件的最大个数。
max-color-index: 定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height: 定义输出设备的屏幕可见的最大高度。
max-device-width: 定义输出设备的屏幕最大可见宽度。
max-height: 定义输出设备中的页面最大可见区域高度。
max-monochrome: 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution: 定义设备的最大分辨率。
max-width: 定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio: 定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color: 定义输出设备每一组彩色原件的最小个数。
min-color-index: 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width: 定义输出设备的屏幕最小可见宽度。
min-device-height: 定义输出设备的屏幕的最小可见高度。
min-height: 定义输出设备中的页面最小可见区域高度。
min-monochrome: 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution: 定义设备的最小分辨率。
min-width: 定义输出设备中的页面最小可见区域宽度。
monochrome: 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0。
orientation: 定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution: 定义设备的分辨率。
scan: 定义电视类设备的扫描工序。
width: 定义输出设备中的页面可见区域宽度。
2.单位
百分比单位
当度量单位设置为百分比时,即可使浏览器组件宽高随着浏览器的大小相应变化。
子元素的height或width中使用百分比,是相对于子元素的直接父元素,width相对于父元素的width,height相对于父元素的height。
子元素的top和bottom如果设置百分比,则相对于直接非static定位的父元素的高度,同样子元素的left和right如果设置百分比,则相对于直接非static定位父元素的宽度。
子元素的padding如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width,而与父元素的height无关。
子元素的margin如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的width。
设置border-radius为百分比,则是相对于自身的宽度,还有translate、background-size等都是相对于自身的。
em单位
em是相对长度单位,相对于当前对象内文本的字体尺寸,若未设置则相对于浏览器默认字体尺寸16px,em是会继承父元素的字体的尺寸,使用时需要重新计算子元素的em值避免1.2*1.2=1.44的现象,使用em可以使元素根据字体大小的动态调整来制作响应式布局。
rem单位
rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准,当页面的size发生变化时,只需要改变font-size的值,那么以rem为固定单位的元素的大小也会发生相应的变化。因此,如果通过rem来实现响应式的布局,只需要根据视图容器的大小,动态的改变根元素的font-size即可。
vh vw vmin vmax
vh: 相对于视窗的高度,1vh等于视窗高度的1%。
vw: 相对于视窗的宽度,1vw等于视窗宽度的1%。
vmin: vw和vh中的较小值。
vmax: vw和vh中的较大值。
缩放比例
通过动态地控制网页视图的缩放比例来制作响应式布局。
自适应布局
自适应布局一般是通过检测User-Agent
来判断当前访问的设备是PC端还是平板或者是手机,或者是通过检测窗口分辨率而请求服务器,从而服务端重定向或者返回不同的页面,需要开发多个页面来适应不同的设备,通常自适应布局与响应式布局并不是单独使用的,可以通过开发一套PC端页面与一套移动端页面来实现自适应布局,而两套页面都实现对于不同范围分辨率的响应式布局,可以避免过大的CSS样式表又可以获得较好的浏览体验,
box-sizing属性
box-sizing
是用于告诉浏览器如何计算一个元素是总宽度和总高度
对于给定width
和height
的元素,设置box-sizing
属性会影响盒子content width
和content height
。
浏览器默认使用标准盒子模型,即box-sizing: content-box
, 就是我们所写的宽度和高度就是对content
进行设置的。
在一些响应式布局中,我们修改了浏览器计算元素宽度、高度的方式,认为元素的宽度和高度是包括内边距padding
和边框border
你可能感兴趣的:(前端学习)
前端学习网站大全
洪布斯
CSDN-专业IT技术社区:https://www.csdn.net/GitHub:https://github.com/jQuery插件库-收集最全最新最好的jQuery插件:http://www.jq22.com/Iconfont-阿里巴巴矢量图标库:https://www.iconfont.cn/菜鸟教程-学的不仅是技术,更是梦想!:https://www.runoob.com/Animat
什么是解释型语言?什么又是编译型语言?
Aress"
web前端开发学习 html 前端 编译器 编程语言
什么是解释型语言?什么又是编译型语言?前言一、源代码的执行方式二、编译器三、执行原理二者的区别编译型语言解释型语言前言本文章主要知识来自于Python编程基础的“编译型语言和解释型语言的区别”一节,原文来自C语言中文网网上的相关描述已经够多了,本文作为前端学习系列专题的一个知识拓展只是为了宝贝们在该专题进行知识查阅时更为方便示例代码示例代码:我是解释型语言helloworld!例:.html或.h
你好,我是冴羽,我写了一套《前端大佬成长之路》
你好,我是冴羽。这么正式的开头说明我有了一个大动作。是的,我创建了自己的知识星球:“冴羽·前端大佬成长之路”。重点一:新的一年,我会在知识星球更新一套“前端大佬成长之路”的课程。包含目标规划篇、学习方法篇、前端学习篇、个人管理篇、职场发展篇、面试技巧篇、健康养生篇共7大篇章、40节文章。总结了我近十年的工作生活经验,让大家少走一些弯路,节省一些时间。重点二:但是帮助你全面成长,一套课程是不够的,必
前端学习——CSS+JS实现进度条动画
younger_LF
前端(HTML+CSS+JS) CSS JS 进度条 动画
CSS+JS实现进度条动画之前学习了导航条,那现在就来学习一下进度条。本次的学习试着写了两种风格的进度条,一种是圆点,一种是传统的条状。如下图:简单介绍一下,点击按钮之后,圆点的效果是蓝色部分从零开始变大,到充满了整个父标签,从左向右进行;传统条状的效果就单纯的从左向右进行。由于有光晕的效果,父标签应该允许溢出部分显示。再次点击按钮就重置为原来的样子。话不多说,直接开始。HTML部分HTML部分很
前端学习——CSS3实现时钟效果
younger_LF
前端(HTML+CSS+JS) CSS动画 时钟效果
CSS3实现时钟效果最近想开始认真学习,然后想把学习记录下来,就写在博客这里了。最先是用CSS实现的是一个时钟的效果,如下图:实现效果1.圆盘说到时钟,肯定最先想到的是一个圆,所以就从一个圆开始。先写一个div,然后给相关的样式.clock{position:absolute;width:250px;height:250px;left:50%;top:50%;transform:translate
前端学习——css照片墙
野生小米椒
三大基础语言
照片墙案例body{background-color:gray;/*背景色*/text-align:center;/*照片居中*/}img{width:12%;/*设置高度*/padding:10px;/*设置内边距*/background-color:white;/*设置照片背景色*/transform:rotate(-10deg);/*设置倾斜角度*/margin:20px;/*设置内边距*/
前端学习——CSS
W起名有点难
学习笔记 前端 学习 css
CSSCSS(CascadingStyleSheets)级联样式表语法选择器全局选择器元素选择器类选择器ID选择器合并选择器选择器的优先级字体属性字体颜色背景属性background-color属性background-image属性background-repeat属性background-size属性background-position属性文本属性text-aligntext-decorat
大事件开发 - 前端学习笔记
我只是什么都不会而已
前端 学习 笔记
1.环境准备1.1创建Vue项目使用vite创建Vue3工程。目录结构调整,确保清晰的项目结构。1.2安装依赖npminstallaxioselement-plussassElement-Plus:UI组件库Axios:HTTP请求库Sass:CSS预处理器2.前后端连接(以注册功能为例)2.1搭建注册页面使用Element-Plus组件搭建注册表单。(就是前端一些样式和组件的代码可以从Eleme
前端入门HTML篇
JackHell.
前端学习 前端 html
前端学习HTML篇[W3school:https://www.w3school.com.cn/html/index.asp]HTML是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言,经常用来创建web页面。html是制作网页的基础,我们在网络营销中讲的静态网页,就是以html为基础制作的网页。//src为属性名"photo.jpg"为属性值页面标题一级标题二级标题段落内容标签是什
前端学习——HTML
W起名有点难
学习笔记 前端 学习 html
VSCode常用快捷键代码格式化:Shift+Alt+F向上或向下移动一行:Alt+Up或Alt+Down快速复制一行代码:Shift+Alt+Up或者Shift+Alt+Down快速替换:Ctrl+HHTML标签文本标签定义着重文字定义粗体文字定义斜体文字加重语气删除字无特定含义列表标签1、有序列表//type可以改变列表项目标签//1:用数字标号;A:用大写字母标号;a:用小写字母标号;i:小
前端学习资料集合
mdnbnb
前端
针对前端的学习,不同阶段采用的方式是不一样的。本文把前端的学习分为入门、实战、进阶三个阶段。下面分开来说一、入门阶段入门阶段的目标是学会前端的基本语法和知识,能够解决一些简单的问题。这个阶段不建议看书学习,效率太慢。这个阶段不追求知识广度,只要求能够快速上手就行。建议直接找一些介绍前端的基础知识的视频课程来看。推荐一个比较经典的课程。前端基础班就业班实战项目全套课程聊聊前端开发的基础知识4小时带你
你好,我是冴羽,我写了一套《前端大佬成长之路》
你好,我是冴羽。这么正式的开头说明我有了一个大动作。是的,我创建了自己的知识星球:“冴羽·前端大佬成长之路”。重点一:新的一年,我会在知识星球更新一套“前端大佬成长之路”的课程。包含目标规划篇、学习方法篇、前端学习篇、个人管理篇、职场发展篇、面试技巧篇、健康养生篇共7大篇章、40节文章。总结了我近十年的工作生活经验,让大家少走一些弯路,节省一些时间。重点二:但是帮助你全面成长,一套课程是不够的,必
前端学习Day4 CSS基础笔记
Yukukiii
前端 css 学习
目标能够说出什么是CSS能够使用CSS基础选择器能够设置字体样式能够设置文本样式能够说出CSS的三种引入方式能够使用Chrome调试工具调试样式CSS:层叠样式表(Cascadingstylesheets)语法:写在head里面p{color:brown;//文字变色font-size:30px;//字变大background-color:blue;//背景色为蓝色width:400px;heig
2022年9月前端学习笔记
早日退休!
前端 学习 html5 前端
目录2022.09.011、overflow:auto;2、封装通用axios返回值类型3、vite构建的vue3项目适配移动端4、使用vue3+vite+TypeScript搭建新项目1.新建项目2.配置vue-router43.配置vuex45、深拷贝和浅拷贝1.浅拷贝2.深拷贝2022.09.021、同步与异步2、事件循环eventloop3、遇到的坑:vue中给点击事件@click使用三元
【前端学习笔记】Vue3
咔叽布吉
前端学习 前端 学习 笔记
一、Vue3新变化Vue3相比于Vue2做了很多改进,不仅提升了性能,还引入了一些新的功能,使得开发更加高效、灵活。1.性能提升Vue3在性能方面做了大量的优化,尤其是在渲染和更新方面,主要通过以下几个方式提升:更快的虚拟DOM:Vue3的虚拟DOM实现进行了优化,减少了不必要的渲染和更新,提高了性能。TreeShaking:Vue3在构建时支持更好的TreeShaking(摇树优化),即只打包你
【前端学习笔记】Vite
咔叽布吉
前端学习 前端 学习 笔记
1.ViteVite是一个现代前端构建工具,旨在通过提供快速的开发体验和高效的构建性能来解决传统构建工具(如Webpack)在开发过程中的瓶颈。Vite的核心思想是通过利用浏览器原生的模块系统(ESModules)以及对构建过程进行优化,从而大大提升开发和构建的效率。Vite详细解读Vite是一个现代前端构建工具,旨在通过提供快速的开发体验和高效的构建性能来解决传统构建工具(如Webpack)在开
github项目推荐:少儿图形化编程启蒙游戏
橙狮科技
github 大前端 typescript javascript 前端框架
介绍codeABC是一个少儿编程启蒙项目,包括6个编程主题,每个主题包括超过20个关卡,typescript编写,基于Phaser游t戏引擎(https://github.com/photonstorm/phaser),不错的前端学习项目。纯web开发,可以发布为网页或APP。github仓库https://github.com/techtogood/CodeABC在线体验ffmagic.com/
web前端学习7-css动画过渡
修罗_
web前端新手必看16篇 css3 css
学习7-css动画过渡css使用过渡p{/*初始属性*/width:100px;height:100px;background-color:#00FFFF;}p:hover{/*间接过渡法-鼠标经过区域会显示为以下属性*/width:200px;height:200px;background-color:#FF0000;transition-delay:1s;/*1秒后执行过渡*/transiti
前端学习-事件委托(三十)
marshalVS
学习
目录前言课前思考for循环注册事件语法事件委托1.事件委托的好处是什么?2.事件委托是委托给了谁,父元素还是子元素3.如何找到真正触发的元素示例代码总结前言才子佳人,自是白衣卿相课前思考1.如果同时给多个元素注册事件,我们怎么做的?for循环注册事件语法constlis=document.querySelectorAll('ulli');for(leti=0;iDocument.highligh
【前端学习路线】- 简
呀啊~~
前端 学习 react.js vue.js 前端框架 javascript
前端学习路线1.前端开发概述1.1前端的定义与重要性1.2前端技术的演变历程1.3前端开发的核心技能要求2.前端框架总览2.1什么是前端框架?2.2前端框架的分类2.3选择框架时的考虑因素3.主流前端框架及其特点3.1React3.2Vue4.前端开发工具与技术栈4.1开发工具4.2构建工具4.3包管理工具4.4版本控制4.5自动化与CI/CD4.6API请求与数据管理5.前端开发学习路线5.1初
前端学习:Axios Http请求库入门与实战应用
Landy_Jay
http 网络协议 网络
什么是Promise?Promise是一个表示异步操作最终完成或失败的对象。它允许你更优雅地处理异步操作,避免回调地狱(CallbackHell)。特点:异步性:Promise代表一个异步操作的最终完成或失败。不可更改:一旦Promise的状态确定为成功(resolved)或失败(rejected),它就不会再改变。链式调用:可以将多个异步操作按顺序排列,形成链式调用。Promise的基本状态一个
前端学习-事件解绑,mouseover和mouseenter的区别(二十九)
marshalVS
前端 学习
目录前言解绑事件语法鼠标经过事件的区别鼠标经过事件示例代码两种注册事件的区别总结前言人道洛阳花似锦,偏我来时不逢春解绑事件on事件方式,直接使用null覆盖就可以实现事件的解绑语法btn.onclick=function(){alert('点击了')}btn.onclick=null;constben=document.querySelector('button');ben.addEventLis
前端学习-环境this对象以及回调函数(二十七)
marshalVS
学习 javascript 前端
目录前言目标环境对象作用环境对象this是什么?判断this指向的粗略规则是什么?回调函数目标常见的使用场景综合案例:Tab任务栏切换总结前言男儿何不带吴钩,收取关山五十州目标能够分析判断函数运行在不同环境中this所指代的对象环境对象指的是函数内部特殊的变量this,它代表当前函数运行时所处的环境作用弄清楚this的指向,可以使代码更简洁函数的调用方式不同,this所指代的对象不同[谁调用,th
免费开源的后端API服务-supabase安装和使用-简直是前端学习者福音
前端三评
strapi Ajax 工具 开源 前端 supabase
文章目录它是什么安装和部署关于安装关于部署1、注册用户2、创建组织3、创建项目创建数据库表(填充内容)填充数据库表使用postman联调API它是什么一个开源免费的后端框架,firebase的替代品。可以简单理解类似于headlesscms,但是不仅仅只提供内容,它还集成了服务订阅、即时API,用户身份认证(包括第三方身份认证,比如使用github、Google等账号实现快速登录和注册)、边缘函数
小白WEB前端学习(七)
Sun ᥫᩣ涵
WEB前端 前端 学习
续:小白WEB前端学习(六)继续学习CSS(五)8.响应式布局:响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式1.响应式布局介绍:优点:面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点:兼容各种设备工作量大,效率低下代码累赘,会出现隐藏无用的元素,加载时间加长手机:76899212482.media媒体查询HTML标签字号手机屏幕大小不同,分辨率不同如何设置不同的htm
小白WEB前端学习(五)
Sun ᥫᩣ涵
WEB前端 前端 学习
续:小白WEB前端学习(四)继续正式学习CSS(三)6.float布局!主要用于左右做图片,右文字的题目标准流标准流也叫文档流,指的是标签在页面中默认的排布规则,使⼀个元素脱离标准文档流有三种方式1.浮动2.绝对定位3.固定定位例如:块元素独占一行,行内元素可以一行显示多个。浮动作用:让块元素水平排列属性名:float属性值:left和right浮动后会脱离标准流,等于开了一个新的页面,内容在的话
Web前端学习重点笔记
HeHolly
前端 学习 笔记
第一章:Web前端开发技术综述第二章:HTML基础第三章:格式化文本与段落标记:标题字标记:大——小字体标记:水平线标记:段落缩进标记:默认5个字符位置拼音标记:何(he)原样显示标记:特殊符号:显示结果说明符号代码空格 >大于号>加粗倾斜删除线下划线上标下标加粗倾斜变小字号变大字号第四章:列表有序列表……type="1(默认)|A|a|i|I"无序列表……type="disc(默
前端-从入门到入土
前端学习路线基础部分(HTML+CSS+JS入门)快速了解,能够进行简单的页面布局,交互JS部分,可以写一些小demo来熟悉常见的API推荐教程:https://www.bilibili.com/video/BV1BT4y1W7Aw/?spm_id_from=333....框架部分这里推荐Vue框架,相对React会更容易上手,并且中文文档也相对友好推荐教程:https://www.bilibil
HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动
二挡起步
web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线
前端学习之三种css样式写法
MissPSTime
选择器/*内嵌式样式书写*/-->,不使用-->后代选择器标签选择器标签选择器标签选择器
异常的核心类Throwable
无量
java 源码 异常处理 exception
java异常的核心是Throwable,其他的如Error和Exception都是继承的这个类 里面有个核心参数是detailMessage,记录异常信息,getMessage核心方法,获取这个参数的值,我们可以自己定义自己的异常类,去继承这个Exception就可以了,方法基本上,用父类的构造方法就OK,所以这么看异常是不是很easy
package com.natsu;
mongoDB 游标(cursor) 实现分页 迭代
开窍的石头
mongodb
上篇中我们讲了mongoDB 中的查询函数,现在我们讲mongo中如何做分页查询
如何声明一个游标
var mycursor = db.user.find({_id:{$lte:5}});
迭代显示游标数
MySQL数据库INNODB 表损坏修复处理过程
0624chenhong
tomcat mysql
最近mysql数据库经常死掉,用命令net stop mysql命令也无法停掉,关闭Tomcat的时候,出现Waiting for N instance(s) to be deallocated 信息。查了下,大概就是程序没有对数据库连接释放,导致Connection泄露了。因为用的是开元集成的平台,内部程序也不可能一下子给改掉的,就验证一下咯。启动Tomcat,用户登录系统,用netstat -
剖析如何与设计人员沟通
不懂事的小屁孩
工作
最近做图烦死了,不停的改图,改图……。烦,倒不是因为改,而是反反复复的改,人都会死。很多需求人员不知该如何与设计人员沟通,不明白如何使设计人员知道他所要的效果,结果只能是沟通变成了扯淡,改图变成了应付。
那应该如何与设计人员沟通呢?
我认为设计人员与需求人员先天就存在语言障碍。对一个合格的设计人员来说,整天玩的都是点、线、面、配色,哪种构图看起来协调;哪种配色看起来合理心里跟明镜似的,
qq空间刷评论工具
换个号韩国红果果
JavaScript
var a=document.getElementsByClassName('textinput');
var b=[];
for(var m=0;m<a.length;m++){
if(a[m].getAttribute('placeholder')!=null)
b.push(a[m])
}
var l
S2SH整合之session
灵静志远
spring AOP struts session
错误信息:
Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'cartService': Scope 'session' is not active for the current thread; consider defining a scoped
xmp标签
a-john
标签
今天在处理数据的显示上遇到一个问题:
var html = '<li><div class="pl-nr"><span class="user-name">' + user
+ '</span>' + text + '</div></li>';
ulComme
Ajax的常用技巧(2)---实现Web页面中的级联菜单
aijuans
Ajax
在网络上显示数据,往往只显示数据中的一部分信息,如文章标题,产品名称等。如果浏览器要查看所有信息,只需点击相关链接即可。在web技术中,可以采用级联菜单完成上述操作。根据用户的选择,动态展开,并显示出对应选项子菜单的内容。 在传统的web实现方式中,一般是在页面初始化时动态获取到服务端数据库中对应的所有子菜单中的信息,放置到页面中对应的位置,然后再结合CSS层叠样式表动态控制对应子菜单的显示或者隐
天-安-门,好高
atongyeye
情感
我是85后,北漂一族,之前房租1100,因为租房合同到期,再续,房租就要涨150。最近网上新闻,地铁也要涨价。算了一下,涨价之后,每次坐地铁由原来2块变成6块。仅坐地铁费用,一个月就要涨200。内心苦痛。
晚上躺在床上一个人想了很久,很久。
我生在农
android 动画
百合不是茶
android 透明度 平移 缩放 旋转
android的动画有两种 tween动画和Frame动画
tween动画;,透明度,缩放,旋转,平移效果
Animation 动画
AlphaAnimation 渐变透明度
RotateAnimation 画面旋转
ScaleAnimation 渐变尺寸缩放
TranslateAnimation 位置移动
Animation
查看本机网络信息的cmd脚本
bijian1013
cmd
@echo 您的用户名是:%USERDOMAIN%\%username%>"%userprofile%\网络参数.txt"
@echo 您的机器名是:%COMPUTERNAME%>>"%userprofile%\网络参数.txt"
@echo ___________________>>"%userprofile%\
plsql 清除登录过的用户
征客丶
plsql
tools---preferences----logon history---history 把你想要删除的删除
--------------------------------------------------------------------
若有其他凝问或文中有错误,请及时向我指出,
我好及时改正,同时也让我们一起进步。
email : binary_spac
【Pig一】Pig入门
bit1129
pig
Pig安装
1.下载pig
wget http://mirror.bit.edu.cn/apache/pig/pig-0.14.0/pig-0.14.0.tar.gz
2. 解压配置环境变量
如果Pig使用Map/Reduce模式,那么需要在环境变量中,配置HADOOP_HOME环境变量
expor
Java 线程同步几种方式
BlueSkator
volatile synchronized ThredLocal ReenTranLock Concurrent
为何要使用同步? java允许多线程并发控制,当多个线程同时操作一个可共享的资源变量时(如数据的增删改查), 将会导致数据不准确,相互之间产生冲突,因此加入同步锁以避免在该线程没有完成操作之前,被其他线程的调用, 从而保证了该变量的唯一性和准确性。 1.同步方法&
StringUtils判断字符串是否为空的方法(转帖)
BreakingBad
null StringUtils “”
转帖地址:http://www.cnblogs.com/shangxiaofei/p/4313111.html
public static boolean isEmpty(String str)
判断某字符串是否为空,为空的标准是 str==
null
或 str.length()==
0
编程之美-分层遍历二叉树
bylijinnan
java 数据结构 算法 编程之美
import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;
public class LevelTraverseBinaryTree {
/**
* 编程之美 分层遍历二叉树
* 之前已经用队列实现过二叉树的层次遍历,但这次要求输出换行,因此要
jquery取值和ajax提交复习记录
chengxuyuancsdn
jquery取值 ajax提交
// 取值
// alert($("input[name='username']").val());
// alert($("input[name='password']").val());
// alert($("input[name='sex']:checked").val());
// alert($("
推荐国产工作流引擎嵌入式公式语法解析器-IK Expression
comsci
java 应用服务器 工作 Excel 嵌入式
这个开源软件包是国内的一位高手自行研制开发的,正如他所说的一样,我觉得它可以使一个工作流引擎上一个台阶。。。。。。欢迎大家使用,并提出意见和建议。。。
----------转帖---------------------------------------------------
IK Expression是一个开源的(OpenSource),可扩展的(Extensible),基于java语言
关于系统中使用多个PropertyPlaceholderConfigurer的配置及PropertyOverrideConfigurer
daizj
spring
1、PropertyPlaceholderConfigurer
Spring中PropertyPlaceholderConfigurer这个类,它是用来解析Java Properties属性文件值,并提供在spring配置期间替换使用属性值。接下来让我们逐渐的深入其配置。
基本的使用方法是:(1)
<bean id="propertyConfigurerForWZ&q
二叉树:二叉搜索树
dieslrae
二叉树
所谓二叉树,就是一个节点最多只能有两个子节点,而二叉搜索树就是一个经典并简单的二叉树.规则是一个节点的左子节点一定比自己小,右子节点一定大于等于自己(当然也可以反过来).在树基本平衡的时候插入,搜索和删除速度都很快,时间复杂度为O(logN).但是,如果插入的是有序的数据,那效率就会变成O(N),在这个时候,树其实变成了一个链表.
tree代码:
C语言字符串函数大全
dcj3sjt126com
c function
C语言字符串函数大全
函数名: stpcpy
功 能: 拷贝一个字符串到另一个
用 法: char *stpcpy(char *destin, char *source);
程序例:
#include <stdio.h>
#include <string.h>
int main
友盟统计页面技巧
dcj3sjt126com
技巧
在基类调用就可以了, 基类ViewController示例代码
-(void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
[MobClick beginLogPageView:[NSString stringWithFormat:@"%@",self.class]];
window下在同一台机器上安装多个版本jdk,修改环境变量不生效问题处理办法
flyvszhb
java jdk
window下在同一台机器上安装多个版本jdk,修改环境变量不生效问题处理办法
本机已经安装了jdk1.7,而比较早期的项目需要依赖jdk1.6,于是同时在本机安装了jdk1.6和jdk1.7.
安装jdk1.6前,执行java -version得到
C:\Users\liuxiang2>java -version
java version "1.7.0_21&quo
Java在创建子类对象的同时会不会创建父类对象
happyqing
java 创建 子类对象 父类对象
1.在thingking in java 的第四版第六章中明确的说了,子类对象中封装了父类对象,
2."When you create an object of the derived class, it contains within it a subobject of the base class. This subobject is the sam
跟我学spring3 目录贴及电子书下载
jinnianshilongnian
spring
一、《跟我学spring3》电子书下载地址:
《跟我学spring3》 (1-7 和 8-13) http://jinnianshilongnian.iteye.com/blog/pdf
跟我学spring3系列 word原版 下载
二、
源代码下载
最新依
第12章 Ajax(上)
onestopweb
Ajax
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/
BI and EIM 4.0 at a glance
blueoxygen
BO
http://www.sap.com/corporate-en/press.epx?PressID=14787
有机会研究下EIM家族的两个新产品~~~~
New features of the 4.0 releases of BI and EIM solutions include:
Real-time in-memory computing –
Java线程中yield与join方法的区别
tomcat_oracle
java
长期以来,多线程问题颇为受到面试官的青睐。虽然我个人认为我们当中很少有人能真正获得机会开发复杂的多线程应用(在过去的七年中,我得到了一个机会),但是理解多线程对增加你的信心很有用。之前,我讨论了一个wait()和sleep()方法区别的问题,这一次,我将会讨论join()和yield()方法的区别。坦白的说,实际上我并没有用过其中任何一个方法,所以,如果你感觉有不恰当的地方,请提出讨论。
&nb
android Manifest.xml选项
阿尔萨斯
Manifest
结构
继承关系
public final class Manifest extends Objectjava.lang.Objectandroid.Manifest
内部类
class Manifest.permission权限
class Manifest.permission_group权限组
构造函数
public Manifest () 详细 androi
Oracle实现类split函数的方
zhaoshijie
oracle
关键字:Oracle实现类split函数的方
项目里需要保存结构数据,批量传到后他进行保存,为了减小数据量,子集拼装的格式,使用存储过程进行保存。保存的过程中需要对数据解析。但是oracle没有Java中split类似的函数。从网上找了一个,也补全了一下。
CREATE OR REPLACE TYPE t_split_100 IS TABLE OF VARCHAR2(100);
cr