<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<style type="text/css">
* {
    padding: 0 ;
    margin: 0 ;
}

body {
    font-family: 微软雅黑 ;
}

ul li {
    list-style: none ;
}

a {
    color: #fff ;
    text-decoration: none ;
    font-family: 微软雅黑 ;
}


.header {
    height: 72px ;
    background: #458fce ;
    font-family: 微软雅黑 ;
}

.header .logo {
    color: #ffc ;
    line-height: 72px ;
    font-size: 30px ;
    margin-left: 20px ;
    display: inline-block ;
    font-weight: 500 ;
    float: left ; 
}
    
.header ul li {
    float: left ;
    color: #fff ;
    display: inline-block ;
    width: 112px ;
    height: 72px ; 
    text-align: center ;
    line-height:72px ;
    cursor: pointer ;
}
.header ul li.first {
    margin-left: 30px ;
}
a {
    color: #fff ;
    text-decoration: none ;
}
.header ul li:hover {
    background:#74b0e2 ;
}
</style>

</head>

<body>
    <div class="header">
    <div class='logo'>原创文字</div>
    <ul>
        <li class='first'><a href="index.jsp">首页</a></li>
        <li class='item'><a href="javascript:void(0)">原创故事</a></li>
        <li  class='item'><a href="javascript:void(0)">热门专题</li>
        <li  class='item'><a href="javascript:void(0)">欣赏美文</li>
        <li  class='item'><a href="javascript:void(0)">赞助</a></li>
    </ul>
    </div>
</body>


</html>

回归下CSS