ul+li及css制作韩国风格菜单代码

下面来详细讲解“ul+li及css制作韩国风格菜单代码”的完整攻略。

下面来详细讲解“ul+li及css制作韩国风格菜单代码”的完整攻略。

1. 首先，在HTML中使用ul+li来创建列表。代码如下：

<ul>
  <li>首页</li>
  <li>新闻</li>
  <li>产品</li>
  <li>关于我们</li>
  <li>联系我们</li>
</ul>

1. 接下来，在CSS中为这些列表项添加样式。韩国风格的菜单通常使用粉色背景和白色文字，所以我们可以这样写：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 20px;
  background-color: #ffc0cb;
  padding: 10px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}

li:hover {
  background-color: #fff;
  color: #ffc0cb;
  border: 1px solid #ffc0cb;
}

其中，ul标签的样式设置了列表无序形式、内外边距均为0，li标签设置了行内块元素形式、右侧20像素的外边距、粉色背景、白色文字、突出显示效果等。

1. 在HTML中加入图标。图标通常是通过在li标签中插入一个i标签来实现。代码如下：

<ul>
  <li><i class="fa fa-home"></i> 首页</li>
  <li><i class="fa fa-newspaper-o"></i> 新闻</li>
  <li><i class="fa fa-shopping-bag"></i> 产品</li>
  <li><i class="fa fa-info-circle"></i> 关于我们</li>
  <li><i class="fa fa-phone"></i> 联系我们</li>
</ul>

1. 在CSS中为图标添加样式。我们可以使用Font Awesome图标库，它提供了一组用于设计和开发的标准图标。在CSS中我们可以这样写：

li i {
  margin-right: 10px;
  font-size: 20px;
  color: #fff;
}

li:hover i {
  color: #ffc0cb;
}

其中，li i标签的样式设置了右侧10像素的外边距、20像素的字体大小、白色文字效果等。当鼠标悬停在菜单上时，图标将会突出显示。

至此，韩国风格菜单的制作就完成了。我们可以尝试将以上代码复制到代码编辑器或者网页中，看一下效果。

示例一：

在线演示：https://codepen.io/lxg1997/pen/vYmProf

示例二：

在线演示：https://codepen.io/lxg1997/pen/RwomXLW