前言
写个css心态炸了。。。
1. 根据自行寻找4张图片的素材实现如图所示效果:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2a41d47a727230c2d675a8652ebaa2f2.png)
这个其实很好实现,一看就看明白了,一个背景图片,一个半透明的div,三张图片,完事了。不多bb,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一题</title>
<style type="text/css">
body {
background-image:url('timg.png');
background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
}
.div1{
text-align:center;
background-color: rgba(255, 255, 255, 0.75);
padding: 150px;
}
.div2
{
align:center;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"><img src="2.jpg" width=960 height="540"><img src="3.jpg" width=960 height="540"><img src="2.jpg" width=960 height="540"></div>
</div>
</body>
</html>
效果图;
2.结合盒模型的知识实现如下的效果(注:页面中间显示):
这个题,差点把我逼疯了。。 因为他给的示例图 。。。。
这个样子
当时我一脸懵逼
感觉瞬间不会再爱了
过程也不赘述了,直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二题</title>
<style type="text/css">
.div3{
margin:0 auto;
width:2300px;
}
.rb
{
width: 1000px;
height:1000px ;
border: solid darkblue;
padding: 25px;
margin: 0px;
border-top-width: 0px;
border-right-width: 50px;
border-bottom-width: 50px;
border-left-width: 0px;
}
.bottom
{
width: 1000px;
height:1000px ;
border: solid darkblue;
padding: 25px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 50px;
border-left-width: 0px;
}
.div1{
float: left;
}
.div2{
clear:both;
}
</style>
</head>
<body>
<div class="div3">
<div>
<div>
<div class="div1 rb"></div>
<div class="div1 bottom"></div>
</div>
<div></div>
</div>
<div>
<div class="div2">
<div class="div1 rb"></div>
<div class="div1 bottom"></div>
</div>
<div></div>
</div>
</div>
</body>
</html>
最后效果:
3.利用类选择器、ID选择器、标签选择器实现下列效果:
也是不多说废话,上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3</title>
</head><style type="text/css">
h2{
color: dodgerblue;
}
.span1{
color: red;
}
.span2{
text-decoration:underline;
color: dodgerblue;
}
.span3{
font-style:oblique;
}
</style>
<body>
<div><h2>CSS:</h2>
<ul>
<li>
<p>层叠性分为两种情况:</p>
<ul>
<li>
<p>如果多个选择器定义的规则<span class="span1">不发生冲突</span>,则<span class="span2">元素将获得所有选择器定义的样式</span></p>
</li>
<li>
<p>如果多个选择器定义的规则<span class="span1">发生了冲突</span>,<span class="span3">则按选择器的优先级(权重)应用优先级高的选择器定义的样式</span></p>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
``