Редактор Онлайн

<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

</style>
<link rel="stylesheet" type="text/css" href="https://setmar.ru/imgs/css/style.css">

</head>

<body>
<ul>
<li><a href="#home">Домой</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>

<p><b>Замечение:</b> Если вы устанавливаете отступы для элементов a (но не для ul), ссылки вылезут за пределы
элементов ul. Поэтому, мы добавили верхний и нижний отступы для элемента ul.</p><noindex>
<div class="zoomadssit">
<a onclick="this.href='https://partners.tbank.ru/click/fd68305d-4955-4d0e-9891-1813c528fffa'" href="https://tbank.ru" target="_blank">
<img src="https://setmar.ru/imgs/banner_tbank/640x180_tbank_3.png" class="zoomadssit"></a>
</div>
</noindex>
</body>
</html>

Ваш Результат:

Отредактируйте код сверху и кликните кнопку, чтобы посмотреть результат.

Уроки CSS - Попробуйте сами