<style>
*{
margin:0;
padding: 0;
}
body{
background-color:#2F5856 ;
}
.menu{
width: 200px;
height: auto;
margin: 0 auto;
}
.menu h1{
color:#dce5e4 ;
font-size: 16px;
font-family: '微软雅黑';
background-color:rgba(255,255,255,0.3) ;
height: 50px;
line-height: 50px;
padding-left: 20px;
}
.menu ul li{
width: 90%;
height: 46px;
line-height: 46px;
padding-left: 20px;
list-style-type: none;
}
/* 鼠标悬停到li元素上 */
.menu ul li:hover{
background-color: #21b4ab;
}
.menu ul li a{
color:#dce5e4 ;
font-size: 14px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="menu">
<h1>流程</h1>
<!-- ul>li*7>a -->
<ul>
<li><a href="">带班事项</a></li>
<li><a href="">新建流程</a></li>
<li><a href="">已办事项</a></li>
<li><a href="./new-email.html" target="right">新建邮件</a></li>
<li><a href="">新建日程</a></li>
<li><a href="">新建知识</a></li>
<li><a href="">我的任务</a></li>
</ul>
</div>
<body>
<div class="new-e">
<h1>新建邮件</h1>
</div>
<body>
<h1>right</h1>
</body>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #1ABDB6;
}
.top{
width: 500px;
height: 80px;
line-height: 80px;
padding-left: 30px;
}
.top h1{
font-size: 28px;
color: #EEF7F7;
}
</style>
</head>
<body>
<div class="top">
<h1>协同办公软件</h1>
</div>
<body>
<div class="info">
<h1>欢迎使用协同办公软件</h1>
</div>
</body>