制作计划步骤
1.制作头部导航栏—>用header标签写
然后用ul li标签制作导航栏部分实现鼠标经过加深字体颜色
2.制作轮播图
用jquery实现轮播图每2.5秒自动播放
实现鼠标点击左右两边的按钮实现手动切换轮播图的效果。
3.实现中间引导图标鼠标经过变为红色,并链接到相应的网页效果。
4。中间内容部分,鼠标经过实现图片切换展示相关图片。
下边是html代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>设计</title>
<link rel="stylesheet" href="css/new_file.css">
<link rel="stylesheet" href="css/reset.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="new.js"></script>
</head>
<body>
<div class="main">
<header>
<div class="daohanglan">
<div class="left">
<img src="img/logo.png" alt="">
</div>
<div class="right">
<div><img src="img/number.jpg" alt=""></div>
<ul>
<a href="#"><li>首页</li></a>
<a href="#"><li>成功案例</li></a>
<a href="#"><li>关于创意</li></a>
<a href="#"><li>在线咨询</li></a>
<a href="#"><li>会员咨询</li></a>
<a href="#"><li>会员登录</li></a>
</ul>
</div>
</div>
</header>
<div class="banner">
<div class="banner_warp">
<ul class="banner_img clear_fix">
<li class="ig"><img src="img/banner_one.jpg" alt=""></li>
<li class="ig"><img src="img/banner_4.png" alt=""></li>
<li class="ig"><img src="img/banner_four.png" alt=""></li>
<li class="ig"><img src="img/banner_6.png" alt=""></li>
<li class=&