如何制作这个HTML css导航栏？ [英] How do I make this HTML css navbar?

问题描述

嘿，



我14岁并试图在过去几天解决这个问题（我是新的，请不要判断）





我在photoshop中制作了这个图片，我想弄清楚如何在Codepen上制作HTML和CSS。单独导航栏的代码是什么？我想基本知道如何使它坚持到顶部（不是固定的，但是当我加载页面时，它应该在顶部）并且宽度为100％。



我在定位方面遇到了很多麻烦，而且我可以创建导航栏，但是这些项目很难对齐。



如果你有时间，我真的很感激有关使用CSS对齐和定位HTML元素的一点教训（一个好地方的链接，绰绰有余）

我得到的所有这些想法都为我的个人网站添加了很多功能，但我不能这样做，因为我不知道如何在网站上定位它们，所以这会很棒

解决方案

我希望下面的内容可以帮到你。



1. 如何使用CSS3创建水平导航 [ ^ ]

2. 100个很棒的CSS菜单教程 [ ^ ]

3. CSS导航栏 [ ^ ]

Hey,

I'm 14 and trying to figure this out for the last couple of days (im new, please dont judge)


I made this image in photoshop and I would like to figure out how to make it HTML and CSS on Codepen. What would the code be for the navigation bar alone? I want to know basically how to make it stick to the top (not to be fixed, but when I load the page, it should be at the top) and be 100% in width.

I have so much trouble in positioning, and I can create the navbar itself however the items are so tricky to align.

If you have the time, I would really appreciate a little lesson about alignment and positioning HTML elements with CSS (a link to a place good, is more than enough)
I get all these ideas for cool additions to my personal website but I can't do them because I don't know how to position them on the site, so this would be great

解决方案

I hope the below ones would help you.

1. How to Create Horizontal Navigation With CSS3[^]
2. 100 Great CSS Menu Tutorials[^]
3. CSS Navigation Bar[^]

这篇关于如何制作这个HTML css导航栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！