ci与vi_用CSS3和超文本标记语言创建一个带有搜索框的下拉菜单

ci与vi的核心价值在于为企业打造独特的品牌，ci与vi可以给企业带来良好的社会声誉和经济效益。

注：配图为本公司设计作品

ci与vi原文直译：

主题：CSS3

难度：中等

预计完成时间：45分钟

在本教程中，我们将从方形用户界面中创建一个带有搜索框和下拉菜单的平面风格导航。

目录

隐藏

超文本标记语言代码

半铸钢钢性铸铁(铸造半钢)

1.基本风格

2.导航和列表项目

3.链接

4.搜索框

5.下拉式

下载源文件

超文本标记语言代码

导航由一个无序列表组成. nav)内部包含各种类型的元素：

包含普通链接的列表项(LIs)没有任何id/类。

#设置包含基于图像的链接。

#搜索包含搜索字段和提交按钮。

#选项包含一个链接以及一个无序列表(。subnav)，它充当下拉菜单。

最后，我们加入了无前缀，让我们可以在任何地方只使用无前缀的半铸钢钢性铸铁(Cast Semi-Steel)属性。

ul class='nav '

李id='设置'

a href=' # ' img src='设置。png '//a

/李

里

a href='# '应用程序/a

/李

里

a href='# '板/a

/李

李id='搜索'

form action='' method='get '

输入类型=' text ' name=' Search _ text ' id=' Search _ text ' placeholder=' Search '/

input type=' button ' name=' search _ button ' id=' search _ button '/a

/表单

/李

李id='选项'

a href='# '选项/a

ul class='subnav '

lia href='# '设置/a/李

lia href='# '应用程序/a/李

lia href='#'Board/a/li

lia href='# '选项/a/李

/ul

/李

/ul

脚本src='前缀free-1。0 .7 .js ' type=' text/JavaScript '/scr

注：配图为本公司设计作品

ci与vi总结：

ci与vi的分享让我们明白品牌设计的核心是传递品牌价值，品牌设计通过logo设计（标志设计）、VI设计、包装设计等设计载体提高品牌的美誉度、忠诚度，打造ci与vi的品牌核心资产。如果您有更多的观点，请联系杭州vi设计公司 。