本文主要是介绍2021-07-20 夏令营任务2 zl，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
各种标签部分思维导图
浮动及常见样式部分思维导图
两个考核任务 效果及代码
任务一，用代码写出如下示例
代码展示
<!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>效果
这篇关于2021-07-20 夏令营任务2 zl的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
