CSS3
关注
分享
扫一扫
methun
海纳百川，有容乃大。
展开
-
定位流、z-index属性
相对定位相对定位就是相对于自己以前在标准流中的位置来移动` position: relative;`相对定位注意点 1相对定位是不脱离标准流的, 会继续在标准流中占用一份空间 2在相对定位中同一个方向上的定位属性只能使用一个 3由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素 4由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置,原创 2017-03-20 19:14:36 · 854 阅读 · 0 评论 -
透视效果
近大远小 注意点 一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面 perspective: 500px; px数值越大，效果越明显原创 2017-03-22 19:07:15 · 553 阅读 · 0 评论 -
动画animation及其围绕效果
div{ width: 100px; height: 50px; background-color: red; /*transition-property: margin-left;*/ /*transition-duration: 3s;*/ /*1.告诉系原创 2017-03-22 20:00:16 · 280 阅读 · 0 评论 -
背景图片及其相关属性
bi background-image: url();注意点: 1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址 2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充 3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片控制背景图片的平铺方式： background-repeat： 取值: rep原创 2017-03-13 22:15:27 · 619 阅读 · 0 评论 -
使用HTML5制作云层效果
**<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul{ height: 400px; margin-top: 100px; background-color:原创 2017-03-23 17:00:09 · 1465 阅读 · 0 评论 -
HTML5无限滚动
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 600转载 2017-03-23 17:34:28 · 1518 阅读 · 0 评论 -
边框
border: 边框的宽度 边框的样式 边框的颜色;快捷键: bd+ border: 1px solid #000;注意点: 1.连写格式中颜色属性可以省略, 省略之后默认就是黑色 2.连写格式中样式不能省略, 省略之后就看不到边框了 3.连写格式中宽度可以省略, 省略之后还是可以看到边框2.2连写(分别设置四条边的边框) border-top: 边框的宽度 边框的样式 边框的颜色; b原创 2017-03-14 19:50:53 · 267 阅读 · 0 评论 -
盒子模型关于box-sizing属性
box-sizing属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度box-sizing取值 1.conten原创 2017-03-15 16:12:59 · 690 阅读 · 0 评论 -
盒子模型关于嵌套关系、margin：0 auto与text-align区别
1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来 2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性 3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin margin本质上是用于控制兄弟关转载 2017-03-15 16:42:36 · 1459 阅读 · 0 评论 -
清空默认边距
推荐：html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0} { margin: 0; pad原创 2017-03-15 18:53:10 · 852 阅读 · 0 评论 -
行高与字号
注意点: 行高和盒子高不是同一个概念 行高指的是每行内容的高度 盒子高指的是元素的高度规律: 1.文字在行高中默认是垂直居中的2.在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的 简而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的”行高等于盒子的高”即可3.在企业开发中如果一个盒子中有多行文字, 那么我们就不能使原创 2017-03-15 18:55:42 · 921 阅读 · 0 评论 -
浮动元素排序规则、贴靠现象、字围现象高度问题
相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定浮动元素贴靠现象 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠 如果贴靠了前面所有浮动元素之后原创 2017-03-16 16:13:42 · 1178 阅读 · 0 评论 -
企业开发界面如何入手
垂直方向使用标准流, 水平方向使用浮动流拿到一个很复杂的界面如何入手?1从上至下布局2从外向内布局3水平方向可以先划分为一左一右再对左边或者右边进行进一步布局原创 2017-03-16 16:22:52 · 319 阅读 · 0 评论 -
内边距与外边距
内边距 边框和内容之间的距离就是内边距格式 非连写 padding-top: ; padding-right: ; padding-bottom: ; padding-left: ;连写 padding: 上 右 下 左;这三个属性的取值省略时的规律 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边原创 2017-03-14 19:55:41 · 1102 阅读 · 0 评论 -
伪元素选择器
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素2.格式: 标签名称::before{ 属性名称:值; } 给指定标签的内容前面添加一个子元素标签名称::after{ 属性名称:值; } 给指定标签的内容后面添加一个子元素原创 2017-03-16 18:00:09 · 374 阅读 · 0 评论 -
清除浮动影响与overflow
浮动流与标准流的高度问题： 1.在标准流中内容的高度可以撑起父元素的高度 2.在浮动流中浮动的元素是不可以撑起父元素的高度的给前面一个父元素设置高度注意点: 在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少给后面的盒子添加clear属性 clear属性取值: none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动) left: 不要原创 2017-03-16 17:21:22 · 461 阅读 · 0 评论 -
创建自定义类型转换器
三种方法可以创建自定义类型转换器：实现ognl.TypeConverter接口 继承DefaultTypeConverter类 继承StrutsTypeConverter类一般使用继承DefaultTypeConverter类注册自定义类型转换器有两种方法：特定类型转换器:只有特定的Action才可以使用注册方法:在Action所在的包中建立properties文件,文件名格式:Actio原创 2017-03-27 13:27:10 · 1313 阅读 · 0 评论 -
盒子阴影与文字阴影
1.如何给盒子添加阴影 box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;2.注意点 2.1盒子的阴影分为内外阴影, 默认情况下就是外阴影 2.2快速添加阴影只需要编写三个参数即可 box-shadow: 水平偏移 垂直偏移 模糊度; 默认情况下阴影的颜色和盒子内容的颜色一致 /*box-shadow: 10px 10px 10px 10px skyblue原创 2017-03-22 19:16:37 · 498 阅读 · 0 评论 -
2D转换模块：旋转、平移、缩放、扩展
/*旋转 其中deg是单位, 代表多少度*/ transform: rotate(45deg); /*默认情况下所有元素都是围绕Z轴进行旋转*/ transform: rotateZ(45deg); /* 总结: 想围绕哪个轴旋原创 2017-03-22 18:45:24 · 540 阅读 · 0 评论 -
a标签伪类选择器
通过我们的观察发现a标签存在一定的状态 1默认状态, 从未被访问过 2被访问过的状态 3鼠标长按状态 4鼠标悬停在a标签上状态2.什么是a标签的伪类选择器? a标签的伪类选择器是专门用来修改a标签不同状态的样式的3.格式 :link 修改从未被访问过状态下的样式 :visited 修改被访问过的状态下的样式 :hover 修改鼠标悬停在a标签上状态下的样式 :active 修改鼠标原创 2017-03-20 21:59:56 · 444 阅读 · 0 评论 -
后代选择器
后代选择器：找到指定标签的所有特定的后代标签, 设置属性。1.什么是后代选择器? 作用: 找到指定标签的所有特定的后代标签, 设置属性格式: 标签名称1 标签名称2{ 属性:值; } 先找到所有名称叫做”标签名称1”的标签, 然后再在这个标签下面去查找所有名称叫做”标签名称2”的标签, 然后在设置属性 div p{}注意点: 1.后代选择器必须用空格隔开 2.后代不仅仅是儿子原创 2017-03-12 19:43:57 · 1335 阅读 · 1 评论 -
后代选择器和子元素选择器
1.后代选择器和子元素选择器之间的区别? 1.1 后代选择器使用空格作为连接符号 子元素选择器使用>作为连接符号 1.2 后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签2.后代选择器和子元素选择器之间的共同点 2.1 后代转载 2017-03-12 19:46:11 · 554 阅读 · 0 评论 -
交集选择器
1.什么是交集选择器? 作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性格式: 选择器1选择器2{ 属性: 值; }注意点: 1.选择器和选择器之间没有任何的连接符号 2.选择器可以使用标签名称/id名称/class名称 3. 企业开发中用的并不多转载 2017-03-12 19:47:15 · 1332 阅读 · 0 评论 -
并集选择器
并集选择器: 给所有选择器选中的标签设置属性格式: 选择器1,选择器2{ 属性:值; }注意点: 1.并集选择器必须使用,来连接 2.选择器可以使用标签名称/id名称/class名称转载 2017-03-12 19:48:26 · 1947 阅读 · 1 评论 -
id选择器和class选择器区别
1.id和class的区别? 1.1 id相当于人的身份证不可以重复 class相当于人的名称可以重复 1.2 一个HTML标签只能绑定一个id名称 一个HTML标签可以绑定多个class名称2.id选择器和class选择器区别? id选择器是以#开头 class选择器是以.开头3.在企业开发中到底用id选择器还是用class选择器? id一般情况下是给js使用的, 所以除非特殊情原创 2017-03-12 19:41:48 · 841 阅读 · 0 评论 -
类选择器
类选择器：根据指定的类名称找到对应的标签, 然后设置属性**格式: .类名{ 属性:值; }注意点: 1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名 2.在同一个界面中class的名称是可以重复的 3.在编写class选择器时一定要在class名称前面加上. 4.类名的命名规范和id名称的命名规范一样 5.类名就是专门用来给CSS设置样式的转载 2017-03-12 19:40:24 · 459 阅读 · 0 评论 -
id选择器
id选择器：根据指定的id名称找到对应的标签, 然后设置属性格式:#id名称{ 属性:值;}注意点: 1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id 2.在同一个界面中id的名称是不可以重复的 3.在编写id选择器时一定要在id名称前面加上# 4.id的名称是有一定的规范的 4.1id的名称只能由字母/数字/下划线 a-z 0-9 _ 4.2id名转载 2017-03-12 19:39:02 · 416 阅读 · 0 评论 -
css颜色属性
1.在CSS中如何通过color属性来修改文字颜色 格式: color: 值; 取值: 1.1英文单词 一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达1.2rgb rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色) 格式: rgb(0,0,0) 那么这个格式中的转载 2017-03-12 19:33:16 · 956 阅读 · 0 评论 -
css文本属性
1.文本装饰的属性 格式:text-decoration: underline; 取值: underline 下划线 line-through 删除线 overline 上划线 none 什么都没有, 最常见的用途就是用于去掉超链接的下划线 快捷键: td text-decoration: none; tdu text-decoration: underline; tdl te转载 2017-03-12 19:31:11 · 198 阅读 · 0 评论 -
css关于文字属性
1.规定文字样式的属性 格式：font-style: italic; 取值： normal ： 正常的， 默认就是正常的 italic : 倾斜的 快捷键： fs font-style: italic; fsn font-style: normal;2.规定文字粗细的属性 格式： font-weight: bold; 单词取值: bold 加粗 bolder 比加粗还要粗转载 2017-03-12 19:28:45 · 271 阅读 · 0 评论 -
兄弟选择器
1.相邻兄弟选择器 CSS2 作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性格式: 选择器1+选择器2{ 属性:值; }注意点: 1.相邻兄弟选择器必须通过+连接 2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签2.通用兄弟选择器 CSS3 作用: 给指定选择器后面的所有选择器选中的所有标签设置属性格式: 选择器1~选择器2{ 属性:原创 2017-03-12 19:54:44 · 373 阅读 · 0 评论 -
序选择器
1.同级别的第几个 :first-child 选中同级别中的第一个标签 :last-child 选中同级别中的最后一个标签 :nth-child(n) 选中同级别中的第n个标签 :nth-last-child(n) 选中同级别中的倒数第n个标签 :only-child 选中父元素中唯一的标签 注意点: 不区分类型2.同类型的第几个 :first-of-type 选中同级别中同类型的第一转载 2017-03-12 19:56:48 · 204 阅读 · 0 评论 -
属性选择器
属性选择器：根据指定的属性名称找到对应的标签, 然后设置属性。 格式: [attribute] 作用:根据指定的属性名称找到对应的标签, 然后设置属性[attribute=value] 作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性 最常见的应用场景, 就是用于区分input属性 input[type=password]{}<input type="text转载 2017-03-12 20:06:11 · 621 阅读 · 0 评论 -
选择器优先级
当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定。 优先级判断的三种方式 1间接选中就是指继承 如果是间接选中, 那么就是谁离目标标签比较近就听谁的 2相同选择器(直接选中) 如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的 3不同选择器(直接选中) 如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优转载 2017-03-12 20:37:04 · 363 阅读 · 0 评论 -
过渡模块与其编写套路
div{ width: 100px; height: 50px; background-color: red; /*告诉系统哪个属性需要执行过渡效果*/ transition-property: width, background-color; /*告诉系统原创 2017-03-22 17:25:16 · 274 阅读 · 0 评论 -
类型转换的流程
1、用户进行请求，根据请求名在struts.xml中寻找Action2、在Action中，根据请求域中的名字去寻找对应的set方法。找到后在赋值之前会检查这个属性有没有自定义的类型转换。没有的话，按照默认进行转换；如果某个属性已经定义好类型转换，则会去检查配置文件。3、从文件中找到要转换的属性及其转换类。4、进入转换类中，在此类中判断转换的方向。先进入从字符串到类的转换。返回转换后的对象。5、将返回原创 2017-03-27 13:29:20 · 221 阅读 · 0 评论