HTML+CSS+JavaScript制作简单页面

骑猪看日落 2024-02-05 20:31 18阅读 0赞

## 一 效果图 ##

![31727094dfc342ca96cb21bb69f55fc0.png][]

## 二 相关代码 ##

### 2.1 index.html ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<link rel="stylesheet" type="text/css" href="./css/shouye.css"/>
    		<title></title>
    	</head>
    	<body>
    		<div class="zer">
    		<img src="./img/上方电话.png"/>
    		</div>
    		<div class="zero">
    		<img src="./img/上方二维码.png"/>
    		</div>
    		<div id="nav">
    			<ul>
    				<li><a href="#">Engish| </a>
    				<li><a href="#">软件下载| </a>
    				<li><a href="#">香港公司 </a>
    			</ul>
    		</div>
    		<div id="navb">
    			<ul>
    				<li>服务热线:</li>
    				<h6 style="color: blue;font-size: 15px;">400-8888-90</h6>
    			</ul>
    		</div>	
    		<nav id="navbar">
    			<ul>
    				<li class="two"><img src="./img/综合案例左边_01.png"/>
    				<li class="to"><img src="./img/诚信为本.png"/>
    				<li><a href="首页.html">首页</a>
    				<li><a href="#">研究中心</a>
    				<li><a href="#">资产管理</a>
    				<li><a href="#">期权世界</a>
    				<li><a href="#">南华指数</a>
    				<li><a href="#">衍生品</a>
    				<li><a href="#">智创分析</a>
    				<li><a href="#">客服中心</a>
    				<li><a href="#">投资者源地</a>
    				<li><a href="#">金融期货</a>
    				<li><a href="#">走进南华</a>
    				<li><a href="#">营业部之家</a>
    				<li class="one"><img src="./img/二维码.png" alt="南华期货二维码" />
    			</ul>
    		</nav>
    
    		<div id="navba">
    			<ul>
    				<li></li>
    			</ul>
    		</div>
    		<div id="navbb">
    			<ul>
    				<li></li>
    			</ul>
    		</div>
    		<div id="shezhi">
    			<object data="轮播图.html" style="width: 1550px;height:400px;"></object>
    		</div>
    		<div id="foot">
    			<ul>
    				<li><img src="./img/南华活动.png"/></li>
    				<li><img src="./img/公司公告.png"/></li>
    				<li><img src="./img/南华持仓.png"/></li>
    				<li><img src="./img/库存报告.png"/></li>
    				<li><img src="./img/软件下载.png"/></li>
    				<li><img src="./img/客服中心.png"/></li>
    				<li><img src="./img/金融与期权.png"/></li>
    			</ul>
    		</div>
    		<div id="foo">
    			<ul>
    				<li class="three">
    				<img src="./img/下方图标1.png" alt="" />
    				</li>
    				<li class="four"><img src="./img/下方图标2.png" alt="" /></li>
    				
    				<li class="five">
    					<h2 class="she1">南华期货(香港)</h2>
    					<p class="she2">主要从事商品期货经济、金融期货经济、期货投资咨询等相关的工作</p>
    					<a href="南华期货.html"><button>查看详细>></button></a>
    					</li>
    			</ul>
    		</div>
    		<div>
    			<table>
    			  <tr class="color1">
    			    <td>12月30日</td>
    			    <td>指数点</td>
    			    <td>变化</td>
    			  </tr>
    			  <tr>
    			    <td>南华商品指数</td>
    			    <td class="color2">1007.89</td>
    			    <td class="color3">16.55</td>
    			  </tr>
    			  <tr>
    			    <td>南华商品指数</td>
    			    <td class="color2">1429.92</td>
    			    <td class="color3">32.95</td>
    			  </tr>
    			  <tr>
    			    <td>南华商品指数</td>
    			    <td class="color2">781.37</td>
    			    <td class="color3">16.55</td>
    			  </tr>
    			  <tr>
    			    <td>南华商品指数</td>
    			    <td class="color2">1777.25</td>
    			    <td class="color3">27.89</td>
    			  </tr>
    			  <tr>
    			    <td>南华商品指数</td>
    			    <td class="color2">1007.89</td>
    			    <td class="color3">16.55</td>
    			  </tr>
    			  <tr>
    			    <td>南华商品指数</td>
    			    <td class="color2">1007.89</td>
    			    <td class="color3">25.77</td>
    			  </tr>
    			</table>
    			<div>
    				<li class="five1"><a href="shijian.html"><img src="./img/日历.png" alt="" /></a></li>
    			</div>
    			<div>
    				<li class="six"><img src="./img/中间图.png" alt="" /></li>
    			</div>
    		</div>
    		<div id="foooo">
    			<ul>
    				<a href="#"><li>财经导航</li></a>
    				<a href="#"><li>监管部门交易所</li></a>
    				<a href="#"><li>农林 工业品</li></a>
    				<a href="#"><li>南华博客</li></a>
    				<a href="#"><li>南华专栏</li></a>
    				<a href="#"><li>南华微博</li></a>
    			</ul>
    		</div>
    		<div id="fooooo">
    			<ul>
    				<a href="#"><li>中国证券报</li></a>
    				<a href="#"><li>期货日报</li></a>
    				<a href="#"><li>上海证券</li></a>
    				<a href="#"><li>证券时报</li></a>
    				<a href="#"><li>21世纪财经</li></a>
    				<a href="#"><li>新浪-财经新闻</li></a>
    				<a href="#"><li>第一财经</li></a>
    				<a href="#"><li>金融界</li></a>
    				<a href="#"><li>和讯网</li></a>
    				<a href="#"><li>东方财富网</li></a></br>
    				<a href="#"><li>期货中国</li></a>
    				<a href="#"><li>经济参考</li></a>
    				<a href="#"><li>南华证券网</li></a>
    				<a href="#"><li>凤凰财经</li></a>
    			</ul>
    		</div>
    		</div>
    		<div id="footer">
    			<div id="foter">
    			<p class="eight">股指期货投资者教育专栏（浙江期货行业协会宣）</p>
    			<p class="nine">版权所有2004-2014未经南华期货股份有限公司同意请勿转载</br>
    			浙ICP备05036925号</br>
    			COPYRIGHT 2009.NANHUA FUTURES CO,LTD,CHINA ALL RIGHT RESERVED </p>
    			</div>
    		</div>
    		<div class="ten">
    			<p>关注我们：</p>
    		</div>
    		<div id="fot">
    			<ul>
    				<li><a href="https://im.qq.com/mobileqq/feature"><img src="./img/QQ.png"/></a></li>
    				<li><a href="#"><img src="./img/微信.png"/></a></li>
    				<li><a href="#"><img src="./img/新浪.png"/></a></li>
    				<li><a href="#"><img src="./img/收藏.png"/></a></li>
    			</ul>
    		</div>
    		<div id="fo">
    			<ul>
    				<a href="#"><li> Q Q</li></a>
    				<a href="#"><li>微信</li></a>
    				<a href="#"><li>微博</li></a>
    				<a href="#"><li>收藏网站</li></a>
    			</ul>
    		</div>
    		<div id="f">
    			<ul>
    				<li>全国统一客服热线:</li></br>
    				<li style="color: white;font-size: 15px;">400-8888-910</li>
    			</ul>
    		</div>	
    		<div class="twelve">
    		<img src="./img/下方电话.png"/>
    		</div>
    		<div id="fooot">
    			<ul>
    				<li>客服邮箱:</li></br>
    				<li style="color: white;font-size: 15px;">40008888910@qq.com</li>
    			</ul>
    		</div>	
    
    
    	</body>
    </html>

### 2.2 轮播图.html ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			img{
    				position:absolute;
    				top:4%;
    				left:20%;
    				width:800px;
    				height:280px;
    			}
    			.picture {
    				background:url("./img/综合背景.png");
    			    position: absolute;
    				top:14.5%;
    			    width: 1550px;
    			    height: 302px;
    			    margin: 0 auto;
    			    /* border: 2px solid rgb(14, 63, 221); */
    			    overflow: hidden;
    			 }
    			
    			#image-container img{
    				width:100px;
    			}
    			/* 圆点所在的p (容器)  */
    			 .radius {           
    			    width: 0px;
    				color:black;
    			    height: 0px;
    			    position: absolute;
    			    top:86%;
    				text-align: center;
    			} 
    			
    			.pg {                         
    			    position: absolute;
    			    margin: 0;
    			    width: 100%;
    			    height: 20px;
    			    background-color: rgba(0, 0, 0, .4);
    			    text-align: center;
    			    font-size: 16px;
    			    font-weight: 600;
    			    color: #fff;
    			}
    			
    			.title {
    			    position: absolute;
    			    width: 100%;
    			    bottom: 0px;
    			    text-align: center;
    			    font-size: 16px;
    			    font-weight: 600;
    			    color: rgb(0, 0, 0);
    			  }
    			
    			span {
    			    display: inline-block;
    			    border: 0px solid #000000;
    			    border-radius: 50%;
    				width:0px;
    			}
    			
    			
    			.active {
    			   border: 1px solid #1d08ba;
    			}
    			
    			/* 左右箭头  */
    			.arrowhead-left,
    			.arrowhead-right {
    				position: absolute;
    				width: 41px;
    			    height: 69px;
    			    font-size: 30px;
    			    line-height: 70px;
    			    text-align: center;
    			    color: #D6D8D4;
    			    background-color: rgba(0,0,0,.3);
    			}
    			
    			.arrowhead-left {
    			   left: 0;
    			   top: 40%;
    			  }
    			
    			  .arrowhead-right {
    			     right: 2%;
    			     top: 40%;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div class="picture">
    		    
    		 
    		    <img src="" alt="">
    		   
    		    <p class="radius"></p>
    		    
    		   <p class="title"></p>
    		
    		    
    		    <div class="arrowhead-left" id="al"> < </div> 
    		    <div class="arrowhead-right" id="ar"> > </div>
    		</div>
    		<script>
    			var zer = document.querySelector(".zer");
    		    var address = ["./img/中间轮播图.png", "./img/货币.webp", "./img/纸币.webp", "./img/银行.webp", "./img/中国邮政.webp", "./img/中国银行.webp"];
    		    //  var imgs = document.getElementsByTagName("img");
    			var container = document.getElementById("image-container");
    		    var imgs = document.querySelector("img");
    		    var len = address.length;               //图片地址的数量为len
    		    var str = "";
    		    var pp = document.getElementsByTagName("p");//获取的是p标签的集合
    		    //  var pp  = document.querySelector("p");    //获取的是一个元素
    		    var al = document.getElementById("al");
    		    var ar = document.getElementById("ar");
    		    var n = 0 ;
    		
    		    //添加span标签（小圆点），个数为len个
    		    for (i = 0; i < len; i++) {
    		        str += ' <span></span>'
    		    }
    		    pp[1].innerHTML = str;
    		   
    		    var spans = pp[1].getElementsByTagName('span');  //获取p[1]里所有span标签
    		    spans[0].className = 'active';                  //给第一个span标签添加样式 active
    		
    		    for (i = 0; i < len; i++) {
    		        spans[i].index = i;              //自定义索引值
    		    
    		        spans[i].onmouseover = function () {            //鼠标指向圆点时的事件
    		            for (i = 0; i < len; i++) {
    		                spans[i].className = "";               //通过循环，清除所有圆点的类名
    		            }
    		            n=this.index ;
    		            this.className = 'active';                 //给鼠标移入的圆点添加类名
    		            imgs.src = address[this.index];
    		            pp[0].innerHTML = [this.index + 1] + "/6";    
    		            pp[2].innerHTML = "" + [this.index + 1];
    		            
    		        }
    		       
    		    }
    		        
    		    ar.onclick = function () {            //右侧箭头，点击一次图片向右换一张
    		        n++;
    		       if (n>5) {
    		          n=0;  
    		       } 
    		       for (i = 0; i < len; i++) {
    		            spans[i].className = "";
    		        }
    		
    		        spans[n].className = "active";
    		        imgs.src = address[n];
    		        pp[0].innerHTML = (n+1) + "/6";
    		        pp[2].innerHTML = "" +(n+1);
    		      
    		    }
    		
    		    al.onclick = function () {        // //左侧箭头，点击一次图片向左换一张
    		      n--;
    		     if (n<0) {
    		         n=(len-1);
    		     }
    		     for (i = 0; i < len; i++) {
    		          spans[i].className = "";
    		      }         
    		      spans[n].className = "active";
    		      imgs.src = address[n];
    		      pp[0].innerHTML = (n+1) + "/6";
    		      pp[2].innerHTML = "" +(n+1);
    		    } 
    		   
    		   setInterval(ar.onclick,3000);             //添加定时器  setInterval（函数，间隔时间单位为毫秒）
    		                                             //此次添加的函数为点击右侧箭头，间隔为3秒
    		</script>
    	</body>
    </html>

### 2.3 南华期货.html ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			h1{
    				text-align:center;
    				color:lightpink;
    				background-color:rgb(29, 32, 158);
    			}
    			p{
    				text-indent: 2em;
    				color:black;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>欢迎来到南华期货</h1>
    		<p>主要从事商品期货经济、金融期货经济、期货投资咨询等相关的工作</p>
    	</body>
    </html>

### 2.4 shouye.html ###

/* 导航条 CSS样式 */
    body,ul,li{
    	margin:0;
    	padding:0;
    	list-style: none;
    }
    
    body{/* ..是退出css文件夹在img文件夹里寻找到bodybg这张图片 */
    	font-family: '微软雅黑';
    }
     
    .a{
    	white-space: nowrap;
    }
    
    #nav{
    	position: absolute;
    	top: 0%;
    	left: 75%;
    	width:100px;
    	height:6px;
    	font-size: 12px;
    	background:white;
    }
    
    #nav a{
    	text-decoration: none;/* 去掉下划线 */
    	color: gray;/* 字体颜色为黑色 */
    	text-align: center;
    	line-height: 32px;/*行高*/
    	font-size: 12px;
    }
    
    #nav a:hover{
    	color: orange;
    }
    
    #nav ul{
    	width:200px;
    	margin: 0 auto;/* 水平居中 */
    }
    #nav ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
    	width:60px;
    	height:32px;
    	padding-left: 0;
    	display: inline-block;
    	text-align: center;
    }
    #nav>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
    	float:left;/* 浮动:让元素依次水平 */
    }
    
    #navb{
    	position: absolute;
    	top: 0%;
    	left: 73%;
    	width:100px;
    	height:10px;
    	font-size: 12px;
    	background:white;
    	color: grey;
    	line-height: 32px;
    }
    
    #navb ul{
    	width:220px;
    	margin: 0 auto;/* 水平居中 */
    }
    #navb ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
    	width:100px;
    	height:32px;
    	padding-left: 0;
    	display: inline-block;
    	text-align: center;
    }
    #navb>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
    	float:left;/* 浮动:让元素依次水平 */
    }
    
    
    #navbar{
    	position: absolute;
    	top: 10%;
    	width:1550px;
    	height:32px;
    	background:rgb(28, 75, 169);
    }
    #navbar ul{
    	background:rgb(28, 75, 169);
    	width:1400px;
    	margin: 0 auto;/* 水平居中 */
    }
    #navbar ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
    	width:90px;
    	height:32px;
    	padding-left: 0;
    	display: inline-block;
    	text-align: center;
    }
    /* #navbar>ul>li{
    	 /* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
    	/* float:left; */
    	/* 浮动:让元素依次水平 */
    /* } */
    #navbar a{
    	text-decoration: none;/* 去掉下划线 */
    	color: #f9f9f9;/* 字体颜色为白色 */
    	text-align: center;
    	line-height: 32px;/*行高*/
    	font-size: 12px;
    }
    
    #navbar a:hover{/* 伪类选择器 ，设置鼠标悬停时的样式*/
    	text-decoration: none;
    	color:#72ff59;
    	line-height: 10px;/*行高*/
    	font-size: 10px;
    }
    
    .zer{
    	position: absolute;
    	top: 5%;
    	left: 72%;
    }
    
    .zero{
    	position: absolute;
    	top: 1%;
    	left: 86.5%;
    }
    
    .one{
    	position: absolute;
    	top: -180%;
    	left: 88%;
    }
    
    .to{
    	position: absolute;
    	top: -135%;
    	left: 16.5%;
    }
    
    .two{
    	position: absolute;
    	top: -245%;
    	left: 1%;
    }
    
    .three{
    	position: absolute;
    	top: 10%;
    	left: 16%;
    }
    
    .four{
    	position: absolute;
    	top: 10%;
    	left: 45%;
    }
    
    .five{
    	position: absolute;
    	top: 0%;
    	left: 68%;
    	background-color:white;
    	width:220px;
    	height:200px;
    }
    
    .five1{
    	position: absolute;
    	top:110%;
    	left: 70%;
    }
    
    	
    .five1:hover img{
    	transform: scale(1.2); 
    }
    .six{
    	position:absolute;
    	top:110%;
    	left:40%;
    }
    
    button{
    	margin:10px;
    	background-color:rgb(8, 57, 173);
    	color:white;
    }
    
    .she1{
    	margin:10px;
    }
    
    .she2 {
      margin:10px;
      display: block;
      width: 200px; /* 设置宽度 */
      height:50px;
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 溢出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分用省略号表示 */
    }
    
    
    #navba{
    	position: absolute;
    	top: 60%;
    	width:1550px;
    	height:32px;
    	background:rgb(28, 75, 169);
    }
    #navba ul{
    	background:rgb(28, 75, 169);
    	width:1300px;
    	margin: 0 auto;/* 水平居中 */
    }
    #navba ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
    	width:110px;
    	height:32px;
    	padding-left: 0;
    	display: inline-block;
    	text-align: center;
    }
    #navba>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
    	float:left;/* 浮动:让元素依次水平 */
    } 
    
    #navbb{
    	position: absolute;
    	top: 64%;
    	width:1550px;
    	height:70px;
    	background:#e3e3e3;
    }
    #navbb ul{
    	background:#e3e3e3;
    	width:1300px;
    	margin: 0 auto;/* 水平居中 */
    }
    #navbb ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
    	width:110px;
    	height:32px;
    	padding-left: 0;
    	display: inline-block;
    	text-align: center;
    }
    #navbb>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
    	float:left;/* 浮动:让元素依次水平 */
    } 
    
    #foot img{
    	width: 100px;
    	height:63px;
    }
    
    #foot{
    	position: absolute;
    	top: 61%;
    	left: 17%;
    }
    
    #foot ul{
    	width: 800px;
    }
    
    #foot ul li{
    	margin:5px;
    	display: inline-block;
    }
    
    #foot li:active{
    	opacity: 0.5;
    }
    
    #foo{
    	position: absolute;
    	top: 78%;
    	width: 1550px;
    	height: 200px;
    	background-color: #e3e3e3;
    }
    
    
    table{
    	position: absolute;
    	top: 110%;
    	left:15%;
    	width: 300px;
    }
    
    table, th, td {
         border: 1px solid rgb(214, 214, 214);
         border-collapse: collapse;
    }
    th, td {
         padding: 15px;
    }
    
    th,td:hover{
    	background-color:rgb(217, 217, 217);
    }
    
    .color1{
    	color:white;
    	background-color:rgb(46, 175, 255);
    }
    
    .color2{
    	color:red;
    	text-align:right;
    }
    
    .color3{
    	color:rgb(16, 16, 255);
    	text-align:right;
    }
    
    #foooo{
    	background-color:rgb(212, 215, 221);
    	position: absolute;
    	top: 170%;
    	width:1550px;
    	height:35px;
    	color:black;
    }
    
    #foooo ul{
    	width:1300px;
    	margin: 0 auto;/* 水平居中 */
    }
    
    #foooo ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
    	width:100px;
    	height:32px;
    	padding-left: 0;
    	display: inline-block;
    	text-align: center;
    	color:black;
    }
    
    #foooo>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
    	float:left;/* 浮动:让元素依次水平 */
    }
    
    #foooo a{
    	text-decoration: none;/* 去掉下划线 */
    	/* text-decoration: underline; 下划线*/
    	/* text-decoration: overline;线在上面 */
    	color: #fff;/* 字体颜色为白色 */
    	text-align: center;
    	line-height: 32px;/*行高*/
    	font-size: 12px;
    }
    
    #foooo li:hover{/* 伪类选择器 ，设置鼠标悬停时的样式*/
    	text-decoration: none;
    	color:white;
    	background-color:rgb(33, 44, 255);
    	line-height: 32px;/*行高*/
    	font-size: 12px;
    }
    
    
    #fooooo {
    	background-color:rgb(212, 215, 221);
    	position: absolute;
    	top: 174%;
    	width:1550px;
    	height:65px;
    	color:black;
    }
    #fooooo ul{
    	width:1400px;
    	margin: 0 auto;/* 水平居中 */
    }
    
    #fooooo ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
    	width:100px;
    	height:32px;
    	padding-left: 0;
    	display: inline-block;
    	text-align: center;
    	color:rgb(253, 253, 253);
    }
    
    #fooooo>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
    	float:left;/* 浮动:让元素依次水平 */
    }
    
    #fooooo a{
    	text-decoration: none;/* 去掉下划线 *//
    	color: #fff;/* 字体颜色为白色 */
    	text-align: center;
    	line-height: 32px;/*行高*/
    	font-size: 12px;
    }
    
    #fooooo li:hover{/* 伪类选择器 ，设置鼠标悬停时的样式*/
    	text-decoration: none;
    	color:white;
    	background-color:rgb(99, 99, 99);
    	line-height: 32px;/*行高*/
    	font-size: 12px;
    }
    
    
    #footer{
    	width:1550px;
    	color:rgb(255,255,255);
    	position:absolute;
    	top:183.5%;
    	background-color:rgb(40, 40, 40);
    }
    #foter{
    	background-color:rgb(40, 40, 40);
    	color:rgb(255,255,255);
    	position:relative;
    	top:183.5%;
    	left:9%;
    }
    
    .eight{
    	font-size:15px;
    	font-weight:bold;
    	padding:5px;
    }
    
    .nine{
    	font-size:12px;
    	padding:5px;
    }
    
    .ten{
    	position:absolute;
    	top:183.5%;
    	left:45%;
    	color:white;
    }
    
    
    #fo{
    	position: absolute;
    	top: 195%;
    	left:43.5%;
    	width:120px;
    	height:35px;
    	color:black;
    }
    
    #fo ul{
    	width:1000px;
    }
    
    
    #fo>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
    	float:left;/* 浮动:让元素依次水平 */
    }
    
    #fo ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
    	width:40px;
    	height:32px;
    	padding-left: 0;
    	display: inline-block;
    	text-align: center;
    	color:white;
    }
    
    #fo a{
    	text-decoration: none;/* 去掉下划线 */
    	/* text-decoration: underline; 下划线*/
    	/* text-decoration: overline;线在上面 */
    	color: #fff;/* 字体颜色为白色 */
    	text-align: center;
    	line-height: 10px;/*行高*/
    	font-size: 10px;
    }
    
    #fo li:hover{/* 伪类选择器 ，设置鼠标悬停时的样式*/
    	text-decoration: none;
    	color:white;
    	line-height: 10px;/*行高*/
    	font-size: 10px;
    }
    
    
    .twelve img{
    	width:15px;
    }
    
    #f{
    	position: absolute;
    	top: 185%;
    	left: 73%;
    	width:100px;
    	height:10px;
    	font-size: 12px;
    	color: grey;
    	line-height: 32px;
    }
    
    #f ul{
    	width:220px;
    	margin: 0 auto;/* 水平居中 */
    }
    #f ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
    	width:110px;
    	height:32px;
    	padding-left: 0;
    	display: inline-block;
    	text-align: center;
    }
    #f>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
    	float:left;/* 浮动:让元素依次水平 */
    }
    
    	
    .twelve{
    	position: absolute;
    	top: 190.5%;
    	left: 72%;
    }
    
    
    #fot img{
    	width:30px;
    	height:29px;
    }
    
    
    #fot{
    	margin:10px;
    	position: absolute;
    	top: 189.5%;
    	left: 43%;
    }
    
    #fot ul{
    	width: 800px;
    }
    
    #fot ul li{
    	margin:5px;
    	display: inline-block;
    }
    
    #fooot{
    	position: absolute;
    	top: 192%;
    	left: 72%;
    	width:100px;
    	height:10px;
    	font-size: 12px;
    	color: grey;
    	line-height: 32px;
    }
    
    #fooot ul{
    	width:220px;
    	margin: 0 auto;/* 水平居中 */
    }
    #fooot ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
    	width:130px;
    	height:32px;
    	padding-left: 0;
    	display: inline-block;
    	text-align: center;
    }
    #fooot>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
    	float:left;/* 浮动:让元素依次水平 */
    }
    
    #shezhi{
    	position:absolute;
    	top:8%;
    }

## 三 文件相关图（玩是另一个文件) ##

![2016493337424c24ac8bcc86dfae4579.png][]

[31727094dfc342ca96cb21bb69f55fc0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/992a5c2883994e8ea4184c1be9aecacb.png
[2016493337424c24ac8bcc86dfae4579.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/bc8f81734caf457faf916797ddc7f6cd.png