Html 正确设置导航菜单？_Html_Css_Header_Nav

Html 正确设置导航菜单？

html css

Html 正确设置导航菜单？,html,css,header,nav,Html,Css,Header,Nav,我试图让我的导航菜单文本像一个真正的网站一样，挨着一个挨着一个的图标。我做了一个侧面的模型以供参考，下面链接以供查看我一直在为这项简单而平凡的任务而努力，把空白、填充、浮动等等弄得乱七八糟，不管我对我的任何元素做了什么，要么什么都没发生，要么一堆狗屎开始到处乱飞，我甚至都不明白为什么 /*主要背景*/ 身体{ 背景图像：url（../img/background.png）；背景重复：重复-x } .集装箱{ 宽度：960px；保证金：0自动；字体系列：“蒙特塞拉特”，无衬线；

我试图让我的导航菜单文本像一个真正的网站一样，挨着一个挨着一个的图标。我做了一个侧面的模型以供参考，下面链接以供查看

我一直在为这项简单而平凡的任务而努力，把空白、填充、浮动等等弄得乱七八糟，不管我对我的任何元素做了什么，要么什么都没发生，要么一堆狗屎开始到处乱飞，我甚至都不明白为什么

/*主要背景*/
身体{
背景图像：url（../img/background.png）；
背景重复：重复-x
} 
.集装箱{
宽度：960px；
保证金：0自动；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：100%；
线高：1.5；
}
海德比克先生{
背景图像：url（../img/HeaderBike.png）；
背景位置：260px 70px；
背景重复：无重复；
身高：382px；
}
/*导航元件*/
/*标题元素*/
.网站导航李{
高度：21px；
宽度：49px；
左边距：35px；
右边距：11px；
浮动：左；
}
.网站导航a{
颜色：白色；
文字装饰：无；
字体大小：粗体；
浮动：左；
文本对齐：居中；
}
.站点导航a:悬停{
垫底：2件；
边框底部：1px纯白；
}
/*导航菜单*/
.导航菜单{
边缘顶部：15px；
宽度：490px；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：粗体；
颜色：#fff；
}
.搜索{
浮动：左；
}
.探照镜{
利润率：30像素900像素；
浮动：左；
}
氢{
线高：0.8；
字体大小：72px；
字体大小：粗体；
颜色：#fff；
宽度：450px；
填充底部：42px；
浮动：左；
文本对齐：左对齐；
}
h1{
}
/*文章类*/
.文章{
浮动：左；
宽度：100%；
边际下限：72px
}
.第条img{
宽度：400px；
身高：225px；
保证金权利：1%
}
.第h1条{
浮动：左；
宽度：70%；
保证金：5px0；
文本对齐：左对齐；
字体大小：粗体；
字号：22.5px；
}
.第p条{
浮动：左；
宽度：70%；
保证金：5px0；
文本对齐：左对齐；
字体大小：粗体；
字体大小：12px；
}
页脚{
显示：块；
宽度：100%；
浮动：左；
}


转让3







天空队
 通往黄色的道路

要么您没有发布解决方案所需的代码，要么您的html中存在一些缩进错误

<body>
<div class="container">
    <header class="Team Sky">
        <img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
        <nav class="site-navigation">
            <ul class="clearfix navmenu">
                <li><a href="#">shop</a></li>
                <li><a href="#">checkout</a></li>
                <li><a href="#">video</a></li>
                <li> 
                    <form class="search">
                    <input id="search" type="text" name="search" placeholder="search">
                    </form>  
                </li>
            </ul>
        </nav>
    <div id="HeaderBike" class="HeaderBike"> <--- open never closed
        <div>
        <h1>Team Sky</h1>
        <P>the road to yellow</P>   
        </div>
    </header> <--- this was after div that goes next                    
</div>









在内联块中显示列表项

/*主要背景*/
身体{
背景图像：url（../img/background.png）；
背景重复：重复-x
}
.集装箱{
宽度：960px；
保证金：0自动；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：100%；
线高：1.5；
}
海德比克先生{
背景图像：url（../img/HeaderBike.png）；
背景位置：260px 70px；
背景重复：无重复；
身高：382px；
}
/*导航元件*/
/*标题元素*/
.网站导航李{
高度：21px；
宽度：49px；
左边距：35px；
右边距：11px；
浮动：左；
}
.网站导航a{
颜色：白色；
文字装饰：无；
字体大小：粗体；
浮动：左；
文本对齐：居中；
}
.站点导航a:悬停{
垫底：2件；
边框底部：1px纯白；
}
/*导航菜单*/
.导航菜单{
边缘顶部：15px；
宽度：490px；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：粗体；
颜色：#fff；
}
李先生{
显示：内联块；
}
.搜索{
浮动：左；
}
.探照镜{
利润率：30像素900像素；
浮动：左；
}

转让3







天空队
 通往黄色的道路
一个简单的方法是将标题分为3列，然后将徽标、导航和搜索字段放入其中的每个部分
我在下面列举了一个例子：

.clearfix{
溢出：自动；
}
.标题部分{
浮动：左；
宽度：30%；
保证金权利：5%；
}
.header\uu节：最后一个子项{
右边距：0；
}

标志
导航
搜寻