Team:XMU-China/css/unit
@charset "utf-8";
/* CSS Document */
body {
width: 100%;
margin:0;
padding:0;
overflow: auto;
background-image: url(
);
}
table{ margin:0 auto; } .guide{ font-family: Verdana; letter-spacing: 1px; width: 100%; margin-top:2%; padding: 0; } .guide ul{/*这里必须设置内边距和外边距，因为浏览器会给ul设定默认值，会把导航栏挤歪*/ margin: 0; padding: 0; list-style: none; } .guide li.dropdown{/*本来ul是竖直排列的，对所有li元素进行float:left他就会自动全部靠左*/ float: left; position :relative; margin-left: 5px; } .guide ul li a,.guide ul li a:hover {/*对所有项目a标签设置统一样式*/ display: block; text-align: center; text-decoration: none; border-radius: 25px; box-shadow: 0px 0px 15px rgba(0,0,0,0.4); z-index=1000; height:50px; line-height: 50px;/*height和line-height设置为一样的高度文字就会水平竖直居中 */ font-size: 15px; } .guide ul li a{/*统一设置导航栏下拉时透明背景*/ color: #000000; background-image: url(../pictures/T--XMU-China--background.png); } .guide ul li a:hover{ color: #FFFFFF; text-shadow: 0px 0px 10px #000000; } .guide ul li a img{ height: 32px; width: 32px; padding-top: 8px; margin: 0; } .guide ul li#Home,.guide ul li#Home:hover{ width: 50px; } .guide ul li#Home:hover a {/*鼠标移上去的时候字体和背景都会变色，移开又会变回来 */ background-color: #FAEBD7; } .guide ul li#Project{ width: 140px; } .guide ul li#Project:hover a{ background-color:#CCFFCC; } .guide ul li#Notebook{ width: 120px; } .guide ul li#Notebook:hover a{ background-color: #FFFF99; } .guide ul li#Hardware{ width: 175px; } .guide ul li#Hardware:hover a{ background-color:#CCFFFF; } .guide ul li#HP{ width: 190px; } .guide ul li#HP:hover a{ background-color:#FFCCCC; } .guide ul li#Team{ width: 175px; } .guide ul li#Team:hover a{ background-color: #CCCCFF; } .guide ul li ul {/*实现下拉菜单隐藏*/ display: none; } .guide ul li:hover ul {/*这里是弹出的下拉菜单*/ display: block; position: absolute; padding:0; } .guide ul li#Project:hover ul { width: 140px; } .guide ul li#Notebook:hover ul { width: 120px; } .guide ul li#Hardware:hover ul { width: 175px; } .guide ul li#HP:hover ul { width: 190px; } .guide ul li#Team:hover ul { width: 175px; } .guide ul li:hover ul li{ margin: 8px 0; } .guide ul li:hover ul li a {/*定义下拉菜单里的a标签*/ display: block; color: #000000; font-size: 15px; } .guide ul li:hover ul li a:hover {/*下拉菜单a标签的伪类设置*/ color: #FFFFFF; text-shadow: 0px 0px 10px #000000; }
.title{
width: 100%;
background-image: url(
);
background-size:100% 100%;
height: 500px;
line-height: 500px;
color:#000000;
text-align: center;
font-family:"fredericka-the-great","Gill Sans",spirax,Impact, "Franklin Gothic Bold", "Arial Black", "sans-serif";
font-size: 80px;
letter-spacing: 5px;
font-weight: 300;
text-shadow: 5px 5px 5px #FFFFFF;
margin:0 0 50px 0;
}
.column {
font-family:Verdana;
width: 60%;
margin-left:auto;
margin-right:auto;
padding: 2% 4%;
background-color: #FFFFFF;
border-radius: 50px; box-shadow: #666666 0px 0px 30px;
}
.column .subtitle{ font-family:"fredericka-the-great","cabin-sketch",Verdana; font-weight: 400; font-size: 36px; word-spacing: 8px; color: #000000; display: inline-block; vertical-align: middle; margin-top: 20px; margin-bottom: 20px; } .column .line {
display: inline-block;
text-align: center;
width: 270px;
vertical-align: 0%;
border-top: 2.5px dashed #000000;
margin: 0 32px; } .column p{ font-size: 16px; letter-spacing: 0.5px; line-height: 25px; word-spacing: 3px; margin-bottom: 30px; margin-left:2.5%; margin-right:2.5%; } .gotop{ position:fixed; right:1%; bottom:2%; width:50px; height:35px; text-align:center; padding-top:20px; border-radius: 50%; overflow: hidden; } .gotop:hover:before{ top:50% } .gotop:hover .box-in{ visibility: hidden; } .gotop:before{ position: absolute; top: -60%; left: 50%; transform: translate(-50%,-50%); content:'go top'; font-family:Verdana; font-size: 16px; line-height: 20px; width: 40px; color:#000000; font-weight:bold; z-index: 10; } .gotop-in{ visibility: visible; display:inline-block; height:25px; width:25px; border: 5px solid; border-color: #666666 transparent transparent #666666; transform:rotate(45deg); } .foot{ width:100%; height:50px; text-align:center; margin-top:3%; margin-bottom: 2%; font-family:spirax,"Franklin Gothic Bold", "Arial Black", "sans-serif"; font-size: 16px; color:#000000; letter-spacing: 1.5px; }
