Web开发技术
网页主题：奥运会
- 网页基本信息介绍
以奥运会为主题，制作了4页相关网页，分别以主页，介绍奥运，经典瞬间，视频科普为主要内容，其间在正文部分还有奥运会发展历程、奥运会标志、历届奥运之最；经典瞬间则又被分为2008北京奥运会和2020东京奥运会。整体内容丰富多彩，给人以简洁清爽，实用典雅之感。
- 主要采用的核心技术
- 无序标签ul及li标签的应用
- div，id、a、img、p标签的应用
3.script相关技术
4.图片与超链接技术
5.class类名属性
三、主要代码
3.1主页面
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>主页</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
</head>
<body class="loading">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<header id="header">
<h1>“生在红旗下，长在春风里”</h1>
<p>如果信念有颜色 那一定是中国红</p>
<nav style="margin-top: -50px;">
<ul>
<li><a href="../介绍奥运/介绍奥运.html" class="icon fa-wechat">
<p style="margin: 0px;">介绍奥运</p>
</a></li>
<li><a href="../经典瞬间/经典瞬间.html" class="icon fa-book">
<p style="margin: 0px;">经典瞬间</p>
</a></li>
<li><a href="../视频科普/视频科普.html" class="icon fa-video-camera">
<p style="margin: 0px">视频科普</p>
</a></li>
</ul>
</nav>
</header>
<footer id="footer">
<span class="copyright">Designed by 20101429张婷婷</a></span>
</footer>
</div>
</div>
</body>
</html>3.2 介绍奥运.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>秃头小分队</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicons -->
<!-- Google Fonts -->
<!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700|Open+Sans:300,300i,400,400i,700,700i" rel="stylesheet"> -->
<!-- Bootstrap CSS File -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="lib/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="css/style.css" rel="stylesheet">
<!-- =======================================================
Theme Name: Avilon
Theme URL: https://bootstrapmade.com/avilon-bootstrap-landing-page-template/
Author: BootstrapMade.com
License: https://bootstrapmade.com/license/
======================================================= -->
<!-- Main -->
<!-- ======================================================= -->
<link rel="stylesheet" href="main/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="main/css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="main/css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="main/css/magnific-popup.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="main/css/owl.carousel.min.css">
<link rel="stylesheet" href="main/css/owl.theme.default.min.css">
<!-- Flexslider -->
<link rel="stylesheet" href="main/css/flexslider.css">
<!-- Flaticons -->
<link rel="stylesheet" href="main/fonts/flaticon/font/flaticon.css">
<!-- Theme style -->
<link rel="stylesheet" href="main/css/style.css">
<!-- Modernizr JS -->
<script src="main/js/modernizr-2.6.2.min.js"></script>
<!-- Main -->
<!-- ======================================================= -->
</head>
<body>
<!--==========================
Header
============================-->
<header id="header">
<div class="container">
<!-- <div id="logo" class="pull-left">
<h1><a href="#" class="scrollto">奥运健儿，体育强国</a></h1>
</div> -->
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="../主页/主页.html">主页</a></li>
<li><a href="#">介绍二十大</a></li>
<li class="menu-has-children"><a href="../经典瞬间/经典瞬间.html">经典瞬间</a>
<ul>
<li><a href="../经典瞬间/经典瞬间.html">2008北京奥运会</a></li>
<li><a href="../经典瞬间/经典瞬间.html">2020东京奥运会</a></li>
</ul>
</li>
<li><a href="../视频科普/视频科普.html">视频科普</a></li>
</ul>
</nav>
</div>
</header>
<!-- #header -->
<section id="intro">
<div class="intro-text">
<h2>喜迎二十大，奋进新征程</h2>
<p>不忘初心，砥砺前行</p>
<a href="#pricing" class="btn-get-started scrollto">了解更多</a>
</div>
<!-- <div class="product-screens">
<div class="product-screen-1 wow fadeInUp" data-wow-delay="0.4s" data-wow-duration="0.6s">
<img src="img/product-screen-1.png" alt="">
</div>
<div class="product-screen-2 wow fadeInUp" data-wow-delay="0.2s" data-wow-duration="0.6s">
<img src="img/product-screen-2.png" alt="">
</div>
<div class="product-screen-3 wow fadeInUp" data-wow-duration="0.6s">
<img src="img/product-screen-3.png" alt="">
</div>
</div> -->
</section>
<section id="pricing" class="section-bg">
<div class="container">
<div class="section-header">
<h3 class="section-title">中共二十大</h3>
<span class="section-divider"></span>
<p class="section-description" style="text-indent:2em;">
中共二十大是在全党全国各族人民迈上全面建设社会主义现代化国家新征程、向第二个百年奋斗目标进军的关键时刻召开的一次十分重要的大会。百年大党风华正茂，亿万人民自信自强。新时代的中国，党同人民同呼吸、共命运、心连心，中华民族迈向伟大复兴的脚步不可阻挡！💪💪💪
</p>
<span class="section-divider"></span>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="box wow fadeInLeft">
<h3>世界性的影响和意义</h3>
<!-- <p>大学生交往具有交往范围扩大、直接交往与间接交往并重、情感交往与功利型交往并重等特点，点击我了解更多吧</p> -->
<!-- <h4><sup>$</sup>0<span> month</span></h4> -->
<ul>
<li><i class="ion-android-checkmark-circle"></i> 以中国新发展为全球提供新机遇</li>
<li><i class="ion-android-checkmark-circle"></i> 丰富人类现代化路径选择的中国智慧</li>
<li><i class="ion-android-checkmark-circle"></i> 破解全球治理赤字的中国方案</li>
<!-- <li><i class="ion-android-checkmark-circle"></i> 交往内容具有丰富性</li>
<li><i class="ion-android-checkmark-circle"></i> Massa ultricies mi quis hendrerit</li> -->
</ul>
<a class="get-started-btn scrollto" href='#about'>了解更多</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="box featured wow fadeInUp">
<h3>推动人类命运共同体</h3>
<!-- <h4><sup>$</sup>29<span> month</span></h4> -->
<ul>
<li><i class="ion-android-checkmark-circle"></i> 二十大报告增加中国发展之“势”的确定性</li>
<li><i class="ion-android-checkmark-circle"></i> 二十大报告增加中国稳定之“钥”的确定性</li>
<li><i class="ion-android-checkmark-circle"></i> 二十大报告增加中国道路之“和”的确定性</li>
<!-- <li><i class="ion-android-checkmark-circle"></i> 沉迷于网络交往，忽视现实交往</li>
<li><i class="ion-android-checkmark-circle"></i> Massa ultricies mi quis hendrerit</li> -->
</ul>
<a class="get-started-btn scrollto" href='#confusion-advanced-features'>了解更多</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="box wow fadeInRight">
<h3>总结重大成就</h3>
<!-- <h4><sup>$</sup>49<span> month</span></h4> -->
<ul>
<li><i class="ion-android-checkmark-circle"></i> 在中国共产党领导下，中国将更加繁荣昌盛</li>
<li><i class="ion-android-checkmark-circle"></i> 为实现中华民族伟大复兴贡献自己的力量</li>
<li><i class="ion-android-checkmark-circle"></i> 中国必将为推动人类文明发展进步作出更大贡献</li>
</ul>
<a class="get-started-btn scrollto" href='#call-to-action'>了解更多</a>
</div>
</div>
</div>
</div>
</section><!-- #pricing -->
<main id="main">
<section id="about" class="section-bg">
<div class="container-fluid">
<div class="section-header">
<h3 class="section-title">世界性的影响和意义</h3>
<span class="section-divider"></span>
</div>
<div class="row">
<div class="col-lg-6 about-img wow fadeInLeft">
<img src="img/111.jpeg" alt="">
</div>
<div class="col-lg-6 content wow fadeInRight">
<h2>1.以中国新发展为全球提供新机遇</h2>
<h3>
<p style="text-indent:2em;padding:0px; margin:0px;">
中国推进高水平对外开放，既有高瞻远瞩的战略规划，也有扎实稳健的政策安排，从稳步扩大规则、规制、管理、标准等制度型开放，到加快建设贸易强国，再到推动共建“一带一路”高质量发展，中国维护多元稳定的国际经济格局和经贸关系的众多举措，将为地区和世界经济发展注入信心和动力。
</p>
<p style="text-indent:2em;padding:0px; margin:0px;">
中国坚持对外开放的基本国策，坚定奉行互利共赢的开放战略，不断以中国新发展为世界提供新机遇，推动建设开放型世界经济，更好惠及各国人民。中共二十大再次向世界发出开放强音，以自身新发展为全球发展作出新贡献的决心和行动，赢得国际社会广泛赞誉和支持。
</p>
</h3>
<h2>2.丰富人类现代化路径选择的中国智慧</h2>
<h3>
<p style="text-indent:2em;padding:0px; margin:0px;">
中国式现代化，是中国共产党领导的社会主义现代化，既有各国现代化的共同特征，更有基于自己国情的中国特色。现代化道路并没有固定模式，适合自己的才是最好的，不能削足适履。</p>
</h3>
<p>
向下滑还有更多哦~
</p>
</div>
</div>
</div>
</section><!-- #about -->
<!--==========================
Product Advanced Featuress Section
============================-->
<section id="advanced-features">
<div class="features-row section-bg">
<div class="container">
<div class="row">
<div class="col-12">
<img class="advanced-feature-img-right wow fadeInRight" src="img/8ca5ed0a017642baaebec269e4271550.jpeg"
alt="">
<div class="wow fadeInLeft">
<h3>
<p style="text-indent:2em;padding:0px; margin:0px;">
人类走向现代化的历史进程中，曾演绎过“国强必霸、彼此征伐”的零和之路，而中国式现代化走的是一条“文明互鉴、美美与共”的共赢之路。从二十大报告中，肯尼亚国际问题学者卡文斯·阿德希尔看到了中国道路胸怀天下的和平底色。他指出，中国式现代化走和平发展道路，为其他国家在保持自身独立性的同时加快发展提供了新的选择，为人类探索不同的现代化道路作出了重要贡献。“中国的发展值得世界其他国家思考和学习”。
</p>
</h3>
<h2>3.破解全球治理赤字的中国方案</h2>
<h3>
<p style="text-indent:2em;padding:0px; margin:0px;">
多年来，中国不断为完善全球治理贡献智慧，也为构建一个持久和平、共同繁荣的世界勾勒出越来越清晰的实践路径。
随着中国国际影响力、感召力、塑造力的显著提升，党的十八大以来，中国以前所未有的广度、深度、力度参与全球治理，为全球治理模式提供了不同于“一国独霸”或“几方共治”的新选择，推动全球治理体系朝着更加公正合理有效的方向发展。
</p>
</h3>
<!-- <h2>5.交往手段具有多样性和灵活性</h2>
<h3><p style="text-indent:2em;padding:0px; margin:0px;">不仅用互访、访聊天等传统手段进行交往，还利用社团聚会体育活动等。现代科学技术使网络人际交往成为一种新型的，重要的人际交往手段。</p></h3> -->
</div>
</div>
</div>
</div>
</div>
</section><!-- #advanced-features -->
<section id="confusion-advanced-features">
<div class="features-row">
<div class="container">
<div class="section-header">
<p class="section-title" style="font-size: 30px ">推动人类命运共同体</p>
<span class="section-divider"></span>
</div>
<div class="row">
<div class="col-12">
<!-- <img class="advanced-feature-img-left" src="img/人际交往的特点-4交往内容具有丰富性.jpg" alt=""> -->
<div class="wow fadeInRight">
<i class="ion-ios-paper-outline" class="wow fadeInRight" data-wow-duration="0.5s"></i>
<p class="wow fadeInRight" data-wow-duration="0.5s" style="text-indent:2em;">
世界饱受疫情、地缘冲突、通胀等因素冲击，单边主义保护主义加剧，经济下行风险积聚，外界高度关注中国发展走向尤其是经济政策，不少人有今后五年是否还会把回到高速增长作为目标的疑问。
对此，报告明确，高质量发展是全面建设社会主义现代化国家的首要任务，发展是党执政兴国的第一要务，要推动经济实现质的有效提升和量的合理增长。
</p>
<i class="ion-ios-color-filter-outline wow fadeInRight" data-wow-delay="0.2s"
data-wow-duration="0.5s"></i>
<p class="wow fadeInRight" data-wow-delay="0.2s" data-wow-duration="0.5s" style="text-indent:2em;">
经历过去10年的涉滩之险、爬坡之艰、闯关之难，中共推进党和国家事业实现一系列突破性进展。未来中国走得稳的确定性，集中体现在百年大党对自身执政能力的清晰认知和规划。
二十大报告提出，中国共产党“必须时刻保持解决大党独有难题的清醒和坚定”，“党的自我革命永远在路上”。
</p>
<i class="ion-ios-barcode-outline wow fadeInRight" data-wow-delay="0.4" data-wow-duration="0.5s"></i>
<p class="wow fadeInRight" data-wow-delay="0.4s" data-wow-duration="0.5s" style="text-indent:2em;">
中国经过持续探索走出了一条不同于西方的发展道路，二十大报告将其凝练表述为“中国式现代化”。这条路既佐证了现代化之路的百花齐放，又有浸润于数千年中华文明的朴素价值追求。
二十大报告提出，中国式现代化是走和平发展道路的现代化，中国始终坚持维护世界和平、促进共同发展的外交政策宗旨，致力于推动构建人类命运共同体。</p>
</div>
</div>
</div>
</div>
</div>
<section id="clients">
<div class="container">
<div class="row wow fadeInUp">
<div class="col-md-2">
<img src="img/clients/2000.jpg" alt="">
</div>
<div class="col-md-2">
<img src="img/clients/2004.jpg" alt="">
</div>
<div class="col-md-2">
<img src="img/clients/2008.jpg" alt="">
</div>
<div class="col-md-2">
<img src="img/clients/2012.jpg" alt="">
</div>
<div class="col-md-2">
<img src="img/clients/2016.jpg" alt="">
</div>
<div class="col-md-2">
<img src="img/clients/2020.jpg" alt="">
</div>
</div>
</div>
</section>
</section><!-- #advanced-features -->
<!--==========================
Call To Action Section
============================-->
<section id="call-to-action">
<div class="container">
<div class="row">
<div class="col-lg-9 text-center text-lg-left">
<h3 class="cta-title">总结重大成就</h3>
<p class="cta-text">
中共二十大报告全面总结中国改革发展取得的重大成就和宝贵经验，对全面建设社会主义现代化国家、全面推进中华民族伟大复兴进行了战略部署。他们对祖（籍）国未来发展充满信心，愿为全面推进中华民族伟大复兴团结奋斗，贡献力量。
</p>
</div>
<div class="col-lg-3 cta-btn-container text-center">
<a class="cta-btn align-middle scrollto" href="#features">往下学习更多</a>
</div>
</div>
</div>
</section><!-- #call-to-action -->
<!--==========================
Product Featuress Section
============================-->
<section id="features">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-4">
<div class="section-header wow fadeIn" data-wow-duration="1s">
<h3 class="section-title">不忘初心，砥砺前行！</h3>
<span class="section-divider"></span>
</div>
</div>
<div class="col-lg-4 col-md-5 features-img">
<img src="img/China.png" alt="" class="wow fadeInLeft"
style="position:absolute;top:calc(50% - 100px);left:0;">
</div>
<div class="col-lg-8 col-md-7 ">
<div class="row">
<div class="col-lg-6 col-md-6 box wow fadeInRight">
<!-- <img class="mr-0 mb-3 w-50 img-fluid rounded-circle" src="img/如何解决矛盾和冲突-1探寻冲突原因.jpg" alt="Generic placeholder image"> -->
<h4 class="title">繁荣昌盛</h4>
<p class="description">“国家越来越强盛，我们倍感自豪。”“以中共二十大召开为契机，我们将以敏锐的思维、开阔的眼界，充分把握机遇，积极参与祖国的建设和发展，为祖国的繁荣昌盛贡献力量。”
</p>
</div>
<div class="col-lg-6 col-md-6 box wow fadeInRight" data-wow-delay="0.1s">
<!-- <img class="mr-0 mb-3 w-50 img-fluid rounded-circle" src="img/如何解决矛盾和冲突-2提出解决方法.jpg" alt="Generic placeholder image"> -->
<h4 class="title">贡献自己的力量
</h4>
<p class="description">
中国共产党的领导是中国发展和强大的根本保证，国家的强大也为我们海外侨胞创造了更广阔的发展空间。“我们将紧跟祖（籍）国发展步伐，为实现中华民族伟大复兴贡献自己的力量。”</p>
</div>
<div class="col-lg-6 col-md-6 box wow fadeInRight" data-wow-delay="0.2s">
<!-- <img class="mr-0 mb-3 w-50 img-fluid rounded-circle" src="img/如何解决矛盾和冲突-3勇于承认错误.jpg" alt="Generic placeholder image"> -->
<h4 class="title">坚持一国两制</h4>
<p class="description">
中共二十大报告指出，中国坚持对外开放的基本国策，坚定奉行互利共赢的开放战略，不断以中国新发展为世界提供新机遇，推动建设开放型世界经济，更好惠及各国人民。
</p>
</div>
<div class="col-lg-6 col-md-6 box wow fadeInRight" data-wow-delay="0.3s">
<!-- <img class="mr-0 mb-3 w-50 img-fluid rounded-circle" src="img/如何解决矛盾和冲突-4沟通与批评.jpg" alt="Generic placeholder image"> -->
<h4 class="title">推动人类进步</h4>
<p class="description">
只有坚持中国共产党的领导，中国才能不断攻坚克难，实现中华民族伟大复兴的中国梦。“我们坚信在中国共产党的坚强领导下，在新征程上，中国必将为推动人类文明发展进步作出更大贡献。”
</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- #features -->
<!--==========================
Footer
============================-->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 text-lg-left text-center">
<div class="credits">
<!--
All the links in the footer should remain intact.
You can delete the links only if you purchased the pro version.
Licensing information: https://bootstrapmade.com/license/
Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Avilon
-->
Designed by 20101429张婷婷</a>
</div>
</div>
<div class="col-lg-6">
<nav class="footer-links text-lg-right text-center pt-2 pt-lg-0">
<!-- <a href="#" class="scrollto">主页</a> -->
<a href="#about" class="scrollto">世界性的影响和意义</a>
<a href="#confusion-advanced-features" class="scrollto">推动人类命运共同体</a>
<a href="#call-to-action" class="scrollto">总结重大成就</a>
<!-- <a href="#" class="scrollto">自我</a> -->
</nav>
</div>
</div>
</div>
</footer><!-- #footer -->
<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
<!-- JavaScript Libraries -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery/jquery-migrate.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/superfish/hoverIntent.js"></script>
<script src="lib/superfish/superfish.min.js"></script>
<script src="lib/magnific-popup/magnific-popup.min.js"></script>
<!-- Contact Form JavaScript File -->
<script src="contactform/contactform.js"></script>
<!-- Template Main Javascript File -->
<script src="js/main.js"></script>
<!-- Main -->
<!-- ================================== -->
<script src="main/js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="main/js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="main/js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="main/js/jquery.waypoints.min.js"></script>
<!-- Stellar Parallax -->
<script src="main/js/jquery.stellar.min.js"></script>
<!-- Carousel -->
<script src="main/js/owl.carousel.min.js"></script>
<!-- Flexslider -->
<script src="main/js/jquery.flexslider-min.js"></script>
<!-- countTo -->
<script src="main/js/jquery.countTo.js"></script>
<!-- Magnific Popup -->
<script src="main/js/jquery.magnific-popup.min.js"></script>
<script src="main/js/magnific-popup-options.js"></script>
<!-- Main -->
<script src="main/js/main.js"></script>
<!-- ================================== -->
</body>
</html>3.3精彩瞬间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>秃头小分队</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicons -->
<!-- Google Fonts -->
<!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700|Open+Sans:300,300i,400,400i,700,700i" rel="stylesheet"> -->
<!-- Bootstrap CSS File -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="lib/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="css/style.css" rel="stylesheet">
<!-- =======================================================
Theme Name: Avilon
Theme URL: https://bootstrapmade.com/avilon-bootstrap-landing-page-template/
Author: BootstrapMade.com
License: https://bootstrapmade.com/license/
======================================================= -->
<!-- Main -->
<!-- ======================================================= -->
<link rel="stylesheet" href="main/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="main/css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="main/css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="main/css/magnific-popup.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="main/css/owl.carousel.min.css">
<link rel="stylesheet" href="main/css/owl.theme.default.min.css">
<!-- Flexslider -->
<link rel="stylesheet" href="main/css/flexslider.css">
<!-- Flaticons -->
<link rel="stylesheet" href="main/fonts/flaticon/font/flaticon.css">
<!-- Theme style -->
<link rel="stylesheet" href="main/css/style.css">
<!-- Modernizr JS -->
<script src="main/js/modernizr-2.6.2.min.js"></script>
<!-- Main -->
<!-- ======================================================= -->
</head>
<body>
<!--==========================
Header
============================-->
<header id="header">
<div class="container">
<!-- <div id="logo" class="pull-left">
<h1><a href="#" class="scrollto">奥运健儿，体育强国</a></h1>
</div> -->
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="../主页/主页.html">主页</a></li>
<li><a href="#">介绍二十大</a></li>
<li class="menu-has-children"><a href="../经典瞬间/经典瞬间.html">经典瞬间</a>
<ul>
<li><a href="../经典瞬间/经典瞬间.html">2008北京奥运会</a></li>
<li><a href="../经典瞬间/经典瞬间.html">2020东京奥运会</a></li>
</ul>
</li>
<li><a href="../视频科普/视频科普.html">视频科普</a></li>
</ul>
</nav>
</div>
</header>
<!-- #header -->
<section id="intro">
<div class="intro-text">
<h2>喜迎二十大，奋进新征程</h2>
<p>不忘初心，砥砺前行</p>
<a href="#pricing" class="btn-get-started scrollto">了解更多</a>
</div>
<!-- <div class="product-screens">
<div class="product-screen-1 wow fadeInUp" data-wow-delay="0.4s" data-wow-duration="0.6s">
<img src="img/product-screen-1.png" alt="">
</div>
<div class="product-screen-2 wow fadeInUp" data-wow-delay="0.2s" data-wow-duration="0.6s">
<img src="img/product-screen-2.png" alt="">
</div>
<div class="product-screen-3 wow fadeInUp" data-wow-duration="0.6s">
<img src="img/product-screen-3.png" alt="">
</div>
</div> -->
</section>
<section id="pricing" class="section-bg">
<div class="container">
<div class="section-header">
<h3 class="section-title">中共二十大</h3>
<span class="section-divider"></span>
<p class="section-description" style="text-indent:2em;">
中共二十大是在全党全国各族人民迈上全面建设社会主义现代化国家新征程、向第二个百年奋斗目标进军的关键时刻召开的一次十分重要的大会。百年大党风华正茂，亿万人民自信自强。新时代的中国，党同人民同呼吸、共命运、心连心，中华民族迈向伟大复兴的脚步不可阻挡！💪💪💪
</p>
<span class="section-divider"></span>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="box wow fadeInLeft">
<h3>世界性的影响和意义</h3>
<!-- <p>大学生交往具有交往范围扩大、直接交往与间接交往并重、情感交往与功利型交往并重等特点，点击我了解更多吧</p> -->
<!-- <h4><sup>$</sup>0<span> month</span></h4> -->
<ul>
<li><i class="ion-android-checkmark-circle"></i> 以中国新发展为全球提供新机遇</li>
<li><i class="ion-android-checkmark-circle"></i> 丰富人类现代化路径选择的中国智慧</li>
<li><i class="ion-android-checkmark-circle"></i> 破解全球治理赤字的中国方案</li>
<!-- <li><i class="ion-android-checkmark-circle"></i> 交往内容具有丰富性</li>
<li><i class="ion-android-checkmark-circle"></i> Massa ultricies mi quis hendrerit</li> -->
</ul>
<a class="get-started-btn scrollto" href='#about'>了解更多</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="box featured wow fadeInUp">
<h3>推动人类命运共同体</h3>
<!-- <h4><sup>$</sup>29<span> month</span></h4> -->
<ul>
<li><i class="ion-android-checkmark-circle"></i> 二十大报告增加中国发展之“势”的确定性</li>
<li><i class="ion-android-checkmark-circle"></i> 二十大报告增加中国稳定之“钥”的确定性</li>
<li><i class="ion-android-checkmark-circle"></i> 二十大报告增加中国道路之“和”的确定性</li>
<!-- <li><i class="ion-android-checkmark-circle"></i> 沉迷于网络交往，忽视现实交往</li>
<li><i class="ion-android-checkmark-circle"></i> Massa ultricies mi quis hendrerit</li> -->
</ul>
<a class="get-started-btn scrollto" href='#confusion-advanced-features'>了解更多</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="box wow fadeInRight">
<h3>总结重大成就</h3>
<!-- <h4><sup>$</sup>49<span> month</span></h4> -->
<ul>
<li><i class="ion-android-checkmark-circle"></i> 在中国共产党领导下，中国将更加繁荣昌盛</li>
<li><i class="ion-android-checkmark-circle"></i> 为实现中华民族伟大复兴贡献自己的力量</li>
<li><i class="ion-android-checkmark-circle"></i> 中国必将为推动人类文明发展进步作出更大贡献</li>
</ul>
<a class="get-started-btn scrollto" href='#call-to-action'>了解更多</a>
</div>
</div>
</div>
</div>
</section><!-- #pricing -->
<main id="main">
<section id="about" class="section-bg">
<div class="container-fluid">
<div class="section-header">
<h3 class="section-title">世界性的影响和意义</h3>
<span class="section-divider"></span>
</div>
<div class="row">
<div class="col-lg-6 about-img wow fadeInLeft">
<img src="img/111.jpeg" alt="">
</div>
<div class="col-lg-6 content wow fadeInRight">
<h2>1.以中国新发展为全球提供新机遇</h2>
<h3>
<p style="text-indent:2em;padding:0px; margin:0px;">
中国推进高水平对外开放，既有高瞻远瞩的战略规划，也有扎实稳健的政策安排，从稳步扩大规则、规制、管理、标准等制度型开放，到加快建设贸易强国，再到推动共建“一带一路”高质量发展，中国维护多元稳定的国际经济格局和经贸关系的众多举措，将为地区和世界经济发展注入信心和动力。
</p>
<p style="text-indent:2em;padding:0px; margin:0px;">
中国坚持对外开放的基本国策，坚定奉行互利共赢的开放战略，不断以中国新发展为世界提供新机遇，推动建设开放型世界经济，更好惠及各国人民。中共二十大再次向世界发出开放强音，以自身新发展为全球发展作出新贡献的决心和行动，赢得国际社会广泛赞誉和支持。
</p>
</h3>
<h2>2.丰富人类现代化路径选择的中国智慧</h2>
<h3>
<p style="text-indent:2em;padding:0px; margin:0px;">
中国式现代化，是中国共产党领导的社会主义现代化，既有各国现代化的共同特征，更有基于自己国情的中国特色。现代化道路并没有固定模式，适合自己的才是最好的，不能削足适履。</p>
</h3>
<p>
向下滑还有更多哦~
</p>
</div>
</div>
</div>
</section><!-- #about -->
<!--==========================
Product Advanced Featuress Section
============================-->
<section id="advanced-features">
<div class="features-row section-bg">
<div class="container">
<div class="row">
<div class="col-12">
<img class="advanced-feature-img-right wow fadeInRight" src="img/8ca5ed0a017642baaebec269e4271550.jpeg"
alt="">
<div class="wow fadeInLeft">
<h3>
<p style="text-indent:2em;padding:0px; margin:0px;">
人类走向现代化的历史进程中，曾演绎过“国强必霸、彼此征伐”的零和之路，而中国式现代化走的是一条“文明互鉴、美美与共”的共赢之路。从二十大报告中，肯尼亚国际问题学者卡文斯·阿德希尔看到了中国道路胸怀天下的和平底色。他指出，中国式现代化走和平发展道路，为其他国家在保持自身独立性的同时加快发展提供了新的选择，为人类探索不同的现代化道路作出了重要贡献。“中国的发展值得世界其他国家思考和学习”。
</p>
</h3>
<h2>3.破解全球治理赤字的中国方案</h2>
<h3>
<p style="text-indent:2em;padding:0px; margin:0px;">
多年来，中国不断为完善全球治理贡献智慧，也为构建一个持久和平、共同繁荣的世界勾勒出越来越清晰的实践路径。
随着中国国际影响力、感召力、塑造力的显著提升，党的十八大以来，中国以前所未有的广度、深度、力度参与全球治理，为全球治理模式提供了不同于“一国独霸”或“几方共治”的新选择，推动全球治理体系朝着更加公正合理有效的方向发展。
</p>
</h3>
<!-- <h2>5.交往手段具有多样性和灵活性</h2>
<h3><p style="text-indent:2em;padding:0px; margin:0px;">不仅用互访、访聊天等传统手段进行交往，还利用社团聚会体育活动等。现代科学技术使网络人际交往成为一种新型的，重要的人际交往手段。</p></h3> -->
</div>
</div>
</div>
</div>
</div>
</section><!-- #advanced-features -->
<section id="confusion-advanced-features">
<div class="features-row">
<div class="container">
<div class="section-header">
<p class="section-title" style="font-size: 30px ">推动人类命运共同体</p>
<span class="section-divider"></span>
</div>
<div class="row">
<div class="col-12">
<!-- <img class="advanced-feature-img-left" src="img/人际交往的特点-4交往内容具有丰富性.jpg" alt=""> -->
<div class="wow fadeInRight">
<i class="ion-ios-paper-outline" class="wow fadeInRight" data-wow-duration="0.5s"></i>
<p class="wow fadeInRight" data-wow-duration="0.5s" style="text-indent:2em;">
世界饱受疫情、地缘冲突、通胀等因素冲击，单边主义保护主义加剧，经济下行风险积聚，外界高度关注中国发展走向尤其是经济政策，不少人有今后五年是否还会把回到高速增长作为目标的疑问。
对此，报告明确，高质量发展是全面建设社会主义现代化国家的首要任务，发展是党执政兴国的第一要务，要推动经济实现质的有效提升和量的合理增长。
</p>
<i class="ion-ios-color-filter-outline wow fadeInRight" data-wow-delay="0.2s"
data-wow-duration="0.5s"></i>
<p class="wow fadeInRight" data-wow-delay="0.2s" data-wow-duration="0.5s" style="text-indent:2em;">
经历过去10年的涉滩之险、爬坡之艰、闯关之难，中共推进党和国家事业实现一系列突破性进展。未来中国走得稳的确定性，集中体现在百年大党对自身执政能力的清晰认知和规划。
二十大报告提出，中国共产党“必须时刻保持解决大党独有难题的清醒和坚定”，“党的自我革命永远在路上”。
</p>
<i class="ion-ios-barcode-outline wow fadeInRight" data-wow-delay="0.4" data-wow-duration="0.5s"></i>
<p class="wow fadeInRight" data-wow-delay="0.4s" data-wow-duration="0.5s" style="text-indent:2em;">
中国经过持续探索走出了一条不同于西方的发展道路，二十大报告将其凝练表述为“中国式现代化”。这条路既佐证了现代化之路的百花齐放，又有浸润于数千年中华文明的朴素价值追求。
二十大报告提出，中国式现代化是走和平发展道路的现代化，中国始终坚持维护世界和平、促进共同发展的外交政策宗旨，致力于推动构建人类命运共同体。</p>
</div>
</div>
</div>
</div>
</div>
<section id="clients">
<div class="container">
<div class="row wow fadeInUp">
<div class="col-md-2">
<img src="img/clients/2000.jpg" alt="">
</div>
<div class="col-md-2">
<img src="img/clients/2004.jpg" alt="">
</div>
<div class="col-md-2">
<img src="img/clients/2008.jpg" alt="">
</div>
<div class="col-md-2">
<img src="img/clients/2012.jpg" alt="">
</div>
<div class="col-md-2">
<img src="img/clients/2016.jpg" alt="">
</div>
<div class="col-md-2">
<img src="img/clients/2020.jpg" alt="">
</div>
</div>
</div>
</section>
</section><!-- #advanced-features -->
<!--==========================
Call To Action Section
============================-->
<section id="call-to-action">
<div class="container">
<div class="row">
<div class="col-lg-9 text-center text-lg-left">
<h3 class="cta-title">总结重大成就</h3>
<p class="cta-text">
中共二十大报告全面总结中国改革发展取得的重大成就和宝贵经验，对全面建设社会主义现代化国家、全面推进中华民族伟大复兴进行了战略部署。他们对祖（籍）国未来发展充满信心，愿为全面推进中华民族伟大复兴团结奋斗，贡献力量。
</p>
</div>
<div class="col-lg-3 cta-btn-container text-center">
<a class="cta-btn align-middle scrollto" href="#features">往下学习更多</a>
</div>
</div>
</div>
</section><!-- #call-to-action -->
<!--==========================
Product Featuress Section
============================-->
<section id="features">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-4">
<div class="section-header wow fadeIn" data-wow-duration="1s">
<h3 class="section-title">不忘初心，砥砺前行！</h3>
<span class="section-divider"></span>
</div>
</div>
<div class="col-lg-4 col-md-5 features-img">
<img src="img/China.png" alt="" class="wow fadeInLeft"
style="position:absolute;top:calc(50% - 100px);left:0;">
</div>
<div class="col-lg-8 col-md-7 ">
<div class="row">
<div class="col-lg-6 col-md-6 box wow fadeInRight">
<!-- <img class="mr-0 mb-3 w-50 img-fluid rounded-circle" src="img/如何解决矛盾和冲突-1探寻冲突原因.jpg" alt="Generic placeholder image"> -->
<h4 class="title">繁荣昌盛</h4>
<p class="description">“国家越来越强盛，我们倍感自豪。”“以中共二十大召开为契机，我们将以敏锐的思维、开阔的眼界，充分把握机遇，积极参与祖国的建设和发展，为祖国的繁荣昌盛贡献力量。”
</p>
</div>
<div class="col-lg-6 col-md-6 box wow fadeInRight" data-wow-delay="0.1s">
<!-- <img class="mr-0 mb-3 w-50 img-fluid rounded-circle" src="img/如何解决矛盾和冲突-2提出解决方法.jpg" alt="Generic placeholder image"> -->
<h4 class="title">贡献自己的力量
</h4>
<p class="description">
中国共产党的领导是中国发展和强大的根本保证，国家的强大也为我们海外侨胞创造了更广阔的发展空间。“我们将紧跟祖（籍）国发展步伐，为实现中华民族伟大复兴贡献自己的力量。”</p>
</div>
<div class="col-lg-6 col-md-6 box wow fadeInRight" data-wow-delay="0.2s">
<!-- <img class="mr-0 mb-3 w-50 img-fluid rounded-circle" src="img/如何解决矛盾和冲突-3勇于承认错误.jpg" alt="Generic placeholder image"> -->
<h4 class="title">坚持一国两制</h4>
<p class="description">
中共二十大报告指出，中国坚持对外开放的基本国策，坚定奉行互利共赢的开放战略，不断以中国新发展为世界提供新机遇，推动建设开放型世界经济，更好惠及各国人民。
</p>
</div>
<div class="col-lg-6 col-md-6 box wow fadeInRight" data-wow-delay="0.3s">
<!-- <img class="mr-0 mb-3 w-50 img-fluid rounded-circle" src="img/如何解决矛盾和冲突-4沟通与批评.jpg" alt="Generic placeholder image"> -->
<h4 class="title">推动人类进步</h4>
<p class="description">
只有坚持中国共产党的领导，中国才能不断攻坚克难，实现中华民族伟大复兴的中国梦。“我们坚信在中国共产党的坚强领导下，在新征程上，中国必将为推动人类文明发展进步作出更大贡献。”
</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- #features -->
<!--==========================
Footer
============================-->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 text-lg-left text-center">
<div class="credits">
<!--
All the links in the footer should remain intact.
You can delete the links only if you purchased the pro version.
Licensing information: https://bootstrapmade.com/license/
Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Avilon
-->
Designed by 20101429张婷婷</a>
</div>
</div>
<div class="col-lg-6">
<nav class="footer-links text-lg-right text-center pt-2 pt-lg-0">
<!-- <a href="#" class="scrollto">主页</a> -->
<a href="#about" class="scrollto">世界性的影响和意义</a>
<a href="#confusion-advanced-features" class="scrollto">推动人类命运共同体</a>
<a href="#call-to-action" class="scrollto">总结重大成就</a>
<!-- <a href="#" class="scrollto">自我</a> -->
</nav>
</div>
</div>
</div>
</footer><!-- #footer -->
<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
<!-- JavaScript Libraries -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery/jquery-migrate.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/superfish/hoverIntent.js"></script>
<script src="lib/superfish/superfish.min.js"></script>
<script src="lib/magnific-popup/magnific-popup.min.js"></script>
<!-- Contact Form JavaScript File -->
<script src="contactform/contactform.js"></script>
<!-- Template Main Javascript File -->
<script src="js/main.js"></script>
<!-- Main -->
<!-- ================================== -->
<script src="main/js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="main/js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="main/js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="main/js/jquery.waypoints.min.js"></script>
<!-- Stellar Parallax -->
<script src="main/js/jquery.stellar.min.js"></script>
<!-- Carousel -->
<script src="main/js/owl.carousel.min.js"></script>
<!-- Flexslider -->
<script src="main/js/jquery.flexslider-min.js"></script>
<!-- countTo -->
<script src="main/js/jquery.countTo.js"></script>
<!-- Magnific Popup -->
<script src="main/js/jquery.magnific-popup.min.js"></script>
<script src="main/js/magnific-popup-options.js"></script>
<!-- Main -->
<script src="main/js/main.js"></script>
<!-- ================================== -->
</body>
</html>四、效果图
五、开发总结
通过web前端的学习和本次网页的制作，熟练的掌握了前端的知识并且实际运用到开发网站当中。通过不断地修改与查找资料，提高了自己对于前端的认识，更加认识到自己还有很多不足。让我对于前端知识深度与广度有了更深层次的认识，对于js的了解和掌握还不够全面与熟悉，需要加强练习。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
