css+div+position 实现网页的基本布局 (二)（综合应用篇，包含轮播，二级菜单，等html相关知识点）

最新推荐文章于 2021-11-23 22:05:52 发布
LL__Sunny
最新推荐文章于 2021-11-23 22:05:52 发布
阅读量1.1k
点赞数 3
分类专栏： html 文章标签： css+div+position 实现网页的相关布局二级菜单轮播 position定位
本文链接：https://blog.csdn.net/LL__Sunny/article/details/103478855
版权
html 专栏收录该内容
16 篇文章 5 订阅
订阅专栏
sunny今天又做了一个网页 😁

1.老规矩，先给大家看看我做的这个网页的效果图吧！

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>sunny之作</title>
	<style>
		.bigbox{
			width:1900px;
			height: 2700px;
			/*background-color: pink;*/
			/*border:solid springgreen 5px;*/
			position: relative;
		}
		.top{
			width:1900px;
			height: 270px;
			border:silver solid 3px;
			position: absolute;
			top:0px;

		}
		.top0{
			width: 1900px;
			height: 45px;
			font-size: 15px;
			/*line-height: 45px;*/
			font-family:微软雅黑;

			background-color:#E6E2D4;
			position: absolute;
			top:0px;
		}
		.logo{
			width: 1900px;
			height: 175px;
			background-color: tomato;
			position: absolute;
			top:45px;

		}
		.caidan{
			z-index: 100;
			width: 1900px;
			height: 50px;
			background-color: yellow;
			position: absolute;
			top:220px;
		}
		.lunbo{
			width:1900px;
			height: 630px;
			/*background-color:aqua;*/
			position: absolute;
			top:290px;
		}
		/*************************/
		.middle0 a {text-decoration:none;}
        .middle0 ul li {list-style: none;}
        .middle0 ul li  a{color:black}
        .middle0 ul li  a:hover{color:red}
		.middle0{
			width:1400px;
			height:400px;
			border:solid silver 2px;
			position: absolute;
			top:950px; 
			left:236px;
		}
		.m00{
			width:550px;
			height: 400px;
			background-color: pink;
			position: absolute;
			left:10px;
		}
		
		.m01{
			width: 450px;
			height: 400px;
			/*background-color: hotpink;*/
			position: absolute;
			left:585px;

		}
		/*中间*/
		.m010{
			width:450px;
			height: 50px;
			/*background-color: aqua;*/
			border-bottom:solid silver 2px;
			position: absolute;top:0px;
		}
	
		.m011{
			width:450px;
			height: 350px;
			font-size: 15px;
			font-family:微软雅黑;
			line-height: 40px;
			/*background-color: yellow;*/
			position: absolute;top:50px;
		}
		#p010_0{
			width:100px;
			height: 50px;
			font-size: 18px;
			line-height: 50px;
			font-family:微软雅黑;
			color:black;
			display: block;
			background-color: #f7f7f9;
			position: absolute;
			left:0px;

		}
		#p010_1{
			width:100px;
			height: 50px;
			font-size: 18px;
			line-height: 50px;
			font-family:微软雅黑;
			color:black;
			display: block;
			background-color: #f7f7f9;
			position: absolute;
			left:120px;}
			#p010_0,#p010_1:hover{color:#e99839;cursor:pointer;}
			.m011 ul li {list-style: none;}
			.m011 ul li a{text-decoration: none}
			.m011 a:hover{color:red;}
		/*右边*/
		.m02{
			width: 330px;
			height: 400px;
			font-size: 15px;
			font-family:微软雅黑;
			line-height: 40px;
			/*background-color: deeppink;*/
			position: absolute;
			left:1050px;
		}
		.m020{
			width:330px;
			height: 50px;
			border-bottom:solid silver 2px;
			/*background-color: aqua;*/
			position: absolute;top:0px;
		}
		.m021{
			width:330px;
			height: 350px;
			/*background-color: yellow;*/
			position: absolute;top:50px;
		}
		#p020_0{
			width:100px;
			height: 50px;
			font-size: 18px;
			line-height: 50px;
			font-family:微软雅黑;
			color:black;
			/*display: block;*/
			/*background-color: #f7f7f9;*/
			position: absolute;
			left:0px;

		}
		/***********************************/
		#more{
			font-size: 20px;
			line-height: 40px;
			position: absolute;
			right:10px;
		}
		.middle1{
			width:1400px;
			height:200px;
			border:solid silver 2px;
			position: absolute;
			top:1400px; 
			left:236px;
		}
		.m10{
			width:1000px;
			height: 200px;
			background-color: pink;
			position: absolute;
			left:0px;
		}
		.m11{
			width:380px;
			height: 200px;
			background-color: yellow;
			position: absolute;
			left:1020px;
		}
		
		.middle2{
			width:1400px;
			height:400px;
			/*border:solid silver 2px;*/
			position: absolute;
			top:1630px; 
			left:236px;
		}

		.m20{
			width:450px;
			height: 400px;
			background-color: #f7f7f9;
			border:solid silver 2px;
			position: absolute;
			left:0px;

		}
		.m20 ul li{list-style: none;}
		.m20 a{text-decoration: none; color:black;}
		.m20 a:hover{color:red;font-weight:bold;}
		.m21 ul li{list-style: none;}
		.m21 a{text-decoration: none; color:black;}
		.m21 a:hover{color:red;font-weight:bold;}
		.m22 ul li{list-style: none;}
		.m22 a{text-decoration: none; color:black;}
		.m22 a:hover{color:red;font-weight:bold;}
		.m21{
			width:450px;
			height: 400px;
			background-color: #f7f7f9;
			border:solid silver 2px;
			position: absolute;
			left:475px;

		}
		.m22{
			width:450px;
			height: 400px;
			background-color: #f7f7f9;
			border:solid silver 2px;
			position: absolute;
			left:950px;

		}
		.m200{
			width:450px;
			height: 50px;
			/*background-color: red;*/

			position: absolute;
			top:0px;
		}

		#p020_2{
			width:450px;
			height: 50px;
			font-size: 18px;
			line-height: 50px;
			text-align:left;
			font-family:微软雅黑;
			color:black;
			/*display: block;*/
			background-color: #f7f7f9;
			position: absolute;
			left:0px;
		}
		.m201{
			width:440px;
			height: 350px;
			/*background-color: gold;*/
			line-height: 50px;
			border-top: solid silver 2px;
			position: absolute;
			top:50px;
			left:5px;
		}
		#p020_3{
			width:450px;
			height: 50px;
			font-size: 18px;
			line-height: 50px;
			text-align:left;
			font-family:微软雅黑;
			color:black;
			/*display: block;*/
			background-color: #f7f7f9;
			position: absolute;
			left:0px;
		}
		
		.m211{
			width:440px;
			height: 350px;
			/*background-color: gold;*/
			line-height: 50px;
			border-top: solid silver 2px;
			position: absolute;
			top:50px;
			left:5px;
		}
		.m221{
			width:440px;
			height: 350px;
			/*background-color: gold;*/
			line-height: 50px;
			border-top: solid silver 2px;
			position: absolute;
			top:50px;
			left:5px;
		}
		.middle3{
			width:1400px;
			height:250px;
			/*border:solid silver 2px;*/
			background-color: #f7f7f9;
			position: absolute;
			top:2070px; 
			left:236px;
		}
		.m30{
			width:900px;
			height: 250px;
			border:solid silver 2px;
			position: absolute;
			left:0px;
		}
		.m31{
			width:470px;
			height: 250px;
			border:solid silver 2px;
			position: absolute;
			left:930px;

		}
		#p020_4{
			width:900px;
			height: 50px;
			font-size: 18px;
			line-height: 50px;
			text-align:left;
			font-family:微软雅黑;
			color:black;
			/*display: block;*/
			background-color: #f7f7f9;
			position: absolute;
			left:0px;
		}
		.mm{
			width:890px;
			height: 200px;
			border-top: solid silver 2px;
			position: absolute;
			top:50px;
			left:5px;
		}
		.m301{
			width:130px;
			height: 140px;
			/*background-color: pink;*/
			position: absolute;
			left:50px;
			top:30px;
		}
		.m301 img{width: 110px; height: 110px;}
		.m302 img{width: 110px; height: 110px;}
		.m303 img{width: 110px; height: 110px;}
		.m304 img{width: 110px; height: 110px;}
		.m305 img{width: 110px; height: 110px;}
		.m302{
			width:130px;
			height: 140px;
			/*background-color: pink;*/
			position: absolute;
			left:270px;
			top:30px;
		}
		.m303{
			width:130px;
			height: 140px;
			/*background-color: pink;*/
			position: absolute;
			left:490px;
			top:30px;
		}
		.m304{
			width:130px;
			height: 140px;
			/*background-color: pink;*/
			position: absolute;
			left:710px;
			top:30px;
		}
		.m301 a:hover{color:red;}
		.m302 a:hover{color:red;}
		.m303 a:hover{color:red;}
		.m304 a:hover{color:red;}
		.m305 a:hover{color:red;}
		#mm1{position: absolute;bottom:0px;left:10px;}
		.mm a {text-decoration: none; color:black;}
		#p020_5{
			width:470px;
			height: 50px;
			font-size: 18px;
			line-height: 50px;
			text-align:left;
			font-family:微软雅黑;
			color:black;
			/*display: block;*/
			background-color: #f7f7f9;
			position: absolute;
			left:0px;
		}
		.m311{
			width:460px;
			height: 200px;
			/*background-color: pink*/
			border-top:silver solid 2px;
			position: absolute;
			top:50px;
			left:5px;
		}
		.m31 a{text-decoration: none; color:black;}
		#m3110{position: absolute;left:20px;top:20px;}
		#m3111{position: absolute;left:200px;top:80px;}
		#m3112{position: absolute;left:20px;top:80px;}
		#m3113{position: absolute;left:200px;top:20px;}
		.m311 a:hover{color:red;}
	
		.bottom{
			width:1900px;
			height: 250px;
			background-color: hotpink;
			position: absolute;
			bottom: 0px;
		}
		.bottom img{width: 1900px; height: 250px}
		#p1{position: absolute;left:260px;}
		#p2{position: absolute;left:1000px;}
