利用html进行新闻网站页面的开发设计_html新闻详细页面代码

作者：你好赵伟 | 2024-04-03 11:31:10

踩

html新闻详细页面代码

文章目录

1、前言
2、步骤
3、效果图
4、总结

1、前言

昨天发布了一个有关登录页面的设计。今天这个新闻页面也是利用表格，表单知识来完成的。两个页面都做好后可以通过link链接，从登录页面跳转到新闻页面。

2、步骤

代码如下：

<!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>
</head>

<body>
    <h1>新闻网站</h1>

    <table border="1">
        <!-- 第一小块 -->
        <!-- tr：一行  td：一格 -->
        <tr>
            <td>
                <h2><a href="./新闻网站3.html">国内新闻</a></h2>
            </td>
            <td>
                <h3>热点新闻</h3>
                <table border="1">
                    <tr>
                        <td>周杰伦将于7月15日出新专辑！</td>
                    </tr>
                    <tr>
                        <td>疫情下：何时结束这闹剧？</td>
                    </tr>
                </table>
            </td>
        </tr>
        <!-- 第二小块 -->
        <tr>
            <td>
                <h2>国际新闻</h2>
            </td>
            <td>
                <h3>焦点新闻</h3>
                <table border="1">
                    <tr>
                        <td>俄罗斯与乌克兰战争已经打响！</td>
                    </tr>

                    <tr>
                        <td>美国人民表明对拜登不满的态度</td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>


</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

3、效果图

如下：
在这里插入图片描述

4、总结

以上就是今天要讲的内容，本文简单介绍了表格表单相关知识的使用，
可以自己动手试一下。
有什么问题欢迎大家在评论区指出，一起相互交流学习。
如果这篇文章帮助到你，麻烦点个赞，留个关注，非常感谢大家们的支持~~~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/355345