web前端之css5(web速成）

最新推荐文章于 2024-04-29 13:38:05 发布

AAA阿魏

最新推荐文章于 2024-04-29 13:38:05 发布

阅读量83

点赞数 1

本文链接：https://blog.csdn.net/weixin_74384251/article/details/130070011

版权

web前端同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

html

17 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

Homework5：

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>



<body>

    <div class="container">

        <div class="inline-block-div">div-1</div>

        <div class="inline-block-div">div-2</div>

        <div class="inline-block-div">div-3</div>

        <br>

        <span>span-1</span>

        <span>span-2</span>

        <span>span-3</span>

        <br>

        <div class="block-div">

            123456789101112

        </div>

    </div>

</body>



</html>

要求

（1）包含container类的标签满足：

display属性为block；

宽度和高度均为500px；

内边距为10px；

外边距为20px；

背景颜色为lightblue；

（2）包含inline-block-div类的标签满足；

display属性为inline-block；

宽度和高度均为100px；

内边距为10px；

外边距为10px；

背景颜色为blue；

字体颜色为white；

（3）所有span满足：

display属性为inline；

左右内边距为10px；

左右外边距为20px；

背景颜色为bisque；

字体颜色为green；

（4）包含block-div类的标签满足；

display属性为block；

宽度和高度均为100px；

内边距与外边距均为10px；

背景颜色为blue；

字体颜色为white；

overflow属性为hidden；

text-overflow属性为ellipsis；

实现：

css部分：

.container {
  display: block;
  width: 500px;
  height: 500px;
  padding: 10px;
  margin: 20px;
  background-color: lightblue;
}

.inline-block-div {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  background-color: blue;
  color: white;
}

span {
  display: inline;
  padding: 0 10px;
  margin: 0 20px;
  background-color: bisque;
  color: green;
}

.block-div {
  display: block;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  background-color: blue;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
}

html+css所有代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>homework5</title>
    <style>
      .container {
  display: block;
  width: 500px;
  height: 500px;
  padding: 10px;
  margin: 20px;
  background-color: lightblue;
}

.inline-block-div {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  background-color: blue;
  color: white;
}

span {
  display: inline;
  padding: 0 10px;
  margin: 0 20px;
  background-color: bisque;
  color: green;
}

.block-div {
  display: block;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  background-color: blue;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
}
    </style>
</head>

<body>
    <div class="container">
        <div class="inline-block-div">div-1</div>
        <div class="inline-block-div">div-2</div>
        <div class="inline-block-div">div-3</div>
        <br>
        <span>span-1</span>
        <span>span-2</span>
        <span>span-3</span>
        <br>
        <div class="block-div">
            123456789101112
        </div>
    </div>
</body>

</html>

页面：