Я создаю веб-сайт с HTML и CSS для проекта в классе CS. Мне удалось создать навигационную панель с тегом <table>
, но я слышал о плохой практике, так как, по-вашему, я могу преобразовать этот макет с помощью <ul>
?
Схема следующая:
+-------------------------------------------------------------------------------+
| | Company |
| SITE LOGO | Page 1 | Page 2 | Page 3 | Page 4 | Login +
| | Name |
+-------------------------------------------------------------------------------+
Вот разметка:
.nav {
color:black;
text-align:center;
vertical-align:middle;
border-collapse:collapse;
width:100%;
}
<TABLE class = "nav">
<TR style = "position:fixed; top:0; background-color:white; width:100%">
<TD width = "77">
<img src = "site_logo.png"style = "text-align:center; vertical-align:middle">
</TD>
<TD>
<div style = "font-size:30; font-weight: bold; text-align:left;">
Company
</div>
<div style = "font-size:18; text-align:left;">
Name
</div>
</TD>
<TD width = "20%">Page 1</TD>
<TD width = "20%">Page 2</TD>
<TD width = "20%">Page 3</TD>
<TD width = "20%">Page 4</TD>
<TD width = "20%">Login</TD>
</TD>
</TR>
</TABLE>
Я пытался использовать <ul>
вместо <table>
самостоятельно, но мне не удалось сделать подзаголовок с названием компании в том же элементе <li>
и выровнять все по вертикали.
🤔 А знаете ли вы, что...
HTML5 - последняя версия HTML, внедряющая новые элементы и функциональность, такие как <canvas> и <video>.
Вот как бы я создал эту навигацию. Ссылки распределяются равномерно, и я добавил максимальную ширину, чтобы сделать ее отзывчивой, и переместил логотип над ссылками, если доступного места становится мало, чтобы отображать все в одной строке. Если вы этого не хотите, удалите flex-wrap: wrap;
и max-width: 600px;
:
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
color: black;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
background-color: #ccc;
padding: 20px;
}
nav ul {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 600px;
list-style: none;
padding: 10px;
}
nav a {
text-decoration: none;
color: inherit;
}
.brand_container {
display: flex;
align-items: center;
justify-content: center;
/* Add this if you want the name to be below the image:
flex-direction: column;
*/
width: 200px;
}
.brand_container img {
/* This is just to make sure it is visible in this example. The background-color can be deleted if an image is added */
width: 50px;
height: 50px;
background-color: #f00;
margin: 5px;
}
<nav>
<div class = "brand_container">
<img src = "site_logo.png" alt = "logo">
<p>Company Name</p>
</div>
<ul>
<li><a href = "#">Page 1</a></li>
<li><a href = "#">Page 2</a></li>
<li><a href = "#">Page 3</a></li>
<li><a href = "#">Page 4</a></li>
<li><a href = "#">Login</a></li>
</ul>
</nav>