<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子模型导航</title>
<meta name="keywords" content="练习" />
<meta name="description" content="熟练盒子模型和导航代码" />
<script language="JavaScript" type="text/javascript">
<!--JS代码位置-->
</script>
<style type="text/css">
<!--CSS样式代码位置-->
ul
{
float:right;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:right;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:2em 0.6em;
border-right:1px solid white;
text-align:center;
}
a:hover {background-color:#ff3300}
li {display:inline}
/* 导航栏css */
#aa{
background-color:red;
width:180px;
height:85px;
}
#logo{
float:left;
background-color:yellow;
width:83px;height:80px;
margin:2.5px;
}
#bt{
text-align:center;
padding-top:12px;
font-size:20px;
}
#ms{
text-align:center;
padding-top:6px;
font-size:15px;
}
#cc{
width:1200px;height:444px;
background-color:#fff;
margin-top:30px;
padding-top:0px;
box-shadow:1px 1px 15px #5e5e5e;
padding-right:px;
}
#banner{
width:216px;height:444px;
margin:0px;
background:#2b333b;
border-radius:6px 0px 0px 6px;
float:left;
}
.item{
font-size: 18px;
color:#F0F0F0;
height: 46px;
line-height: 60px;
cursor: pointer;
padding-left:12px;
position: relative;
}
#img{
width:936px;height:316px;
float:right;
background-color:red;
margin-right:48px;
}
#fk{
width:220px;height:128px;
background-color:yellow;
float:left;
}
.p1{
text-align:center;
}
.p2{
text-align:center;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">资源</a></li>
<li><a href="#">下载</a></li>
</ul>
<div id="aa">
<div id="logo">
logo
</div>
<div id="bt">
标题
</div>
<div id="ms">
描述描述描述描述
</div>
</div>
<!--顶部导航+logo结束 -->
<div id="cc">
<div id="banner">
<div class="item">前沿/ 区块链/ 人工智能</div><hr>
<div class="item">前端 / 小程序 / JS</div><hr>
<div class="item">后端 / JAVA / Python</div><hr>
<div class="item">移动 / Android / iOS</div><hr>
<div class="item">云计算 / 大数据 / 容器</div><hr>
<div class="item">运维 / 测试 / 数据库</div><hr>
<div class="item">UI设计 / 3D动画 / 游戏</div>
</div>
<!-- 侧边菜单结束 -->
<div id="img">
<img src="/myphp_www/PHPTutorial/WWW/banner.jpg" alt"广告" width="936px";height="316px";/>
</div>
<!-- 广告结束 -->
<div id="zy">
<span id="fk">
<p class="p1">Web前端攻城狮</p>
<p class="p2">互联网时代最火爆的技术</p>
</span>
<span id="fk">
<p class="p1">Java攻城狮</p>
<p class="p2">综合就业排名第一</p>
</span>
<span id="fk">
<p class="p1">Android攻城狮</p>
<p class="p2">移动设备市场份额第一</p>
</span>
<span id="fk">
<p class="p1">PHP攻城狮</p>
<p class="p2">世界上最好的语言：）</p>
</span>
</div>
<!-- 四个专业结束 -->
</div>
</div>
</body>
</html>
我想给div id=“zy”这个块设置居中，但是没有效果，并且我这个div id“cc”这个大块设置的是1200 距离都算对的，右边还流出一块空白，这个1200的宽少一个像素都不行，求指导
宽度没算好布局的方法有问题 重新研究一下解决了