静态页面

最新推荐文章于 2025-05-28 22:05:51 发布

小_学_生

最新推荐文章于 2025-05-28 22:05:51 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： html5

本文链接：https://blog.youkuaiyun.com/jujishou521/article/details/53087306

本文分享了一个根据慕课网教程制作的静态网页项目。通过HTML和CSS实现了一个包含导航栏、文章预览等元素的个人博客页面布局。

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

上周，根据慕课网的视频，写了个静态页面，记录下。

blog--

---------js

---------img

---------css

js下 index

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/main.css">

</head>
<body>
<div>
    <div class="main-wrapper">
        <header>
            <nav>
                <div class="logo">
                    <a href="#">一棵开花的树</a>
                </div>
                <ul>
                    <li>
                        <a href="#" class="active">首页</a>
                    </li>
                    <li>
                        <a href="#">目录</a>
                    </li>
                    <li>
                        <a href="#">菜单</a>
                    </li>
                    <li>
                        <a href="#">联系我</a>
                    </li>

                </ul>
            </nav>
            <div id="banner">
                <div class="inner">
                    <h1>情不知所起一往而深</h1>

                    <p class="sub-heading"> 青春是一本太仓促的书，我们含着泪，一读再读。</p>
                    <button>了解我</button>

                    <div class="more">更多</div>

                </div>
            </div>

        </header>
        <div class="content">
            <section class="green-section">
                <div class="wapper">
                    <div>
                        <h2>
                            如何让你遇见我
                            　　在我最美丽的时刻
                        </h2>

                        <div class="hr"></div>
                        <p class="sub-heading">
                            今生今世 我只是个戏子 永远在别人的故事里流着自己的泪
                            　
                        </p>

                        <div class="icon-group">
                            <span class="icon"><p>章一</p></span>
                            <span class="icon"><p>章二</p></span>
                            <span class="icon"><p>章三</p></span>

                        </div>
                    </div>
                </div>
            </section>
            <section class="grey-section">
                <div class="article-preview">
                    <div class="img-section">
                        <img src="../img/pic.jpg" alt="图片">
                    </div>
                    <div class="text-section">
                        <h2>one</h2>

                        <div class="sub-heading"> 七里香</div>
                        <p>
                              溪水急着要流向海洋<br>
                            　　浪潮却渴望重回土地<br>
                            　　在绿树白花的篱前<br>
                            　　曾那样轻易地挥手道别<br>
                            　　而沧桑了二十年後<br>
                            　　我们的魂魄却夜夜归来<br>
                            　　微风拂过时<br>
                            　　便化作满园的郁香
                        </p>
                    </div>
                </div>

                <div class="article-preview">

                    <div class="text-section">
                        <h2>two</h2>

                        <div class="sub-heading"> 抉择</div>
                        <p>
                              假如我来世上一遭<br>
                            　　只为与你相聚一次<br>
                            　　只为了亿万光年里的那一刹那<br>
                            　　一刹那里所有的甜蜜与悲凄<br>
                            　　那麽就让一切该发生的<br>
                            　　都在瞬间出现吧<br>
                            　　我俯首感谢所有星球的相助<br>
                            　　让我与你相遇<br>
                            　　与你别离<br>
                            　　完成了上帝所作的一首诗<br>
                            　　然後再缓缓地老去<br>
                        </p>
                    </div>
                    <div class="img-section">
                        <img src="../img/pic02.jpg" alt="图片">
                    </div>
                </div>

                <div class="article-preview">
                    <div class="img-section">
                        <img src="../img/pic03.jpg" alt="图片">
                    </div>
                    <div class="text-section">
                        <h2>three</h2>

                        <div class="sub-heading">青春</div>
                        <p>
                              所有的结局都已写好<br>
                            　　所有的泪水也都已启程<br>
                            　　却忽然忘了是怎麽样的一个开始<br>
                            　　在那个古老的不再回来的夏日<br>
                            　　无论我如何地去追索<br>
                            　　年轻的你只如云影掠过<br>
                            　　而你微笑的面容极浅极淡<br>
                            　　逐渐隐没在日落後的群岚<br>
                            　　遂翻开那发黄的扉页<br>
                            　　命运将它装订得极为拙劣<br>
                            　　含着泪我一读再读<br>
                            　　却不得不承认<br>
                            　　青春是一本太仓促的书<br>
                        </p>
                    </div>
                </div>

            </section>
            <section class="purple-section">
                <div class="wapper">
                    <div class="heading-wrapper">
                        <h2>番外篇</h2>

                        <div class="hr"></div>
                        <div class="sub-heading">
                            娱乐一下下
                        </div>
                    </div>

                    <div class="card-group clearfix">
                        <div class="card">
                            <h3>热门</h3>

                            <p>
                                今天去同事家，同事10岁的儿子开的门，叼着烟，很屌很欠揍。我问：你爸在家吗？那小子眉毛一挑：你看我的样子，他们会在家吗？，，，，我，，，</div>
                        <div class="card">
                            <h3>文字</h3>

                            <p>我有四个愿望：不劳而获，不学有术，狂吃不胖，相爱无伤
                            </p>
                        </div>
                        <div class="card">
                            <h3>穿越</h3>

                            <p>人到底什么时候最恐惧，是没钱的时候，还是没食物、没水的时候？都不是。最恐惧的时候，是没有方向的时候，有了方向，其实所有的困难都不是困难。
                            </p>
                        </div>
                        <div class="card">
                            <h3>新鲜</h3>

                            <p>
                                有些路，走下去，会很累，但是不走，会后悔。人生没有对错，只有选择后的坚持！不后悔，走下去，就是对的，喜欢一句诗：走着走着，花就开了。
                            </p>
                        </div>
                    </div>

                </div>

            </section>

        </div>

        <footer>
            <ul class="share-group">
                <li>心灵鸡汤</li>
                <li>经典语录</li>
                <li>散文诗歌</li>

            </ul>
            <div class="copy">
                &copy 昨天的你
            </div>

        </footer>
    </div>

