SOURCE

console 命令行工具 X clear

                    
>
console
<!--使用浮动布局来实现云南大学的英文版静态首页-->
	
<body id="allcontent">
	<header>
		<div id = "header">
			<div id="translate">
				<a href="#" class="decoration">中文 </a>
				<a href="#" class="decoration">  Contact Us</a>
			</div>
			<form id = "form" class="btn_top_right fr">
				<input type = "search" name = "search" value = "Search" class="left">
				<input type = "submit" name = "submit" value="submit" class="left">
			</form>
		</div>
	</header>
	
	<nav style="width: 1346px">
		<ul>
			<div class = "dropdown">
				<a href="#ABOUT" class = "dropbtn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ABOUT</a> 
				<div class = "dropdown-content">
					<a href = "#">Overview</a>
					<a href = "#">History</a>
					<a href = "#">Administration</a>
				</div>
			</div>
			<div class = "dropdown">
				<a href="#NEWS&EVENTS" class = "dropbtn">NEWS&EVENTS</a> 
				<div class = "dropdown-content">
					<a href = "#">News</a>
					<a href = "#">Upcoming Events</a>
				</div>
			</div>
			<div class = "dropdown">
				<a href="#ACADEMICSL" class = "dropbtn">ACADEMICSL</a> 
				<div class = "dropdown-content">
					<a href = "#">Schools</a>
					<a href = "#">Programs</a>
					<a href = "#">Administration</a>
				</div>
			</div>
			<div class = "dropdown">
				<a href="#JOBS" class = "dropbtn">JOBS</a> 
				<div class = "dropdown-content">
					<a href = "#">Why Us</a>
					<a href = "#">Vacacies</a>
					<a href = "#">Foreign Colleagues</a>
				</div>
			</div>
			<div class = "dropdown">
				<a href="#ADMISSIONS" class = "dropbtn">ADMISSIONS</a> 
				<div class = "dropdown-content">
					<a href = "#">Undergraduate</a>
					<a href = "#">Graduate</a>
					<a href = "#">Postdoctoral Programs</a>
					<a href = "#">Visiting Scholars and Students</a>
					<a href = "#">Chinese Language Programs</a>
					<a href = "#">Scholarships</a>
				</div>
			</div>
			<div class = "dropdown">
				<a href="#ALUMNI" class = "dropbtn">ALUMNI</a> 
				<div class = "dropdown-content">
					<a href = "#">Alumni</a>
					<a href = "#">Funds & Donation</a>
				</div>
			</div>
			<div class = "dropdown">
				<a href="#CAMPUS LIFE" class = "dropbtn">CAMPUS LIFE</a> 
				<div class = "dropdown-content">
					<a href = "#">Health</a>
					<a href = "#">Visa</a>
					<a href = "#">Facilities</a>
				</div>
			</div>
				<div class = "dropdown">
				<a href="#INTERNATIONAL" class = "dropbtn">INTERNATIONAL</a> 
				<div class = "dropdown-content">
					<a href = "#">Global</a>
					<a href = "#">South & Southeast Asia</a>
				</div>
			</div>
			<div class = "dropdown">
				<a href="#CHINESE PROMOTION" class = "dropbtn">CHINESE PROMOTION</a> 
				<div class = "dropdown-content">
					<a href = "#">Confucius Institutes</a>
					<a href = "#">National Chinese promotion base</a>
					<a href = "#">Other Programs</a>
				</div>
			</div>
		</ul>
	</nav>
	
	<div id = "photos">
	</div>
	
	<div class="right">
			<h2 style="color: rgb(0,153,255);">ADMISSIONS<a href="#" style="color:dimgray; font-size: 18px;" class="decoration"> / more</a></h2>
			<a href="#" class="aside" class="decoration">UNDERGRADUATE</a>
			<a href="#" class="aside">GRADUATE</a>
			<a href="#" class="aside">INTERATIONAL ATUDENTS</a>
			<a href="#" class="aside">VISITING SCHOLARS STUDENTS</a>
			<a href="#" class="aside">SCHOLARSHHIPS</a>
		
			<a href="#" class="decoration img-aside" style="background-image: url(http://ozkbl6lk3.bkt.clouddn.com/zhonglou.jpg);">
				<p style="margin-bottom: 50px;">Language tips</p>
			</a>
			<a href="#" class="decoration img-aside" style="background-image: url(http://ozkbl6lk3.bkt.clouddn.com/zehu4.jpg)">Double top university construction 
			</a>
			<a href="#" class="decoration img-aside" style="background-image: url(http://ozkbl6lk3.bkt.clouddn.com/zehu2.jpg)">
			2017 Bangladesh-China Youth Camp
			</a>
			<h2 style="color: rgb(0,153,255);">LINKS</h2>
			<div class="dropdown">
				<!--<button class="dropbtn"></button>-->
				<input type="text" class="dropdown" style="background-color: aliceblue; width: 300px;height: 30px;">
				<div class="dropdown-content">
					<a href="#">Ministry of Education of People's Republic of  China</a>
					<a href="#">The State Council of the People's Republic of China</a>
				</div>
			</div>
	</div>
	
	<div style="margin-left: 40px">
		<h2 style="color: rgb(0,153,255);">NEWS<a href="#" style="color:dimgray; font-size: 18px;" class="decoration"> / more</a></h2>
		<img src="http://ozkbl6lk3.bkt.clouddn.com/mingyuanlou.jpg">
		<div class="right">
			<a href="#" class="special decoration">Yunnan University Recruitment Fair for 2018 gradutes
			</a>
			<p class="block">2017-11-13</p>
			<p>The "Yunnan University Recruitment Fair for 2018 Graduates" was held on November 9.
			</p>
		</div>
		<hr>
		<img src="http://ozkbl6lk3.bkt.clouddn.com/xunyicao2.jpg">
		<div class="right">
			<a href="#" class="special decoration">2001 Chemistry graduates come back to Yunnan University</a>
			<p class="block">2017-11-13</p>
			<p>On Oct 28, the School of Chemical Science and Technology of Yunnan University held a reunion for Class 1997 </p>
		</div>
		<hr>
		<img src="http://ozkbl6lk3.bkt.clouddn.com/zehu3.jpg">
		<div class="right">
			<a href="#" class="special decoration">Teaching competition held at Yunnan University</a>
			<p class="block">2017-11-08</p>
			<p>The 11th teaching competition of Yunnan University ended on November 4.Lasting for over two months, the total number of contestants is approximately 200.
			</p>
		</div>
		<br><br>
		
		<div class="right">
			<h2 style="color: rgb(0,153,255);">More...</h2>
			<img src="http://ozkbl6lk3.bkt.clouddn.com/tour.jpg">
			<a href="#" class="decoration" style="color: darkgray; margin-bottom: 40px">Come and have a wonderful campus tour</a>
			<img src="http://ozkbl6lk3.bkt.clouddn.com/tushuguanli.jpg">
			<a href="#" class="decoration" style="color:darkgray;">Library</a>
		</div>
		
		
		<h2 style="color: rgb(0,153,255);">HIGHLIGHTS</h2>
		<div>
			<img src="http://ozkbl6lk3.bkt.clouddn.com/zhigongtan.jpg">
			<a href="#" class="decoration" style="color: darkgray;margin-bottom: 40px">Yunnan University overview</a>
			<img src="http://ozkbl6lk3.bkt.clouddn.com/internationalization.jpg">
			<a href="#" class="decoration" style="color: darkgray">Internationalization</a>
		</div>
		
	</div>
	
	<div style="background-color: darkgrey;margin-top: 100px;text-align: center;">
		<a href="#" style="color: white;font-size: 15px;" class="decoration">return</a>
	</div>
	
	<footer style="background-color: rgb(204,204,204);margin-top: 3px;width: auto;height: 80px;padding-top: 40px;">
		<address>
		Copyright © 2017 Yunnan University. All rights reserved.  Presented by China Daily.
		</address>
	</footer>
