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"> 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">
<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;
}
width: 1346px;
/* padding-top: 5px;
padding-bottom: 5px;*/
background-color: white;
margin-left: auto;
margin-right: auto;
}
background-image: url(http://ozkbl6lk3.bkt.clouddn.com/header.png);
width: 1500px;
height: 114px;
background-repeat: no-repeat;
}
position: absolute;
top: 10%;
left: 75%;
}
position: absolute;
top: 3%;
left: 75%;
}
/*自动变换图片的设置*/
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;
}