Question

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

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

所以这就是事情：

徽标+导航菜单

这是代码：

#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;

}

Slider只是我认为很好的东西，因为我做了左右边距：auto;
这里有趣的开始：

新闻代码：

 .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）设置得不太合适。

有人能帮助我并说出我犯了什么错误吗？这非常重要。迎接。

P.S。告诉我你是否需要整个代码我可以上传它的包。

Answer 1

可能会发生这种情况，因为宽度和高度的像素可能比显示器的像素大，所以我建议您以％为单位给出它喜欢 .baner-box { 漂浮：对; 宽度：40％; 身高：50％; 保证金权利：15％; }

可能适合您

整体代码结构失败

1 个答案: