科技改变生活HTML网页设计 中国技术前端大作业 5处js应用

发布时间:2024-12-27 17:34

JavaScript前端开发:HTML+CSS+JS三者结合理解 #生活技巧# #工作学习技巧# #编程语言学习路径#

从前有个范特西 于 2024-12-26 15:19:20 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

科技改变生活HTML网页设计 中国技术前端大作业 5个js

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>科技改变生活</title>

<link rel=stylesheet type=text/css href="css/style.css">

<link rel=stylesheet type=text/css href="css/banner.css">

<script type="text/javascript" src="js/banner.js"></script>

</head>

<body>

<div id="top">

<div class="banner">

<div class="banner_pic" id="banner_pic">

<div class="current"><img src="img/01.jpg" alt="tp" /></div>

<div class="pic"><img src="img/02.jpg" alt="tp" /></div>

<div class="pic"><img src="img/03.jpg" alt="tp" /></div>

<div class="pic"><img src="img/04.jpg" alt="tp" /></div>

</div>

<ol id="button">

<li class="current"></li>

<li class="but"></li>

<li class="but"></li>

<li class="but"></li>

</ol>

</div>

<div id="top-grey">

<div id="bar-x">

<div id="logo"><a href="index.html"><img src="img/logo.png" width="163" height="45"></a></div>

<div id="menu">

<div class="dropdown" > <a href="index.html">首页</a></div>

<div class="dropdown" > <a href="subpage/page1.html">科技成果</a></div>

<div class="dropdown" > <a href="subpage/list.html">生活变化</a></div>

<div class="dropdown" > <a href="subpage/video.html">在线视频</a></div>

<div class="dropdown" > <a href="#">更多<img src="img/down.png" width="11" height="11" alt=""/></a>

<div class="dropdown-content"><p><a href="subpage/register.html">注册</a></p>

<p><a href="mailto:123@123.com">E-Mail</a></div>

</div>

</div>

<div id="menu2" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="login.html">登录 | 注册</a></div>

</div>

</div>

</div>

<div id="main">

<div id="title">版块直达</div>

<div id="green"></div>

<div id="m-686-281">

<a href="subpage/page1.html">

<div id="icon-card" class="c_out" onmouseover="this.className='c_over'" onmouseout="this.className='c_out'">

<div id="m-22-22"><img src="img/icon1.png" width="40" height="40"></div>

<div id="m-50-20">科技成果</div>

</div></a>

<a href="subpage/list.html">

<div id="icon-card" class="c_out" onmouseover="this.className='c_over'" onmouseout="this.className='c_out'">

<div id="m-22-22"><img src="img/icon2.png" width="40" height="40"></div>

<div id="m-50-20">生活变化</div>

</div></a>

<a href="subpage/video.html">

<div id="icon-card" class="c_out" onmouseover="this.className='c_over'" onmouseout="this.className='c_out'">

<div id="m-22-22"><img src="img/icon3.png" width="40" height="40"></div>

<div id="m-50-20">精彩视频</div>

</div></a>

<a href="subpage/login.html">

<div id="icon-card" class="c_out" onmouseover="this.className='c_over'" onmouseout="this.className='c_out'">

<div id="m-22-22"><img src="img/icon4.png" width="40" height="40"></div>

<div id="m-50-20">登录本站</div>

</div></a>

</div>

</div>

<div class="s-banner"><em>随着全球的科技发展,我们的生活越来丰富。地铁、高铁、飞机、电话、手机、自动电梯等。这些科技的发展改变了我们的生活...</em></div>

<div id="main1">

<div id="title1">科技改变生活</div>

<div id="green1"></div>

<div id="central-div">

<div class="central-text">科技已经深刻改变了我们的生活。随着人工智能和高科技的不断出现,我们正处于一个科技飞速发展的时代。人工智能成为了我们生活中不可或缺的一部分。无论是智能手机、智能家居还是智能医疗设备,人工智能带来了极大的便利。现在,我们可以通过语音助手控制家电、查询天气、预订飞机票。人工智能的出现不仅提高了我们的生活质量,还增加了更多的娱乐方式,例如智能音箱、智能电视等等。我们可以通过人工智能设备享受到更智能化的生活。高科技产品也成为了我们生活中的必备品。例如智能手表、智能眼镜、智能手环等等。这些高科技产品不仅可以帮助我们记录健康数据,还可以提醒我们正确认识时间和完成工作任务。高科技产品的普及使得我们的生活更加便捷。科技改变生活,在当今这个充满机遇与挑战的时代,人工智能和高科技的出现成为了推动社会进步的重要力量。</div>

<div class="central-img"><img src="img/index01.jpg" width="280" height="306" alt=""/></div>

</div>

</div>

<footer>

<div id="down">

<div class="copyright">Copyright ©科技改变生活 All Rights Reserved.</div>

<div class="share"><img src="img/share01.png" width="30" height="30" alt=""/></div>

<div class="share"><img src="img/share02.png" width="30" height="30" alt=""/></div>

<div class="share"><img src="img/share03.png" width="30" height="30" alt=""/></div>

</div>

</footer>

</div>

</body>

</html>

5个html页面相互超连接,js轮播图、下拉菜单栏、鼠标划过效果、tab选项卡、投票按钮、表单验证,5处js效果,页面美观度较高,内容充实,各个子页面图文混排方式各不相同。报告1700字介绍了5个页面中分别对应的js效果部分,题目介绍、作品总结等。

网址:科技改变生活HTML网页设计 中国技术前端大作业 5处js应用 https://www.yuejiaxmz.com/news/view/585740

相关内容

个人网页设计教程:HTML+CSS+JS实例详解
2. Web前端网页制作 二月二节日主题网页设计实例 大学生期末大作业 html+css
健康生活网页设计4网页html+css精选
html网页制作——HTML节日主题网页项目的设计与实现——圣诞节日介绍(HTML+CSS)
【网页设计】基于HTML+CSS+JavaScript制作美食网站舌尖上的美食
网页设计】基于HTML+CSS制作美食网站舌尖上的美食
习作5科技改变生活(31页)
ssm毕设 基于前后端分离技术的医院服务体系app源码+程序+论文
科技改变生活.ppt
科技改变生活作文范文 科技改变生活作文5篇

随便看看