.container{
margin: 0 auto;
width: 1000px;
position: relative;
}
.header{
height: 650px;
width: 1000px;
background-color: antiquewhite;
}
.a{
width: 1000px;
height: 50px;
background-color:bisque ;
}
.left{
width: 150px;
height: 540px;
background-color: antiquewhite;
}
.denglu{
float: right;
margin: 10px;
font-family: 黑体;
}
.denglu>a{
text-decoration: none;
}
.left>h4{
font-family: 黑体;
padding: 10px;
background-color: gainsboro;
}
.left>ul{
padding: 0;
text-align: center;
}
.left>ul>li{
list-style: none;
line-height: 30px;
font-family: 黑体;
}
.left>ul>li:hover{
background-color: darkgray;
width: 150px;
color: white;
cursor: pointer;
}
@font-face {
font-family: a;
src: url(../fonts/MATURASC.TTF);
}
.zong{
font-family: a;
margin: 0 20px;
font-size: 25px;
/*color: rebeccapurple;*/
float: left;
}
.right{
width: 820px;
float: right;
color: black;
}
.right-1{
text-align: center;
margin-left: 500px;
margin-top: 20px;
}
.fenlei{
position: absolute;
top: 590px;
left: 165px;
width: 850px;
height: 590px;
background-color: rgba(255, 248, 249, 0.96);
margin-top: -530px;
font-family: 黑体;
font-size: 15px;
color: black;
}
.fenlei h4{
padding: 10px 20px 0 10px;
margin-left: 10px;
}
.fenlei hr{
margin: 5px;
}
.fenlei ul li{
list-style: none;
display: inline-block;
margin-left: 90px;
padding: 10px;
}
.fenlei ul li:hover{
border: 1px solid black;
background-color: #00CCFF;
}
.fenlei ul li a{
text-decoration: none;
color: black;
}
.chakan{
margin-left: 340px;
}
.xia{
width: 1000px;
height: 50px;
background-color:gray ;
}
.xia span{
line-height: 60px;
margin-left: 400px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/quandong.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="a">
<div class="zong">
<span>Now time</span>
</div>
<div class="denglu">
<div class="glyphicon glyphicon-user"></div>
<a href="">欢迎YCJ用户登录</a>
</div>
</div>
<div class="left">
<h4>新闻内容</h4>
<ul>
<li class="glyphicon glyphicon-envelope">内容修改</li>
</ul>
<ul>
<li class="glyphicon glyphicon-plus">内容添加</li>
</ul>
<h4>分类排行</h4>
<ul>
<li><i class="glyphicon glyphicon-th"></i>最新排行</li>
</ul>
<ul>
<li><i class="glyphicon glyphicon-stats"></i>热点排行</li>
</ul>
<h4>用户管理</h4>
<ul>
<li><i class="glyphicon glyphicon-stop"></i>密码还原</li>
</ul>
<ul>
<li><i class="
glyphicon glyphicon-ban-circle"></i>屏蔽或释放</li>
</ul>
<h4>留言管理</h4>
<ul>
<li><i class="
glyphicon glyphicon-ban-circle"></i>禁止留言</li>
</ul>
<ul>
<li> <i class="glyphicon glyphicon-remove"></i>留言删除</li>
</ul>
</div>
</div>
<div class="fenlei">
<!--<div class="left-1">-->
<!--</div>-->
<div class="right">
<input type="text" style="width: 200px" placeholder="请输入你要查询的内容" class="right-1"><input type="button" value="搜索">
</div>
<h4>体育财经</h4>
<hr>
<ul>
<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>
<li><a href="">排球</a></li>
<a href="" class="chakan">查看更多>>></a>
</ul>
<h4>科技</h4>
<hr>
<ul>
<li><a href="">智能</a></li>
<li><a href="">移动互联</a></li>
<li><a href="">通讯</a></li>
<li><a href="">IT</a></li>
<li><a href="">数码</a></li>
<li><a href="">手机</a></li>
<li><a href="">科学</a></li>
<a href="" class="chakan">查看更多>>></a>
</ul>
<h4>娱乐</h4>
<hr>
<ul>
<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>
<li><a href="">音乐人</a></li>
<a href="" class="chakan">查看更多>>></a>
</ul>
<h4>汽车</h4>
<hr>
<ul>
<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>
<li><a href="">车险</a></li>
<a href="" class="chakan">查看更多>>></a>
</ul>
</div>
<div class="xia">
<span>版权所有@sajjadhajdj未经本公司允许严禁下载</span>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</body>
</html>
