2021-07-20 夏令营任务2 zl

最新推荐文章于 2023-08-15 18:44:49 发布

阿磊414

最新推荐文章于 2023-08-15 18:44:49 发布

阅读量96

点赞数 1

文章标签： webstorm

本文链接：https://blog.csdn.net/qq_57839826/article/details/119444620

版权

各种标签部分思维导图

浮动及常见样式部分思维导图

两个考核任务效果及代码

任务一，用代码写出如下示例

代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div{
            overflow: hidden;
        }
        img{
            width: 190px;
            float: left;
            margin-right: 10px;
        }
        span{
            display: inline-block;
            margin-top: 20px;
            margin-left: 20px;

        }
        .boss div{
            margin-top: 10px;
        }

    </style>
</head>
<body>
<div class="boss">
    <div>
        <img src="file:///D:/tupian/001.jpg" />
        <span style="font-size: 20px;"><b>宋朝的军队弱吗？他们可都是职业化的</b></span>
        <div>
            <span style="border: blue solid 2px;color: blue;">今日头条</span><span style="color: dimgray;">看看头条 07-20 16:57</span>
        </div>
    </div>
    <div>
        <img src="file:///D:/tupian/002.jpg" />
        <span style="font-size: 20px;"><b>古代的学校是怎么运作管理学生的？</b></span>
        <div>
            <span style="border: blue solid 2px;color: blue;">今日头条</span><span style="color: dimgray;">看看头条 07-20 15:58</span>
        </div>
    </div>
    <div>
        <img  src="file:///D:/tupian/003.jpg"/>
        <span style="font-size: 20px;"><b>国家卫健委：5月31日之后均可生三孩</b></span>
        <div>
            <span style="border: blue solid 2px;color: blue;">今日头条</span><span style="color: dimgray;">看看头条 07-20 14:35</span>
        </div>
    </div>
</div>
</body>
</html>

效果

任务二，用代码写出如下示例

代码展示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    div{
      overflow: hidden;
    }
    img{
      width: 190px;
      float: left;
      margin-right: 10px;
    }
    span{
      display: inline-block;
      margin-left: 20px;

    }
    .boss div{
      margin-top: 10px;
    }

  </style>
</head>
<body>
<div class="boss">
  <div>
    <img src="file:///D:/tupian/001.jpg" />
    <span style="font-size: 40px;margin-top: 30px">白蛇2：青蛇劫起</span><span style="background-color: gray;color: aliceblue;font-size: 30px;border-radius: 20%">3D</span>
    <div>
      <span style="color:gray">主演：黄家康 唐小喜 张福正 魏超 赵铭洲</span>
    </div>
    <div>
      <span style="color:gray;font-size: 30px">中国大陆|0分钟</span>
    </div>
  </div>
  <hr 1px>
  <div class="one">
    <img src="file:///D:/tupian/002.jpg" />
    <span style="font-size: 40px;margin-top: 30px">燃野少年的天空</span><span style="background-color: gray;color: aliceblue;font-size: 30px;border-radius: 20%">2D</span>
    <div>
      <span style="font-size: 30px;color: gray;">观众评分</span><span style="color:orange;font-size: 30px;">7.8</span>
    </div>
    <div>
      <span style="color:gray;font-size: 30px">主演：张一白 韩琰 彭昱畅 许恩怡 张宥浩</span>
    </div>
    <div>
      <span style="color:gray;font-size: 30px">中国大陆|0分钟</span>
    </div>
  </div>
  <hr>
  <div class="one">
    <img src="file:///D:/tupian/003.jpg"/>
    <span style="font-size: 40px;margin-top: 30px;">1921</span><span style="background-color: gray;color: aliceblue;font-size: 30px;border-radius: 20%">2D</span>
    <div>
      <span style="font-size: 30px;color: gray;">观众评分</span><span style="color:orange;font-size: 30px;">7.2</span>
    </div>
    <div>
      <span style="color:gray;font-size: 30px">主演：黄建新 郑大圣 黄轩 倪妮 王仁君</span>
    </div>
    <div>
      <span style="color:gray;font-size: 30px">中国大陆|0分钟</span>
    </div>
  </div>
</div>
</body>
</html>

效果