使用CSS创建带搜索框的导航栏的教程

创建带有搜索框的导航栏

使用CSS创建带有搜索框的导航栏，要明确导航栏的样式，包括背景颜色、字体大小、边框等等，将搜索框添加到导航栏中。具体步骤如下：

创建导航栏

使用HTML创建一个导航栏，添加若干链接，如下所示：

添加CSS样式

为导航栏添加CSS样式，如背景颜色、字体大小、边框等等，如下所示：

nav {
  background-color: #eee;
  font-size: 16px;
  border: 1px solid #ccc;
}

添加搜索框

将搜索框添加到导航栏中，如下所示：

设置搜索框样式

为搜索框添加CSS样式，如背景颜色、字体大小、边框等等，如下所示：

nav form {
  float: right;
}

nav form input[type="text"] {
  background-color: #fff;
  font-size: 16px;
  border: 1px solid #ccc;
  padding: 5px;
}

nav form input[type="submit"] {
  background-color: #eee;
  font-size: 16px;
  border: 1px solid #ccc;
  padding: 5px 10px;
}

测试效果

使用浏览器打开HTML文件，查看效果，如下图所示：

• 列表项1
• 列表项2
• 列表项3