HTML网页规划与设计【冬季奥林匹克运动会——带报告5200字】HTML+CSS+JavaScript

最新推荐文章于 2023-12-21 17:38:09 发布
最新推荐文章于 2023-12-21 17:38:09 发布
阅读量94 收藏
点赞数
分类专栏： 学生网页设计作业 文章标签： css dreamweaver html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38513433/article/details/128230843
版权

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】

🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目

🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。

二、✍️网站描述

🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、⚙️ 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html lang="en">
<head>
<link href="../css/game.css" rel="stylesheet" media="all" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2022北京冬奥会--赛事安排</title>
</head>
<body>
    <div id="head_box">
        <div id="head_wrap">
            <div id="head_nav">
                <a href="#">奥运会官方</a>
                <span>|</span>
                <a href="#">冬奥会官方</a>
                <span>|</span>
                <a href="#">残奥会官方</a>
                <span>|</span>
                <a href="#">奥组委官方</a>
                <span>|</span>
                <a href="#">奥运知识</a>
                <span>|</span>
                <a href="#">奥运云服务</a>
                <span>|</span>
                <a href="#">问题反馈</a>
                <span>|</span>
                <a href="#">Select Region</a>
            </div>
            <div id="head_right">
                <div id="head_landing">
                   <a href="form.html">登录</a>
                    <span>|</span>
                    <a href="form.html">注册</a>
                </div>
            </div>
        </div>
    </div>
    <!--以下为menu部分-->
    <div id="menu_box">
        <div id="menu_logo">
            <img src="../images/a.jpg">
        </div>
        <div id="menu_nav">
            <ul>
                <li><a href="aaa.html" title="网站首页">网站首页</a></li>
                <li><a href="index.html" title="奥运宣传">奥运宣传</a></li>
                <li><a href="check.html" title="举办竞选">举办竞选</a></li>
                <li><a href="pic.html" title="往届图片">往届图片</a></li>
                <li><a href="game.html" title="赛事安排">赛事安排</a></li>
                <li><a href="sagc.html" title="申奥过程">申奥过程</a></li>
                <li><a href="order.html" title="在线订票">在线订票</a></li>
            </ul>
        </div>
        <div id="menu_wrap">
            <div id="find_wrap">
                <div id="find_bar">
                    <input type="text" id="find_input" placeholder="2022北京冬奥会最新新闻">
                </div>
          </div>
        </div>
    </div>
<div class="content">
 <div class="banner "> <img src="../images/banner.jpg" width="100%" /> </div>

   <div class="bar"><strong class=" ">近期活动</strong> </div>
  
  <div class="inl"><img src="../images/50.jpg" width="240"/></div>
  <div class="inr">
   据北京冬奥会官方网站2021年3月发布的赛程表。 <br />
<br />
<img width="100%" src="../images/6609c93d70cf3bc765a440bcdf00baa1cd112a3e.jpg" /><br />
<br />

  </div>
  <div class="clear"></div>
</div>
<div class="end">
  <p>#xxx#</p>
</div>
</body>
</html>

💒CSS样式代码

