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

最新推荐文章于 2024-04-25 18:45:11 发布

置顶 LL__Sunny

最新推荐文章于 2024-04-25 18:45:11 发布

阅读量1.6k

点赞数 4

分类专栏： html 文章标签： css+div+position 实现网页的相关布局轮播二级菜单 position定位

本文链接：https://blog.csdn.net/LL__Sunny/article/details/103444446

版权

html 专栏收录该内容

16 篇文章 5 订阅

订阅专栏

sunny运用所学的html基础知识，完成了两个网页的布局 😁

前者基本上和原网页长得一样哟ヾ(≧▽≦*)o，这两个网页基本框架搭建的思路读者们要是喜欢的话可以借鉴一下（sunny在此献拙了希望大佬不要嘲笑哈sunny还只是初学者），代码里有些文字被我换成********了这个没什么影响的😁

这几天找了好多网页来练习布局，砸扎实html的基础知识，我只想说网页的布局离不开position😂

韩信眼里只有塔现在sunny眼里只有position😂

我个人对position中 relative和position 的理解

1.先给大家看看我做的这两个网页的效果图吧！

2.第一幅：

在这里插入图片描述

2. 第二幅：

在这里插入图片描述

按顺序来

🎈🎈下面是这两个页的各自的源代码（里面sunny放了许多图片，要是直接粘贴的话是看不到这些图片的，不过图片都不是重点，重要的布局的思路，如何去实现网页的构架，仅供参考哦，毕竟每个人的想法和风格都不太一样ヾ(≧▽≦*)o）

代码一：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页1</title>
	<script src="scripts/jquery.min.js"></script>
	<style>
