云端系统设计第五周课后作业

最新推荐文章于 2022-11-20 20:00:26 发布

小占而已

最新推荐文章于 2022-11-20 20:00:26 发布

阅读量348

点赞数

本文链接：https://blog.csdn.net/lh1413323661/article/details/105232374

版权

前言

写个css心态炸了。。。

1. 根据自行寻找4张图片的素材实现如图所示效果：

这个其实很好实现，一看就看明白了，一个背景图片，一个半透明的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>
``

在这里插入图片描述

小占而已

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
云端系统设计第五周课后作业

前言写个css心态炸了。。。1. 根据自行寻找4张图片的素材实现如图所示效果：这个其实很好实现，一看就看明白了，一个背景图片，一个半透明的div，三张图片，完事了。不多bb，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t...
复制链接

扫一扫