整体代码结构失败

Question

我从HTML和CSS开始，我为我的朋友写了我的第一页。问题是我的代码似乎很糟糕，因为当我试图改变一些东西时，整个页面几乎崩溃了。

我的页面地图：http://i.stack.imgur.com/0U1lO.png

事情是这样的：

1. 徽标+导航菜单

下面是代码：

#logo {
 margin-left: 15%; }

nav {
 float: left;
 margin-left: 10%;
 margin-top: 1%;
 font-weight: bold;
 vertical-align: central; }

a {
 text-decoration: none; }

nav ul {
 list-style-type: none; }

nav li {
 float: left;
 margin-right: 10px;

}

1. 滑块是唯一做得好的东西，我认为，因为我使它的毛边-左和右:汽车；
2. 以下是乐趣的开始：

新闻代码：

 .newsy {
 font-weight: 900;
 font-size: xx-large;
 margin-left: 15%;
 color: black; }


.image-box {
 position: relative;
 margin-left: 15%;
 width: 640px;
 height: 300px; }

 .image-box span {
     position: absolute;
     bottom: 0;
     left: 0;
     background: rgba(0,0,0, .5);
     color: white;
     padding: 15px;
 }


.community-box {
 margin-right: 15% ;
 float: right;
 }

.baner-box {
 float: right;
 width: 270px;
 height: 500px;
 margin-right: 15%; }

 .baner-box baner {
     margin: 40px;
 }

 .autor {
 border: solid 0px white;
 background-color: white;
 margin-left: 15%;
 padding: 10px;
 padding-left: 20px;
 width: 610px;
 background-color: white;
 position: relative;
 font-weight: bolder;
 font-size: 13px;
 font-kerning: normal; }

 .readmore {
 position:absolute;
 bottom: 0;
 right: 0;
 width: 90px;
 padding: 10px;
 padding-left: 20px;
 background-color: rgba(0,0,0, .9);
 color: white;

 }

当我试图把它们从中间移到左边一点的时候，整个页面都崩溃了。此外，我的社区邮箱(facebook、YT和twitter)的设置也不太恰当。

有人能帮我说出我犯了什么错误吗？这真的很重要。打招呼。

如果你需要完整的代码，我可以上传它的包。

Answer 1

这可能是因为宽度和高度的像素可能大于显示器的像素，因此我建议您在% like ..baner box{浮动:右；宽度: 40%；高度: 50%；边距-右: 15%；}

可能是你的工作