WEB 开发：HTML+CSS+jquery制作企业网站必备教程

最新推荐文章于 2024-11-05 16:26:25 发布

勺子先生要不要买菜

最新推荐文章于 2024-11-05 16:26:25 发布

阅读量3.1k

点赞数 4

文章标签： css css3 jquery

本文链接：https://blog.csdn.net/m0_46153016/article/details/104428954

版权

本文提供了一个使用HTML、CSS和jQuery创建企业网站的详细教程，涵盖了从制作头部导航栏，实现动态轮播图，到创建交互式引导图标和内容区域的图像切换效果。通过CSS3实现样式，jQuery完成动态交互。

摘要由CSDN通过智能技术生成

企业网站
制作计划步骤
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=&