WEB前端media查询/font-fize/以及2D变换效果的实现

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;
				/* 当只填一个参数的时候表示x轴平移多少像素 */
				/* transform: translate(200px); */
				/* 当填入的参数是两个的时候表示在x轴和y轴上平移量 */
				/* transform: translate(200px,100px); */
				margin-left: 200px;
				margin-top: 200px;
				
				/* rotate表示旋转参数必须带角度单位deg,沿着x轴方向顺时针旋转*/
				/* transform: rotate(10deg); */
				
				/* scale用于缩放标签,一参模式控制宽高同事缩放,两参则分别控制宽高 */
				/* transform: scale(1.5); */
				
				/* skew函数用于将标签沿着x轴或者y轴产生倾斜角度x逆时针y顺时针 */
				/* transform: skew(45deg,30deg); */
				
				/*                x     y x偏移 y偏移*/
				transform: matrix(1,0,0,1,100,30);
								/* x倍数   y倍数 */
				transform: matrix(1.5,0,0,3,0,0);
				
				/* matrix实现旋转的公式matrix(cosθ,sinθ,-sinθ,cosθ,0,0) */
				transform:matrix(0.866,0.5,-0.5,0.866,0,0);
				
				
			}
		style>
	head>
	<body>
		<div>div>
	body>
html>

你可能感兴趣的:(前端)