web前端开发html/css练习

目标图：

素材：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	.father{width:780px;background:#FFF;border:1px solid black;}
	.son-left{margin:10px;}
	.son-right{width:420px;height:390px;float:right;font-size:14px;line-hight:22px;text-indent:2dm;background-color:#FFC;border:1px solid black;padding:15px;}
	p{text-indent:2em;}
	.hezi{padding:200px;background-color:red;}
</style>
</head>
<body>
<div class="hezi">
<div class="father">
<div class="son-left"><img src="web前端开发-课堂练习素材11.24/web前端开发-课堂练习素材11.24/盒模型练习案例/images/zyj.jpeg" width="40%" />
      <div class="son-right">
      <p style="background-color:red;color:#FFF;font-size:24px;text-align:center;text-indent:0em;margin:1px;"><b>为有牺牲多壮志，敢教日月换新天</b></b>
        <p style="text-align:center;font-size:18px;text-indent:0em;margin-top:10px;"><b>抗美援朝电影巨制《志愿军：雄兵出击》热映！</b></p>
    
        <p>2023年是抗美援朝战争胜利70周年，也是我们国家发展的重要节点。在这个特殊的时刻，我们需要一部作品来回顾历史，纪念那些为国家安宁、人民幸福而英勇奋战的英雄们。《志愿军：雄兵出击》正是这样一部作品，它以电影的形式，让我们重新认识到那段历史的重要性，以及有些历史、有些英雄不应该被遗忘的价值。</p>
        <p>《志愿军：雄兵出击》正是这样一部作品，它以电影的形式，让我们重新认识到那段历史的重要性，以及有些历史、有些英雄不应该被遗忘的价值。1950年朝鲜内战爆发，美国武装干涉朝鲜内战，并侵略中国台湾，战火烧到了鸭绿江边。中国人民志愿军在新中国一岁之际，跨过鸭绿江入朝作战，保家卫国。我们为何而战？面对军备实力强大的美军如何作战？《志愿军：雄兵出击》便是围绕决策出兵、初入朝鲜这一惊心动魄的阶段展开故事。影片呈现了三场重要战斗：第一次战役中志愿军首次歼灭韩军的两水洞战斗、第二次战役中14小时奔袭72.5公里的三所里战斗、第二次战役中以百人之力阻敌十几个小时的松骨峰阻击战。</p>
        </div>
</div>
</div>
</div>
</body>
</html>

浏览 器运行效果：