利用html设计具体的新闻网站样式表

最新推荐文章于 2024-09-26 19:25:46 发布

小严要努力学习

最新推荐文章于 2024-09-26 19:25:46 发布

阅读量2.1k

点赞数 2

分类专栏：前端 html

本文链接：https://blog.csdn.net/yyy__yyy_/article/details/126005094

版权

HTML 页面构建链接跳转新闻网站表格

关键词由CSDN通过智能技术生成

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

html

4 篇文章

订阅专栏

文章目录

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>
        <a href="#bottom">到底部</a>
    <br>
    <br>

    <table border="1">
        <tr>
            <td><a href="#fujian">福建新闻</a></td>
            <td><a href="#beijian">北京新闻</a></td>
        </tr>  
    </table>

    <table border="1" id="fujian">
        <td><h2>福建新闻</h2></td>
        <tr>
            <td>2022/07/05</td>
        </tr>
        <tr>
            <td>
                <p>新华日报报道<br>全国知名奶茶店成立</p>
            <img src="忆茗惊人·.png" alt="忆茗惊人">
            </td>
        </tr>
    </table>

    <table border="1" id="beijian">
        <td><h1>北京新闻</h1></td>
        <tr>
            <td>2022/07/05</td>
        </tr>
        <tr>
            <td>
                <p>人民日报报道<br>清华大学的美景</p>
            <img src="清华大学.jpg" alt="清华大学照片">
            </td>
        </tr> 
    </table>
        <a id="bottom" href="">到顶部</a><!-- 将超链接a中的href值设为“#”，也是可以实现直接跳转到顶部 -->
</body>
</html>

3、效果图

最后执行代码的效果如下：
在这里插入图片描述

4、总结

以上就是今天要讲的内容，本文简单介绍了表格表单相关知识的使用，大家可以自己动手试一下。
表格表单相关知识做页面差不多就分享到这里了，往后会发布一些其它html，css做页面的方法和源码。
有什么问题欢迎大家在评论区指出，一起相互交流学习。
如果这篇文章帮助到你，麻烦点个赞，留个关注，非常感谢大家们的支持~~~