html简单淘宝搜索框怎么做,天猫前端系列教材 （八）- 公共页面 - 简单搜索栏...

代码比较

复制代码

div.simpleSearchDiv{

background-color: #C40000;

width: 300px;

margin: 10px 20px 40px;

padding: 1px;

height: 40px;

display: block;

}

div.simpleSearchDiv input{

width: 225px;

border: 1px solid transparent;

height: 34px;

margin: 2px;

outline:none;

}

div.simpleSearchDiv button{

width: 60px;

border: 1px solid transparent;

background-color: #C40000;

color: white;

font-size: 14px;

/* font-weight:bold */;

}

div.searchBelow{

margin-top: 3px;

margin-left: -20px;

}

div.searchBelow span{

color: #999;

}

div.searchBelow a{

padding: 0px 20px 0px 20px;

font-size: 14px;

}

img.simpleLogo{

position: absolute;

left: 10px;

top: 50px;

width: 140px;

}

body{

font-size: 12px;

font-family: Arial;

}

a{

color:#999;

}

a:hover{

text-decoration:none;

color: #C40000;

}

搜天猫

冰箱

|

空调

|

女表

|

男表

div.simpleSearchDiv{

background-color: #C40000;

width: 300px;

margin: 10px 20px 40px;

padding: 1px;

height: 40px;

display: block;

}

div.simpleSearchDiv input{

width: 225px;

border: 1px solid transparent;

height: 34px;

margin: 2px;

outline:none;

}

div.simpleSearchDiv button{

width: 60px;

border: 1px solid transparent;

background-color: #C40000;

color: white;

font-size: 14px;

/* font-weight:bold */;

}

div.searchBelow{

margin-top: 3px;

margin-left: -20px;

}

div.searchBelow span{

color: #999;

}

div.searchBelow a{

padding: 0px 20px 0px 20px;

font-size: 14px;

}

img.simpleLogo{

position: absolute;

left: 10px;

top: 50px;

width: 140px;

}

body{

font-size: 12px;

font-family: Arial;

}

a{

color:#999;

}

a:hover{

text-decoration:none;

color: #C40000;

}

搜天猫

冰箱

|

空调

|

女表

|

男表