【web开发01】前端开发HTML、CSS-新浪新闻的实现_前段开发新闻简易版-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_50771882/article/details/137602050

1 实现标题排版

在这里插入图片描述

1.1图片连接的三种方式

1.绝对路径
1.1本地路径

<img src="C:\Users\86138\Desktop\html\img\news_logo.png">

1.2网络路径

<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">

2.相对路径

<img src="img/news_logo.png">

1.2 具体代码

<!-- 文档类型为HTML -->

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>
    <img <img src="img/news_logo.png">  新浪政务>正文
    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
        2023年03月02日 21:50 央视网
    <hr>
</body>
</html>

1.3 总结1.< h1>到< h6>是标题从大到小

2.< hr>是水平线
3.绝对路径当前目录./ 上上级目录…/

具体代码中是没有空格的，csdn会改写格式这里我才空格

在这里插入图片描述

2 实现标题样式

2.1 css的三种引入方式

1.行内样式

<h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1>

2.内嵌样式

<style>
        h1 {
     
            color: #4d4f53;
        }
    </style>

3.外联样式
先创建一个css文件

h1 {
   
    color: red;
}

html里面：

<link rel="stylesheet" href="css/news.css">

2.2 颜色的三种表示

在这里插入图片描述

<style>
        h1 {