【Web前端期末大作业】古韵.古风诗词网站-原生html+css+javascript完成

最新推荐文章于 2024-04-23 18:18:03 发布

MIKE笔记(同名B站)

最新推荐文章于 2024-04-23 18:18:03 发布

阅读量1.8k

点赞数 27

分类专栏： Web前端期末大作业文章标签：前端课程设计 html

本文链接：https://blog.csdn.net/m0_51607907/article/details/135162989

版权

Web前端期末大作业专栏收录该内容

9 篇文章 7 订阅

订阅专栏

前言

014-【Web前端期末大作业】古韵.古风诗词网站-原生html+css+javascript完成
🥇个人主页：@MIKE笔记
🥈文章专栏：Web前端期末大作业
⛄源码咨询： wx：mikenote 15💴带走

网页目录树

原生html+css+javascript完成

1️⃣网页介绍

网站建设工具
1.使用VScode（当然使用记事本也是可以的）智能，快捷，支持代码补全，节省了开发时间，并且支持多种语言只需安装插件配置文件即可。
2.网站建设学习资源

b站
CSDN

3.网站建设步骤及思路分享

网站建设步骤在我一点学习的导航栏里有更为清晰的体现，这里就不一一赘述了
网站的思路分享：整体的布局，以及内容，搜寻所需要的素材，建立站点。布局的好坏直接影响了你网页看起来的效果，在此我推荐一些常用的网站布局，一般是导航栏在顶部，下面分为左右结构，分清主次或者上中下三层结构等等，很多布局我觉得可以参考一些大型网站的布局或者一些个人博客的布局，以此增加自己的审美以及知识库。建议壁纸在一些桌面软件里找，会比较清晰。同时建设网页的过程不会是一帆风顺的，要想有理想的效果一定是需要一定时间去调试使用的。

2️⃣网页架构

📢前端三件套：

html
css
js

3️⃣系统环境

环境	版本 / 下载
系统	win 10 /win 11
vscode	2023

备注：以上版本为博主电脑配置，可点击进入官网下载

4️⃣网页展示

【【Web前端期末大作业】-城市风景介绍设计与实现】
视频展示：https://www.bilibili.com/video/BV1v64y1p7aj/?share_source=copy_web&vd_source=d764770ff4322f1a1111e85d452245c6

图片展示

页面太多，其他请看视频演示。

5️⃣代码展示

下面展示一些 内联代码片。
主页

<!DOCTYPE html>
<html>