</div>
</body>
</html>

css 下main.css

nav {
    background: transparent;
    height: 50px;
}

#banner {
    background: transparent;
    height: 700px
}

nav ul {
    list-style: none;
    margin: 0;
    float: right;
}

nav ul li, nav .logo {
    display: inline-block;
    line-height: 50px;
    margin-right: 20px;
}

nav ul li a {
    line-height: 50px;
    text-decoration: none;
    display: inline-block;
    height: inherit;
    color: #fff;
}

nav .logo {
    float: left;
    margin-left: 20px;
    text-decoration: none;

}

#banner .inner {
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: 160px;
    color: #fff;
}

#banner .inner h1 {
    margin: 0;

}

button {
    border: none;
    background: #333;
    color: #eee;
    padding: 10px;
}

#banner button {
    padding: 14px 40px;
}

#banner .inner .more {
    margin-top: 200px
}

.logo {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
}

.logo a {
    color: #fff;
    text-decoration: none;
}

.green-section {
    background: #089DB0;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

.wapper {
    max-width: 1080px;
    margin: 0 auto;

}

.hr {
    width: 100%;
    height: 2px;
    margin: 20px auto;
}

.green-section .wapper .hr {
    background: #078494;
    width: 60%;
}

.sub-heading {
    font-size: 18px;
    padding: 10px;
}

.green-section .icon-group .icon {
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 1px solid #0D6f7c;
    transform: rotate(45deg);
    margin: 20px;

}

.green-section .icon-group p {
    transform: rotate(-45deg);

}

.icon-group {
    margin-top: 30px;
    text-align: center;
}

.grey-section {
    color: #fff;
    background: #252F34;
}

.grey-section .img-section {
    width: 45%;
}

.grey-section .text-section {
    width: 55%;
}

.img-section img {
    width: 100%;
}

.article-preview > div {
    float: left;
    /*font-size: 0;*/
}

.article-preview:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

.article-preview:after {
    content: '';
    display: block;
    clear: both;
}

.text-section {
    position: relative;
    top: 68px;
    left: 50px;
}


.text-section .sub-heading {
    font-size: 22px;
    margin-top: 0;
}

.text-section p {
    font-size: 18px;
    letter-spacing: 1px;
}

.text-section > * {
    max-width: 90%;
}

.purple-section {
    padding: 80px;
    background: #262149;
    color: #fff;
}

.purple-section .heading-wrapper {
    text-align: center;
}

.purple-section .hr {
    background: #373259;
    width: 60%;
}

.card {
    float: left;
    width: 50%;
    min-height: 300px;
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid white;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

.card h3 {
    font-size: 18px;
}

p {
    font-size: 16px;
    letter-spacing: 1px;

}

.card:first-child {
    background: rgba(0, 0, 0, 0.04);
}

.card:nth-child(2) {
    background: rgba(0, 0, 0, 0.08);
}

.card:nth-child(3) {
    background: rgba(0, 0, 0, 0.12);
}

.card:nth-child(4) {
    background: rgba(0, 0, 0, 0.16);
}

footer {
    background: #333;
    color: #fff;
    min-height: 200px;
    text-align: center;
}

ul {
    margin: 0;
}

.share-group {
    display: block;
    width: 1080px;
    margin: 0 auto;
    padding: 50px;
}

.share-group li {
    display: inline-block;
    padding: 10px;
}
.copy{
    padding-bottom: 50px;
}

.main-wrapper{
    background: #444 url(../img/timg.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

img 下图片素材