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

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

标题排版

图片标签 <img>

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

  • src:指定图像的URL,可以是绝对路径(如网络地址或磁盘路径)或相对路径(相对于当前页面的位置)。
  • widthheight:分别设置图像的宽度和高度,可以是像素值或相对于父元素的百分比。

标题标签 <h1><h6>

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

水平线标签 <hr>

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

标题样式

CSS引入方式

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

  1. 行内样式:直接在HTML标签的style属性中定义样式,虽然方便但不利于维护,不推荐频繁使用。

    html复制代码<h1 style="color: #4D4F53; font-size: 24px;">中国新闻网</h1>
    
  2. 内嵌样式:在HTML文档的<head>部分使用<style>标签定义样式,适用于单个页面的样式定义。

    <style>  h1 {  color: #4D4F53;  font-size: 24px;  }  
    </style>
    
  3. 外联样式:将样式定义在单独的.css文件中,并通过<link>标签在HTML文档中引入,适用于多个页面的样式共享。

    html复制代码<link rel="stylesheet" href="css/news.css">
    

颜色的表示

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

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

超链接

标签 <a>

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

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

正文排版

视频与音频标签

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

文本排版

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

CSS样式

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

注意事项

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

页面布局与盒子模型

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

盒子模型概述

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

  • 内容区域(Content):元素的实际内容区域,如文本、图片等。
  • 内边距区域(Padding):内容区域与边框之间的空白区域,用于控制内容与边框的距离。
  • 边框区域(Border):围绕内边距和内容区域的边界,可以设置颜色、宽度和样式。
  • 外边距区域(Margin):边框外部的空间,用于控制元素与其他元素之间的距离。
CSS盒子模型属性

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

  • widthheight:分别用于设置元素的宽度和高度。
  • 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/876731.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Gin】智慧架构的巧妙砌筑:Gin框架中控制反转与依赖注入模式的精华解析与应用实战(下)

【Gin】智慧架构的巧妙砌筑&#xff1a;Gin框架中控制反转与依赖注入模式的精华解析与应用实战(下) 大家好 我是寸铁&#x1f44a; 【Gin】智慧架构的巧妙砌筑&#xff1a;Gin框架中控制反转与依赖注入模式的精华解析与应用实战(下)✨ 喜欢的小伙伴可以点点关注 &#x1f49d; …

怀旧必玩!重返童年,扫雷游戏再度登场!

Python提供了一个标准的GUI&#xff08;图形用户界面&#xff09;工具包&#xff1a;Tkinter。它可以用来创建各种窗口、按钮、标签、文本框等图形界面组件。 而且Tkinter 是 Python 自带的库&#xff0c;无需额外安装。 Now&#xff0c;让我们一起来回味一下扫雷小游戏吧 扫…

快速搞定分布式RabbitMQ---RabbitMQ进阶与实战

本篇内容是本人精心整理&#xff1b;主要讲述RabbitMQ的核心特性&#xff1b;RabbitMQ的环境搭建与控制台的详解&#xff1b;RabbitMQ的核心API&#xff1b;RabbitMQ的高级特性;RabbitMQ集群的搭建&#xff1b;还会做RabbitMQ和Springboot的整合&#xff1b;内容会比较多&#…

【C++】C++入门知识(上)

好久不见&#xff0c;本篇介绍一些C的基础&#xff0c;没有特别的主题&#xff0c;话不多说&#xff0c;直接开始。 1.C的第一个程序 C中需要把定义文件代码后缀改为 .cpp 我们在 test.cpp 中来看下面程序 #include <stdio.h> int main() {printf("hello world\n…

SQL Server 设置端口号:详细步骤与注意事项

目录 一、了解SQL Server端口号的基础知识 1.1 默认端口号 1.2 静态端口与动态端口 二、使用SQL Server配置管理器设置端口号 2.1 打开SQL Server配置管理器 2.2 定位到SQL Server网络配置 2.3 修改TCP/IP属性 2.4 重启SQL Server服务 三、注意事项 3.1 防火墙设置 3…

C++中的static_cast函数

static_cast 是 C 中的一个类型转换操作符&#xff0c;用于在编译时进行类型转换。它主要用于基本数据类型之间的转换&#xff0c;以及类的指针或引用之间的向上转换&#xff08;将派生类指针或引用转换为基类指针或引用&#xff09;和某些情况下的向下转换&#xff08;将基类指…

Java小抄|Java中的List与Map转换

文章目录 1 List<User> 转Map<User.id,User>2 基础类型的转换&#xff1a;List < Long> 转 Map<Long,Long> 1 List 转Map<User.id,User> Map<Long, User> userMap userList.stream().collect(Collectors.toMap(User::getId, v -> v, …

p28 vs环境-C语言实用调试技巧

int main() { int i0; for(i0;i<100;i) { printf("%d",i); } } 1.Debug 和Release的介绍 Debug通常称为调试版本&#xff0c;它包含调试信息&#xff0c;并且不做任何优化&#xff0c;便于程序员调试程序。 Release称为发布版本&#x…

24-列表的常用操作(下)

### 3.2增加 --- 作用&#xff1a;增加指定数据到列表中 - append&#xff08;&#xff09;&#xff1a;列表追加数据 1. 语法 python 列表序列.append(数据) 2. 体验 python name_list [Tom,Lily,Rose] name_list.append(xiaoming) # 结果 &#xff1a;[Tom,Lily,R…

PTPD 在 QNX 系统上的授时精度验证与误差排查

文章目录 0. 引言1.关键函数实现2. 验证策略与结果3. 授时误差的排查与解决3. 授时误差的排查与解决4. 结论 0. 引言 PTPD是一种时间同步的开源实现&#xff0c;在不同操作系统上的表现可能存在显著差异。 本文通过在QNX系统上运行PTPD&#xff0c;针对其授时精度进行详细验证…

探索算法系列 - 双指针

目录 移动零&#xff08;原题链接&#xff09; 复写零&#xff08;原题链接&#xff09; 快乐数&#xff08;原题链接&#xff09; 盛最多水的容器&#xff08;原题链接&#xff09; 有效三角形的个数&#xff08;原题链接&#xff09; 查找总价格为目标值的两个商品&…

优化算法:2.粒子群算法(PSO)及Python实现

一、定义 粒子群算法&#xff08;Particle Swarm Optimization&#xff0c;PSO&#xff09;是一种模拟鸟群觅食行为的优化算法。想象一群鸟在寻找食物&#xff0c;每只鸟都在尝试找到食物最多的位置。它们通过互相交流信息&#xff0c;逐渐向食物最多的地方聚集。PSO就是基于这…

关于锁策略

在Java中对于多线程来说&#xff0c;锁是一种重要且必不可少的东西&#xff0c;那么我们将如何使用以及在什么时候使用什么样的锁呢&#xff1f;请各位往下看 悲观锁VS乐观锁 悲观锁&#xff1a; 在多线程环境中&#xff0c;冲突是非常常见的&#xff0c;所以在执行操作之前…

GRL-图强化学习

GRL代码解析 一、agent.py二、drl.py三、env.py四、policy.py五、utils.py 一、agent.py 这个Python文件agent.py实现了一个强化学习&#xff08;Reinforcement Learning, RL&#xff09;的智能体&#xff0c;用于在图环境&#xff08;graph environment&#xff09;中进行学习…

【python_将一个列表中的几个字典改成二维列表,并删除不需要的列】

def 将一个列表中的几个字典改成二维列表(original_list,headersToRemove_list):# 初始化一个列表用于存储遇到的键&#xff0c;保持顺序ordered_keys []# 遍历data中的每个字典&#xff0c;添加其键到ordered_keys&#xff0c;如果该键还未被添加for d in original_list:for …

MXNet 库使用指南

MXNet 是一个功能强大且灵活的深度学习框架&#xff0c;广泛应用于图像分类、自然语言处理和推荐系统等领域。下面将详细介绍如何使用 MXNet 库&#xff0c;包括安装、基础使用、构建和训练神经网络模型。 1. 安装 MXNet 首先&#xff0c;需要安装 MXNet。可以使用以下命令安装…

P4009 汽车加油行驶问题题解

P4009 汽车加油行驶问题 紫题&#xff0c;但是DFS。 思路 记忆化搜索&#xff0c;分多钟情况去搜索。 注意该题不用标记&#xff0c;有可能会往回走。 有可能这样走。 代码 #include<bits/stdc.h> #include<cstring> #include<queue> #include<set&g…

Flutter Geolocator插件使用指南:获取和监听地理位置

Flutter Geolocator插件使用指南&#xff1a;获取和监听地理位置 简介 geolocator 是一个Flutter插件&#xff0c;提供了一个简单易用的API来访问特定平台的地理位置服务。它支持获取设备的最后已知位置、当前位置、连续位置更新、检查设备上是否启用了位置服务&#xff0c;以…

redis:清除缓存的最简单命令示例

清除redis缓存命令(执行命令列表见截图) 1.打开cmd窗口&#xff0c;并cd进入redis所在目录 2.登录redis redis-cli 3.查询指定队列当前的记录数 llen 队列名称 4.清除指定队列所有记录 ltrim 队列名称 1 0 5.再次查询&#xff0c;确认队列的记录数是否已清除

配置和连接另一台电脑上的 MySQL 数据库

要配置和连接另一台电脑上的 MySQL 数据库&#xff0c;可以按照以下步骤进行设置&#xff1a; 1. 配置 MySQL 服务器 在目标计算机上&#xff08;192.168.10.103&#xff09;进行以下操作&#xff1a; 修改 MySQL 配置文件&#xff1a; 打开 MySQL 配置文件&#xff08;通常位…