<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>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 页头 -->
    <header class="header">
        <div class="layui-fluid layui-row">
            <!-- logo -->
            <div class="layui-col-md3 layui-col-md-offset1">
                <div class="logo"><a href="#">古韵.诗词</a></div>
            </div>
            <!-- nav 导航 -->
            <div class="layui-col-md5 layui-col-md-offset3">
                <ul class="layui-nav layui-bg-gray">
                    <li class="layui-nav-item menuActive"><a href="index.html">首页</a></li>
                    <li class="layui-nav-item"><a href="rank.html">排行榜</a></li>
                    <li class="layui-nav-item"><a href="news.html">资讯新闻</a></li>
                    <li class="layui-nav-item"><a href="aboutUs.html">联系我们</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">更多</a>
                        <dl class="layui-nav-child">
                            <dd><a href="login.html">登录</a></dd>
                            <dd><a href="register.html">注册</a></dd>
                            <dd><a href="forgetPwd.html">忘记密码</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 主体 -->
    <section>
        <!-- 轮播图 -->
        <div id="carousel-images" class="layui-carousel carousel">
            <div carousel-item>
                <div><img width="100%" height="100%" src="./images/index/lb/lb1.jpg"></div>
                <div><img width="100%" height="100%" src="./images/index/lb/lb2.jpg"></div>
                <div><img width="100%" height="100%" src="./images/index/lb/lb3.jpg"></div>
                <div><img width="100%" height="100%" src="./images/index/lb/lb4.jpg"></div>
                <div><img width="100%" height="100%" src="./images/index/lb/lb5.jpg"></div>
            </div>
        </div>
        <!-- 最新诗歌动态 -->
        <div class="new">
            <div class="title">最新诗歌动态</div><br>
            <div class="childTitle">汇聚灵感的热门诗歌动态</div>
            <div class="container">
                <div class="box"><img width="100%" height="80%" src="./images/index/news/new1.jpg">
                    <span><a href="detail.html">2023青海湖诗歌节</a></span>
                </div>
                <div class="box"><img width="100%" height="80%" src="./images/index/news/new2.jpg">
                    <span>每日好诗第385期（旧体诗）入围作品公示</span>
                </div>
                <div class="box"><img width="100%" height="80%" src="./images/index/news/new3.jpg">
                    <span>特雷尼克获得青海湖诗歌奖</span>
                </div>
                <div class="box"><img width="100%" height="80%" src="./images/index/news/new4.jpg">
                    <span>中国作协《诗刊》社走进“文学之乡”</span>
                </div>
            </div>
            <button type="button" class="layui-btn layui-btn-normal morebtn">&nbsp;&nbsp;&nbsp;&nbsp;更
                &nbsp;&nbsp;多&nbsp;&nbsp;&nbsp;&nbsp;</button>
        </div>
        <!-- 每日好诗 -->
        <div class="layui-row everyday">
            <div class="layui-col-md5 layui-col-md-offset1">
                <div class="title">
                    <span>每日推荐</span>
                    <span>更多&gt;&gt;</span>
                </div>
                <hr>
                <div class="box">
                    <div class="img">
                        <img src="./images/recommend.jpg" width="100%" height="100%">
                    </div>
                    <div class="txt">
                        <h3>铜钱草</h3>
                        <p>作者：花瓣雨y 特邀点评：陈希<br>
                            这是一首托物言志、蕴含哲理<br>
                            的抒情诗。铜钱草叶圆形盾状，<br>
                            如一枚铜钱，长柄，<br>
                            夏秋开小小的黄绿色花。<br>
                            ...&nbsp;&nbsp;<a href="#">[详情]</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3 layui-col-md-offset1">
                <div class="title">
                    <span>每日精选</span>
                    <span>更多&gt;&gt;</span>
                </div>
                <hr>
                <div class="box">
                    <div class="layui-timeline">
                        <div class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis layui-icon-face-smile"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title list">
                                    <div>每日精选（第350期）</div>
                                    <div>2023-07-03</div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis layui-icon-face-smile"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title list">
                                    <div>每日精选（第349期）</div>
                                    <div>2023-07-02</div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis layui-icon-face-smile"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title list">
                                    <div>每日精选（第348期）</div>
                                    <div>2023-07-01</div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis layui-icon-face-smile"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title list">
                                    <div>每日精选（第347期）</div>
                                    <div>2023-06-30</div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis layui-icon-face-smile"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title list">
                                    <div>每日精选（第346期）</div>
                                    <div>2023-06-29</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 页脚 -->
    <footer class="footer">
        &copy; 2023 mikenote. All rights reserved.
    </footer>
    <script src="layui/layui.js">
    </script>
    <script>
        layui.use(function () {
            var carousel = layui.carousel;
            // 创建轮播实例，设置宽高自适应
            var ins = carousel.render({
                elem: '#carousel-images',
                width: '98vw',
                height: '800px',
                autoplay: 'alway',
                arrow: 'always',
                interval: 2000
            });
        });

        layui.use(function () {
            var util = layui.util;
            // 自定义固定条
            util.fixbar({
                bars: [{
                    type: '分享',
                    content: '分享',
                    icon: 'layui-icon-share'
                }, {
                    type: '帮助',
                    content: '帮助',
                    icon: 'layui-icon-help'
                }, {
                    type: '关于我们',
                    content: '关于我们',
                    icon: 'layui-icon-tips-fill'
                }],
                on: {
                    mouseenter: function (type) {
                        layer.tips(type, this, {
                            tips: 4,
                            fixed: true
                        });
                    },
                    mouseleave: function (type) {
                        layer.closeAll('tips');
                    }
                },
                // 点击事件
                click: function (type) {
                    console.log(this, type);
                    // layer.msg(type);
                }
            });
        });
    </script>
</body>

</html>

结语

我个人觉得建设一个网站首先就是要规划好整体的布局，以及内容，搜寻所需要的素材，建立站点。布局的好坏直接影响了你网页看起来的效果，在此我推荐一些常用的网站布局，一般是导航栏在顶部，下面分为左右结构，分清主次或者上中下三层结构等等，很多布局我觉得可以参考一些大型网站的布局或者一些个人博客的布局，以此增加自己的审美以及知识库。建议壁纸在一些桌面软件里找，会比较清晰。同时建设网页的过程不会是一帆风顺的，要想有理想的效果一定是需要一定时间去调试使用的。