文章目录
- 前言
- 一、需要的素材
- 二、实现步骤
- 1.实现头部设计
- 2.设置导航栏
- 3.设置内容部分
- 4.设置问答部分
- 5.其他部分
- 总结
前言
今天又来水文章了，来介绍的是一个简单的HTML页面，虽然简单，但是麻雀虽小五脏俱全，应用了大量HTML技术来实现，下面展示下效果，不喜勿喷，如果看了底下的效果，感觉心动可以继续往下看下去。
这里有一个动态标签变化效果
这里有个布局效果和隐藏展示效果。
底下是对以上技术的再一次实现
这里利用JavaScript做了一个问答效果
最后补充板块，实现内连接，实现点击跳转，如果有兴趣我将接着往下讲，更多的是个人的思路以及理解，欢迎批评指正，不喜勿喷哦。
一、需要的素材
有些可能没用上，在这里都放着
二、实现步骤
1.实现头部设计
如何实现头部设计呢，很简单
首先找到一张Gif的动图，该动图背景色尽量设置为透明，便于和整体网页背景色起不到冲突，然后设计网站标题
代码如下：
冬奥宣传网
这就能实现上述的效果了
2.设置导航栏
可以看到导航栏分为四个部分，而且居中这将通过css来实现，下面开始展示
代码如下（css部分）：
nav{
display: block;
width: 100%;
float: left;
text-align: center;
background-color: none;
padding-top: 10px;
padding-bottom: 20px;
}
nav a{
margin:10px auto;
padding:30px;
font-weight: bold;
color:#3399FF;
text-decoration:none;
margin:10px;
transition: all 2s ease;
}
nav a:hover {
color:#FFFFFF;
background-color: orange;
text-decoration:none;
font-size: 35px;
}
这样就能做到动画效果和实际的内标签效果了
3.设置内容部分
冬奥由来:
冬季奥林匹克运动会源于19世纪末和20世纪初，一些冰雪运动如滑雪、滑雪撬、滑冰、冰球等项目在欧美国家逐渐得到普及和发展。
1887年挪威成立了世界上第一个滑雪俱乐部。1890年加拿大成立了世界上第一个冰球协会。1892年国际滑冰联盟在荷兰成立。
1893年，在阿姆斯特丹举行了首届男子速度滑冰锦标赛。1908年，法国成立了世界范围的国际冰球联合会。在冰雪运动日益普及的情况下，
现代奥运会创始人顾拜旦建议单独举办冬季奥运会。但由于1901年北欧两项运动在欧洲斯堪的纳维亚半岛的成功举行而被拖延。
1908年第4届夏季奥运会上增加了花样滑冰项目。1920年第7届夏季奥运会上，国际奥委会拒绝接受北欧两项项目，而增加了冰球项目。
花样滑冰和冰球加入奥运会后引起了观众的极大兴趣，但因天气条件给组织者带来诸多不便，尽管这两个项目都提前在 4月份进行，但大多数比赛和奥运会的开幕式在8月中旬才举行。
这使得一届奥运会要长达5个月的时间，在人力、物力上耗费太大。鉴于此，人们倾向于把冰雪项目从奥运会中分离出来，单独进行冰雪项目的奥运会。
正式的冬季奥林匹克运动会始于1924年。当时，在法国的夏蒙尼市承办了当时被称为“冬季运动周”的运动会，两年后国际奥委会正式将其更名为第1届冬季奥林匹克运动会。
冬季奥运会最初规定每4年举行一次，与夏季奥运会在同年和同一国家举行。从1928年的第2届冬奥会开始，冬季奥运会与夏季奥运会的举办地点改在不同的国家举行。1994年起，冬奥会与夏奥会以2年为相隔交叉举行。为将冬奥会与夏奥会时间错开，故只有1992年冬奥会与1994年冬奥会相隔2年。
想看更多点击这里哦
冬季奥林匹克运动会，简称为冬季奥运会、冬奥会。国际奥林匹克委员会主办的世界性冬季项目运动会。
冬季奥运会每隔4年举行一届，并与奥林匹克运动会在同一年内举行。1994年起，冬奥会与夏奥会以2年为相隔交叉举行。
按实际举行次数计算届数。该赛事的主要特征是在冰上和雪地举行的冬季运动，如滑冰、滑雪等适合在冬季举行的项目。
第一届冬季奥林匹克运动会于1924年在法国的夏慕尼举行。
1986年，国际奥委会全会决定将冬季奥运会和夏季奥运会从1994年起分开每两年间隔举行，
1992年冬季奥运会是最後一届与夏季奥运会同年举行的冬奥会。
1908年第四届和1920年第七届奥运会，曾将花样滑冰、冰球列为比赛项目。
1924年第八届奥运会前，在法国的夏蒙尼举行国际体育周，并进行冬季运动项目比赛。
1925年国际奥委会布拉格会议决定每4年举行1次这类运动会，并将夏蒙尼国际体育周作为第一届冬季奥运会。
冬季奥运会的比赛项目目前有：冰球、滑冰（速度滑冰、花样滑冰）、滑雪（高山滑雪、越野滑雪、跳台滑雪）、现代冬季两项（滑雪＋射击）
、有舵雪橇和无舵雪橇。2002年美国盐湖城冬奥会中，我国短道速滑选手(大杨扬)为中国实现了中国冬奥会金牌零的突破。
有个细节就是summary标签实现了内容显示和隐藏
#jieshao {
width: 1000px;
height: 450px;
}
#img11 {
float:left;
margin: 10px;
}
p{
font-weight: bold;
font-size: 20px;
padding: 5px;
color:#1E90FF;
}
同时设置选择器确保格式的合理化，如此同样道理完成剩下的部分。
4.设置问答部分
问答部分采用JavaScript来实现，来实现对页面的展示。
代码部分如下：
5.其他部分
精彩瞬间:
图片为外国女选手正在奋力冲线，其坚毅的眼神和强大的气势，令我们对运动员肃然起敬。
图片为运动员正在做高难度引体动作，高度甚至和塔台奇高令人叹为观止。
想看更多点击这里哦
在茫茫的白雪中运动员一跃而起，与天地同色，在空中做出优美的姿势，令人折服。
赛场上运动健儿奋力拼搏，赛场外观众们摇旗呐喊，冬天似乎在此时此刻不那么冷了。
