pc端-轮播图和二级菜单

最新推荐文章于 2023-12-21 13:56:50 发布

<李小狮 / >

最新推荐文章于 2023-12-21 13:56:50 发布

阅读量633

点赞数

分类专栏： JS 功能实例文章标签： js

本文链接：https://blog.csdn.net/AN_MEI/article/details/105003105

版权

本篇目录轮播图加二级菜单轮播图加二级菜单 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: ...

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

本篇目录

- - 轮播图 + 二级菜单

轮播图 + 二级菜单

	<!DOCTYPE html>
	<html>
	<head lang="en">
	    <meta charset="UTF-8">
	    <title></title>
		<style>
			*{
   
				margin: 0;
				padding: 0;
			}
			ul{
   
				list-style: none;
			}
			a:link,a:visited{
   
				text-decoration: none;
				color: #333;
			}
			body{
   
				font-family: "微软雅黑";
				color: #14191e;
			}
			.main{
   
				position: relative;
				width: 1200px;
				height: 460px;
				margin: 30px auto;
				overflow: hidden;
			}
			.banner{
   
				position: relative;
				width: 1200px;
				height: 460px;
				overflow: hidden;
			}
			.banner-slide{
   
				display: none;
				position: absolute;
				width: 1200px;
				height: 460px;
				background-repeat: no-repeat;
			}
			.slide1{
   
				background-image:url("./img/bg1.jpg");
			}
			.slide2{
   
				background-image:url("./img/bg2.jpg");
			}
			.slide3{
   
				background-image:url("./img/bg3.jpg");
			}
			.slide-active{
   
				display: block;
			}
			.button{
   
				position: absolute;
				top: 50%;
				left: 244px;
				margin-top: -40px;
				width: 40px;
				height: 80px;
				background: url(./img/arrow.png) no-repeat center center;
			}
			.next{
   
				left: auto;
				right: 0;
			}
			.button:hover{
   
				background-color: #333;
				opacity: 0.8;
				filter:alpha(opacity=80);
			}
			.prev{
   
				transform: rotate(180deg);
			}
			.dots{
   
				position: absolute;
				right: 20px;
				bottom: 24px;
				text-align: right;
			}
			.dots span{
   
				display: inline-block;
				width: 12px;
				height: 12px;
				line-height: 12px;
				margin-left: 8px;
				border-radius: 50%;
				background: rgba(7,17,27,0.4);
				box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
				cursor: pointer;
			}
			.dots span.active{
   
				box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
				background: #fff;
			}
			/*菜单*/
			.menu-box{
   
				z-index: 1;
				position: absolute;
				top: 0;
				left: 0;
				width: 244px;
				height: 460px;
				background: rgba(7,17,27,0.5);
				opacity: 0.5;
			}
			.menu-content{
   
				z-index: 2;
				position: absolute;
				top: 0;
				left: 0;
				width: 244px;
				height: 454px;
				padding-top: 6px;
			}
			.menu-item{
   
				position: relative;
				height: 64px;
				line-height: 66px;
				padding: 0 24px;
				font-size: 16px;
			}
			.menu-item a:link, .menu-item a:visited{
   
				color: #fff;
			}
			.menu-item a{
   
				display: block;
				height: 63px;
				padding: 0 8px;
				border-bottom: 1px solid rgba(255,255,255,0.2);
			}
			.menu-item i{
   
				position: absolute;
				top: 2px;
				right: 32px;
				color: rgba(255,255,255,0.5);
				font-size: 24px;
				font-style: normal;
				font-weight: normal;
			}
			.sub-menu{
   
				z-index: 3;
				position: absolute;
				top: 0;
				left: 244px;
				width: 730px;
				height: 458px;
				border:1px solid #d9dde1;
				background: #fff;
				box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
			}
			.inner-box{
   
				width: 100%;
				height: 100%;
				background: url(./img/fe.png) no-repeat center center;
				display: none;
			}
			.sub-inner-box{
   
				width: 652px;
				margin-left: 40px;
				overflow: hidden;
			}
			.title{
   
				line-height:16px;
				margin:28px 0 30px 0; 
				color: #f01414;
				font-size: 16px;
				font-weight: bold;
			}
			.sub-row{
   
				margin-bottom: 25px;
			}
			.bold{
   
				font-weight: bold;
			}
			.mr10{
   
				margin-right: 10px;
			}
			.ml10{
   
				margin-left: 10px;
			<

最低0.47元/天解锁文章

<李小狮 / >

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
pc端-轮播图和二级菜单

本篇目录轮播图加二级菜单轮播图加二级菜单 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: ...
复制链接

扫一扫