实现代码 (内容因为敏感原因所以有修改)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一手消息</title>
<!--内嵌样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)-->
<!--CSS盒子:页面中所有的元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
盒子模型的组成:内容区域、内边距区域、边框区域、外边距区域-->
<!--布局标签:div span这两个布局标签没有实际语义-->
<!--div标签:
一行只显示一个
宽度默认是父元素的宽度,高度默认由内容展开
可以设置宽高-->
<!--span标签:
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高-->
<style>
h1{
color: #4D4F53;
}
a{
color: black;
/*去除下划线 none:默认定义标准文本*/
/*text-decoration 字体修饰*/
text-decoration: none;
}
p{
text-indent: 35px;/*设置首行缩进*/
line-height: 35px;/*设置行高*/
}
#plast{
text-align: right;/*对齐方式*/
color: gray;
}
#center{
width:65%;
/*margin: 0% 17.5% 0% 17.5%;外边距 上右下左*/
margin: 0 auto;/*只设置两个值的话,第一个代表上下 第二个代表左右 auto浏览器自动计算外边距*/
}
</style>
<!-- 外嵌样式:写在一个单独的.css文件中(需要通过Link标签在网页中引入-->
<!-- <link rel="stylesheet" href="color.css">-->
</head>
<body>
<div id="center">
<!--绝对网站路径-->
<!--<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" alt="图标" width="50" height="50">消息>正文-->
<img src="../resources/image/news_logo.png" alt="图标"> <a href="http://gov.sina.com.cn/" target="_blank">消息</a>>正文
<!--想要控制修改字体的颜色,需要利用CSS样式控制-->
<!--行内样式:写在标签的style属性中(不推荐) <h1 style="xxx:xxx;xxx:xxx;">中国新闻网</h1>-->
<!--<h1 style="color: red">第一手消息</h1>-->
<h1>第一手消息</h1>
<hr>
<span>2023年03月02日 21:50</span>
<a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视</a>
<hr>
<video src="http://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.shtml?hasPlayedTime=0.518546" controls width="800px" height=""></video>
<!--在HTML中无论输入多少个空格都只会显示一个,可以使用空格占位符 -->
<p>
<strong>消息</strong>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<img src="../resources/image/2.jpg" width="800px">
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<img src="../resources/image/3.jpg" width="800px" >
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p id="plast">
责任编辑:xxx
</p>
</div>
</body>
</html>