<title>云南大学静态首页(float布局)</title>
	<link href="https://fonts.googleapis.com/css?family=Merriweather|Pacifico" rel="stylesheet">
	<link href="styles/navigation.css" rel="stylesheet">
	<!--<link href="styles/photos.css" rel="stylesheet">-->	

	html{
			font-family: 'Merriweather', serif;
		}
		#allcontent{
			width: 1346px;
/*			padding-top: 5px;
			padding-bottom: 5px;*/
			background-color: white;
			margin-left: auto;
			margin-right: auto;
      overflow-x: hidden;
		}
		#header{
			background-image: url(http://ozkbl6lk3.bkt.clouddn.com/header.png);
			width: 1500px;
			height: 114px;
			background-repeat: no-repeat;
		}
		#form{
			position: absolute;
			top: 10%;
			left: 75%;

		}
		#translate{
			position: absolute;
			top: 3%;
			left: 75%;
		}
		/*自动变换图片的设置*/
		#photos{
			background: url(http://ozkbl6lk3.bkt.clouddn.com/photo2.jpg);
			width: 1346px;
			height: 500px;
			animation-name: myphotos;
			animation-duration: 8s;
			animation-timing-function: ease;
			animation-delay: 5s;
			animation-iteration-count: infinite;
			animation-play-state: running;
			-webkit-animation-name: myphotos;
			-webkit-animation-duration: 8s;
			-webkit-animation-timing-function: ease;
			-webkit-animation-delay: 5s;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-play-state: running;
		}
		@keyframes myphotos{
			0% {
				background-image: url(http://ozkbl6lk3.bkt.clouddn.com/photo3.jpg);}
			25%{
				background-image: url(http://ozkbl6lk3.bkt.clouddn.com/photo2.jpg);
			}
			50%{
				background-image: url(http://ozkbl6lk3.bkt.clouddn.com/photo1.jpg);
			}
			75%{
				border-image: url(http://ozkbl6lk3.bkt.clouddn.com/photo2.jpg);
			}
			100%{
				background-image: url(http://ozkbl6lk3.bkt.clouddn.com/photo5.jpg);
			}
		}
		-webkit-@keyframes myphotos{
			0% {
				background-image: url(http://ozkbl6lk3.bkt.clouddn.com/photo3.jpg);}
			25%{
				background-image: url(http://ozkbl6lk3.bkt.clouddn.com/mingyuanlou2.jpg);
			}
			50%{
				background-image: url(http://ozkbl6lk3.bkt.clouddn.com/photo1.jpg);
			}
			75%{
				border-image: url(http://ozkbl6lk3.bkt.clouddn.com/photo2.jpg);
			}
			100%{
				background-image: url(http://ozkbl6lk3.bkt.clouddn.com/photo5.jpg);
			}
		}
		/*设置<div>块元素浮动在右边*/
		div.right{
			float: right;
			width: 400px;
			margin-right: 40px;
			margin-left: 40px;
		}
		/*设置底部栏*/
		footer{
			clear: both;
			text-align: center;
		}
		/*对链接的不同样式的设置*/
		a.special{
			color: blue;
			font-size: 20px;
		}
		a.aside{
			color: whitesmoke;
			display: block;
			padding: 20px;
			background-color: rgb(204,204,204);
			text-align: left;
			margin-bottom: 40px;
			font-size: 20px;
		}
		/*鼠标在链接上悬浮时,设置不同的样式*/
		a.aside:hover{
			color: aqua;
		}
		a.decoration:hover{
			text-decoration: underline;
		}
		/*设置文本为内联块*/
		p.block{
			display:inline-block;
			background-color: rgb(0,153,255);
			color: white;
			padding: 3px;
			margin: 0px;
		}
		/*设置侧边栏的图片的样式*/
		.img-aside{
			width: 370px;
			height: 120px;
			margin-bottom: 40px;
		}

/*设置导航栏的样式表*/
	
	ul {
	  list-style-type: none;
	  margin: 0px;
	  padding: 0px;
	  overflow: hidden;
	  background-color: rgb(0, 102, 204);
	}
	
	a,
	.dropbtn {
	  display: inline-block;
	  color: white;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	}
	
	a:hover .dropdown:hover .dropbtn {
	  background-color: aqua;
	}
	
	.dropdown {
	  display: inline-block;
	}
	
	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: rgba(55, 0, 255, 0.5);
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
	}
	
	.dropdown-content a {
	  color: white;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	}
	
	.dropdown-content a:hover {
	  background-color: palevioletred;
	}
	
	.dropdown:hover .dropdown-content {
	  display: block;
	}
  .btn_top_right{
			width: 530px;
			height: 28px;
			margin: 20px 0 0 0;
			display: inline-block;
		}
		.fr{
			float: right;
		}
		.fl{
			float: left;
		}