@charset "utf-8";
/* CSS Document */
	*{
    margin: 0;
    padding: 0;
    text-decoration: none;/*下划线*/
}
#head_box{
    width: 100%;
    height: 40px;
    background: #333;
}
#head_box #head_wrap{
    width: 1226px;
    height: 40px;
    margin: 0 auto;
}
#head_box #head_wrap a,span{
    color: #b0b0b0;
}
#head_box #head_wrap #head_nav{
    float: left;
    font-size: 12px;
    text-align: center;
    line-height: 40px;
    color: #b0b0b0;
}
#head_box #head_wrap #head_nav a{
    margin-left: 5px;
}
#head_box #head_wrap #head_nav a:hover{
    color: #ffffff;
}
#head_box #head_wrap #head_nav span{
    margin-left: 5px;
}
#head_box #head_wrap #head_right{
    float: right;
    font-size: 15px;
    text-align: center;
    line-height:40px;
}
#head_box #head_wrap #head_right #head_landing{
    float: left;
    margin-right: 15px;
}
#head_box #head_wrap #head_right #head_landing a:hover{
    color: #ffffff;
}
/*以下为menu部分*/
#menu_box{
    width: 1226px;
    height: 100px;
    margin: 0 auto;
}
#menu_box #menu_logo{
    width: 55px;
    height:55px ;
    margin-top:20px ;
    float: left;
}
#menu_box #menu_logo img{
    width:55px;
    height: 55px;
}
#menu_box #menu_nav{
    width: 600px;
    height: 100px;
    float: left;
    margin-left:150px ;
    margin-top: 0;
}
#menu_box #menu_nav ul{
    list-style: none;
}
#menu_box #menu_nav ul li{
    float: left;
    line-height: 100px;
    text-align: center;
    padding:0 10px;
}
#menu_box #menu_nav ul li a:link,a:visited{
	color:#000;
	text-decoration:none;
}
#menu_box #menu_nav ul li a:hover{
	color:#093;
	text-decoration:underline;
}
#menu_box #menu_nav ul li a:active{
	color:#FC0;
}
#menu_box #find_wrap{
    float: right;
    width: 302px;
    height: 50px;
    margin-top: 25px;
    border:1px solid #ccc;
}
#menu_box #find_wrap #find_bar{
    width: 245px;
    height: 40px;
    float: left;
    position: relative;
}
#menu_box #find_wrap #find_bar #find_input{
    width: 245px;
    height: 48px;
    float: left;
    border: 1px solid #ccc;

}
#menu_box #find_wrap #find_bar #find_input::placeholder{
    text-align: right;
    padding-right: 15px;
}
/* CSS Document */
ul,li,h1,h2,h3,p{padding:0; margin:0; list-style:none}
a{text-decoration:none; color:#000}

body{line-height:21px; margin:0; background:#ece2c1}
.clear{clear:both}
.menu li{list-style:none}.logo { text-align:center}
.logo img{width:100px }
.banner{ position:relative; clear:both}
.bar{ width:100%; float:left; margin-top:10px; color:#009999;  margin-bottom:10px ; padding:14px 0; font-size:34px; text-align:center;}
.head{ background:#fff}
.menu{ width:100%; float:left; background:#1f9d75; margin-bottom:10px; line-height:55px;}
.menu li a{ color:#fff; font-size:18px;}
.menu li { float:left; padding:0px 0px ; width: 142px; text-align:center}

.right{ float:right; width:660px; padding:20px}
.left{ min-height:300px; float:left; width:260px; background:#E2DBD6; padding:20px}
.content{ width:1000px; margin:0 auto; font-size:14px; }

.end{ margin-top:20px; clear:both;  padding:30px 0; text-align:center;}
.produce img{ float:left; margin:0 20px 20px 0}
.toTop{width:20px;height:85px;background:#CCC;border:1px solid #999;padding:10px;cursor:pointer;position:fixed;right:40px;bottom:100px;}

*html .toTop{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));margin-bottom:80px;}
.pad{ padding:20px 0; display:block}
.pics p{ margin:20px; text-align:center}
.imglist{ clear:both}
.imglist li img{ width:100%; height:160px}
.imglist li{ float:left; width:220px; margin-bottom:10px ; margin-left:20px; text-align:center}
.fr{ float:right}
.news li{ padding:5px;}
.news li a{ color:#669966}
.title{ text-align:center; color:#F00; padding:10px}
.fl{ float:left}
.mid{ margin:0 auto; width:1000px}
.msg>div{ 
padding:10px}

.text-center{ text-align:center}

.inr{ float:right; width:720px; line-height:30px}
.inl{ float:left; width:240px;}
.produce{ width:100%; float:left}
.lianxi{ width:100%; float:right}.conent{width:90px;height:120px;position:absolute;top:20px;}
		.conent .sition{width:90px;height:120px;position:relative;}
		.conent .sition .c_header{width:90px;text-align:center;cursor:move;}
		.conent .sition .c_header .txt{color:#00CC00;font-weight:600;font-size:15px;line-height:30px;box-shadow:1px 1px 1px 1px #000;text-shadow:1px 1px 1px #000;}
		.conent .sition .c_adver{width:90px;height:90px;background:url("images/back.gif") no-repeat;cursor:pointer;}

		.conent .sition .sign{width:0px;height:10px;border:2px solid #000;display:block;position:absolute;top:27px;left:46px;}

六、🥇 如何让学习不再盲目

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

在这里插入图片描述

IT黑马程序员
关注
专栏目录
制作一个简单HTML中华传统文化网页（HTML+CSS）
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
html期末作业代码网页设计 城市旅游网站设计——城市旅游-北京(5页) HTML+CSS+JavaScript 主题度假酒店 计划出行北京
qq_524614081的博客
01-07 655
HTML5期末大作业：城市旅游网站设计——城市旅游-北京(5页) HTML+CSS+JavaScript 主题度假酒店 计划出行北京 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载
使用html制作静态网页
翻滚吧小牛
08-05 3848
网页主要由三部分组成：分别为结构，表现和行为。 XHTML：可扩展文本标签语言，XHTML是一种基于XML的语言。XHTML是一个扮演者类似HTML角色的XML。 HTML提供了六级标题，分别为、、、、、,字号最大，最小。 图像类型 优点 缺点 *.jpg 体积小，比较清晰 有损压缩、画面失真 *.
HTML语言可以编写静态网页吗,使用html开发静态网页 html静态网页设计大作业
weixin_42635064的博客
05-31 1629
什么是静态web开发(html页面)？什么是静态web开发(html页面)？什么是动态web开发？动态网页技术的发展HTML语言写的html页面动态的web就是运用数据库的web网站静态html怎么调用html页面html 静态页面中引用外部页面没那么方便，主要方法有： 1.使用框架来实现，但是那样占用线程较多，速度慢； 加上它的一些属性可以实现一些透明,无滚动条等具体的效果.大家可以html教程...
大一作业HTML网页作业：中华传统文化题材网页设计5页（纯html+css实现）
HTML网页设计
08-12 3514
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒......
中国传统文化网（html5+css3）网页设计大作业
01-04
中国传统文化网（html5+css3）网页设计大作业,原创，十几个页面。
HTML+CSS+JS网页设计期末课程大作业——奥运网页设计(5页) 大学生体育运动网页设计模板代码
12-24 1734
HTML+CSS+JS网页设计期末课程大作业——奥运网页设计(5页) 大学生体育运动网页设计模板代码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关
中华传统文化题材网页设计主题：基于HTML+CSS设计放飞青春梦想网页【学生网页设计作业源码】
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
传统文化网站设计
安卓精品项目源码
07-03 6075
传统文化网站设计
中国传统文化网页设计CSDN_团建活动中国传统文化
weixin_39785150的博客
11-02 1350
为了让同学们了解中国传统文化，时代在发展中国的综合国力也在不断发展，因此作为青少年的我们不仅要不断跟紧时代的发展潮流，更重要的是不忘初心，将中国优秀的传统文化铭记于心。 2020.10.26晚七点团支部为同学们组织了一场关于中国传统文化的团建活动...... 第一环节观看剪...
【Web技术】（实验一）HTML静态网页设计
m0_57840386的博客
05-21 8709
文章目录1.实验内容2.页面效果2.1 登录2.2 注册2.3 修改密码2.4 主页面3.源代码3.1 代码目录1.html2.html3.html4.htmlnew.html1.csscolor.js 1.实验内容 综合应用 HTML，CSS 和 JavaScript 技术设计基本信息系统所包括的一组页面，包括登陆，注册，忘记密码，主页，信息页面等，所有的页面需要实现响应式布局，其中的链接，按钮需要可以点击，形成一个完整的系统。 （1） 登陆页面 要求：能够根据界面的大小自适应布局，当屏幕尺寸大于等于 6
html简单网页代码：使用html+css实现一个静态页面（含源码）
最新发布
qq3200628753的博客
12-21 7194
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
制作一个简单HTML静态网页（HTML+CSS）
HTML网页设计
08-02 4626
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒...
大一作业HTML网页作业：中华传统文化题材网页设计（纯html+css实现）
qq_524614081的博客
11-24 819
html5网页制作代码_大学生网页制作作业代码 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT黑马程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值