大学生HTML5期末作业 html+css网页制作 新闻 自定义新闻主题2个页面 Web前端网页制作 html5+css3+js
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/90234786
2，点击上方下载
目录1
项目视频
<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="ePmeyMJi-1736234747792" src="https://live.csdn.net/v/embed/442251"></iframe>html+css网页制作 新闻 自定义新闻主题2个页面
网页展示
页面1
页面2
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>旅游美食频道_央视网</title>
<link href="./css/index.css" rel="stylesheet" />
</head>
<body id="bid">
<!-- 全网统一通用通栏导航new -->
<div class="bg_top_h_tile">
<div class="bg_top_owner">
<div class="bg_bottom_h_tile">
<div class="bg_bottom_owner">
<div class="header190215" id="header">
<div class="homepage"><a href="#"></a></div>
<div class="twopage"><a href="#">旅游美食</a></div>
</div>
<div class="car19295_nav" id="navlist" data-spm="EpBP5PEhIW04">
<div class="navWidth">
<div class="nav_logo"><img src="./image/1718590993684_418.png" width="100%" height="100%" /></div>
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide navli cur"><a href="#">首页</a></li>
<li class="swiper-slide navli navmove"><a href="#">行业聚焦</a></li>
<li class="swiper-slide navli navmove"><a href="#">文化艺术</a></li>
<li class="swiper-slide navli navmove"><a href="#">美食生活</a></li>
<li class="swiper-slide navli navmove"><a href="#">畅游天下</a></li>
</ul>
</div>
</div>
<div class="icon_menu"></div>
<div class="map_content isphonebox" id="menufuceng" data-spm="ELTHVr0lPB6H">
<div style="overflow-y: scroll; overflow-x: hidden; height: 100%; -webkit-overflow-scrolling: touch">
<div class="close"></div>
<div class="cont">
<h3>文化艺术</h3>
<div class="text">
<p>
<a href="#">云上音乐厅</a>
<a href="#">节日节气</a>
</p>
<p>
<a href="#">这里是北京</a>
<a href="#">中华百工</a>
<a href="#">景观文化</a>
</p>
</div>
</div>
<div class="cont">
<h3>畅游天下</h3>
<div class="text">
<p>
<a href="#">开城相见</a>
<a href="#">文旅关注</a>
<a href="#">图游中国</a>
<a href="#">自驾出游</a>
</p>
<p>
<a href="#">蔚蓝的故乡</a>
<a href="#">海南岛纪事</a>
<a href="#">西藏诱惑</a>
<a href="#">恋上北海道</a>
<a href="#">大美青海</a>
</p>
</div>
</div>
<div class="cont last">
<h3>美食生活</h3>
<div class="text">
<p>
<a href="#">寻茶记</a>
<a href="#">寻味地图</a>
<a href="#">享食札记</a>
<a href="#">食话食说</a>
<a href="#">图说美食</a>
</p>
<p>
<a href="#">食来运转</a>
<a href="#">家政女皇</a>
<a href="#">生活·帮</a>
<a href="#">心煮意</a>
<a href="#">美味人生</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div id="page_body" class="page_wrap">
<div style="height: 46px" class="vspace"></div>
<div class="car19295_slider" id="slider" data-spm="EL0ed964qCIG">
<div class="lunbo18795_ind01" id="lunbo18795_ind01">
<div class="sports18885_ind01 swiper-container swiper-container-horizontal" id="sports_ind01">
<div class="plantingimg swiper-wrapper" id="plantingimg">
<div class="plantting_img cur swiper-slide">
<div class="img">
<a href="#"><img src="./image/1718963182840_806.png" width="100%" height="100%" /></a>
</div>
<div class="text">
<p>暑期游为“夏日经济”注入勃勃生机</p>
</div>
<div class="swiper-pagination"><span class="swiper-pagination-current">1</span>/<span class="swiper-pagination-total">3</span></div>
</div>
</div>
<div class="plantingtext" id="plantingtext">
<ul>
<li class="planting_column cur">
<div class="text">
<h2><a href="#">暑期游为“夏日经济”注入勃勃生机</a></h2>
<span><a href="#">2024年暑期，新疆环线、青甘环线、川西环线、滇西环线热度不减，长线游也备受欢迎。</a></span>
</div>
</li>
<li class="planting_column">
<div class="text">
<h2><a href="#">入境游火热 更多外国游客爱上了“四川行”</a></h2>
<span><a href="#">数据统计显示，今年前5个月，成都航空口岸入出境外国人达41万余人次，同比增长509%。</a></span>
</div>
</li>
<li class="planting_column">
<div class="text">
<h2><a href="#">夜购、夜食、夜游激活“夜经济”</a></h2>
<span><a href="#">2024年以来，文旅等服务消费持续活跃，多样化、品质化的消费需求也逐步释放。</a></span>
</div>
</li>
<li class="planting_column">
<div class="text">
<h2><a href="#">中国入境游市场热力攀升</a></h2>
<span><a href="#">2024年一季度，外国人来华数量较2023年同期增长超3倍，中国入境游市场加速复苏回暖。</a></span>
</div>
</li>
<li class="planting_column">
<div class="text">
<h2><a href="#">夏天的尔滨也开始整活了，潮！潮！潮！</a></h2>
<span><a href="#">潮起历史文脉、潮涌美好生活、潮涨经济活力，这样的尔滨，不陌生。</a></span>
</div>
</li>
<li class="planting_column">
<div class="text">
<h2><a href="#">2024中国公路自行车职业联赛</a></h2>
<span><a href="#">追逐梦想 骑行天下</a></span>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div style="height: 30px" class="vspace"></div>
<div class="vspace" style="height: 30px"></div>
<ul class="md_wrapper">
<li>
<a href="./list.html">
<header>打卡梓潼</header>
<img src="./image/2024062119273058312.jpg" />
<footer>291929打卡梓潼</footer>
</a>
</li>
<li>
<a href="./list.html">
<header>打卡梓潼</header>
<img src="./image/2024062119273058312.jpg" />
<footer>291929打卡梓潼</footer>
</a>
</li>
<li>
<a href="./list.html">
<header>打卡梓潼</header>
<img src="./image/2024062119273058312.jpg" />
<footer>291929打卡梓潼</footer>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer class="md_f">互联网新闻信息服务许可证10120170003网上传播视听节目许可证号0102002 新出网证（京）字098号</footer>
</body>
</html>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
