用HTML+CSS做一个简单的新闻门户 1页网页

⛵ 源码获取文末联系 ✈

Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | 等网站的设计与制作 | HTML期末大学生网页设计作业，Web大学生网页

HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

文章目录

前端学习路线
网页基本结构
网页演示
- HTML结构代码
学的反而越迷茫
学习更多

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

在这里插入图片描述

HTML结构代码



DOCTYPE html>
<html lang="en">

<head>
    <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>
    <link rel="stylesheet" href="css/style.css">
head>

<body>
    <div id="banner">
        <img src="picture/banner.png" alt="">
    div>
    <div id="nav">
        <h1>新闻资讯h1>
        <ul>
            <li>
                <a href="#">首页a>
            li>
            <li>
                <a href="#">赛事a>
            li>
            <li>
                <a href="#">公益a>
            li>
            <li>
                <a href="#">军事a>
            li>
            <li>
                <a href="#">体育a>
            li>
            <li>
                <a href="#">登录a>
            li>
        ul>
    div>
    <div id="main">
        <div id="main">
            <div id="left">
                <div id="ppt">
                    <h2>要闻
                        <span>更多→span>
                    h2>
                    <ul>
                        <li>
                            <a href="">他们为何“时时放心不下”？a>
                        li>
                        <li>
                            <a href="">她们是妈妈，也不仅仅是“妈妈”a>
                        li>
                        <li>
                            <a href="">高票当选！李家超誓言带领香港开新篇...a>
                        li>
                        <li>
                            <a href="">坚持全国一盘棋，确保交通物流畅通..a>
                        li>
                        <li>
                            <a href="">上海全力做好企业复工复产复市金融支持a>
                        li>
                        <li>
                            <a href="">守牢“外防输入”防线，确保供应链畅通a>
                        li>
                        <li>
                            <a href="">被这些排队核酸的小设计暖到了a>
                        li>
                    ul>
                div>
                <div id="spry">
                    <h2>娱乐<span>更多→span>h2>
                    <ul>
                        <li>
                            <a href="">韩庚官宣妻子怀孕！卢靖姗孕肚首曝光a>
                        li>
                        <li>
                            <a href="">《甄嬛传》记录了多少人的颜值巅峰？a>
                        li>
                        <li>
                            <a href="">IP属地公开后，人人都是大侦探？a>
                        li>
                        <li>
                            <a href="">《阿凡达2》，全球首部30亿美元＋电影？a>
                        li>
                    ul>
                div>

            div>
            <div id="mid">
                <div id="news">
                    <h2>今日话题<span>更多→span>h2>
                    <ul>
                        <li>
                            <a href="">中国发展有利于世界繁荣a>
                            <span>2022-02-01span>
                        li>
                        <li>
                            <a href="">求是网| 揭开科技强国建设新篇章，还要这样干！a><span>2022-02-01span>
                        li>
                        <li>
                            <a href="">地方国企改革三年行动主体任务完成度超90％a><span>2022-02-01span>
                        li>
                        <li>
                            <a href="">全面落实新选制，实干开创新未来.a><span>2022-02-01span>
                        li>
                        <li>
                            <a href="">打通生育堵点，安居问题不可忽视a><span>2022-02-01span>
                        li>
                    ul>
                div>
                <div id="laws">
                    <h2 style="margin-bottom: 30px;">图话<span>更多→span>h2>
                    <img src="picture/11.webp" alt="">
                    <ul>
                        <li>
                            <a href="">“零废弃”生活6年...a>
                            <span>2022-02-01span>
                        li>
                        <li>
                            <a href=""> 我在上海方舱住了14天...a><span>2022-02-01span>
                        li>
                        <li>
                            <a href=""> 普尔恶意伤人？莫...a><span>2022-02-01span>
                        li>
                        <li>
                            <a href=""> 周杰伦都捧不红...a><span>2022-02-01span>
                        li>
                    ul>
                div>
            div>
            <div id="article">
                <h2 style="margin-bottom: 25px">为你推荐<span>更多→span>h2>
                <ul>
                    <li>
                        <img src="picture/11.png" alt="">
                        <div>
                            <p>石景山一对新人取消原定今日举办的婚宴，穿着婚服排队做核酸...p>
                        div>
                    li>
                    <li>
                        <img src="picture/22.png" alt="">
                        <div>
                            <p>原油供给“困境”：巨头们赚翻了也不增产，美国页岩油厂商...p>
                        div>
                    li>
                    <li>
                        <img src="picture/33.png" alt="">
                        <div>
                            <p>论兵·日本“军事触角”不断延伸 背后有何企图？...p>
                        div>
                    li>
                    <li>
                        <img src="picture/44.png" alt="">
                        <div>
                            <p>蓝翔校长前妻再举报，十年恩怨为何难解？...p>
                        div>
                    li>
                    <li>
                        <img src="picture/55.png" alt="">
                        <div>
                            <p>辉瑞败诉被迫公开新冠疫苗相关文件，不良反应长达9页？真相并...p>
                        div>
                    li>
                    <li>
                        <img src="picture/66.png" alt="">
                        <div>
                            <p>NBA十佳球：字母哥四球上榜塔图姆硬刚希腊怪兽...p>
                        div>
                    li>
                ul>
            div>
        div>
    div>
    <footer>
        <p>
            版权所有©***
        p>
    footer>
body>

html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？

所以，放松心态吧，好好享受大学时光
—————————————————

学习更多

关注我 | 点赞博文 | 每天带你涨知识

在这里插入图片描述

相关阅读:
一文了解常用的微波传输线（一）
WebWall-04.CSRF(跨站请求伪造)
CPU、GPU、IPU、NPU、TPU、LPU、MCU、MPU、SOC、DSP、FPGA、ASIC、GPP、ECU、
java计算机毕业设计高校宿舍管理系统MyBatis+系统+LW文档+源码+调试部署
 Opengl ES之FBO
撰写博客的工具记录
 一起学习学习二叉树
 交叉编译及运行的理解
 GLSL ES着色器精度限定字
 __unaligned修饰指针
原文地址：https://blog.csdn.net/m0_46321522/article/details/127915892