/*二级菜单*/
        *{margin:0px;padding:0px;}
		.caidan a{text-decoration: none;}
		.caidan ul li {list-style: none;float: left;}
		.caidan ul li a {
			width:190px;
			height: 50px;
			font-size: 17px;
			text-align: center;
			line-height: 50px;
			font-family: 微软雅黑;
			background-color: #82080D;
			color:white;
			display: block;
		}
		.caidan ul li ul{ display: none;position: absolute; }
		.caidan ul li ul li { float:none; }
		.caidan ul li ul li a{ background-color: #DDDDDD;color:black; border-top:solid aqua 1px;}
		.caidan ul li ul li a:hover{color:orange;}
		.caidan ul li:hover ul{display: block;}
		/*轮播*/
		.lunbo img{width: 100%;height: 100%;}
		#left,#right{
			width:70px;
			height: 80px;
			font-size: 25px;
			text-align: center;
			line-height:80px;
			font-family: 微软雅黑;
			background-color: black;
			color:white;
			opacity: 0.7;		
		}
		#left{position: absolute;left:0px;top:290px;}
		#right{position: absolute;right:0px;top:290px}
		#left,#right:hover{cursor: pointer;}
			/**********************/
		.m00 img{width: 100%;height: 100%;}
		#left1,#right1{
			width:30px;
			height: 40px;
			font-size: 15px;
			text-align: center;
			line-height:40px;
			font-family: 微软雅黑;
			background-color: black;
			color:white;
			opacity: 0.7;		
		}
		#left1{position: absolute;left:0px;top:170px;}
		#right1{position: absolute;right:0px;top:170px}
		#left1,#right1:hover{cursor: pointer;}

    
	</style>

