庆祝兔年——网页特辑

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

新年伊始，虎去兔来，这里利用rabit的元素，来做一个兔年知识收集网站

首页是蹦蹦跳跳的长耳兔，以此来迎接兔年的接踵而至。

采用CSS布局制作，主要内容包括新年欢迎、兔年来历、收集祝福等内容，作品共多个页面，HTML静态网页基础水平制作，页面排版干净简洁。网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点。

下面就是该项目的代码架构：

rabit——assets

————css

————fonts

————inages

————js

——index.html

其中：（1）📜html文件包含：其中index.html是首页、（2）📑 css文件包含：css全部页面样式, 图片放大等；（3）📄 js文件包含：js实现表单提交, 点击事件等等（个别网页中运用到js代码）。

在index.html中：

<body>
        <div id="index">                                           <!-- Index starts here -->
            <div class="container main">
                <div class="row home">
                    <div id = "index_left" class="col-md-6 left">
                        <img class="img-responsive img-rabbit" src="assets/images/home.jpg">
                    </div>
                    <div id = "index_right" class="col-md-6 text-center right">
                        <div class="logo">
                            <img src="assets/images/logo.png">
                            <h4>I am rabbit</h4>
                        </div>
                        <p class="home-description">
                            Hi, I am Rabbit, Web developer from China.  I really love what I do.
                        </p>
                        <div class="btn-group-vertical custom_btn animated slideinright">
                            <div id="about" class="btn btn-rabbit">About</div>
                            <div id="contact" class="btn btn-rabbit">Contact</div>
                        </div>
                    </div>
                </div>

                
            </div>
        </div>

效果展示：

同时：利用A."var"定义变量

利用"document.getElementsByClassName()"方法提取中已经创建的元素作为js对象.也是这次实践的收获。

也可以通过修改html的元素自行修改内涵以及图片

在利用了2023兔年作为图像logo后，再一次利用page定义，做了两个分页，对这个小项目加了分享含义：

收集更多兔年的祝福以及有关兔年的小故事，以此更加丰富网站内容，达到展示效果。

希望大家在新的一年身体健康，万事顺遂的敲代码^_^.

HEU-zcy

公告