更新答案

Question

我只是在学习如何编码。我知道有一种方法可以为猫提供皮肤，但是使用列表，搜索字段等创建典型菜单的最有效方法是什么？

我已经能够创建所有元素。我很难让CSS正确地看起来像我想要的那样。

这是我当前项目的样子。

这就是我想要实现的目标。

感谢您的帮助！任何初学者的提示也将不胜感激。谢谢！

这是我的HTML

<!DOCTYPE html>
<html lan="en">
    <head>
        <meta charset ="UTF-8">
            <link href = "racemonster.css" rel="stylesheet" type="text/css">
                <title>Home</title>
    </head>

    <body>
        <div class="headerLeft">
            <h1>Name</h1>
        </div>
            <div class="headerRight">
                <ul>
                    <li><a href="cart.html">Cart</a></li>
                    <li><a href="help.html">Help</a></li>
                    <li><a href="signIn.html">Sign In</a></li>
                    <li><a href="signUp.html">Sign Up</a></li>
                </ul>
            </div>


        <div class="menu">
            <ul>
                <li><a href="home.html">Link</a></li>
                <li><a href="5k10k.html">Link</a></li>
                <li><a href="halfmarathon.html">Link</a></li>
                <li><a href="marathon.html">Link</a></li>
                <li><a href="gear.html">Link</a></li>
            </ul>
        </div>

这是css

.headerLeft{color:#C4D82D;font-family:sans-serif;background-color:#323232;width:100%;margin:0;padding:20px;top:0;left:0;}

.headerRight{color:#B1B3B5;font-family:sans-serif;background-color: #323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight ul {list-style-type: none;}
.headerRight ul li{display: inline;margin-right: 20px}
.headerRight ul li a{text-decoration: none;font-family: sans-serif;color: #898B8E;background-color:#323232;}
.headerRight ul li a:hover{color:#B1B3B5;}

    .menu ul {list-style-type: none;width:100%; margin:0; padding-top:40px; padding-bottom:40px; background-color: #C4D82D}
    .menu ul li {display:inline;margin-right: 20px;}
    .menu ul li a {text-decoration: none;font-family: sans-serif;color:#323232;background-color: #C4D82D;}
    .menu ul li a:hover {color:#999B9D;}

Answer 1

更新答案

这是一个解决方案......首先查看我的代码（http://jsfiddle.net/ProgrammerKid/s01yuzm1/）

HTML

<div class="headers">
    <div class="headerLeft">
         <h1>Name</h1>

    </div>
    <div class="headerRight">
        <ul>
            <li><a href="cart.html">Cart</a>

            </li>
            <li><a href="help.html">Help</a>

            </li>
            <li><a href="signIn.html">Sign In</a>

            </li>
            <li><a href="signUp.html">Sign Up</a>

            </li>
        </ul>
    </div>
    <div class="header-padding">&nbsp;</div>
</div>
<div class="menu">
    <ul>
        <li><a href="home.html">Link</a>

        </li>
        <li><a href="5k10k.html">Link</a>

        </li>
        <li><a href="halfmarathon.html">Link</a>

        </li>
        <li><a href="marathon.html">Link</a>

        </li>
        <li><a href="gear.html">Link</a>

        </li>
    </ul>
</div>

CSS

.headers {
    width: 100%;
    position: static;
}
.headerLeft {
    width: 50%;
    float: left;
    box-sizing: border-box;
    height: 120px;
}
.headerRight {
    width: 50%;
    box-sizing: border-box;
    float: right;
    height: 120px;
}
.header-padding {
    height: 120px;
}

我喜欢做的是将两个标题组合成一个大的<div>，以便它们共享一个共同的父级（忽略<body>）...然后我添加了一个CSS {{1} }属性，并将其float设置为50％。这将使它们对齐......

width元素是为链接部分提供足够的填充...因为我们浮动了两个<div class="header-padding">[...]</div>＆＃39; div和.headerRight ）.headerLeft部分会显示在标题下方...因此，通过放置links元素，我们为header padding提供了足够的空间。

旧答案

没有＆＃34;正确＆＃34;制作标题的方法

话虽如此，如果您包含HTML / CSS / JS代码，对于回答您问题的人来说真的很有帮助......

现在我将使用一种非常抽象的方法将你的提示传达给你......

如果我们用'＆＃34; NAME＆＃34;里面是links section，菜单项所在的元素是<div id="1"></div>，链接是<div id="2"></div>

然后这是你的CSS应该是什么样的：

<div id="3"></div>

以上将两个元素对齐

以下我们将填充减少到大约10px;

#1 {
    width: 40%;
    float: left;
}

#2 {
    width: 50%;
    float: left;
}

这就是我现在可以帮助你的所有信息，直到你上传你的代码

Answer 2

我已经创建了css，因为它非常简单易懂。

enter link description here

＆＃13;

.container {
    background-color:#323232;
}
.title {
    color:#C4D82D;
    margin-left:40px;
}
.headerLeft {
    width:50%;
    float:left;
    height:100px;
    display:inline-block;
}
.headerRight {
    width:50%;
    height:100px;
    display:inline-block;
}
.headerRight ul li {
    display:inline;
    color:#B1B3B5;
}
.headerRight ul li a {
    color:#b1b3b5;
}
.headerRight ul li a:hover {
    color:#B1B3B5;
}
.menu {
    background-color:#C4D82D;
    height:50%;
    position:relative;
    padding-top:20px;
    margin:(auto, auto, 0, 0);
}
.menu ul li {
    display:inline;
}
.menu ul li a {
    color:#323232;
}
.menu ul li a:hover {
    color:#999B9D;
}

＆＃13;

<body>
    <div class="container">
        <div class="headerLeft">
             <h1 class="title">Name</h1>

        </div>
        <div class="headerRight">
            <ul>
                <li><a href="cart.html">Cart |</a>

                </li>
                <li><a href="help.html">Help |</a>

                </li>
                <li><a href="signIn.html">Sign In |</a>

                </li>
                <li><a href="signUp.html">Sign Up |</a>

                </li>
            </ul>
        </div>
        <div class="menu">
            <ul>
                <li><a href="#">Link</a>

                </li>
                <li><a href="#">Link</a>

                </li>
                <li><a href="#">Link</a>

                </li>
                <li><a href="#">Link</a>

                </li>
                <li><a href="#">Link</a>

                </li>
            </ul>
        </div>
    </div>
</body>

＆＃13;

如何创建包含内容的大多数标头？

2 个答案:

更新答案

旧答案