</head>
<body>
	<center>
		<div class="bigbox">

			<div class="top">
				<div class="top0">
					<p id="p1">欢迎访问***********网站! </p>
					<p id="p2">电话：0516－83105382 邮箱：tuanwei@xzit.edu.cn 欢迎访***********网站! </p>
				</div>
				<div class="logo"><img src="images/001.jpg" alt=""></div>
				<div class="caidan">
						<ul>
							<li><a href="#">网站首页</a>
								<ul>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
								</ul>
							</li>
							<li><a href="#">网站首页</a>
								<ul>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
								</ul>
							</li>
							<li><a href="#">网站首页</a>
								<ul>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
								</ul>
							</li>
							<li><a href="#">网站首页</a>
								<ul>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
								</ul>
							</li>
							<li><a href="#">网站首页</a>
								<ul>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
								</ul>
							</li>
							<li><a href="#">网站首页</a>
								<ul>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
								</ul>
							</li>
							<li><a href="#">网站首页</a>
								<ul>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
								</ul>
							</li>
							<li><a href="#">网站首页</a>
								<ul>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
								</ul>
							</li>
							<li><a href="#">网站首页</a>
								<ul>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
								</ul>
							</li>
							<li><a href="#">网站首页</a>
								<ul>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
									<li><a href="#">二级菜单</a></li>
								</ul>
							</li>
							

						</ul>
				</div>
			</div>	
			<div class="lunbo" id="box">
				<img src="images/002.jpg" alt="" id ="img1">
				<div id="left"><</div>
				<div id="right">></div>
			</div>

			<div class="middle0">

					<div class="m00" id="box1">
						<img src="images/006.jpg" alt="" id ="img2">
						<div id="left1"><</div>
						<div id="right1">></div>
					</div>
					<!-- 第二个 -->
					<div class="m01">
						<div class="m010">
							<p id="p010_0">团学要闻</p>
							<p id="p010_1">学院咨询</p>

						</div>
						<div class="m011">
							<ul>
								<li><a href="#">我校开展2019年大学生暑期社会实践活动...2019-09-11</a></li>
								<li><a href="#">我校开展2019年大学生暑期社会实践活动...2019-09-11</a></li>
								<li><a href="#">我校开展2019年大学生暑期社会实践活动...2019-09-11</a></li>
								<li><a href="#">我校开展2019年大学生暑期社会实践活动...2019-09-11</a></li>
								<li><a href="#">我校开展2019年大学生暑期社会实践活动...2019-09-11</a></li><li><a href="#">我校开展2019年大学生暑期社会实践活动...2019-09-11</a></li><li><a href="#">我校开展2019年大学生暑期社会实践活动...2019-09-11</a></li><li><a href="#">我校开展2019年大学生暑期社会实践活动...2019-09-11</a></li>
							</ul>
						</div>
					</div>
					<!-- 第3个 -->
					<div class="m02">
						<div class="m020"><p id="p020_0">团内公告</p>　<span id="more">>></span></div>
						<div class="m021">
							<ul>
								<li><a href="#">徐州工程学院学生会第...2019-11-18</a></li>
								<li><a href="#">徐州工程学院学生会第...2019-11-18</a></li>
								<li><a href="#">徐州工程学院学生会第...2019-11-18</a></li>
								<li><a href="#">徐州工程学院学生会第...2019-11-18</a></li>
								<li><a href="#">徐州工程学院学生会第...2019-11-18</a></li>
							</ul>
						</div>
					</div>
			</div>
			<div class="middle1">
					<div class="m10"><img src="images/012.jpg" alt="" width="100%" height="100%"></div>	
					<div class="m11"><img src="images/013.jpg" alt="" width="100%" height="100%"s></div>	
					
			</div>
			<div class="middle2">
				   <!--m20 第一个 -->
					<div class="m20">
						<div class="m200"><p id="p020_2">　　理论学习 </p></div>
						<div class="m201">
								<ul>
								  <li><a href="#">中国***********...　　2018-07-02</a></li>
								  <li><a href="#">中国***********..　　2018-07-02</a></li>
								  <li><a href="#">中国***********...　　2018-07-02</a></li>
								  <li><a href="#">中国***********...　　2018-07-02</a></li>
								  <li><a href="#">中国***********...　　2018-07-02</a></li>
								  <li><a href="#">中国***********...　　2018-07-02</a></li>
								</ul>
						</div>
					</div>
					<!--  -->
					<div class="m21">
							<div class="m210"><p id="p020_3">　　团委发文 </p>　<span id="more">>></span></div>
							<div class="m211">
							  <ul>
								<li><a href="#">关于***********...　　2019-11-25</a></li>
								<li><a href="#">关于***********...　　2019-11-25</a></li>
								<li><a href="#">关于***********..　　2019-11-25</a></li>
								<li><a href="#">***********...　　2019-11-25</a></li>
								<li><a href="#">***********...　　2019-11-25</a></li>
								<li><a href="#">***********..　　2019-11-25</a></li>
							  </ul>
							</div>
					</div>
					<!--  -->
					<div class="m22">
						<div class="m220"><p id="p020_3">　　团委发文 </p>　<span id="more">>></div>
						<div class="m221">
							<ul>
								<li><a href="#">关于校学生会第十七届主席团成员任命...　　2019-11-25</a></li>
								<li><a href="#">关于校学生会第十七届主席团成员任命...　　2019-11-25</a></li>
								<li><a href="#">关于校学生会第十七届主席团成员任命...　　2019-11-25</a></li>
								<li><a href="#">关于校学生会第十七届主席团成员任命...　　2019-11-25</a></li>
								<li><a href="#">关于校学生会第十七届主席团成员任命...　　2019-11-25</a></li>
								<li><a href="#">关于校学生会第十七届主席团成员任命...　　2019-11-25</a></li>
								
							  </ul>
						</div>
					</div>
			</div>
			<div class="middle3">
				 <div class="m30">
				 	    <div class="m300"><p id="p020_4">　　团委发文 </p>　<span id="more">>></div>
						<div class="mm">
						<div class="m301"><a href="#"><img src="images/200.png" alt=""></a> <a href="#" ><p id="mm1">校学生会</p></a></div>
						<div class="m302"><a href="#"><img src="images/201.png" alt=""></a> <a href="#" ><p id="mm1">校学生会</p></a></div>
						<div class="m303"><a href="#"><img src="images/202.png" alt=""></a> <a href="#" ><p id="mm1">校学生会</p></a></div>
						<div class="m304"><a href="#"><img src="images/203.png" alt=""></a> <a href="#" ><p id="mm1">校学生会</p></a></div>
						</div>
						
				 </div>

				 <div class="m31">
						<div class="m310"><p id="p020_5">　　**发文 </p>　<span id="more">>></div>
						<div class="m311">
							<a href="#" id="m3110">江苏省***0</a>
							<a href="#" id="m3111">江苏省***1</a>
							<a href="#" id="m3112">江苏省***2</a>
							<a href="#" id="m3113">江苏省***3</a>
						</div>
				 </div>

			</div>
			<div class="bottom"><img src="images/023.jpg" alt=""></div>
		</div>
	</center>
