Web开发：前端HTML+CSS实现新浪新闻页面

ChiCheng83

于 2024-07-25 18:31:14 发布

阅读量177

点赞数 4

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

本文链接：https://blog.csdn.net/chencxiaobai/article/details/140670396

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

标题实现

正文实现

页面布局

要实现的网页：

国际锐评丨巴勒斯坦内部大和解，为何又是在北京？|巴勒斯坦|中国|国际锐评_新浪新闻 (sina.com.cn)

知识点：html提供六个标签（h1-h6），不存在第七个，因为这是html预先定义好的，不能够自己随意定义。重要程度依次降低，h1重要程度最高，字体最大，h6最小。图片标签为<img>，可以设置宽度width和高度height。用相对路径、绝对路径和绝对网络路径去调用，我这里使用的是绝对网络路径，也就是需要联网去调用相应的资源。

标题实现

<!DOCTYPE html>
<html lang="en">
<head>
  <!--字符集-->
  <meta charset="UTF-8">
  <title>国际锐评丨巴勒斯坦内部大和解，为何又是在北京？</title>
</head>
<body>
    <!--绝对网络路径：通过联网去加载网络上的资源-->
  <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"  alt=" 国内新闻>正文"> 国内新闻>正文

  <h1>国际锐评丨巴勒斯坦内部大和解，为何又是在北京？</h1>
    <!--hr为分割线-->
    <hr>2024年07月23日 22:56 央视<hr>
</body>
</html>

知识点：行内样式：只对这一行有用。内嵌样式：对当前html页面有用。外联样式：单独写一份CSS文件，任何一份html文件要使用时link调用它即可。

十六进制表示法：前两位为红色，中间为绿色，最后为蓝色，当每个颜色有相同的表示时，可以简写成一个。

利用qq截图可以看到字体颜色的rgb表示

元素选择器修改某一类元素（如h1）。id选择器（可以给某一元素一个id，但不能重复，可以单独给这个id颜色）。类选择器（给一些需要相同属性的元素设置为一个类，可以对这个类颜色），如果存在多个样式，优先使用id样式，其次是类样式，最后是元素样式。

我使用的是外联样式

h1 {
  color: rgb(77,79,83);
}
#time {
  color: rgb(136,136,136);
  font-size: 13px;/*字体大小*/
}

超链接：点击国内新闻进行跳转

  <a href="https://news.sina.com.cn/china/" target="_self">国内新闻</a>>正文

CSS样式去除超链接下划线并设置颜色为黑色（text-decoration属性）

a{
  color: black;
  text-decoration: none;/*设置为标准文本*/
}

正文实现

页面中的各类标签如下。使用CSS样式去让所有段落都首行缩进和控制行高

p{
  text-indent: 35px;
  line-height: 35px;
}

段落--图片--段落...按照页面顺序依次插入，部分内容如下，大部分都是重复此步骤

id选择器让编辑人靠右对齐

<style>
    #editor{
      text-align: right;
    }
  </style>
<p id="editor">责任编辑：刘光博</p>

页面布局

为了改变页面布局，就要理解CSS盒子模型

这里也可以使用auto让浏览器自动计算边距

div{
  width:65%;/*盒子占总页面的65%的宽度*/
  /*剩余的35%设置为页边距*/
  /*margin: 0 auto;*/
  margin: 0% 17.5% 0% 17.5%;/*设置页边距（上 右 下 左）分别为0%和17.5%*/
}

最终的效果

ChiCheng83

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Web开发：前端HTML+CSS实现新浪新闻页面

html+css实现新浪新闻页面
复制链接

扫一扫

专栏目录