HTML5 CSS3 进阶之路(笔记)

其实主要还是复习了一下,然后又学了css3动画的效果。

这是我html和css的进阶学习,记录一下。建议你们还是看文档学吧~↓

HTML 5 笔记
contenteditable=”true”属性,是可编辑的框框。
tabindex=“1”属性,是tab切换的次序。
还有一些看似是布局的元素:article header footer object section nav(导航) hgroup
address small
<embed src="https://www.ipz.com">内嵌,功能类似淘汰的frame
form表单

里边的input用<input formaction="网址">
焦点,用属性autofocus获取,空值。
html5空值可以省略写,如autofocus=””可以直接写为autofocus
placeholder=“请输入用户名” 这个属性用来显示input框里的默认内容。


post是不在地址栏中显示。。显示传输的数据?get就是截然相反,密码都输在地址栏中。
<input type="image" src="地址" alt="图片不存在显示的字"> 可以用来当作提交按钮。
大概就是这些了,剩下的在实际操作中并没实现,我可能看了假教程假文档。

Css 3 笔记
派生选择器:li a{}

1、元素选择器:h1{} 和 p{} 这种
2、选择器分组:h1,p{} 还有通配符*{}
3、类选择器:

通过.class{}引用。也可以结合元素选择器a.class{}。还有多类选择器

也可以再个性设置.p1.p2{}
4、ID选择器:#id1{} ID选择器在文档中只能使用一次,类选择器可以使用多次。ID选择器不能结合使用,一般js需要用到id选择器。
5、属性选择器(值选择器): [thisid]{color:red;}

class 可以复用,id像身份证一样。
class先加载样式再加载内容,id相反。
1
2
3
4
5
6
7
8
9
10
11
[title]{
color: blue;
}
[title=te]{
color: red;
}
[title~="tote"]{
color: cyan;
}

/只要具备tote就都可以使用/
6、后代选择器 p strong a{} a继承strong继承p的属性,也就说你可以有无数个孙子和儿子。
p>strong>a,用小于号的话只能一层一层的找,如果加空格的话,爷爷可以不通过爸爸找到孙子。
7、相邻兄弟选择器 li+li{color:red;}这样第一个li就不会变成红色。
ol是有序列表 ul是无序列表

  • 固定背景:attachment: fixed;
  • text-transform: captitalize; 默认输入方式
  • text-transform: lowercase; 输入的字母全改变成小写
  • text-transform: uppercase; 输入的字母全改变成大写。
  • text-shadow: 55px 13px 0.1px #E11711; 分别代表x轴、y轴、模糊程度?颜色。
  • text-wrap: normal; 自动换行
  • 把字体上传到Web并使用。
1
2
3
@font-face{ font-family: my Font; src: url(); }
p{ font-family: my Font;}

a:link 访问前
a:visited 访问后
a:hover 鼠标经过
a:active 鼠标按住不放

list-style-image: url(img/0x01.jpg); 无序列表前边的小点点。

.tuchu{ outline-style: dashed; } 突出显示

box-shadow: 0 0 30px 10px rgba(255,255,255,.7) inset; 背景虚化

position的absolute就是不占用位置,等于悬浮在网页上。

盒子模型依次分为: 内容 内边距 边框 外边距

二个外边距会合并

/ header body footer 尽量用这个三个div包含整个网页/

cursor: cell; 鼠标类型,还有很多不一一列出。

visibility: visible/hidden; 可见和不可见

display: inline; 这样就可以不用float: left; 让li标签垂直了

opacity: 0.9; 透明度,值为0-1。 0代表完全透明。

2D转换方法:
translate(200px,100px)
rotate(180deg) 旋转 单位 deg
scale(1,3) 缩放。第一个值宽度不变,第二个是高度放大三倍。
skew(50deg,50deg) 倾斜
matrix()

3D转换方法:
ratateX(120deg) 3D效果压缩X轴
ratateY(90deg) 3D效果压缩Y轴

浏览器适配

1
2
3
4
-webkit-transform:translate(200px,100px);/*safari chrome*/
-ms-transform:translate(100px,100px);/*IE*/
-o-transform:translate(100px,100px);/*opera*/
-moz-transform:translate(100px,100px);/*Firefox*/

transition 设置四个过度属性
transition-property 过度的名称
transition-duration 过度效果花费的时间
transition-timing-function 过度效果的时间曲线
transition-delay 过度效果开始时间

/先写什么时候开始执行/
.yszx{
width: 100px;
height: 100px;
background-color: #E214F7;

transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/*这是这个div的效果,但不会执行,执行需要用到transform*/

}

.yszx:hover{
width: 200px;
height: 200px;
transform: rotate(260deg);
-webkit-transform: rotate(360deg);
/transition预定属性,transform开始执行/
}

/ css3的动画需要遵循@keyframes规则:规定动画的时长和名称/

.donghuaxiaoguo1{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: anim1 5s infinite alternate;
/infinite alternate 是来回执行/
/ anim1 随便起的动画名字/
-webkit-animation: anim1 5s infinite alternate;
}
/下边是浏览器适配/
@keyframes anim1{
0%{background-color:red; left:0px; top: 0px;}
25%{background-color:#2110E6; left:200px; top: 0px;}
50%{background-color:#227C9B; left:200px; top: 200px;}
75%{background-color:#870E0E; left:400px; top: 0px;}
100%{background-color:#A6F704; left:400px; top: 400px;}
}
@-webkit-keyframes anim1{
/这边就是适配咯,和上边一样。/
0%{background-color:red; left:0px; top: 0px;}
25%{background-color:#2110E6; left:200px; top: 0px;}
50%{background-color:#227C9B; left:200px; top: 200px;}
75%{background-color:#870E0E; left:400px; top: 0px;}
100%{background-color:#A6F704; left:400px; top: 400px;}
}

/下边是多列效果自适应显示/
.duolie{
column-count:4; /4列/
column-gap:30px; /每列多么大/
column-rule:5px outset #FF0000; /间隔线/
/下边就是浏览器适配了/
-webkit-column-count:4;
-webkit-column-gap:30px;
-webkit-column-rule:5px outset #FF0000;
}

.pubuliu{
column-width: 100px;/每张图片宽度100px/
column-gap: 5px;/间隔5px/
-webkit-column-width:100px;
-webkit-column-gap:10px;
}

.pubuliu div{
width: 100px
margin:5px 0;
}

坚持原创文章分享,您的支持将鼓励我继续创作!