</body>
</html>
		<script>
				var box = document.getElementById('box')
				var img = document.getElementById('img1')
				var left = document.getElementById('left')
				var right = document.getElementById('right')
				var arr_img = ['images/002.jpg','images/003.jpg','images/004.png','images/005.jpg',]
				var currentIndex =1 
				function slide(){
					img.src = arr_img[currentIndex];
					currentIndex = ++currentIndex%4;
				}
				var pause = setInterval(slide,2000)
				box.addEventListener('mouseover',function(){
					clearInterval(pause)
				})
				box.addEventListener('mouseout',function(){
					pause = setInterval(slide,2000)
				})
				left.addEventListener('click',function(){
					currentIndex = --currentIndex%4;
					if(currentIndex < 0){
						currentIndex +=4;
					}
						img.src = arr_img[currentIndex];
				})
				right.addEventListener('click',function(){
					currentIndex = ++currentIndex%4;
					img.src = arr_img[currentIndex];
				})


				var box1 = document.getElementById('box1')
				var img1 = document.getElementById('img2')
				var left1 = document.getElementById('left1')
				var right1 = document.getElementById('right1')
				var arr_img1 = ['images/006.jpg','images/007.jpg','images/008.jpg','images/009.jpg','images/010.jpg','images/011.jpg',]
				var currentIndex1 =1 
				function lunbo(){
					img1.src = arr_img1[currentIndex1];
					currentIndex1 = ++currentIndex1%6;
				}
				var pause1 = setInterval(lunbo,2000)
				box1.addEventListener('mouseover',function(){
					clearInterval(pause)
				})
				box1.addEventListener('mouseout',function(){
					pause1 = setInterval(lunbo,2000)
				})
				left1.addEventListener('click',function(){
					currentIndex1 = --currentIndex1%6;
					if(currentIndex1 < 0){
						currentIndex1 +=6;
					}
						img1.src = arr_img1[currentIndex1];
				})
				right1.addEventListener('click',function(){
					currentIndex1 = ++currentIndex1%6;
					img1.src = arr_img1[currentIndex1];
				})




		</script>
LL__Sunny
关注
3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
css+div+position 实现网页的基本布局 (二)（综合应用篇，包含轮播，二级菜单，等html相关知识点）

css+div+js+position 实现网页的相关布局与设计综合应用篇，包含轮播，二级菜单，等html相关知识点
复制链接

扫一扫