科技改变生活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效果部分，题目介绍、作品总结等。
