Как CSS + HTML, чтобы написать подобный Taobao простой панели навигации?

Сегодня мы делаем подобную навигационную станцию Taobao, я Lynx супермаркет, собрать рентабельно, Lynx сегодня в качестве примера
средств разработки: VsCode

HTML часть кода

Во-первых, давайте стрижку идеи программирования, предположим, что мы должны сделать три панели навигации, мы будем внутри размер шрифта, цвет шрифта, цвет фона и т.д. атрибуты, соответствующие настройки, так что мы должны создать родительский контейнер ул, и внутри литий три суб-элементов, и каждый суб-элемент, существует множество элемента связи. Html определенной части кода, как показано ниже:

CSS часть кода

Во-первых, инициализация дорого.

*{    margin: 0;   
      padding:0;  
 }

Для того, чтобы побегать, чтобы увидеть , какой эффект:

ничего себе, не чувствует себя некрасиво, не волнуйтесь, следующий шаг будет лучше.

Taobao выше панели навигации боком, потому что ули и литий являются массивными элементами , поэтому мы миримся этот крест, где мы добавим поплавок поплавок: слева, в системе автоматически поместят все элементы преобразуются в inline- блок (элемент блока на уровень строк) , случай , может быть организован в боковом направлении . ( В котором поплавок: правый и положения: абсолютные внутренние системы могут происходить преобразование)

Горизонтальное расположение завершено, ссылка будет иметь тег подчеркивание, мы не хотим, подчеркивается, текст-украшение: никто не может быть удален подчеркнут.

Установка ширины и высоты контейнера, и предусмотрен снаружи коробки между ними таким образом, чтобы запас дистанции между тремя контейнерами.

Затем установите цвет шрифта, Сямэнь Rubine: # 40 . Шрифт жирный шрифт-вес: смелый;

Наконец, мы должны установить мышь, чтобы переместить событие ссылки на :: зависать (на самом деле, написать: парить возможно, на спине, которая будет автоматически заполнить двоеточие) Мы надеемся, что при наведении курсора мыши на ссылку на контейнерном фоне изменения «Taobao цвета» шрифт становятся белыми.

CSS код выглядит следующим образом:

   *{    
     margin: 0;    
     padding:0;  
 }
   .nav{   
 list-style: none;
 }
   a{    
     text-decoration: none;
}
   .nav .list-item{    
    float:left;
    margin:0 10px;    
    height:30px;    
    line-height: 30px;    
    /*border:2px solid violet;*/
    }
    .nav .list-item a{    
    padding:0 5px;    
    color:#f40;    
    font-weight: bold;   
    height:30px;    
    display:inline-block;   
     border-radius:15px;}
     .nav .list-item a:hover{    
     background-color: #f40;    
     color:#fff;
     }

Запуск визуализаций:

Не заботьтесь выше этой линии, это рамка браузера.