我的家乡主题网页设计

您所在的位置:网站首页 介绍家乡美食的过程 我的家乡主题网页设计

我的家乡主题网页设计

2023-08-10 06:54| 来源: 网络整理| 查看: 265

目录

首页

家乡历史

 家乡方言

白话部分

壮话部分

家乡民俗

家乡美食

 家乡建筑

这个网页是期末考核作业,介绍了我的家乡-广西南宁,我只用了html+css+javascript实现。

图片来自站酷、百度百科、小红书,如果图片侵权,请联系我删除!

由于我的电脑比较小,13.3存,因此显示设置了150%。

文件夹的内容如下:

总结文档记录了我在制作网页过程中遇到的问题还有一些属性设置的方法(不常用会忘记)。

首页

首页这里只制作了轮播图,不过它更像幻灯片,不能控制左右,设置了定时器,每两秒播放一张图。

因为轮播图的javascript代码较少,我就把它和index.html写在了一起 。

Document var index = 0; //改变图片 function ChangeImg() { index++; var a = document.getElementsByClassName("img-slide"); if (index >= a.length) index = 0; for (var i = 0; i < a.length; i++) { a[i].style.display = 'none'; } a[index].style.display = 'block'; } //设置定时器,每隔两秒切换一张图片 setInterval(ChangeImg, 2000); 首页 南宁历史 南宁方言 白话 壮话 南宁民俗 南宁美食 南宁建筑 LMQ 1 2 3 4 5 6 家乡历史

历史部分只是给小妲己加了定位position:fixed;

让它固定在可视化窗口。

小妲己下方的盒子添加了链接可以跳转。

 家乡方言 白话部分

方言部分写了二级下拉菜单,让方言具体分为白话和壮话两个内容。

壮话部分

家乡民俗

用hover设置当鼠标经过其中一个小li标签就提高盒子层级,红色边框变成蓝色边框。

家乡美食

美食部分是我最喜欢的页面(我是一个吃货),这里给每个盒子添加了阴影,当鼠标经过盒子就会有阴影。

 

 家乡建筑

 标志性建筑部分:

以上图片有的仅展示了网页部分内容,但大体能知道整体效果,因此不另贴图。

 这也是我第一次制作网页,请见谅~



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3