当前位置：首页 > news >正文

【前端 02】新浪新闻项目-初步使用CSS来排版

news 2025/7/7 9:06:58

在今天的博文中，我们将围绕“新浪新闻”项目，深入探讨HTML和CSS在网页制作中的基础应用。通过具体实例，我们将学习如何设置图片、标题、超链接以及文本排版，同时了解CSS的引入方式和选择器优先级，以及视频和音频标签的使用。

标题排版

图片标签 `<img>`

在网页中插入图片时，我们主要使用<img>标签。这个标签有几个重要的属性：

src：指定图像的URL，可以是绝对路径（如网络地址或磁盘路径）或相对路径（相对于当前页面的位置）。
width 和 height：分别设置图像的宽度和高度，可以是像素值或相对于父元素的百分比。

标题标签 `<h1>` 到 `<h6>`

HTML提供了六级标题标签，从<h1>到<h6>，<h1>表示最重要的标题，<h6>表示最不重要的标题。这些标签不仅用于定义文本的大小，还帮助搜索引擎理解网页的结构。

水平线标签 `<hr>`

<hr>标签用于在HTML页面中插入一条水平线，通常用于分隔内容区块。

标题样式

CSS引入方式

CSS（层叠样式表）用于控制网页的布局和样式。CSS可以通过三种方式引入：

行内样式：直接在HTML标签的style属性中定义样式，虽然方便但不利于维护，不推荐频繁使用。
```
html复制代码<h1 style="color: #4D4F53; font-size: 24px;">中国新闻网</h1>
```
内嵌样式：在HTML文档的<head>部分使用<style>标签定义样式，适用于单个页面的样式定义。
```
<style>  h1 {  color: #4D4F53;  font-size: 24px;  }  
</style>
```
外联样式：将样式定义在单独的.css文件中，并通过<link>标签在HTML文档中引入，适用于多个页面的样式共享。
```
html复制代码<link rel="stylesheet" href="css/news.css">
```

颜色的表示

CSS中颜色的表示方式主要有三种：

关键字：如red、green、blue等预定义的颜色名。
RGB表示法：通过红绿蓝三原色组合，每项取值范围0-255，如rgb(255, 0, 0)表示红色。
十六进制表示法：以#开头，将数字转换成十六进制表示，如#4D4F53表示新浪微博标题的颜色。

超链接

标签 `<a>`

标签用于定义超链接，其href属性指定链接的目标地址，target属性控制链接的打开方式（_self为默认值，在当前页面打开；_blank在新窗口打开）。

CSS属性text-decoration用于控制文本装饰（如去除超链接下划线），color用于定义文本颜色。

正文排版

视频与音频标签

视频标签 <video>：用于嵌入视频内容，src属性指定视频文件的URL，controls属性显示播放控件，width和height属性设置播放器的尺寸。
音频标签 <audio>：与<video>类似，但用于嵌入音频内容。

文本排版

换行与段落：<br>标签用于换行，<p>标签用于定义段落。
文本加粗：<strong>和<b>标签都可以使文本加粗，但<strong>在语义上表示重要内容，而<b>仅用于样式加粗。

CSS样式

line-height：设置行高，影响文本的垂直间距。
text-indent：定义段落首行内容的缩进。
text-align：规定元素中文本的水平对齐方式，如left、center、right。

注意事项

在HTML中，无论输入多少个空格，浏览器最终只会显示一个空格。如果需要保留多个空格，可以使用空格占位符。

页面布局与盒子模型

在网页设计中，页面布局是至关重要的环节，它决定了网页内容的展示方式和视觉效果。而理解盒子模型则是进行页面布局的基础。在本节中，我们将继续深入探讨盒子模型及其在布局中的应用，同时介绍版心居中布局这一常见且实用的布局方式。
请添加图片描述

盒子模型概述

在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。

内容区域（Content）：元素的实际内容区域，如文本、图片等。
内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。
边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
外边距区域（Margin）：边框外部的空间，用于控制元素与其他元素之间的距离。

CSS盒子模型属性

在CSS中，我们可以通过一系列属性来设置盒模型的各个部分：

width 和 height：分别用于设置元素的宽度和高度。
border：用于设置边框的样式，如1px solid #000表示边框宽度为1像素、实线、颜色为黑色。
padding：用于设置内边距，可以是单一值或分别设置上、右、下、左四个方向的内边距。
margin：用于设置外边距，同样可以是单一值或分别设置四个方向的外边距。

值得注意的是，当设置盒子的宽度和高度时，默认情况下，这些值只包括内容区域的宽度和高度，而不包括内边距、边框和外边距。然而，通过设置box-sizing属性为border-box，可以改变这一行为，使得宽度和高度包括内容、内边距和边框，但不包括外边距。

版心居中布局

在网页设计中，版心居中布局是一种常见的布局方式，它能够使网页的主要内容在页面中居中显示，从而提升用户体验。实现版心居中布局的一种简单方法是使用margin属性的auto值。

在CSS中，我们可以为需要居中的元素（通常是div标签）设置左右外边距为auto，同时指定一个固定的宽度。这样，浏览器会自动计算左右外边距的值，使得元素在父元素中水平居中。

示例代码如下：

#center {  width: 65%; /* 设置版心的宽度 */  margin: 0 auto; /* 上下外边距为0，左右外边距自动计算以实现居中 */  
}

在HTML中，我们只需要将需要居中的内容包裹在一个div标签内，并为其设置id="center"属性，即可应用上述CSS样式，实现版心居中布局。

完整项目代码

根据以上前置知识，我们就能自己实现一个网页新闻的排版了

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈:一个简单的标题</title><style>h1 {color: #4D4F53;}#date {color: #968D92;}a {color: black;text-decoration: none;}p {text-indent: 35px;line-height: 40px;}#center {width: 65%;/* margin: 0% 17.5% 0% 17.5%; */margin: 0 auto;}</style><!-- <link rel="stylesheet" href="../css/1.css"> -->
</head><body><div id="center"><img src="./news_logo.png"><a href="https://gov.sina.com.cn/" target="_blank">新浪政务</a> > 正文<h1>焦点访谈:初音ミク</h1><hr><span id="date">2023年03月02日 21:50</span><span><a href="https://tv.cctv.com/" target="_blank">央视网</a></span><hr><video src="../video/1.mp4" controls width="950px"></video><audio src="../audio/1.mp3" controls></audio><p><b>央视网消息</b>（焦点访谈）：</p><p>一二三四五</p><img src="../img/1.jpg"><p>上山打老虎</p><img src="../img/2.jpg"><p style="text-align: right;">责任编辑：洛天依 SN242</p></div></body></html>