/*biggestbox*/
	.biggestbox{
		width:1920px;
		height: 940px;
		background: aqua;
 		background: linear-gradient(to bottom, #FFB90F 1%,#ffffff 99%);
		float:left;
		position: relative;

	}
	/*topbox*/
	.topbox{
		width:1920px;
		height: 157px;
		background: pink;
		float:left;
		position: absolute;
	}
	.leftbox{
		width: 20%;
		height:785px;
		/*background:yellow;*/
		position: absolute;
		left:0px;
		top:155px;
		
	}
	.rightbox{
		width: 21.80%;
		height:785px;
		background:yellow;
		position: absolute;
		right:0px;
		top:155px;
		
	}
	.bottombox{
		width:59%;
		height:144px;
		background-color: white;
		position: absolute;
		left:20%;
		bottom:0px;
	}
/*二级菜单box0*/
	*{margin: 0px;
	  padding: 0px;
	}
	/*去除点*/
	 .box0 ul li{list-style: none;}
    /*去除下划线*/
	a{text-decoration: none;}
	
	.box0{ position: relative;
		   z-index: 36;
		   font-family:华文行楷 
		   font-size:20px; 
		   float:left;
		   /* width: 720px;*/
		   /*height: 43px;*/
		   width:1109px;
		   height:44px;
		   /*background-color: #FF6600;*/
		   background: linear-gradient(to top, #E33C00 60%,#ffb90f);
		   /*background-color:pink;*/
		   border-radius: 17px 17px 0px 0px;
		   margin:0px 30% auto auto ; 
		   padding-left: 7px;
		   padding-top: 3px;

	}

    .box0 ul li{
    	float :left;

    }
	.box0 ul li a{
		/*width: 100px;
		height: 40px;*/
		width:158px;
		height:40px;

		line-height: 40px;
		text-align: center;
		display: block;
		/*background:#FF6600;*/
		background: linear-gradient(to top, #E33C00 60%,#ffb90f);
		color:white;
	}
	.box0 ul li ul{
		display: none;
		position: absolute;

	}
	.box0 ul li ul li { float:none;}
	.box0 ul li ul li a{ border-top:1px dashed silver; }
    .box0 ul li:hover ul{display: block;}
/*第二大盒子*/
.box1{
	width:1118px;
	height: 650px;
	/*background-color: aqua;*/
	background-color: none;
	/*margin:155px 30% auto 15% ; */
	margin:155px 20% auto 20% ; 
	float:left;	
}
   
.box_bottom{
	width:1118px;
	height: 50px;
	/*background-color: #CC0000;*/
	background: linear-gradient(to top, #CC0000 90%,#ffb90f);
	margin:1px auto 0px auto ;
	float :left;
	border-radius: 0 0 17px 17px;
	
}

/*中间的三个盒子box_middle0，box_middle1，box_middle2*/
    .box_middle0{
    	width:330px;
    	height: 550px;
    	/*background-color: lime;*/
    	background: linear-gradient(to  bottom,#FFBB00,	#FDF5E6 );
    	float:left;
    	margin:0px auto auto 0px;


     }
    .box_middle1{
    	width:470px;
    	height: 550px;
    	background-color: 	#FFEFD5;
    	float:left;
    	margin:0px auto auto auto;


     }
    .box_middle2{
    	width: 318px;
    	height: 550px;
    	background-color: 	#FFEFD5;
    	/*background-color: 	##FFEBCD;*/
    	/*background-color: yellow;*/
    	float:left;
    	margin:0px 0px auto 0px;

     }

/*轮播部分*/
.innnerbox{
	width: 422px;
	height: 264px;
	border: solid 6px white;
	position: relative;
	margin-left: 18px;
	margin-right: 18px;
}
/*文本信息*/
   #text{
   	width:100%;
   	height: 40px;
   	line-height: 40px;
   	font-size: 13px;
   	text-align: center;
   	/*padding-left: 20px;*/
   	background-color: #C8C8C8;
   	/*opacity: 0.7;*/
   	color:#000;
   	font-family: 微软雅黑;
   	position: absolute;
   	left:0px;
   	bottom: 0px;
   }
   /*123456*/
   #one,#two,#three,#four,#five,#six{
   	width: 19px;
   	height: 19px;
   	line-height: 15px;
   	font-size: 10px;
   	text-align: center;
   	background-color: #000000;
   	opacity: 0.75;
 	color:#fff;
   	font-family: 微软雅黑;
   	position: absolute;
   }
   /*定位信息*/
   #six{
   	position: absolute;
   	bottom: 41px;
   	right:10px;
   }
   #five{
   	position: absolute;
   	bottom: 41px;
   	right:32px;

   }
   #four{
   	position: absolute;
   	bottom: 41px;
   	right:54px;

   }
   #three{
   	position: absolute;
   	bottom: 41px;
   	right:76px;

   }
   #two{
   	position: absolute;
   	bottom: 41px;
   	right:98px;

   }
   #one{
   	position: absolute;
   	bottom: 41px;
   	right:120px;

   }
		/*图片大小*/
		img{
			width: 100%;
			height: 100%;
		}

/*中间盒子下方的文字以及链接部分*/
   .innnerbox1{
	width: 422px;
	height: 264px;
	/*border: solid 1px white;*/
	border: solid 1px none;
	position: absolute;
	padding-top: 15px;

}
h1{
	font-size:18px;
	font-family:宋体;
	/*position: absolute;
	left:10px;
	top: 270px;*/
}
span a{
	font-size:12px;
	font-family:宋体;
	text-align: right;
	/*position: absolute;
	right:10px;
	top: 14px;*/
	color:black;

}

hr{
	position:absolute;
	top:41px;
}
	.innnerbox1 ul li a{
		font-size: 11px;
		font-family: 宋体;
		color:black;
		line-height: 10px;
		/*text-align: center;*/
	}
	/*.innnerbox2是为了调节链接位置向右*/
	.innnerbox2{
		width: 390px;
	    height: 205px;
	    /*border: solid 1px white;*/
	    border: solid 1px none;
	    padding-left: 28px;

	}
    .innnerbox2 ul{list-style-image: url(images/7.jpg); }
/*底部的盒子*/
    .box_bottom p{
	text-align: center;
	font-size: 12px;
	font-family: 宋体;
	color: white;
	padding-top: 5px;

}



