模仿扇贝短文阅读页面

最新推荐文章于 2025-04-29 06:03:21 发布

Lily的秋天

最新推荐文章于 2025-04-29 06:03:21 发布

阅读量316

点赞数

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

本文链接：https://blog.csdn.net/qq_34285232/article/details/120736956

版权

本文记录了作者尝试模仿扇贝短文阅读页面的过程，通过学习CSS基础，试图复制界面布局。尽管最终实现了基础版的界面，但意识到要实现完整功能如链接、下拉菜单等还需更多工作。作者最初打算使用layUI框架，但发现纯HTML+CSS更利于巩固基础，于是采用此方式完成。页面结构分为导航和内容两个div，导航部分又细分为链接、搜索和个人中心三块，而内容区则包含短文和推荐内容。代码实现包括HTML和CSS两部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候会看一下扇贝短文阅读，觉得布局挺好看的，正好在学习CSS基础，就想模仿着做一下。

参考的神舟十二那篇文章，做完后的“盗版”界面大概如下：

大致看上去还OK，但实际上没有做任何链接，也没有下拉菜单，没有自动翻译，没有添加备注……等等一系列功能。这样看来一个简单的界面也不是那么简单的，哎，看我啥时候能把它补齐。

记录下思路：

一开始想用layUI，页眉还没做出来，layUI官宣停止维护，另一方面发现用框架反而更复杂，搞了一整天导航栏还没弄出来，还不如直接用纯HTML+CSS做呢，就当巩固基础了。

整体分上下两个div，导航div和内容div：

上面的div还分了三个部分，最左侧是普通链接，中间是搜索框和帮助，右边是个人中心。之所以搞这么复杂还不是一开始雄心壮志的，想着分开了，后面添加搜索功能、个人中心设置下拉菜单也方便，鬼知道只搞了界面出来。

下面的div比较简单，分为左右两个板块，左边就是短文内容，右边的相关推荐阅读和广告二维码。

废话不多说，代码如下：

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ShanBeiWeb</title>
    <link rel="stylesheet" href="shanbeiWeb.css">
</head>
<body>
    <div class="navTap">
        <div class="topTap">
            <div class="topleft">
                <a style="margin: 10px 20px 0 0;"><img src="logo_shanbei.png" style="width: 100px;height: 40px;" alt="zhanweifu"></a>
                <a>首页</a>
                <a>单词</a>
                <a>编程</a>
                <a>听力</a>
                <a>口语<

最低0.47元/天解锁文章