版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/huang_sheng0527/article/details/75209262
html文件
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>css实验</title>
<link rel="Shortcut Icon" href="img/qing.jpg" type="image/x-icon">
<style type="text/css">
@import url("css/stu_prop.css");
</style>
</head>
<body>
<div>
<span lang="zh">frist child – span dom</span>
<p lang="en">secend child – p dom
<br>secend child – p dom</p>
<center><img src="img/default.jpeg" srcset="img/qing.jpg 400w, img/700.jpeg 800w, img/liu.jpg 1600w, img/2400.jpg 2400w, img/3200.jpeg 3200w" sizes="100vw" /></center>
<p>third child – p dom</p>
<span>fourth child – span dom</span>
<p>fifth child – span dom</p>
<span lang="en">frist child – span dom</span>
<p class="zh">secend child – p dom</p>
<p>third child – p dom</p>
<span>fourth child – span dom</span>
<p>fifth child – span dom</p>
<div class="empty"></div>
</div>
</body>
</html>
css文件
body{
padding: 0 0;
margin: 0 0;
/*background: rgba(256,256,256,0.5);*/
}
body div{
background: url(../img/qing.jpg) rgba(256,0,0,0.2) no-repeat;
background-position: 0 0;
}
/*div img:nth-of-type(1n){
display: inherit;
background: rgba(0,0,0,0.2);
opacity:0.0;
filter:alpha(opacity=0);
width: calc(10% + 10em);
height: calc(10% + 10em);
}*/
body{
counter-reset: small-apple 0;
}
div *::before{
color: #F00;
counter-increment: small-apple;
content: counter(small-apple) ;
margin-right: 20px;
}
/*div span:not(.zh){
color: red;
}*/
div:empty{
display: block;
background: #CCC;
min-height: 10px;
width: calc(10% + 10em);
}