html5新闻页面代码 html设计一个新闻网页 您所在的位置:网站首页 新闻网站代码html html5新闻页面代码 html设计一个新闻网页

html5新闻页面代码 html设计一个新闻网页

2024-05-17 20:13| 来源: 网络整理| 查看: 265

目标:学习制作一个简单的新闻页面效果一、效果分析:1.新闻标题,一般使用定义2.更新的时间以及来源(可以使用段落文本定义)3.分割线,用于正文的分割4.正文,使用段落文本来定义效果图:

html5新闻页面代码 html设计一个新闻网页_html5

二、样式要求在分析完常见的新闻页面效果后我们应当对页面的样式做出一些要求标题:使用二级标题居中,字体为“微软雅黑”发布日期:文本居中,文本大小为2颜色为特殊的灰色、蓝色文本。水平线:使用size和color属性来设置宽度和颜色。网页正文:网页正文中有两处蓝色的文本三、具体操作

1、首先打开Dreamweaver2021

html5新闻页面代码 html设计一个新闻网页_新媒体_02

2、点击新建,建立一个文档,这里我们选择文档类型为HTML5。建立的时候我们可以在“标题”栏直接定义文档的标题,这里我们就定义文档标题为新闻页面

html5新闻页面代码 html设计一个新闻网页_css3_03

3、建立完成之后我们就进入到开发页面了。

html5新闻页面代码 html设计一个新闻网页_html5_04

4、首先我们在双标签内部嵌套定义标题

html5新闻页面代码 html设计一个新闻网页_新媒体_05

5、根据要求我们使用格式定义标题格式,使用

标签写入第二行更新时间,使用来画出一条用于分割的横线,最后使用

来键入正文

6、根据要求把对应的文本键入到对应的标签内部,而后根据要求修改文字格式

7、首先我们使用来将标题进行居中操作。而后在该标签内部又嵌套一个标签,在标签中我们使用了face属性用于定义标题文字格式,这里我们把标题格式设置成“微软雅黑”

新媒体的大势所趋

8、完成标题后我们用统一的方法定义第二行

标签内的文字格式,这里文字大小设置为2,颜色设置为灰色,后面开源社区字样设置为蓝色

更新时间:2019年12月16日14时08分来源: 开源社区

9、接下来设置横线用以分隔正文

10、按照步骤8的方式我们同样对正文文本样式进行设置。

近年来,随着移动互联网 的蓬勃发展,公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展,运营人员在企业中的价值也不断的被放大和受到重视,很多企业在做线上营销时都会考虑 “两微一抖 ,也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。

html5新闻页面代码 html设计一个新闻网页_html5新闻页面代码_06

11、command+s保存文档,保存完成后使用快捷键option+fn+f12使用浏览器预览效果

html5新闻页面代码 html设计一个新闻网页_html_07

学习重点:使用标签用于设置指定的文字的样式、使用标签内的face属性设置文字的字体格式、使用标签内的color属性设置文字的字体颜色、



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有