/*最左半部分*/
			.box_middle0_0{

				width: 330px;
				height: 225px;
				/*background-color: 		#FFBB00;*/
				padding-top: 8px;
				padding-left: 65px;


			}
			#ul0{list-style-image: url(images/8.jpg);}
			#ul1{list-style-image: url(images/7.jpg); }
			#ul2{list-style-image: url(images/9.jpg);}
			#ul3{list-style-image: url(images/10.jpg);}


			.box_middle0_0 ul li a{
				font-size: 11px;
		        font-family: 宋体;
		        color:black;
		        line-height: 20px;
			}
			.box_middle0_1{
				width: 330px;
				height: 225x;
				/*background-color: 	#00FA9A;*/
				padding-top: 8px;
				padding-left: 65px;
				position: relative;
			}
            

			#li0{
				font-size:18px;
	            font-family:宋体;

			}
			.box_middle0_1 ul li a{
				font-size: 11px;
		        font-family: 宋体;
		        color:black;
		        line-height: 20px;
			}
/*图标部分*/
		.tubiao0{
			 width:48px;
			 height:17px;
			 background-color: blue;
			 position: absolute;
             right:90px;
             bottom: -30px;
		}
		.tubiao1{
			width: 220px;
			height:43px;
			position: absolute;
			bottom: -90px;
			right:130px;

		}
		.tubiao2{
			width: 220px;
			height: 30px;
			position: absolute;
			left:50px;
			bottom:-90px;
			background: linear-gradient(to  top,#FFA54F 50%,#F0E68C		); 
			text-align: center;
			padding-top: 13px
			
		}
		/*鼠标悬停在链接上面变红色*/
		.box_middle0 ul li a:hover{
			color:red;
		}		
		.box_middle1 ul li a:hover{
			color:red;
		}		
		.box_middle2 ul li a:hover{
			color:red;
		}
    </style>









</head>

<body>
<div class="biggestbox">
	<div class="topbox"><img src="images/13.jpg" alt=""></div>
	<div class="leftbox"><img src="images/14.jpg" alt=""></div>
	<div class="rightbox"><img src="images/14.jpg" alt=""></div>
	<div class="bottombox"></div>
<div class="box1">	
	<!-- 二级菜单部分 -->
	<div class="box0">
		<ul>
			<li>
				<a href="">首页</a>
				<ul>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
				</ul>
			</li>			
		</ul>

		<ul>
			<li>
				<a href="">机构设置</a>
				<ul>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
				</ul>
			</li>			
		</ul>

		<ul>
			<li>
				<a href="">党建动态</a>
				<ul>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
				</ul>
			</li>			
		</ul>

		<ul>
			<li>
				<a href="">作风建设</a>
				<ul>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
				</ul>
			</li>			
		</ul>

		<ul>
			<li>
				<a href="">通知公告</a>
				<ul>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
				</ul>
			</li>			
		</ul>

		<ul>
			<li>
				<a href="">资料下载</a>
				<ul>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
				</ul>
			</li>			
		</ul>

		<ul>
			<li>
				<a href="">学习园地</a>
				<ul>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
				</ul>
			</li>			
		</ul>

	</div>
        <!-- 以下为中间部分-->
        <div class="box_middle0">
<!-- 最左边******************************** -->
		<div class="box_middle0_0">
			<ul id="ul0"><li id="li0">通知公告  　 　　　　　　<span ><a href="">更多>></a></span></li></ul>
			<br>
			<ul id="ul1" type="aquare">
				<li><a href="">***********...</a></li>
				<li><a href="">**************...</a></li>
				<li><a href="">***********...</a></li>
				<li><a href="">**********...</a></li>
				<li><a href="">*********...</a></li>
			</ul>
		</div>

		   <div class="box_middle0_1">
					<ul id="ul2"><li id="li0">资料下载  　 　　　　　　<span ><a href="">更多>></a></span></li></ul>
					<br>
					<ul id="ul1" type="square">
						<li><a href="">**********...</a></li>				
						<li><a href="">********</a></li>				
						<li><a href="">**************</a></li>				
						<li><a href="">**************...</a></li>				
						<li><a href="">**************...</a></li>				
						<li><a href="">**************...</a></li>				
					</ul>
					<div class="tubiao0" ><a href=""><img src="images/11.jpg" alt=""></a></div>
					<div class="tubiao1"><a href=""><img src="images/12.jpg" alt=""></a></div>

		    </div>

        </div>

<!-- ************************************************** -->
        <div class="box_middle1" > 
        	<!-- 轮播图片部分 -->
        	<div class="innnerbox" id="innnerbox0">
        		<!-- width="422px" height="223px" -->
					<img src="images/1.jpg" alt=""  id="img1">

					<div id="one">1</div>
					<div id="two">2</div>
					<div id="three">3</div>
					<div id="four">4</div>
					<div id="five">5</div>
					<div id="six">6</div>
					<div id="text">机关党委进行“不忘初心，牢记使………</div>

<!--下方文字链接******  -->
        		
        		<div class="innnerbox1">
        		<h1>党建动态 　　　　　　　　　　　　　　　　<span><a href="">更多>></a></span></h1><br> 
        		<hr align="center" size="0.001px" color="#FF9933" width="95%">
					<div class="innnerbox2">
						<ul type="square">
						<li><a href="">**************垒，...2019-11-14</a></li>
						<li><a href="">**************...2019-11-11</a></li>
						<li><a href="">**************2019-11-07</a></li>
						<li><a href="">**************...2019-11-05</a></li>
						<li><a href="">**************心、...2019-11-01</a></li>
						<li><a href="">**************会2019-10-30</a></li>
						<li><a href="">**************活动2019-10-30</a></li>
						
					</ul>
					</div>		
				</div>

        	</div>
            
        </div>

<!-- 最右边************************** -->
        <div class="box_middle2">
			
		<div class="box_middle0_0">
			<ul id="ul3"><li id="li0">作风建设  　 　　　　　<span ><a href="">更多>></a></span></li></ul>
			<br>
			<ul id="ul1" type="aquare">
				<li><a href="">紧**************——学...</a></li>
				<li><a href="">我**************风建设评...</a></li>
				<li><a href="">***************置会</a></li>
				<li><a href="">**************作职责及服...</a></li>
				<li><a href="">*********************口”、...</a></li>
				<li><a href="">***********************及服...</a></li>
			</ul>
		</div>

		   <div class="box_middle0_1">
					<ul id="ul3"><li id="li0">学习园地  　 　　　　　<span ><a href="">更多>></a></span></li></ul>
					<br>
					<ul id="ul1" type="square">
						<li><a href="">**************“...</a></li>				
						<li><a href="">****************************建...</a></li>				
						<li><a href="">v**************（国**************...</a></li>				
						<li><a href="">v*************局...</a></li>				
										
						<li><a href="">**************牢记使命”...</a></li>				
					</ul>
					
					<div class="tubiao2">
						<select name="" id="" tyle="width:175px;">
							<option value="" >----------校内导航-----------</option>
							<option value="">————————————</option>
						</select>

					</div>
		   </div>




        </div>

<!-- 底部的盒子 -->
        <div class="box_bottom"> 
			<p>版权所有徐州工程学院机关党委 All rights reserved </p>
            <p>地址：江苏省徐州市新城区丽水路 电话：0516-83105582 邮箱：jgdw@xzit.edu.cn </p>

        </div>


</div>
</div>	

</body>
</html>
<script>
// 首获取相关dom

var innnerbox = document.getElementById('innnerbox0');
var img =document.getElementById('img1');
var one =document.getElementById('one');
var two =document.getElementById('two');
var three =document.getElementById('three');
var four =document.getElementById('four');
var five =document.getElementById('five');
var six =document.getElementById('six');
var text =document.getElementById('text');


//构造图片和文字数组
var arr_img = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg'];
var arr_text = ['**************...','**************...','继续**************调研...','紧盯问**************改--...','****************************开展...','**************察反馈意见和“不...'];
// var arr_number = ['one','two','three','four','five','six']
//图片轮播
    var currentIndex = 1;
    function lunbo() {
		img.src = arr_img[currentIndex];
		text.innerText = arr_text[currentIndex];
		// number.innerNumber =arr_number[currentIndex];
		currentIndex = ++currentIndex%6;
	}
//使用setInterval来完成轮播
    var pasue = setInterval(lunbo,2000);

//鼠标悬停时停止轮播
//使用clearInterval来完成
innnerbox.addEventListener('mouseover',function() {
		clearInterval(pasue);
	})
// 鼠标离开后，继续轮播
innnerbox.addEventListener('mouseout',function() {
		pasue = setInterval(lunbo,2000);
	})

//手动切换图片
one.addEventListener('click',function(){
		currentIndex =0;
		img.src = arr_img[currentIndex];
		text.innerText = arr_text[currentIndex];
})
two.addEventListener('click',function(){
		currentIndex =1;
		img.src = arr_img[currentIndex];
		text.innerText = arr_text[currentIndex];
})
three.addEventListener('click',function(){
		currentIndex =2;
		img.src = arr_img[currentIndex];
		text.innerText = arr_text[currentIndex];
})
four.addEventListener('click',function(){
		currentIndex =3;
		img.src = arr_img[currentIndex];
		text.innerText = arr_text[currentIndex];
})
five.addEventListener('click',function(){
		currentIndex =4;
		img.src = arr_img[currentIndex];
		text.innerText = arr_text[currentIndex];
})
six.addEventListener('click',function(){
		currentIndex =5;
		img.src = arr_img[currentIndex];
		text.innerText = arr_text[currentIndex];
})

//鼠标悬停时停止轮播
//使用clearInterval来完成
innnerbox.addEventListener('click',function() {
		clearInterval(pasue);
	})
// 鼠标离开后，继续轮播
innnerbox.addEventListener('click',function() {
		pasue = setInterval(lunbo,2000);
	})

</script>

代码二：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页2</title>
	<style>
	*{margin:0px;padding:0px;}
		.bigbox{
			width: 1900px;
			height: 2800px;
			border:solid springgreen 3px;
			margin-top:50px;
			position: relative;

		}
		.top{
			width:1900px;
			height: 220px;
			background-color: pink;
			position: absolute;
			top:0px;
			left:0px;
		}
		.logo{
			width:1900px;
			height: 170px;
			background-color: aqua;
		    background-image: url(images/00.jpg);
			position: absolute;
			top:0px;
			left:0px;
		}
		#input1{
			width:400px;
			height: 50px;
			font-size:20px;
			position: absolute;
			right:348px;
			top:68.5px;
		}

		#input2{
			width:60px;
			height: 52px;
			position: absolute;
			top:68.5px;
			right: 750px;
		}
		.caidan{
			z-index: 100;
			width:1900px;
			height: 50px;
			background-color:deeppink;
			position: absolute;
			top:170px;
			left:0px;
		}
		.big0{
			width:1250px;
			height: 2100px;
			border:#d3e2fe solid 1px;
			position: absolute;
			top:240px;
			left:325px;
		}
		.lunbo{
			width: 1250px;
			height:330px;
			border-bottom: solid lime 2px;
		}
		.left0{
			width:880px;
			height: 410px;
			border:solid #d3e2fe 2px;
			position: absolute;
			left:0px;
			top:350px;
		}
		.left01{
			width: 880px;
			height: 360px;
			font-family: 宋体;
			font-size: 18px;
			line-height: 50px;
			/*background-color:aqua;*/
			position: absolute;
			top:50px;


		}

		.left00{
			width: 880px;
			height: 50px;
			line-height: 50px;
			color:#245BBf;
			text-align: left;
			background:linear-gradient(to bottom, #fbfdff 50%, #d5e5fe);
			position: absolute;
			top:0px;
		}
		.left1{
			width:880px;
			height: 400px;
			border:solid #d3e2fe 2px;
			position: absolute;
			left:0px;
			top:740px;
		}
		.left10{
			width:880px;
			height: 350px;
			font-family: 宋体;
			font-size: 18px;
			line-height: 50px;
			/*border:solid silver 2px;*/
			/*background-color: aqua*/
			position: absolute;
			left:0px;
			top:50px;
		}

		.left2{
			width:880px;
			height: 280px;
			border:solid #d3e2fe 2px;
			position: absolute;
			left:0px;
			top:1180px;
		}

		.left20{
			width:880px;
			height: 230px;
			font-family: 宋体;
			font-size: 18px;
			line-height: 40px;
			/*border:solid silver 2px;*/
			/*background-color: aqua;*/
			position: absolute;
			left:0px;
			top:50px;
		}
		.left0 a{text-decoration: none}
		.left1 a{text-decoration: none}
		.left2 a{text-decoration: none}
		.left0 ul li  {list-style: none} 
		.left1 ul li  {list-style: none} 
		.left2 ul li  {list-style: none} 
		.left0 ul li a  {color:black; }
		.left1 ul li a  {color:black; }
		.left2 ul li a  {color:black; }

		.left0 a span:hover{text-decoration: underline;color:red;}
		.left1 a span:hover{text-decoration: underline;color:red;}
		.left2 a span:hover{text-decoration: underline;color:red;}
		.bottom{
			width:1250px;
			height: 480px;
			border:solid #d3e2fe 1px;
			position: absolute;
			left:0px;
			bottom:60px;
		}
		.bt1{
			width:1250px;
			height: 390px;
			position: absolute;
			top:50px;
		}

		.bt2{
			width:1250px;
			height: 50px;
			line-height: 50px;
			color:#245BBf;
			text-align: left;
		    background:linear-gradient(to bottom, #fbfdff 50%, #d5e5fe);
		    border-top: #d5e5fe solid 1px;
			position: absolute;
			top:300px;

		}
		.tu{
			width:280px;
			height: 200px;
			float: left;
			margin-top: 15px;
			margin-left: 20px;
			/*background-color: skyblue;*/
			border:solid #d3e2fe 1px;

		}
		.tu img{
			width:100%;
			height: 100%;
		}
		.bt00{
			width: 1250px;
			height: 50px;
			line-height: 50px;
			color:#245BBf;
			text-align: left;
			border-top: #d5e5fe solid 1px;
			background:linear-gradient(to bottom, #fbfdff 50%, #d5e5fe);
			position: absolute;
			top:0px;
		}
		#st0{
			width:250px;
			height:40px;
			/*background-color: pink;*/
			position: absolute;
			top:380px;
			left:30px;
		}
		#st1{
			width:250px;
			height:40px;
			position: absolute;
			top:380px;
			left:380px;
		}
		/*轮播部分*/
		.lunbo img{width: 100%;height: 100%;}
		#left,#right{
			width: 70px;
			height: 80px;
			font-size: 30px;
			font-family: 微软雅黑;
			text-align: center;
			line-height: 80px;
			color:white;
			background-color:black;
			opacity:0.6;
		}
		#left{
			position: absolute;
			left:0px;
			top:135px;
		}
		#right{
			position: absolute;
			top:135px;
			right:0px;
		}
		/**/
		.caidan a{text-decoration: none;
		}
		.caidan ul li{list-style: none;float: left;}
		.caidan ul li a{
			width: 210.8px;
			height: 50px;
			font-size: 18px;
			font-size: 20px;
			font-family: 微软雅黑;
			text-align: center;
			line-height: 50px;
			color:black;
			background:linear-gradient(to bottom, #fbfdff 50%, #d5e5fe);
			display: block;
			
		}
		
		.caidan ul li ul{display: none;position: absolute;}
		.caidan ul li ul li{float: none;}
		.caidan ul li:hover ul{display: block;}
		.last{
			text-align: center
			background-color: pink;
			position: absolute;
			bottom: 8px;
			left:420px;

		}
		#left:hover{cursor: pointer;}
		#right:hover{cursor: pointer;}
		.tu:hover{cursor: pointer;}
		.rights{
			width:350px;
			height:1200px;
			border:solid 2px #d3e2fe ;
			position: absolute;
			right:2px;
			top:350px;
		}
		.rts0{
			width:320px;
			height: 300px;
			border:solid 1px  #d5e5fe;
			position: absolute;
			top:10px;
			left:10px;
			/*margin-top:8px*/
		}	.rts1{
			width:320px;
			height:300px;
			border:solid 1px #d5e5fe;
			position: absolute;
			top:320px;
			left:10px;
			/*margin-top:8px*/
		}	.rts2{
			width:320px;
			height: 300px;
			border:solid 1px  #d5e5fe;
			position: absolute;
			top:630px;
			left:10px;
			/*margin-top:8px*/
		}	.rts3{
			width:320px;
			height: 200px;
			border:solid 1px  #d5e5fe;
			position: absolute;
			top:950px;
			left:10px;
			/*margin-top:8px*/
		}
	</style>
</head>
<body>
	<center>
	<div class="bigbox">
		<div class="top">
			<div class="logo">
				<input type="text" id ="input1" placeholder="请输入搜索内容">
				<input type="image" src="images/0.jpg" id ="input2">
			</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>
							<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>
							<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>
							<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>
							<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>
							<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>
							<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>
							<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>
							<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>
							<li><a href="#">二级菜单</a></li>
						</ul>

					</li>


				</ul>
			</div>
		</div>

		<div class="big0">
			<div class="lunbo" id ="box1">
				<img src="images/1.jpg" alt="" id ="img1">
				<div id ="left"> < </div>
				<div id ="right"> > </div>
			</div>

			<div class="left0">
				<div class="left00">　　招生动态</div>
				<div class="left01">
					<ul>
						<li><a href="#">　　<span style="color:red">2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
					</ul>
				</div>
			</div>	
			<div class="left1">
				<div class="left00">　　招生政策</div>
				<div class="left10">
						<ul>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
					</ul>
				</div>
			</div>	
			<div class="left2">
				<div class="left00">　　招聘指南</div>
				<div class="left20">
					<ul>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
						<li><a href="#">　　<span>2019级普高新生录取通知书邮寄通知！</span>　　　　　　　　　　　　　　　　　　　　　　　　2019-08-03</a></li>
					</ul>
				</div>
			</div>
			<div class="bottom">
					<div class="bt00">　　校园风采</div>
					<div class="bt1">
					  <div class="tu"><a href="#"></a><img src="images/6.jpg" alt=""></div>
					  <div class="tu"><a href="#"></a><img src="images/10.jpg" alt=""></div>
					  <div class="tu"><a href="#"></a><img src="images/8.jpg" alt=""></div>
					  <div class="tu"><a href="#"></a><img src="images/9.jpg" alt=""></div>
				    </div>
				    <div class="bt2">　　相关链接</div>
				    <select name="" id="st0">
								<option value="">二级学院</option>
								<option value="">——————————</option>
								<option value="">二级学院</option>
								<option value="">二级学院</option>
								<option value="">二级学院</option>
						</select>
						<select name="" id="st1">
								<option value="">省招办</option>
								<option value="">——————————</option>
								<option value="">省招办</option>
								<option value="">省招办</option>
								<option value="">省招办</option>
								<option value="">省招办</option>
						</select>
			</div>	
			 <div class="last" style="color:blue;">徐州工程学院招生处    Email:zsb@xzit.edu.cn</div>
			 <div class ="rights">
				<div class="rts0"></div>
				<div class="rts1"></div>
				<div class="rts2"></div>
				<div class="rts3"></div>
			 </div>
		</div>

        
	</div>

	</center>
</body>
</html>
	<script>
		var box = document.getElementById('box1')
		var img = document.getElementById('img1')
		var left = document.getElementById('left')
		var right = document.getElementById('right')
		var arr_img =['images/1.jpg','images/2.jpg','images/3.jpg']
		var currentIndex = 1;
		function slide(){
			img.src = arr_img[currentIndex];
			currentIndex = ++currentIndex%3;
		}

		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%3;
			if(currentIndex < 0){
				currentIndex +=3;
			}
			img.src = arr_img[currentIndex];
		})

		right.addEventListener('click',function(){
			currentIndex = ++currentIndex%3;
			img.src = arr_img[currentIndex];
		})
	</script>

好啦就这些了ヾ(≧▽≦*)o

LL__Sunny

关注

4
点赞
踩
19

收藏

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

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

扫一扫