实验一图文混排网页的设计

最新推荐文章于 2023-12-26 02:24:17 发布

而已

最新推荐文章于 2023-12-26 02:24:17 发布

阅读量1k

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_46220576/article/details/127339979

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实验一图文混排网页的设计

1、实验目的
（1）掌握标题、段落及文字标记，可以合理地使用它们定义网页元素；
（2）掌握文字标注的属性，并会使用属性美化文字。
（3）掌握图像标记，学会制作图文混排页面；
（4）掌握图像路径表示方式。
2、实验内容
根据文本和图像标记和属性的语法规则，设计如下图文混排网页：
在这里插入图片描述

设计代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验1-1</title>
    <style>
		.div1{
			color:#FFFFFF;
			position:absolute;
			left:9px;
			top:222px;
			font-family: 微软雅黑;
			width:285px;
			height:22px;
			padding: 7px;
			padding-left:16px;
			font-size:14px;
			background-color:rgba(0,0,0,0.5);
		}
		.box{
			font:normal 17px/180% "黑体";
			position:absolute;
			left:314px;
			top:-200px;
			color:black;
			width:295px;
			height:219px;
		}
		li{
			list-style-type:none;
			line-height:30px;
		}
    </style>
</head>
<body>
        <img src=”images/时节.jpg”  width="310" height="250"/>
		<div class="div1">
				恰是赏花好时节！这份全国赏花攻略请收好
		<div/>
		<div calss="div2">
			<ul class="box">
					<li>亚运气象台开始实体化运行 </li>
					<li>收藏！杭州亚运会官方海报发布</li>
					<li>成都大运会“青春领跑人”主题MV发布</li>
					<li>画中的“星星心语”，你听到了吗？</li>
					<li>今年，这些铁路新线计划开通运营！</li>
					<li>民航局对五个入境航班发出熔断指令 </li>
					<li>始终坚持“以运动员为中心”</li>
			</ul>
		</div>
</body>
</html>

在这里插入图片描述
设计代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验1-2</title>
    <style>
		p{
			line-height:19px;
			font-family:黑体;
			margin:3px;
			margin-left:17px;
		}
		b{
			margin:3px;
			margin-left:17px;
		}
    </style>
</head>
<body>
    <img src="images/国风.jpg" alt="国风" vspace="10"><br/>
    <b>非遗国风 匠心传承</b>
    <font size="2" color="#808080">
		<p>
			让传统的更传统,让现代的更现代。中国非物质文
		</p>
		<p>
			化遗产保护令人瞩目。
		</p>
		
    </font>
</body>
</html>