目录
一、网页概述
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
3.JS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
六、更多推荐
欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html5+css3+js： 导航菜单、图片轮翻、三级页面、视频、悬浮菜单、留言表单等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含10个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<script src="js/banner.js" type="text/jscript"></script>
<title>科技引领未来</title>
</head>
<body>
<div class="banner">
<div class="wrap" id="wrap">
<ul id="pic">
<li><img src="images/banner1.jpg" alt=""></li>
<li><img src="images/banner2.jpg" alt=""></li>
<li><img src="images/banner3.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</div>
<div class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="xinwen.html">新闻前线</a></li>
<li><a href="llm.html">大模型概览</a></li>
<li><a href="shipin.html">视频介绍</a></li>
<li><a href="hudong.html">互动留言</a></li>
</ul>
</div>
<div class="content">
<div class="fl xw"><a href="xiangqing.html"><img src="images/1..png" width="100%" /></a>
</div>
<ul class="news">
<div class="bar">今日关注 AI LargeModel</div>
<li>
<h4><a href="xiangqingd.html">何为大模型，大模型的定义是什么？</a></h4>
<p>大模型是指具有大规模参数和复杂计算结构的机器学习模型。大模型本质上是一个使用海量数据训练而成的深度神经网络模型，展现出类似人类的智能。</p>
</li>
<li>
<h4><a href="xiangqinga.html">ChatGPT为全世界带来的革命性影响</a> </h4>
<p>美国人工智能公司OpenAI的大语言模型ChatGPT在推出约两个月后，1月已达到1亿月活跃用户，成为历史上增长最快的消费者应用程序。ChatGPT的成功
不应仅仅被看作新一代聊天机器人的突破，而应该重视其对人工智能乃至整个信息产业带来的革命。ChatGPT的出现，具有划时代意义，大模型+ChatGPT已形成新一代操作系统平台的雏形。
但由此带来的学术造假、技术滥用、舆论安全等风险亦不容忽视。</p>
</li>
<li>
<h4><a href="xiangqing.html">中国电信发布全自研视频生成大模型，完成全模态体系构建</a> </h4>
<p>12月3日，在中国电信“2024数字科技生态大会”期间，首届“TeleAI 开发者大会”在广州举办。</p>
</li>
<li>
<h4><a href="xiangqingb.html">“以存换算”降低大模型落地门槛，清华系又跑出一家明星公司</a></h4>
<p>作为AI Infra赛道的创企，脱胎于清华大学的趋境科技提出以存换算和全系统协同优化推理解决方案，将推理成本降低10倍以上。</p>
</li>
<li>
<h4><a href="xiangqingc.html">ChatGPT两周年，国产o1大模型们紧追不舍</a></h4>
<p>ChatGPT诞生的第二年，OpenAI和国内的一众企业正在试着“抛弃”它。</p>
</li>
</ul>
<div class="bar">技术前沿</div>
<div class="pics scrollleft">
<ul>
<li>
<b><img src="images/3...jpg"></b>
<h3> • 人机对齐：</a></h3>
<p>人机对齐是大模型产品的重要竞争力，也关乎通用人工智能的未来。通过确保AI的行为与人类价值观和目标一致，可以构建更加安全、可靠和伦理的AI系统。</p>
</li>
<li>
<b><img src="images/7...jpg"></b>
<h3> • 推理分析：</a></h3>
<p>大型语言模型为人工智能带来了前所未有的推理能力，极大地扩展了机器的认知边界，成为人类的“智力外脑”能够提供创造性的解决方案和复杂的决策支持。</p>
</li>
<li>
<b><img src="images/8...jpg"></b>
<h3> • 端侧模型优化：</a></h3>
<p>随着AI原生OS的发展，操作系统可能会发展成API直接调用的模式，减少对传统图形用户界面的依赖，端+云的混合模型可能更加符合未来长期的发展趋势。</p>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
a{ text-decoration:none; color:#333;}a:hover{ color:#ffffff}
html{ }
body{ width:1000px; margin:0 auto; line-height:21px;background-color: #0e1c36;}
.clear{ clear:both}
.menu li{ list-style:none}
.logo{width: 100%}
.banner{ clear: both;position: relative;}
.wrap {
height: 382px;
width: 1000px;
position: relative;
overflow: hidden;
}
.wrap ul {
position: absolute;
}
.wrap ul li {
height: 382px;
}
.wrap ol {
position: absolute;
right: 15px;
bottom: 5px;
}
.wrap ol li {
height: 23px;
width: 23px;
background: #ddd;
border: 1px solid #969591;
border-radius: 50%;
margin-left: 5px;
color: #959490;
float: left;
text-align: center;
cursor: pointer;
}
.wrap ol .on {
background: #8F9E9E;
color: #fff;
}
.fr{ float:right}.logo .fr{ margin-top:40px}
.menu{ width:100%; text-align:center; float:left; background:#ffffff}
.menu li a{ color:rgb(0, 0, 0)}.menu li { font-weight:bold; float:left; margin:2px;padding:15px 30px ; width:135px}
.menu li:hover{ background-color:rgb(129, 86, 86) ;}
.right{ float:right; width:660px; padding:20px}
.left{ min-height:300px; float:left; width:260px; padding:20px}
.content{ padding-bottom:20px;font-size:14px; display:inline-block ; width:100%}
.js{background:rgba(255,255,255,0.8); padding:20px 0}
.end{ clear:both; background:#ffffff; color:rgb(0, 0, 0); padding:30px 0; text-align:center;}
.produce img{ margin:0 20px 20px 0}
.produce {background:rgba(255,255,255,0.8); line-height:30px}
.pad{ padding:20px; display:block}
.pics p{ margin:1px;}
.pics ul{ margin:0 -10px}
.imglist{ width:840px; margin:0 auto}
.imglist li{ float:left; width:400px; margin:10px ;}
.scrollleft{ margin:0 0px}
.scrollleft li{ background:rgba(255,255,255,0.8); height:330px;float:left; width:320px; margin:10px;}
.scrollleft li img{ width:100%; height:200px; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}
.scrollleft li img:hover{
transform:scale(1.1);-webkit-transform:scale(1.1); /*兼容-webkit-引擎浏览器*/-moz-transform:scale(1.1);
}
.news li{ padding:15px; margin-bottom:10px; background:rgba(255,255,255,0.8)}
.news h4{ margin:0; font-size:18px}
.xw img{ margin-bottom:10px;}
.title{ text-align:center; color:#ffffff; padding:10px}
.fl{ float:left}
.js div{ width:80%; clear:both; margin-bottom:20px; float:left}
...
3.JS
代码如下（节选示例）：
window.onload = function() {
var wrap = document.getElementById('wrap'),
pic = document.getElementById('pic'),
list = document.getElementById('list').getElementsByTagName('li'),
index = 0,
timer = null;
// 若果有在等待的定时器，则清掉
if (timer) {
clearInterval(timer);
timer = null;
}
// 自动切换
timer = setInterval(autoPlay, 2000);
// 定义并调用自动播放函数
function autoPlay() {
index++;
if (index >= list.length) {
index = 0;
}
changeImg(index);
}
// 定义图片切换函数
function changeImg(curIndex) {
for (var j = 0; j < list.length; j++) {
list[j].className = "";
}
// 改变当前显示索引
list[curIndex].className = "on";
pic.style.marginTop = -382 * curIndex + "px";
index = curIndex;
}
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function() {
clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function() {
timer = setInterval(autoPlay, 2000);
}
// 遍历所有数字导航实现划过切换至对应的图片
for (var i = 0; i < list.length; i++) {
list[i].id = i;
list[i].onmouseover = function() {
clearInterval(timer);
changeImg(this.id);
}
}
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有兴趣的添加以下微信交流👇🏻👇🏻👇🏻
