html - Div 标签和标题

标签 html css containers

大家好,我目前正在尝试制作一个网站,我已经绘制了设计,并开始尝试使用几个 div 标签、 Logo 图像、底部边框和按钮来制作标题。 这是我尝试做的事情的基本概述:(抱歉,它模糊但可用) concept

这是当前的结果,看起来很糟糕。 result

最后这是负责的代码,有人能看到我搞砸的地方吗?该行应该覆盖从 Logo 到右侧的大部分页面,因此它必须是 div 容器

<html>
<head>

    <style>
    body{ background-image: url("wood texture.jpg");
    }
    .header{
            position:relative;
            width:100%;
            height:10%;
            <!--border-style:solid;
        border-color:black;
        border-width:0px 0px 10px 0px;-->

        }

        .headlogo{
        width:25%;
        height:100%;
        position: absolute;
        padding 0;
        margin:0;
        }
        .headline{
        width:100%;
        height:100%;
        margin:0px 0px 0px 60%;
        <!--padding:0px 0px 0px 25%;
        position: relative;
        left:25%;
        top:0px;-->
        float: right;
        border-style:solid;
        border-color:black;
        border-width:0px 0px 10px 0px;
        }



    </style>
</head>
<body>
<div id="" class="header">


    <div id="" class="headlogo">
     <img src="logo.png" alt="" style="width:25%; height:50%; margin-right:10px; float:right;"
    </div>

    <div id="" class="headline">
    Buttons will go in here and look supper cool but first this needs to stretch all the way to the right from about where the logo stops
    </div>
</div>
</body>
</html>

最佳答案

您只是在 css 中使用了错误的行注释。

HTML 为 <!-- something here -->

CSS 是 /* something here */

正如评论中所指出的,您没有使用 /> 关闭图像

参见 fiddle :https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/50/

既然你在评论中问了,我就在这里添加 .html 中的 CSS 行注释使用 notepad++ 时,文件似乎不会被注释掉,要测试它,请尝试使用 .css 中的 css 行注释。使用notepad++创建文件,你会发现它确实有效。我创建这个 fiddle 是为了向您展示 /* */实际上是在 <style> 内的正确行注释标签。 https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/52/

毕竟,如果还有问题,您可以观看这个小剪辑:http://docs.emmet.io/actions/toggle-comment/

body{ background-image: url("wood texture.jpg");
    }
    .header{
            position:relative;
            width:100%;
            height:10%;
            /*border-style:solid;
        border-color:black;
        border-width:0px 0px 10px 0px;*/

        }

        .headlogo{
        width:25%;
        height:100%;
        position: absolute;
        padding 0;
        margin:0;
        }
        .headline{
        width:100%;
        height:100%;
        margin:0px 0px 0px 60%;
        /*padding:0px 0px 0px 25%;
        position: relative;
        left:25%;
        top:0px;*/
        float: right;
        border-style:solid;
        border-color:black;
        border-width:0px 0px 10px 0px;
        }

关于html - Div 标签和标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36163267/

相关文章:

Docker RabbitMQ 持久性

windows - 如何从 docker 容器中的文件到 Windows 容器中的主机

javascript - 曲线对象警告 : zero-width box with no accountable parent IE8-7

css - 全高左右边框,无底边框

javascript - 如何使用 JavaScript 在 Div 中实现 Div?

css - 位置:向下滚动时,Safari 上的粘性开始失败

html - 物化 CSS,选择字体颜色或字体系列?

bash - 增强的 docker stats 命令,包含 RAM 和 CPU 总量

JQUery:根据 AJAX 响应选中或取消选中复选框

javascript - 我可以在 html 中初始化 Angular ngModel,然后在 Controller 中使用它的值吗?