CSS布局问题页脚和UL样式

如何解决CSS布局问题页脚和UL样式

|| 因此，我正在尝试为新的投资组合网站编写设计代码，但是我遇到了一些问题，研究和数小时的砸向计算机屏幕的工作仍未解决。我现在仍然遇到两个大问题，尽管我目前甚至还在考虑是否还要处理另一个问题。第一个问题是菜单。当您将字体悬停在该页面上时，我希望该字体从常规变为粗体。哪个有效。问题是，当您将鼠标悬停在其上时，菜单中的其他两个项目会稍作调整，因为类型权重的改变会将它们推出。到目前为止，我的所有尝试都以失败告终。第二个问题是页脚。我希望它停留在页面底部。我的研究已经使我走了这么远，但实际上，它不是我想要的，而是停留在浏览器的底部，而不是内容的底部。感谢您提供的任何帮助！有问题的页面可以在以下位置找到：http://personal.justgooddesign.net/draft/

解决方法

您的页脚越来越混乱，因为您向左浮动并向右清除。我个人对页脚的偏爱总是从这种非常干净的方法开始，并以此为基础。如果您感到困惑，请将您的内部内容与页面的其余部分分开，然后进行测试。使用字体，您必须更像UI开发人员，而不是图形设计师。与Indesign，Illustrator等不同，字体和间距并不是100％完美的像素。在一个浏览器中将以一种方式呈现的内容将在另一个浏览器中以一种非常不同的方式呈现。在网络上加粗字体会使字体变大，并增加间距。为了弥补这一点，请将菜单元素设置得更宽一些以进行补偿，然后疯狂地进行测试。如果您仅依靠页边距和填充，则加粗的悬停元素将每次都在菜单附近移动。只是建议，将CSS设置在单独的文件中并加载。代码将被缓存，这将在后续加载中提高性能。此外，通过执行一个类将样式附加到元素上并相对于其他元素进行适当定位，您可以节省大量代码。无需为投资组合中的每个元素分别设置样式以进行定位。 , 您可以通过在#menu li上设置固定宽度来修复菜单中的跳转，因此

#menu li {
display: block;
float: right;
width: 40px;   //something like this.
padding: 0px;
list-style-type: none;
position: relative;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}

编辑：解决页脚问题从“ 3”规则中删除“ 2” 在ѭ5和ѭ6之间加一个清零ѭ4

</div>
<br style=\"clear:both;\">
<div id=\"footer\">

, 您有浮动问题，因为您没有清除浮动。您的div＃wrapper始终等于视口的高度。您的div＃容器已折叠，因为您已将div＃left浮动到\“ left \”，将div＃right浮动到\“ right \”，并且也已将div＃footer放在绝对位置。这样做是为了从文档的正常流程中获取这些div，随后div＃contaiver不在这三个div（div＃left，div＃right和div＃fotter \“周围）“包裹” div＃right也是如此。 div＃intro和div＃portfolio已浮动在div＃right内部，并且未包装其子div。解决这些问题的方法很多。我建议这个。在最后一个浮动元素之后添加以下代码。

<div class=\"float_clear\"></div>

div.float_clear
{
clear: both;
}

对于菜单，没有足够的空间，只需添加。

div#menu>ul>li
{
width: 50px;
}

, 尝试解决您的页脚问题？

<p style = \"clear:both\">
<div id=\"footer\">

也

#right {
    clear: right;
    float: right;
    height: 600px; //Remove this line
    width: 490px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 0px;
}

, 添加溢出：隐藏到容器中... 每当您有浮动内容时，在浮动内容周围放置一个div并将其分配给它溢出：隐藏显示：块; 宽度：（一定宽度）；这将解决大多数浮动问题