<ul class="left">
<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>
<ul class="right">
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.top {
background-color: #83529a;
width: 100%;
height: 50px;
position: relative;
}
.left li a {
color: #fff;
font-size: 15px;
display: block;
text-decoration: none;
}
.right li a {
color: #fff;
font-size: 15px;
display: block;
text-decoration: none;
}
.left {
float: left !important;
display: flex;
/* 此处用display:block不起作用 用flex起作用 为什么？*/
width: 33%;
}
.left li {
margin-right: 31px;
}
.right li {
margin-right: 31px;
}
.right {
float: right !important;
display: flex;
/* 此处用display:block不起作用 用flex起作用 */
width: 50%;
}
li {
list-style: none;
}
</style>
<body>
<div class="top">
<ul class="left">
<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>
<ul class="right">
<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>
</body>
</html>
目前的效果图：
想实现的是：
这块的原始代码块：
<div class="headerView">
<div class="container">
<div class="clearfix head_tab">
<ul class="pull-left head_ln"><li><a href="jsdl/xs.htm">学生</a></li>
<li><a href="jsdl/jg.htm">教工</a></li>
<li><a href="jsdl/xy.htm">校友</a></li>
<li><a href="jsdl/ks.htm">考生</a></li>
<li><a href="jsdl/hzz.htm">合作者</a></li>
<li><a href="http://202.200.126.217/cm-sites/pms/login.html">投稿系统</a></li>
</ul>
<ul class="pull-right head_rn">
<script language="javascript" src="/system/resource/js/dynclicks.js"></script><script language="javascript" src="/system/resource/js/openlink.js"></script> <li><a href="http://renshichu.xaut.edu.cn/zpxx1/zpgg.htm" target="_blank" title="" onclick="_addDynClicks("wburl", 1570106337, 45753)">人才招聘</a></li>
<li><a href="http://library.xaut.edu.cn/" target="_blank" title="" onclick="_addDynClicks("wburl", 1570106337, 45754)">图书馆</a></li>
<li><a href="http://mail.xaut.edu.cn/" target="_blank" title="" onclick="_addDynClicks("wburl", 1570106337, 45755)">邮件系统</a></li>
<li><a href="http://mooc.xaut.edu.cn/home/index.mooc" title="" onclick="_addDynClicks("wburl", 1570106337, 63871)">云课堂</a></li>
<li><a href="http://xfz2.xaut.edu.cn/home.html" target="_blank" title="" onclick="_addDynClicks("wburl", 1570106337, 63431)">学分制主页</a></li>
<li><a href="http://ids.xaut.edu.cn/authserver/login?service=http%3A%2F%2Fmy.xaut.edu.cn%2Flogin.portal" target="_blank" title="" onclick="_addDynClicks("wburl", 1570106337, 45756)">服务门户</a></li>
<li><a href="http://global.xaut.edu.cn/" title="" onclick="_addDynClicks("wburl", 1570106337, 63561)">Global</a></li>
</ul>
</div>
</div>
</div>
贴上网址:西安理工大学
暂存下。。。。.。。。.。.。.。。。。。。。。。。。
