我如何使用html和CSS布局所需的设计？_Html_Css

我如何使用html和CSS布局所需的设计？

html css

我如何使用html和CSS布局所需的设计？,html,css,Html,Css,我正在尝试将页面的页眉放出来，使其看起来像这样：如果可能的话，我想避免使用表格。我是html和css beginer公司，我无法让它工作：（这是我迄今为止最好的尝试： Html: 它不能按预期工作，原因是：菜单行不在“大标题图片”底部对齐的底部感谢您的帮助、想法和建议也是学习CSS布局工作原理的绝佳读物此外：你试过CSS“位置”吗要使菜单与您的大图底部对齐，您需要绝对将菜单项定位在相对的父项中。我对其进行了一点简化，但以下是实现这一点的必要步骤： <html> &l

我正在尝试将页面的页眉放出来，使其看起来像这样：

如果可能的话，我想避免使用表格。我是html和css beginer公司，我无法让它工作：（

这是我迄今为止最好的尝试：

Html:

它不能按预期工作，原因是：菜单行不在“大标题图片”底部对齐的底部

感谢您的帮助、想法和建议

也是学习CSS布局工作原理的绝佳读物

此外：你试过CSS“位置”吗

要使菜单与您的大图底部对齐，您需要绝对将菜单项定位在相对的父项中。我对其进行了一点简化，但以下是实现这一点的必要步骤：

<html>
<head>
    <title>test</title>
    <style type="text/css" media="screen">

        .right
        {
            float: right;
        }
        .header
        {
            position: relative;
        }
        .menu
        {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 250px;
        }
        .info p
        {
            float: right;
        }
        .rightHeader
        {
            float: right;
        }
    </style>
</head>
<body>
    <div class="header">
        <img src="bigimage.png" />
        <div class="rightHeader">
            <div class="info">
                <img src="smallimage.png" /><p>Some info <br /> Other info</p>
            </div>
            <div class="menu">
                <a href="#" class="right">Menu 3</a>
                <a href="#">Menu 1</a>
                <a href="#">Menu 2</a>
            </div>
        </div>
    </div>

</body>
</html>


测试
.对
{
浮动：对；
}
.标题
{
位置：相对位置；
}
.菜单
{
位置：绝对位置；
底部：0；
右：0；
左：250px；
}
.info p
{
浮动：对；
}
.右标题
{
浮动：对；
}
一些信息
其他信息

没有必要……但确实需要为模板以及文本和图像类使用id，以防止破坏模板，因为您只能使用id一次。“HTML应该使用id而不是类”嗯，为什么？@BoltClock:谢谢，我详细阐述了这一评论，以供澄清。@bpeterson76:关于它到底有什么问题，有什么建议吗？我想知道我是如何做的，是否与正确的技术有一些可怕的差异。仅仅因为一个项目是一个“模板”这并不意味着它需要唯一的ID来进行样式设置。举个例子——Jquery UI使用类来设置几乎所有它的元素的样式。任何一个都可以用于进行样式设置。正确的是，ID必须是唯一的，并且它们可以提供在DOM中具体引用元素的机会。但是，这不是这里所要求的，这很简单tyling.表示您必须使用ID作为“模板”我认为自己是一个优秀的程序员，甚至在大学里也有一些编程课程。我没有做过任何关于Web的事情，大多是没有GUI的桌面应用程序或应用程序。现在我需要做真正的网站。我快速学习。我希望它只需要学习所有的标签和它们的功能。我更喜欢尝试，直到我找到合适的溶胶。而不是使用SOEM框架来生成一些我不理解的HOLLBLE代码。公平地说，虽然我不认为使用框架是一个坏的解决方案，但是它并不能真正解决你在菜单项的垂直对齐中遇到的问题。我已经编辑了我的答案来解释如何做到最好。我的知识。@efalconer感谢您的回答。我还有一个不使用框架的原因：这不是静态html页面，它是ASP.NET MVC web应用程序的一部分。因此我需要对代码有很好的理解和控制，以便我可以插入动态元素。@efalconer您能提供st的定义吗yle

.rightHeader

？谢谢。@drasto我已经添加了您要求的其他定义。如果还需要任何其他内容，请告诉我，或者想要更多关于任何元素的解释。

.rightAlign
{
    clear: both;
    text-align: right;
}
.ignoreRightAlign
{
    float: left;
}

.smallPicture
{
position: absolute; //Or relative (among other options)
right: 15px; //Or whatever it needs to be
top: 0; // Can be in ##px or ##em or %
}

<html>
<head>
    <title>test</title>
    <style type="text/css" media="screen">

        .right
        {
            float: right;
        }
        .header
        {
            position: relative;
        }
        .menu
        {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 250px;
        }
        .info p
        {
            float: right;
        }
        .rightHeader
        {
            float: right;
        }
    </style>
</head>
<body>
    <div class="header">
        <img src="bigimage.png" />
        <div class="rightHeader">
            <div class="info">
                <img src="smallimage.png" /><p>Some info <br /> Other info</p>
            </div>
            <div class="menu">
                <a href="#" class="right">Menu 3</a>
                <a href="#">Menu 1</a>
                <a href="#">Menu 2</a>
            </div>
        </div>
    </div>

</body>
</html>