web前端开发html/css练习

目标图:

素材:

代码:

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>

浏览 器运行效果:

相关推荐
Dolphin_海豚22 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件25 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易1 小时前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma771 小时前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在1 小时前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang1 小时前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式