HTML/CSS. 如何创建垂直和水平菜单

本教程将演示如何使用CSS样式创建垂直和水平菜单。. 在开始之前，确保你熟悉 HTML 无限列表标签. 另外，看看说明书 如何在HTML中创建菜单.

首先，我们将创建 HTML 基于无限列表的菜单:

Home
About
Services
Partners
Contacts

现在您需要创建一个CSS文件并将其连接到页面:

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

你也可以使用内联风格.

因此，您应该得到以下代码:

	





	
Home
	
About
	
Services
	
Partners
	
Contacts




Sun-City-feedback@next-pics.com
Auber-hr@ivydesignsinteriors.com
Auber-hr@ivydesignsinteriors.com
五洲会海购
The-University-of-Macau-info@engera-chem.com
Sun-City-Entertainment-info@mercatinobazar.com
Gambling-website-contactus@elainepruzon.com
广州南洋理工职业学院
Sports-platform-feedback@ivydesignsinteriors.com
网赌平台
银河娱乐博彩

罗美特
京华网
中国通号网
手机主题 
搜房网济南租房网
广西柳州高级中学

南方网茂名新闻
自行车骑行网
女孩名字网
永安保险
第一比分网

未排序的列表有自己的样式，因此不需要任何额外的更改，我们得到一个垂直菜单.

要创建水平菜单，需要对菜单进行额外的更改 HTML и CSS.

首先，在列表中添加一个类. Замените

на

现在让我们用CSS文件使菜单水平. 未排序的列表具有指定的默认边距和填充参数. 有必要重新设定它们:

ul.卧铺{
margin:0;
padding: 0;
}

现在让我们将列表设置为水平:

ul.卧铺li {
display: block;
left,
padding: 0 10px;
}

我们水平添加了填充值，以确保元素不会合并. 现在菜单准备好了，只需要添加链接、背景和编辑字体颜色。.