前言

八月十五，秋已过半，是为中秋。
“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。

在这个团圆夜，每个人心中都寄托着美好的祝愿，回顾自己往日的学习，也算是给自己一些祝福，简单的做一些中秋节的网页来复习一下前面的基础知识。

先来看一下效果（点击查看)

导航条分为五个模块，跟着模块来看一下各自的展示效果：

❤️ 导航条

在之前的文章中介绍过简单导航条的制作，这个导航条的原理和之前的一样，只不过利用css增加了更多效果。

html部分：

<div><ul class="nav"><li><a href="今日中秋.html">今日中秋</a></li><li><a href="何为中秋.html">何为中秋</a></li><li><a href="畅游中秋.html">畅游中秋</a></li><li><a href="诗词中秋.html">诗词中秋</a></li><li><a href="月圆中秋.html">月圆中秋</a></li></ul></div>

css部分：

     /*对无序列表样式进行更改*/.nav{list-style: none;background-color: rgba(30,50,100,0.8);width: 1000px;margin: 20px auto 15px ;/*隐藏超出部分*/overflow: hidden;border-radius: 30px;zoom: 1;}.nav li{float: left;display: inline;width: 200px;}/*对无序列表中的文字元素更改样式*/.nav a{width: 100%;/*允许在元素上设置宽度和高度。*/display: inline-block;/*文字居中显示*/text-align: center;padding: 5px 3px;text-decoration: none;color: whitesmoke;font-weight: bold;}/*设置鼠标悬停效果*/.nav a:hover{background-color: rgba(221,221,211,1);}

中秋之美——html+css+js制作中秋网页相关推荐

HTML5期末大作业用HTML+CSS+JS制作婚庆网页【大学生网页作业代码】
#3使用html+css+js制作网页制作登录网页
#3使用html+css+js制作网页制作登录网页本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追 ...
#3使用html+css+js制作网页番外篇使用python flask 框架 (I)
#3使用html+css+js制作网页番外篇使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
html+css+js制作简单网站首页
一个简单的网站主页主要由html+css+js制作 1.图片展示这是首页的上半部分,主要内容有:顶部标头.顶部导航栏.图片轮播图. ```css <!DOCTYPE html> < ...
HTML+CSS+JS制作【俄罗斯方块】小游戏
文章目录 js制作简单网页版俄罗斯方块效果演示设计思路一.HTML网页结构代码二.CSS代码三.JS代码四.代码资源分享 js制作简单网页版俄罗斯方块程序虽然很难写,却很美妙.要想把程序 ...
利用HTML+css+js制作侧边栏小广告
利用HTML+css+js制作小广告 1.页面效果 2.HTML代码 3.css代码(给广告位设置样式) 4.js代码在这里插入图片描述
#1使用html+css+js制作网站教程准备
#1使用html+css+js制作网站教程准备本系列链接 0 准备 0.1 IDE编辑软件 0.2 浏览器 0.3 基础概念 0.3.1 html 0.3.2 css 0.3.3 js 0.4 文 ...
使用html+css+js制作小米首页
文章目录使用html+css+js制作小米首页 1.html制作小米官网页面结构(`index.html`) 2.使用css设置公共样式(`base.css`) 3.使用css设置页面元素样式(`i ...

中秋之美——html+css+js制作中秋网页

前言

❤️ 导航条

html部分：

css部分：

中秋之美——html+css+js制作中秋网页相关推荐

最新文章

热门文章

中秋之美——html+css+js制作中秋网页

前言

❤️ 导航条

html部分：

css部分：

insertAdIfNeeded();

中秋之美——html+css+js制作中秋网页相关推荐

最新文章

热门文章