WEB前端DAY7
练习
nth-child和nth-type区别
- nth-child会判断集合中的第n个标签是否是伪类前面的标签
- nth-type则会根据标签生成合集去其中的第n个标签
body>div:nth-of-type(2){
border-top: 10px solid green;
border-left: 10px dashed green;
width: 100px;
height: 100px;
}
body>div:nth-child(3){
border-top: 10px solid green;
border-left: 10px dashed green;
width: 100px;
height: 100px;
}
伪元素重写
.ol_first>li{
list-style: none;
}
.ol_first>li::before{
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
border: 1px solid red;
margin-right: 10px;
background-color: red;
}
media查询
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@media (max-width:600px) and (min-width:0px){
div{
width: 100px;
height: 100px;
background-color: aqua;
}
}
@media screen and (min-width:600px) and (max-width:1000px) {
div{
width: 200px;
height: 200px;
background-color: blue;
}
}
@media screen and (min-width:1000px) {
div{
width: 300px;
height: 300px;
background-color: red;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
font-face
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@font-face {
font-family: myfont;
src: url("./font/cmsy10.ttf");
}
div{
font-family: myfont;
}
</style>
</head>
<body>
<div>哈哈哈</div>
</body>
</html>
变换效果2d转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 200px;
margin-top: 200px;
transform: matrix(1,0,0,1,100,30);
transform: matrix(1.5,0,0,3,0,0);
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
</style>
</head>
<body>
<div></div>
</body>
</html>