当前位置：网站首页>模仿扇贝短文阅读页面

模仿扇贝短文阅读页面

2022-04-23 05:57:00 【Lily的秋天】

有时候会看一下扇贝短文阅读，觉得布局挺好看的，正好在学习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>口语</a>
                <a>短文</a>
                <a>读书</a>
                <a>社区</a>
                <a>帮助</a>
            </div>
            <div class="topright">
                <label>
                    <input placeholder="查词">
                </label>
                <a style="float: right">帮助</a>
            </div>
            <div class="topuser">个人中心</div>
        </div>
    </div>
    <div class="bigDiv">
        <div class="leftDiv">
            <p class="englishHead"><b>Shenzhou-12 Returned: How Important Is The Parachute?</b></p>
            <p class="chineseHeadLine">神舟十二返航，降落伞如何保驾护航？</p>
            <p class="easyDifficult">难度：六级/考研  单词：314  读后感：47</p>
            <img src="center_img.png" style="width: 800px;height: auto;">
            <p>
                The three taikonauts aboard China's Shenzhou-12 spacecraft naturally get most of the attention
                during discussions of their historic 90-day mission. But on their return to Earth,
                a key piece of equipment takes a starring role: The giant parachute that softens their landing.
                China's self-developed parachutes have escorted all Shenzhou spacecraft back to Earth smoothly.&nbsp;
            </p>
            <p>
                The parachute stretches about nine floors or 70 meters from the top to the end that connects
                the spacecraft. That's the width of a football field.&nbsp;
            </p>
            <p>
                The 1,200-square-meter parachute is able to slow the craft down to seven meters per second before
                landing. But it's not the only chute that's deployed.&nbsp;
            </p>
            <p>
                "The craft still travels at 200m/s when it's 10 kilometers above the ground. That's twice the
                speed of high-speed trains. It is not practical to open the main chute at that time. Let's say,
                on rainy days when it is windy, your umbrella can turn over," Rong Wei, deputy chief designer of
                the Shenzhou spacecraft system said.&nbsp;
            </p>
            <p>
                Therefore, the craft first opens a smaller chute &#8211; to slow it down to 90m/s before pulling
                out the main chute. At one meter above the ground, the engine at the bottom of the craft can further
                slow it down to a safe landing speed.&nbsp;

            </p>
            <p>
                In addition, the parachutes are designed to save space and weight for manned spacecraft. The chute
                package weighs less than 100 kilogram and can be packed into a bag the size of only two suitcases.&nbsp;
            </p>
            <p>
                "The rope per meter weighs less than a ping-pong ball, but it's very strong. I'm about 70 kilogram.
                The rope can hold five times my weight," Rong Wei said.&nbsp;
            </p>
            <p>
                A total of 96 ropes must be packed precisely so they don't get tangled, for the safety of the taikonauts.
                The parachute deploys for only a few seconds during landing. But it takes decades for researchers to
                make those seconds count.&nbsp;
            </p>
        </div>
        <div class="rightDiv">
            <p style="margin-top: 40px;margin-left: 20px;border-left-width: 2px;border-left-color: darkcyan;border-left-style: solid;">
                &nbsp;本周最受关注短文</p>
            <a class="rightContent">
                How to Celebrate a Typical Chinese Mid-Autumn Festival?</a><br>
            <p class="date">2021-09-21</p>
            <a class="rightContent">
                Shenzhou-12 Taikonauts Return To Earth Ahead Of Moon Festival</a><br>
            <p class="date">2021-09-18</p>
            <a class="rightContent">
                The 5 Most Popular Chinese Noodles</a><br>
            <p class="date">2021-09-18</p>
            <a class="rightContent">
                Designer Makes Splash With Wee Gowns</a><br>
            <p class="date">2021-09-19</p>
            <a class="rightContent">
                Embracing the Worst Possible Outcome Is Your Secret Weapon</a><br>
            <p class="date">2021-09-19</p>
            <a class="rightContent">
                Food for Fall Has It All:Fall Food From Farmers</a><br>
            <p class="date">2021-09-20</p>
            <a class="rightContent">
                "Important Animal Image" to Put a Smile on Your Face</a><br>
            <p class="date">2021-09-22</p>
            <a class="rightContent">
                China Post Officers Service to Send Letters to Space</a><br>
            <p class="date">2021-09-21</p>
            <a class="rightContent">
                Pareidolia In These Vegetables And Fruits</a><br>
            <p class="date">2021-09-19</p>
            <a class="rightContent">
                Realistic Porcelain Flowers</a><br>
            <p class="date">2021-09-21</p>
            <div class="borderline" style="height: 180px;background-color: #f9f9f9;margin-left: 10px;">
                <div class="borderline" style="border-bottom-color: #07f1b0;height: 175px;">
                    <img src="code.png" style="float: left;margin: 50px 10px 10px 30px;width: 100px;height: 100px;">
                    <p style="float:left;margin:65px auto auto auto;font-weight: bold;">扇贝阅读</p><br>
                    <p style="margin: 75px auto auto auto;color: #006400;font-weight: bold;">扫描二维码 下载扇贝</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS部分：


.navTap {
    height: 74px;
    background-color: #209E85;
}

.topTap {
    position: absolute;
    left: 15%;
    right: 15%;
    width: 1400px;
    height: 74px;
}

.topleft {
    float: left;
}

.topright {
    margin-left: 150px;
    float: left;
}

input {
    margin-top: 20px;
    height: 25px;
    color: white;
    border: 2px solid;
}

.topuser {
    font-size: 18px;
    margin: 20px 20px;
    float: right;
    color: white;
}

.topuser:hover {

}

a {
    font-size: 18px;
    margin: 22px 20px;
    float: left;
    color: white;
}

.englishHead {
    font-size: 26px;
    color: black;
}

.chineseHeadLine {
    font-size: 18px;
    color: black;
}

.easyDifficult {
    font-size: 12px;
    color: darkgray;
}

.bigDiv {
    position: absolute;
    left: 15%;
    right: 15%;
    width: 1400px;
    height: 2000px;
    text-align: center;
}

.leftDiv {
    width: 800px;
    height: 2000px;
    text-align: left;
    float: left;
}

.rightDiv {
    width: 500px;
    height: 1000px;
    text-align: left;
    float: right;
}

.rightContent {
    color: black;
    margin: 10px auto auto 20px;
    font-size: 15px;
    font-weight: normal;
    /*font-family: Arial;*/
}

.date {
    color: gray;
    font-size: 10px;
    margin: 15px auto 20px 20px;
    border-width: 1px;
    border-bottom-color: lightgray;
    border-bottom-style:solid;
}

.borderline {
    border-width: 5px;
    border-bottom-color: #209E85;
    border-bottom-style:solid;
}

随缘再补。

版权声明
本文为[Lily的秋天]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_34285232/article/details/120736956

边栏推荐

猜你喜欢

随机推荐